/*-------------------------
         GENERAL
-------------------------*/
@font-face {

	font-family: 'ku';

	/* src:
		url('../font/ku.woff') format('woff'),
		url('../font/ku.ttf') format('truetype'); */

	font-weight: normal;
	font-style: normal;

}

html,
body {
	width: 100%;
}

body {
	font-family: "Nunito", sans-serif;
	/* position: relative; */
	background-image: url(../img/bg1.png);
	background-size: 100% 15px;
	/* color: white; */
	margin: 0;
}
aside{
	color: white;
}

::selection {
	background: rgba(230, 230, 230, 0.8);
}

::-moz-selection {
	background: rgba(230, 230, 230, 0.8);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 700;
}

.hide {
	display: none;
}

.active {
	color: #fde55a;
}

.wow {
	visibility: hidden;
}

/*-------------------------
      PRELOADER
-------------------------*/
#loader-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10099;
	background-color: #f5f5f5;
}

#loader-wrapper .cssload-spin-box {
	position: absolute;
	margin: auto;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	width: 25px;
	height: 25px;
	border-radius: 100%;
	box-shadow: 25px 25px #3176ed, -25px 25px #ff3366, -25px -25px #3176ed, 25px -25px #ff3366;
	animation: cssload-spin ease infinite 4.6s;
}

@keyframes cssload-spin {

	0%,
	100% {
		box-shadow: 28px 28px #6e45e2, -28px 28px #ff3366, -28px -28px #6e45e2, 28px -28px #ff3366;
	}

	25% {
		box-shadow: -28px 28px #ff3366, -28px -28px #6e45e2, 28px -28px #ff3366, 28px 28px #6e45e2;
	}

	50% {
		box-shadow: -28px -28px #6e45e2, 28px -28px #ff3366, 28px 28px #6e45e2, -28px 28px #ff3366;
	}

	75% {
		box-shadow: 28px -28px #dfdfdf, 28px 28px #4f4d49, -28px 28px #dfdfdf, -28px -28px #4f4d49;
	}
}

#header {
	width: 100%;
	height: 274px;
	background-image: url(../img/header.jpg);
	background-size: 100%;
	background-repeat: no-repeat;
	position: relative;
}

#header #logo1 {
	position: absolute;
	top: 15px;
	left: 15px;
	width: 80px;
	height: 30px;
	background: url(../img/bg.png);
	background-position: 0 210px;
	background-size: 375px 411.5px;
}

#header #logo2 {
	position: absolute;
	top: 15px;
	right: 15px;
	width: 80px;
	height: 30px;
	background: url(../img/bg.png);
	background-position: 290px 210px;
	background-size: 375px 411.5px;
}

#header #title {
	position: absolute;
	top: 77px;
	left: 50%;
	width: 256px;
	margin-left: -128px;
	height: 112px;
	background: url(../img/bg.png);
	background-position: 8px 279px;
	background-size: 582.5px 623.25px;
}

#header #line {
	content: '';
	width: 256px;
	height: 20px;
	background: url(../img/bg.png);
	background-position: 350px 103px;
	background-size: 375px 411.5px;
	position: absolute;
	top: 100px;
	left: 50%;
	margin-left: -128px;
}

#header .content {
	width: 90%;
	height: 60px;
	position: absolute;
	left: 50%;
	margin-left: -45%;
	top: 200px;
	padding-top: 7px;
	background: url(../img/bg.png);
	background-position: 0px 80px;
	background-size: 375px 411.5px;
	font-size: 16px;
	text-align: center;
}

#demo {
	font-size: 18px;
	font-weight: 600;
	width: 118px;
	height: 36px;
	line-height: 36px;
	background: url(../img/bg.png);
	background-position: -357px -149px;
	background-size: 500px 464.5px;
	text-align: center;
	margin: auto;
	margin-top: 10px;
	margin-bottom: 5px;
}

#section1 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	position: relative;
}

#section1 .list {
	width: 160px;
	position: relative;
}

#section1 .list .content {
	margin-top: 30px;
	padding: 10px 0;
	background: url(../img/bg.png);
	background-position: 181px -818px;
	background-size: 410px 577px;
	height: 160px;
}

#section1 .list .content .title {
	text-align: center;
	padding-top: 15px;
	padding-bottom: 5px;
}

#section1 .list .content .text {
	font-size: 12px;
	text-align: center;
	padding: 2px;
	line-height: 22px;
}

#section1 .list .icon {
	width: 55px;
	height: 54px;
	position: absolute;
	left: 50%;
	margin-left: -25.5px;
}



#section2 {
	text-align: center;
	padding: 0 14px;
}

#section2>.title {
	margin-top: 15px;
	margin-bottom: 25px;
}

#section2>.title>div {
	font-size: 18px;
	margin: 0 auto;
	position: relative;
}

#section2>.title>div:nth-child(1) {
	width: 200px;
}

#section2>.title>div:nth-child(2) {
	width: 224px;
}

#section2>.title div:before {
	content: '';
	display: block;
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 120%;
	margin-left: -60%;
	height: 12px;
	background-color: #2a1492;
	z-index: -1;
}

#section2 .contentList .list {
	display: flex;
	align-items: flex-start;
}

#section2 .contentList .list .title {
	flex-basis: 86px;
	font-weight: 600;
}

#section2 .contentList .list .text {
	flex: 1;
	text-align: left;
	font-size: 14px;
}

#section3 {}

#section3 .title {
	margin-top: 15px;
	margin-bottom: 15px;
	text-align: center;
	font-size: 18px;
}

#section3 .imgList {
	display: flex;
	flex-wrap: wrap;
	width: 327px;
	margin: 0 auto;
}

#section3 .imgList .img {
	margin: 7px 7px;
	/* background: url(../img/bg.png);
  background-size: 375px 411.5px; */
}

#section3 .imgList .img:nth-child(1) {
	width: 50px;
	height: 50px;
	background-position: 3px -54px;
}

#section3 .imgList .img:nth-child(2) {
	width: 50px;
	height: 50px;
	background-position: -47px -54px;
}

#section3 .imgList .img:nth-child(3) {
	width: 50px;
	height: 50px;
	background-position: -101px -54px;
}

#section3 .imgList .img:nth-child(4) {
	width: 50px;
	height: 50px;
	background-position: -152px -54px;
}

#section3 .imgList .img:nth-child(5) {
	width: 50px;
	height: 50px;
	background-position: -208px -54px;
}

#section3 .imgList .img:nth-child(6) {
	width: 50px;
	height: 50px;
	background-position: 3px -103px;
}

#section3 .imgList .img:nth-child(7) {
	width: 50px;
	height: 50px;
	background-position: -48px -104px;
}

#section3 .imgList .img:nth-child(8) {
	width: 50px;
	height: 50px;
	background-position: -100px -104px;
}

#section3 .imgList .img:nth-child(9) {
	width: 50px;
	height: 50px;
	background-position: -153px -104px;
}

#section3 .imgList .img:nth-child(10) {
	width: 50px;
	height: 50px;
	background-position: -208px -104px;
}

#section3 .imgList .img:nth-child(11) {
	width: 50px;
	height: 50px;
	background-position: 3px -153px;
}

#section3 .imgList .img:nth-child(12) {
	width: 50px;
	height: 50px;
	background-position: -49px -153px;
}

#section3 .imgList .img:nth-child(13) {
	width: 50px;
	height: 50px;
	background-position: -100px -153px;
}

#section3 .imgList .img:nth-child(14) {
	width: 118px;
	height: 21px;
	background-position: -644px -57px;
	position: relative;
	top: 12px;
	background-size: 750px 823px;
	background-repeat: no-repeat;
}

/* #section3 .imgList .img:nth-child(15) {
  width: 50px;
  height: 21px;
  background-position: -325px -21px;
  position: relative;
  top: 12px;
} */

#section4 {
	text-align: center;
}

#section4>.title {
	margin-top: 15px;
	margin-bottom: 15px;
	text-align: center;
	font-size: 18px;
}

#section4 .list {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 327px;
	margin: 0 auto;
}

#section4 .list .li {
	width: 120px;
	margin: 0 12px;
	border: 1px solid #5494a8;
	border-radius: 10px;
	overflow: hidden;
}

#section4 .list .li .title {
	background: url(../img/bg.png);
	background-position: -288px -60px;
	background-size: 395px 415.5px;
	height: 24px;
}

#section4 .list .li .content {
	position: relative;
	height: 125px;
	margin-top: 10px;
	padding-bottom: 5px;
	font-size: 13px;
	line-height: 24px;
}

#section4 .list .li .content:after {
	position: absolute;
	content: '';
	width: 100%;
	bottom: 0;
	left: 0;
	right: 0;
	height: 24px;
	background: url(../img/bg.png);
	background-position: -298px -105px;
	z-index: -1;
	background-size: 405px 435.5px;
}

#section5 {
	text-align: center;
}

#section5>.title {
	margin-top: 15px;
	margin-bottom: 15px;
	text-align: center;
	font-size: 18px;
}

#section5 .productList {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 327px;
	margin: 0 auto;
}

#section5 .productList .item {
	width: 120px;
	margin: 0 4px;
}

#section5 .productList .item img {
	display: block;
	width: 100%;
	min-height: 210px;
}

#line {
	text-align: center;
	margin-top: 20px;
	font-size: 14px;
	font-weight: 600;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
}

#line>span {
	background: url(../img/bg.png);
	background-position: -373px -3px;
	background-size: 395px 415.5px;
	height: 20px;
	display: block;
	width: 19px;
}

#section6 {
	margin-bottom: 30px;
}

#section6>.title {
	margin-top: 15px;
	margin-bottom: 15px;
	text-align: center;
	font-size: 18px;
}

#section6 .form {
	width: 280px;
	margin: 0 auto;
}

#section6 .form .item {
	display: flex;
	justify-content: space-between;
	margin: 10px 0;
	position: relative;
}

#section6 .form .item .label {
	width: 70px;
	text-align: right;
}

#section6 .form .item .input {
	display: block;
	width: 200px;
}

#section6 .form .item .input input,
#section6 .form .item .input textarea {
	display: block;
	width: 100%;
	border: none;
	background-color: #00267b;
	color: white;
}

#section6 .form .item .input input:focus,
#section6 .form .item .input textarea:focus {
	outline: none;
}

#section6 .form .item .error {
	position: absolute;
	bottom: -10px;
	left: 80px;
	font-size: 12px;
	color: #ff3366;
	display: none;
}

#section6 .submit {
	font-size: 18px;
	font-weight: 600;
	width: 98px;
	height: 36px;
	line-height: 36px;
	background: url(../img/bg.png);
	background-position: -288px -139px;
	background-size: 405px 435.5px;
	text-align: center;
	margin: auto;
	margin-top: 15px;
}

#bgLine {
	position: absolute;
	width: 100%;
	height: 100%;
	display: block;
	top: 0;
	left: 0;
	background: url(../img/bg2.png) repeat;
	background-size: contain;
	z-index: -1;
}

#message {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	color: white;
	padding: 8px 16px;
	background-color: black;
	opacity: 0.7;
	font-size: 24px;
	width: 80%;
	padding: 20px;
}

#message2 {
	display: none;
	width: 80%;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

#message2 img {
	width: 100%;
	height: 100%;
}

#selectWrap {
	width: 90%;
	overflow: hidden;
	margin: 0 auto;
	padding-top: 24px;
	/* font-family: 'ku'; */
}

.ui-select-text {
	/* font-family: 'ku'; */
}

.ui-select-datalist-li {
	/* font-family: 'ku'; */
}

#selectWrap .item {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	margin: 10px 0;
}

#selectWrap .item .label {
	margin-right: 14px;
}

#selectWrap .item .wrap {
	display: flex;
	flex: 1;
	overflow-x: scroll;
}

#selectWrap .item .wrap .select {
	margin-right: 12px;
}

#app {
	width: 100%;
	height: 100%;
}

.swiper-container {
	width: 100%;
	height: calc(100% - 200px);
	overflow: hidden;
}

.swiper-slide {
	width: 100%;
	overflow: hidden;
}

.testVideoTop {
	position: absolute;
	width: 200px;
	height: 20px;
	top: 200px;
	left: 50%;
	margin-left: -100px;
	/* margin-right: -100px; */
	z-index: 100;
	background-color: red;
}

.popup {
	position: fixed;
	width: 100vw;
	height: 100vh;
	z-index: 999;
	background-color: #fff;
	box-sizing: border-box;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
}
.popup-content{
	width: 100vw;
	height: 90vh;
	margin: 0 auto;
	overflow-y: auto;
}
.popup-content-html img{
	width: 100%;
}
.logo3{
	width: 100px;
	text-align: center;
	font-size: 14px;
	padding: 10px;
}