*{
	margin: 0;
	padding: 0;
}

#header{
	position: fixed;
	top: 0;
	width: 100%;
	height: 64px;
	padding: 0 10%;
	font-size: 0;
	line-height: 64px;
	box-sizing: border-box;
	z-index: 7120;
	background-color: rgba(0, 0, 0, .7);
}

#logo{
	display: inline-block;
	width: 14%;
	height: 48px;
	vertical-align: middle;
	text-decoration: none;
	outline: none;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-image: url(../imgs/logo.png);
}

#mail{
	display: inline-block;
	width: 15%;
	font-size: 16px;
	text-align: right;
	color: #32C446;
	vertical-align: middle;
}

#mail span{
	display: inline-block;
	width: 24px;
	height: 24px;
	margin-right: 6px;
	vertical-align: middle;
	background-repeat: no-repeat;
	background-image: url(../imgs/mail.png);
	background-size: cover;
	background-position: center;
}

#mail div{
	display: inline-block;
	line-height: 64px;
}

#nav{
	display: inline-block;
	width: 70%;
	height: 64px;
	padding: 0;
	font-size: 0;
	line-height: 64px;
	text-align: right;
	list-style: none;
	vertical-align: middle;
}

#nav a{
	display: inline-block;
	padding: 0 2%;
	font-size: 16px;
	font-weight: bold;
	color: #ccc;
	text-align: center;
	outline: none;
	text-decoration: none;
	transition: background-color 0.4s ease;
}

#nav a:hover{
	color: #fff;
	background-color: #192;
}

.arrow-down::after{
	content: "";
    width: 7px;
    height: 7px;
    border: solid #fff;
    border-width: 0 0 2px 2px;
    transform: translate(400%, -130%) rotate(-45deg);
    position: absolute;
    left: 50%;
    top: 70%;
}

#nav > li{
	position: relative;
	display: inline;
	list-style: none;
	line-height: 64px;
}

#nav > li:hover #subB{
	opacity: 1;
	visibility: visible;
	background-color: rgba(0, 0, 0, .7);
	transform: translateY(30px);
}

#subB{
    position: absolute;
    top: 0px;
    left: 0;
    width: 180px;
    padding: 8px;
    line-height: 40px;
    text-align: left;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 5px 16px rgba(0,0,0,0.4);
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    overflow: hidden;
}

#subB a{
	width: 172px;
	text-align: left;
	border-radius: 4px;
}

#subB a:hover{
	border-radius: 4px;
}

#media{
	position: fixed;
	top: 60%;
	right: 0;
	width: 48px;
	height: 240px;
	text-align: center;
	border-radius: 4px 0 0 4px;
	z-index: 7102;
	background-color: rgba(0, 0, 0, .7);
}

#media a{
	display: block;
	width: 48px;
	height: 48px;
	text-align: center;
	color: #ccc;
	text-decoration: none;
	outline: none;
	opacity: 0.8;
	background-position: center;
	background-size: 80% 80%;
	background-repeat: no-repeat;
	transition: all 0.2s ease;
}

#media a:hover{
	color: #192;
	opacity: 1;
	background-color: rgba(0, 0, 0, 0.8);
}

.media1{
	background-image: url(../imgs/media1.png);
}

.media2{
	background-image: url(../imgs/media2.png);
}

.media3{
	background-image: url(../imgs/media3.png);
}

.media4{
	background-image: url(../imgs/media4.png);
}

.media5{
	background-image: url(../imgs/media5.png);
}

#footer{
	position: relative;
	width: 100%;
	height: 512px;
	padding-top: 100px;
	color: #ccc;
	background-size: 100%;
	background-repeat: no-repeat;
	background-image: url(../imgs/footer_bg.jpg);
}

#footer-top{
	position: relative;
	width: 80%;
	margin-left: 10%;
	font-size: 0;
}

#footer-top div{
	display: inline-block;
	font-size: 16px;
	vertical-align: top;
}

#footer-col1{
	width: 32%;
	height: 400px;
	padding-right: 8%;
}

#footer-col1 div{
	width: 64%;
	height: 20%;
	background-size: 100%;
	background-repeat: no-repeat;
	background-image: url(../imgs/logo.png);
}

#footer-col1 p{
	margin: 40px 0;
	line-height: 40px;
}

#footer-col1 a{
	display: inline-block;
	width: 56px;
	height: 56px;
	margin-right: 8px;
	line-height: 56px;
	text-align: center;
	color: #ccc;
	border-radius: 50%;
	text-decoration: none;
	outline: none;
	opacity: 0.8;
	background-position: center;
	background-size: 60% 60%;
	background-repeat: no-repeat;
	transition: all 0.2s ease;
}

#footer-col1 a:hover{
	color: #192;
	opacity: 1;
	background-color: rgba(0, 0, 0, 0.8);
}

#footer-col2{
	width: 20%;
	height: 400px;
}

#footer-col2 p{
	margin-bottom: 40px;
	font-size: 32px;
	font-weight: bold;
	color: #192;
}

#footer-col2 a{
	display: block;
	line-height: 48px;
	color: #ccc;
	text-decoration: none;
	outline: none;
	transition: color 0.3s ease;
}

#footer-col2 a:hover{
	color: #192;
}

#footer-col3{
	width: 20%;
	height: 400px;
}

#footer-col3 p{
	margin-bottom: 40px;
	font-size: 32px;
	font-weight: bold;
	color: #192;
}

#footer-col3 a{
	display: block;
	line-height: 48px;
	color: #ccc;
	text-decoration: none;
	outline: none;
	transition: color 0.3s ease;
}

#footer-col3 a:hover{
	color: #192;
}

#footer-col4{
	width: 20%;
	height: 400px;
}

#footer-col4 p{
	margin-bottom: 40px;
	font-size: 32px;
	font-weight: bold;
	color: #192;
}

#footer-col4 div{
	line-height: 48px;
}

#footer-col4 span{
	display: inline-block;
	width: 32px;
	height: 32px;
	margin-right: 12px;
	vertical-align: middle;
	background-size: 100%;
	background-repeat: no-repeat;
}

.addr{
	background-image: url(../imgs/g_addr.png);
}

.phone{
	background-image: url(../imgs/g_tel.png);
}

.website{
	background-image: url(../imgs/g_web.png);
}

.mail-sales{
	background-image: url(../imgs/g_mail.png);
}

#footer-bottom{
	position: absolute;
	bottom: 0;
	width: 100%;
	font-size: 14px;
	line-height: 64px;
	color: #ccc;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.5);
}

.banner-container{
	position: relative;
	width: 100%;
	font-size: 0;
}

.banner-container video{
	display: block;
    width: 100%;
    object-fit: contain;
    outline: none;
}

.banner-img{
	display: inline-block;
	width: 100%;
	height: 82vh;
	font-size: 0;
}

.banner-content{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
}

.banner-title{
	width: 100%;
	margin-top: 16%;
	font-size: 80px;
	font-weight: bolder;
	color: #FF8C00;
	text-align: center;
	animation: text-appear 1.5s 1;
}

@keyframes text-appear{
	0%{
		color: transparent;
	}
	100%{
		color: #FF8C00;
	}
}

.banner-main-desc{
	width: 50%;
	padding: 2% 25% 0 25%;
	font-size: 28px;
	line-height: 56px;
	color: #fff;
	text-align: center;
}

.banner-sub-desc{
	width: 50%;
	padding: 8px 25% 0 25%;
	font-size: 24px;
	line-height: 56px;
	color: #fff;
	text-align: center;
	box-sizing: padding-box;
}

#product-type{
	display: flex;
	justify-content: center;
	width: 70%;
	height: 200px;
	padding: 32px 15%;
	margin-top: 5%;
	background-color: rgba(0, 0, 0, 0.8);
}

#product-type a{
	display: inline-block;
	text-align: center;
	color: #fff;
	outline: none;
	text-decoration: none;
}

#product-type a:hover{
	color: #32C446;
}

#product-type img{
	width: 50%;
	transition: all 0.3s ease;
}

#product-type img:hover{
	transform: scale(1.3);
}

#product-type div{
	width: 100%;
	margin-top: 24px;
	font-size: 20px;
	text-align: center;
}

.products{
	width: 80%;
	padding: 4% 10%;
	background-size: 100% 100%;
	background-repeat: repeat-y;
	background-image: url(../imgs/products_bg.jpg);
}

.series-name{
	padding-left: 16px;
	margin-bottom: 4%;
	font-size: 40px;
	font-weight: bold;
	color: #192;
	border-left: 12px solid #192;
}

.pro-params{
	
}

.param-name{
	display: inline-block;
	width: 240px;
	margin-bottom: 48px;
	font-size: 24px;
	font-weight: bold;
	color: #fff;
}

.radio-item{
    display: inline-block;
    margin-right: 24px;
}

.radio-item input {
    display: none;
}

.radio-item label{
	display: inline-block;
	height: 48px;
	padding: 0 24px;
	font-size: 18px;
	font-weight: bold;
	line-height: 48px;
	text-align: center;
	color: #ccc;
	border: 1px solid #aaa;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.3s ease;
	user-select: none;
}

.radio-item label:hover{
	color: #000;
	border-color: #999;
	background-color: #f7f7f7;
}

.radio-item input:checked + label{
	border-color: #2563eb;
	background-color: #2563eb;
	color: #fff;
}

#pro-list{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 64px;
}

.pro-item{
	position: relative;
	display: inline-block;
	width: 100%;
	color: #ccc;
	border: 1px solid transparent;
	text-decoration: none;
	outline: none;
}

.pro-item:hover{
	color: #FF8C00;
	border: 1px solid #192;
	box-shadow: 1px 1px 12px 2px #555;
}

.pro-item:hover img{
	transform: scale(1.1);
}

.pro-item img{
	display: inline-block;
	width: 100%;
	transition: all 0.3s ease;
}

.pro-item p{
	padding: 24px 0;
	margin: 0 16px 16px 16px;
	font-size: 28px;
	font-weight: bold;
	text-align: center;
	border-bottom: 1px solid #888;
}

.pro-item div{
	position: relative;
}

.pro-item span{
	display: inline-block;
	font-size: 20px;
	line-height: 48px;
}

.pro-item span:nth-child(odd){
	padding-left: 16px;
	font-weight: bold;
	color: #999;
	text-align: left;
}

.pro-item span:nth-child(even){
	position: absolute;
	right: 0;
	margin-right: 16px;
	color: #192;
}

#vid-list{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 64px;
	margin-top: 80px;
}

.vid-item{
	position: relative;
	display: inline-block;
	width: 100%;
	padding-bottom: 12px;
	color: #ccc;
	border: 1px solid transparent;
	border-radius: 6px;
	box-shadow: 1px 1px 12px 4px rgba(0,0,0,.5);
}

.vid-item:hover{
	cursor: pointer;
	box-shadow: 1px 1px 12px 4px rgba(12,12,0,.9);
}

.vid-item:hover p{
	color: #FF8C00;
}

.vid-item:hover img{
	transform: scale(1.2);
}

.vid-thumbnail{
	height: 30vh;
	overflow: hidden;
}

.vid-thumbnail img{
	display: inline-block;
	width: 100%;
	transition: all 0.3s ease;
}

.vid-item p{
	width: 80%;
	margin: 12px 0 16px 12px;
	font-size: 24px;
	font-weight: blod;
	color: #192;
}

.vid-summary{
	margin: 0 0 0 12px;
	font-size: 16px;
	line-height: 40px;
}

.vid-item span{
	position: absolute;
	display: inline-block;
	top: 0;
	right: 0;
	padding: 4px 12px;
	border-radius: 0 0 0 6px;
	background-color: rgba(34, 139, 34, 0.6);
}

.vid-date{
	margin: 8px 0 0 12px;
}

#mask{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.85);
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 7120;
}

.video-container{
	position: relative;
	width: 60%;
}

#mask video{
	width: 100%;
	display: block;
	border-radius: 8px;
}

#closeBtn{
	position: absolute;
	display: block;
	top: 0;
	right: -72px;
	width: 40px;
	height: 40px;
	background-repeat: no-repeat;
	background-image: url('../imgs/close.png');
	background-size: 100% 100%;
}

#closeBtn:hover{
	cursor: pointer;
}

#contact{
	width: 80%;
	padding: 4% 10%;
	background-size: 100% 100%;
	background-image: url('../imgs/products_bg.jpg');
	background-repeat: repeat-y;
}

#base-contact{
	display: grid;
	width: 100%;
	margin: 6% 0 10% 0;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 128px);
	grid-gap: 128px 40px;
}

.base-contact-item{
	padding: 16px;
	color: #fff;
	box-sizing: border-box;
	border-radius: 6px;
	border: 1px solid transparent;
	transition: all 0.3s ease;
}

.base-contact-item:hover{
	color: #192;
	cursor: pointer;
	border: 1px solid #192;
}

.base-contact-item img{
	display: inline-block;
	width: 16%;
	vertical-align: middle;
}

.base-contact-item div{
	display: inline-block;
	width: 70%;
	height: 100%;
	margin-left: 4%;
	vertical-align: middle;
}

.base-contact-item span{
	font-size: 18px;
	color: #999;
}

.base-contact-item p{
	margin-top: 16px;
	font-size: 22px;
	font-weight: bold;
}

#media-contact{
	display: grid;
	width: 100%;
	margin: 6% 0 10% 0;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, 230px);
	grid-gap: 100px 40px;
	place-items: center;
}

.media-contact-item{
	display: inline-block;
	width: 100%;
	padding-top: 16px;
	color: #fff;
	text-align: center;
	text-decoration: none;
	outline: none;
	box-sizing: border-box;
	border-radius: 6px;
	border: 1px solid transparent;
	transition: all 0.3s ease;
}

.media-contact-item:hover{
	color: #192;
	border: 1px solid #192;
}

.media-contact-item img{
	display: inline-block;
	width: 33%;
}

.media-contact-item span{
	display: inline-block;
	width: 100%;
	color: #999;
}

.media-contact-item div{
	width: 100%;
	font-size: 22px;
	font-weight: bold;
	line-height: 64px;
}

#qr-contact{
	display: grid;
	width: 100%;
	margin: 6% 0 8% 0;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(1, 230px);
	grid-gap: 100px 40px;
	place-items: center;
}

.qr-contact-item{
	padding-top: 16px;
	color: #fff;
	text-align: center;
	transition: all 0.3s ease;
}

.qr-contact-item:hover{
	color: #192;
	cursor: pointer;
}

.qr-contact-item img{
	display: inline-block;
	width: 50%;
	border-radius: 6px;
	box-shadow: 1px 1px 12px 4px rgba(0,0,0,.8);
}

.qr-contact-item img:hover{
	box-shadow: 1px 1px 12px 4px rgba(0,0,0,.8);
}

.qr-contact-item div{
	font-size: 20px;
	font-weight: bold;
	line-height: 64px;
}

#news{
	width: 80%;
	padding: 4% 10%;
	background-size: 100% 100%;
	background-repeat: repeat-y;
	background-image: url(../imgs/products_bg.jpg);
}

#top-news{
	display: grid;
	width: 100%;
	margin: 10% 0;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(1, 240px);
	grid-gap: 100px 40px;
	place-items: center;
}

#top-news a{
	position: relative;
	display: inline-block;
	color: #000;
	border-radius: 6px;
	background-color: rgba(255, 255, 255, 1.0);
	outline: none;
	text-decoration: none;
}

#top-news a:hover{
	color: #FF8C00;
}

#top-news a:hover img{
	transform: scale(1.2);
}

.news-thumbnail{
	width: 100%;
	height: 24vh;
	overflow: hidden;
}

.news-thumbnail img{
	display: inline-block;
	width: 100%;
	border-radius: 6px 6px 0 0;
	transition: all 0.3s ease;
}

#top-news span{
	display: block;
	margin: 0 4%;
	font-size: 18px;
	font-weight: bold;
	line-height: 48px;
	border-bottom: 1px solid #ccc;
}

#top-news p{
	display: -webkit-box;
	width: 92%;
	margin: 4%;
	font-size: 14px;
	line-height: 28px;
	color: #555;
	-webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news-date1{
	position: absolute;
	top: 0;
	left: 0;
	width: 30%;
	color: #fff;
	text-align: center;
	background-color: #192;
	border-top-left-radius: 6px;
}

.news-date1 div:nth-child(odd){
	font-size: 24px;
	font-weight: bold;
	line-height: 40px;
	border-bottom: 1px solid #fff;
}

.news-date1 div:nth-child(even){
	line-height: 28px;
}

#main-news a{
	display: inline-block;
	width: 100%;
	padding: 32px 0;
	color: #000;
	border-bottom: 1px solid #ccc;
	outline: none;
	text-decoration: none;
	background-color: rgba(255, 255, 255, 1.0);
	box-sizing: border-box;
}

#main-news a:hover{
	color: #FF8C00;
}

.news-date2{
	display: inline-block;
	width: 12%;
	color: #000;
	text-align: center;
	vertical-align: middle;
	border-right: 1px solid #ddd;
}

.news-date2 div:nth-child(odd){
	font-size: 32px;
	font-weight: bold;
	line-height: 48px;
	border-bottom: 1px solid #fff;
}

.news-date2 div:nth-child(even){
	line-height: 32px;
}

.new-content{
	display: inline-block;
	width: 56%;
	margin: 0 3%;
	vertical-align: middle;
}

.new-content span{
	display: block;
	font-size: 24px;
	font-weight: bold;
	line-height: 48px;
}

.new-content p{
	display: -webkit-box;
	width: 100%;
	font-size: 14px;
	line-height: 28px;
	color: #555;
	-webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

#main-news img{
	display: inline-block;
	width: 22%;
	border-radius: 6px;
	vertical-align: middle;
	box-shadow: 1px 1px 4px 2px rgba(0,0,0,.4);
}

.support-products{
	width: 80%;
	padding: 4% 10% 1% 10%;
	background-size: 100% 100%;
	background-repeat: repeat-y;
	background-image: url(../imgs/products_bg.jpg);
}

.supports-center{
	margin: 6% 0 3% 0;
	text-align: center;
}

.support-pros-list{
	display: grid;
	width: 100%;
	padding-bottom: 2%;
	margin-bottom: 10%;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 64px 40px;
	place-items: center;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 6px 6px 0 0;
}

.support-pros-list a{
	color: #999;
	text-align: center;
	outline: none;
	text-decoration: none;
}

.support-pros-list a:hover{
	color: #192;
}

.support-pros-list a:hover img{
	transform: scale(1.2);
}

.support-pros-list img{
	display: inline-block;
	width: 100%;
	transition: all 0.3s ease;
}

.support-pros-list p{
	font-size: 20px;
	font-weight: bold;
	line-height: 40px;
}

#support-qas{
	width: 80%;
	padding: 4% 10% 1% 10%;
	background-size: 100% 100%;
	background-repeat: repeat-y;
	background-image: url(../imgs/bg_1.jpg);
}

#support-qas-list{
	display: grid;
	width: 96%;
	padding: 2%;
	margin-bottom: 10%;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 64px 40px;
	place-items: center;
	background-color: #fff;
	border-radius: 6px 6px 0 0;
}

#support-qas-list a{
	width: 100%;
	color: #333;
	outline: none;
	text-decoration: none;
}

#support-qas-list a:hover{
	color: #192;
}

#support-qas-list p{
	display: inline-block;
	margin-left: 2%;
	font-size: 18px;
	font-weight: bold;
}

.news-date3{
	display: inline-block;
	width: 16%;
	color: #000;
	text-align: center;
	vertical-align: middle;
	border-right: 1px solid #ddd;
}

.news-date3 div:nth-child(odd){
	font-size: 32px;
	font-weight: bold;
	line-height: 48px;
	border-bottom: 1px solid #fff;
}

.news-date3 div:nth-child(even){
	line-height: 32px;
}

.news-date4{
	display: inline-block;
	width: 16%;
	color: #fff;
	text-align: center;
	vertical-align: middle;
}

.news-date4 div:nth-child(odd){
	font-size: 48px;
	font-weight: bold;
	line-height: 64px;
	color: #192;
	border-bottom: 1px solid #555;
}

.news-date4 div:nth-child(even){
	font-size: 18px;
	line-height: 32px;
	color: #192;
}

#support-downloads{
	width: 80%;
	padding: 4% 10% 1% 10%;
	background-size: 100% 100%;
	background-repeat: repeat-y;
	background-image: url(../imgs/products_bg.jpg);
}

#support-down-list{
	display: grid;
	width: 100%;
	margin-bottom: 10%;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 32px 48px;
	border-radius: 6px 6px 0 0;
}

.down-item{
	width: 100%;
	padding: 16px;
	color: #fff;
	background-color: rgba(0, 0, 0, .8);
	box-sizing: border-box;
	border-radius: 6px;
}

.down-item div{
	display: inline-block;
	width: 83%;
	vertical-align: middle;
}

.down-item p{
	font-size: 18px;
	margin-bottom: 28px;
}

.down-item span{
	display: inline-block;
	font-size: 14px;
	color: #aaa;
}

.down-item a{
	display: inline-block;
	width: 16%;
	height: 100%;
	font-size: 22px;
	font-weight: bold;
	color: #192;
	text-align: center;
	text-decoration: none;
	outline: none;
}

.down-item a:hover{
	text-underline-offset: 8px;
	text-decoration: underline;
}

.mid-title{
	width: 100%;
	margin-bottom: 1%;
	font-size: 40px;
	font-weight: bold;
	color: #192;
	text-align: center;
}

.mid-center-title{
	width: 100%;
	margin-top: 16%;
	font-size: 80px;
	font-weight: bolder;
	color: #FF8C00;
	text-align: center;
	animation: text-appear 1.5s 1;
	text-shadow:-1px -1px #000,-2px -2px #333;
}

.mid-desc{
	width: 100%;
	font-size: 20px;
	color: #aaa;
	text-align: center;
}

.mid-block{
	position: relative;
	width: 100%;
	height: 110vh;
}

.mid-block img{
	display: inline-block;
	width: 100%;
	height: 100%;
}

.mid-block-center{
	position: absolute;
	top: 0;
	left: 0;
	width: 80%;
	height: 100%;
	padding: 0 10%;
}

.mid-block-title{
	display: inline-block;
	width: ;
	padding: 0 4%;
	margin-top: 6%;
	font-size: 40px;
	font-weight: bold;
	line-height: 96px;
	color: #192;
	border-left: 16px solid #192;
	border-radius: 0 6px 6px 0;
	background-color: rgba(0,0,0,.85);
}

.mid-block-right{
	position: absolute;
	right: 0;
	bottom: 8%;
	width: 128px;
	height: 128px;
	font-size: 72px;
	font-weight: bold;
	line-height: 128px;
	color: #192;
	text-align: center;
	background-color: rgba(0,0,0,.8);
}

.mid-block-left{
	position: absolute;
	left: 0;
	bottom: 8%;
	width: 128px;
	height: 128px;
	font-size: 72px;
	font-weight: bold;
	line-height: 128px;
	color: #192;
	text-align: center;
	background-color: rgba(0,0,0,.8);
}

.mid-block-multi{
	width: 58%;
	padding: 2%;
	margin-top: 6%;
	font-size: 18px;
	line-height: 40px;
	color: #ccc;
	border-radius: 8px;
	background-color: rgba(0, 0, 0, .9);
}

.mid-block-multi div{
	margin: 2%;
	text-indent: 2em;
}

#com-digitals{
	display: grid;
	width: 100%;
	margin: 8% 0;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(1, 270px);
	grid-gap: 80px 40px;
}

.com-digital-item{
	padding-top: 16px;
	color: #fff;
	text-align: center;
	transition: all 0.3s ease;
}

.com-digital-item:hover{
	color: #192;
	cursor: pointer;
}

.com-digital-item:hover div{
	color: #192;
}

.com-digital-item p{
	font-size: 64px;
	font-weight: bold;
	text-shadow:-1px -1px #000,-2px -2px #000;
}

.com-digital-item div{
	margin-top: 4%;
	font-size: 18px;
	color: #bbb;
}

#com-certs{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	margin: 6% 0;
}

#com-certs div{
	position: relative;
	display: inline-block;
	width: 12%;
	height: 100%;
	margin: 1.5% 1%;
	font-size: 0;
	text-align: center;
}

#com-certs div:hover{
	cursor: pointer;
}

#com-certs div:hover img{
	transform: scale(1.2);
}

#com-certs div:hover span{
	display: inline-block;
}

#com-certs img{
	display: inline-block;
	width: 100%;
	height: 100%;
	border-radius: 4px;
	transition: all 0.3s ease;
}

#com-certs span{
	position: absolute;
	bottom: 0;
	left: 0;
	display: none;
	width: 100%;
	font-size: 18px;
	font-weight: bold;
	line-height: 48px;
	color: #192;
	background-color: rgba(0, 0, 0, .9);
	border-radius: 4px;
}

#com-brands{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	margin: 6% 0;
}

#com-brands div{
	position: relative;
	display: inline-block;
	width: 15%;
	height: 100%;
	margin: 2%;
	font-size: 0;
	text-align: center;
}

#com-brands div:hover{
	cursor: pointer;
}

#com-brands div:hover img{
	transform: scale(1.2);
}

#com-brands div:hover span{
	display: inline-block;
}

#com-brands img{
	display: inline-block;
	width: 100%;
	height: 100%;
	border-radius: 6px;
	transition: all 0.3s ease;
}

#com-brands span{
	position: absolute;
	bottom: 0;
	left: 0;
	display: none;
	width: 100%;
	font-size: 18px;
	font-weight: bold;
	line-height: 48px;
	color: #192;
	border-radius: 4px;
	background-color: rgba(0, 0, 0, .9);
}

#cul-values{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	margin-top: 10%;
}

.cul-value-item{
	position: relative;
	display: inline-block;
	width: 20%;
	height: 100%;
	font-size: 0;
	text-align: center;
	box-shadow: 1px 1px 8px 4px rgba(0,0,0,.6);
}

.cul-value-item:hover{
	cursor: pointer;
}

.cul-value-item:hover div{
	color: #192;
	cursor: pointer;
}

.cul-value-item:hover img{
	transform: scale(1.1);
}

.cul-value-item img{
	display: inline-block;
	width: 100%;
	height: 100%;
	transition: all 0.3s ease;
}

.cul-value-item div{
	position: absolute;
	left: 0;
	bottom: 16%;
	width: 80%;
	padding: 6% 4%;
	margin: 0 6%;
	color: #fff;
	border-radius: 6px;
	background-color: rgba(0, 0, 0, .9);
}

.cul-value-item span{
	display: inline-block;
	width: 100%;
	font-size: 40px;
	font-weight: bold;
	font-style: italic;
	color: #192;
}

.cul-value-item p{
	width: 80%;
	padding: 4% 10%;
	margin-top: 10%;
	font-size: 16px;
}

.ceo-name{
	margin-top: 10%;
	font-size: 64px;
	font-weight: bold;
	color: #fff;
	text-shadow:-1px -1px #000,-2px -2px #000;
}

.ceo-msg{
	width: 60%;
	margin-top: 4%;
	font-size: 18px;
	line-height: 32px;
	color: #ddd;
	text-indent: 2em;
}

.cul-principle{
	position: absolute;
	top: 48%;
	right: 20%;
	font-size: 64px;
	font-weight: bold;
	color: #192;
}

.cul-principle div{
	line-height: 128px;
	text-shadow:-1px -1px #000,-2px -2px #222;
}

.inn-desc-right{
	position: absolute;
	top: 30%;
	right: 10%;
	width: 20%;
	padding: 2%;
	font-size: 16px;
	color: #fff;
	border-radius: 4px;
	background-color: rgba(0, 0, 0, .8);
}

.inn-desc-right div{
	margin-top: 6%;
	line-height: 32px;
	text-indent: 2em;
}

.inn-desc-left{
	width: 24%;
	padding: 4% 2%;
	margin-top: 10%;
	font-size: 16px;
	color: #fff;
	border-radius: 4px;
	background-color: rgba(0, 0, 0, .8);
}

.inn-desc-left div{
	margin-bottom: 6%;
	line-height: 32px;
	text-indent: 2em;
}

.inn-digitals{
	display: grid;
	width: 100%;
	margin-top: 6%;
	color: #ccc;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 80px 40px;
}

.inn-digital-item{
	display: inline-block;
	width: 100%;
	color: #ccc;
}

.inn-digital-item:hover{
	color: #192;
	cursor: pointer;
}

.inn-digital-item p{
	display: inline-block;
	margin-left: 2%;
	font-size: 20px;
}

#inn-digital-imgs{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	margin: 10% 0;
}

#inn-digital-imgs img{
	display: inline-block;
	width: 16%;
	height: 100%;
	border-radius: 4px;
	transition: all 0.3s ease;
}

#inn-digital-imgs img:hover{
	cursor: pointer;
	transform: scale(1.2);
}

.grid-five{
	display: grid;
	width: 100%;
	margin-top: 10%;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 64px 40px;
	place-items: center;
}

.grid-five-item{
	display: inline-block;
	width: 100%;
	padding-top: 16px;
	font-size: 0;
	color: #fff;
	text-align: center;
	box-sizing: border-box;
	border-radius: 6px;
	transition: all 0.3s ease;
}

.grid-five-item:hover{
	color: #192;
	cursor: pointer;
}

.grid-five-item:hover img{
	transform: scale(1.2);
}

.grid-five-item img{
	display: inline-block;
	width: 100%;
	border-radius: 6px 6px 0 0;
	transition: all 0.3s ease;
}

.grid-five-item div{
	width: 100%;
	font-size: 20px;
	font-weight: bold;
	line-height: 64px;
	background-color: rgba(0, 0, 0, .8);
}