.box {
	width: 100%;
	height: 9.92rem;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

.oneText {
	width: 7.02rem;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.oneText .tit {
	font-family:'MiSans, MiSans' !important;
	font-weight: 800;
	font-size: 0.6rem;
	color: #FFFFFF;
	text-align: center;
}

.oneText .txt {
	font-family:'MiSans, MiSans' !important;
	font-weight: 400;
	font-size: 0.25rem;
	color: #FFFFFF;
	text-align: center;
}

.twoText {
	width: 10.62rem;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-family:'MiSans, MiSans' !important;
	font-weight: 500;
	font-size: 0.4rem;
	color: #FFFFFF;
	text-align: center;
}

.boxthree {
	height: 10.08rem;
	position: relative;
	z-index: 2;
	background: url('/assets/img/371.png') no-repeat !important;
}
.boxthreetitle{
    position: absolute;
    z-index: 99;
    left: 50%;
    top: 0.98rem;
    transform: translate(-50%, -50%);
    font-family:'MiSans, MiSans' !important;
    font-weight: bold;
    font-size: 0.4rem;
    color: #FFFFFF;
    text-align: center;
}
.aboutMap {
    position: absolute;
    top: 3.6rem;
	width: 100%;
	height: auto;
}

.aboutMask {
	position: absolute;
	width: 100%;
	height: auto;
	top: 0;
	left: 0;
}

.countryItem {
	width: .27rem;
	height: .36rem;
	position: absolute;
	cursor: pointer;
}

.countryItem::after {
	content: '';
	width: .01rem;
	background: rgba(125, 160, 201, .29);
	position: absolute;
	left: 50%;
	bottom: 100%;
	transform: translateX(-50%);
	transition: all .3s;
}

.countryItem::before {
	content: '';
	width: 0.05rem;
	height: 0.05rem;
	border-radius: 50%;
	background: rgba(125, 160, 201, .29);
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	transition: all .3s;
}

.countryItem:hover::after,
.countryItem:hover::before {
	background: #FFFFFF;
}

.addImg img:last-child,
.countryItem:hover .addImg img:first-child {
	display: none;
}

.countryItem:hover .addImg img:last-child {
	display: block;
}

.countryName {
	font-family:'MiSans, MiSans' !important;
	font-weight: bold;
	font-size: 0.17rem;
	color: #5175A0;
	white-space: nowrap;
	position: absolute;
	transition: all .3s;
}

.countryItem:hover .countryName {
	color: #FFFFFF;
}

.California {
	left: 18.75%;
	top: 77.37%;
}

.California::after {
	height: 2.74rem;
}

.California::before {
	bottom: calc(100% + 2.74rem);
}

.California .countryName {
	right: .2rem;
	bottom: calc(100% + 2.74rem - .11rem);
}

.NewJersey {
	left: 29.84%;
	top: 66.87%;
}

.NewJersey::after {
	height: 2.74rem;
}

.NewJersey::before {
	bottom: calc(100% + 2.74rem);
}

.NewJersey .countryName {
	right: .2rem;
	bottom: calc(100% + 2.74rem - .11rem);
}

.Barcelona {
	left: 46.04%;
	top: 64.22%;
}

.Barcelona::after {
	height: 1.89rem;
}

.Barcelona::before {
	bottom: calc(100% + 1.89rem);
}

.Barcelona .countryName {
	right: .2rem;
	bottom: calc(100% + 1.89rem - .11rem);
}

.Rome {
	left: 48.33%;
	top: 63.2%;
}

.Rome::after {
	height: 2.53rem;
}

.Rome::before {
	bottom: calc(100% + 2.53rem);
}

.Rome .countryName {
	right: .2rem;
	bottom: calc(100% + 2.53rem - .11rem);
}

/* box4 */
.boxfour {
	margin-top: -2.3rem;
	padding-top: 3.75rem;
	height: calc(9.92rem - 2.3rem);
}
.boxfour .info_box {
	max-width: 15.58rem;
	height: 4.7rem;
	background: linear-gradient( 50deg, rgba(0, 0, 0, 0.74) 0%, rgba(84, 84, 84, 0.74) 100%);
	margin-left: auto;
	margin-right: auto;
	padding-left: 0.7rem;
	padding-right: 0.7rem;
	box-sizing: border-box;
	display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0.49rem;
    /*backdrop-filter: contrast(1) !important;*/
}
.boxfour .text_box {
	max-width: 2.76rem;
}
.boxfour .title {
	font-family:'MiSans, MiSans' !important;
	font-weight: bold;
	font-size: 35px;
	color: #FFFFFF;
}
.boxfour .des {
        /*word-break: break-all;*/
	font-family:'MiSans, MiSans' !important;
	font-weight: 300;
	    font-size: 0.2rem;
	color: #FFFFFF;
	margin-top: 0.05rem;
	/*height: 0.78rem;*/
}
@media only screen and (max-width: 768px) {
    .boxfour .title{
        font-size: 0.4rem!important;
        text-align: center;
    }
    .boxfour .des{
        text-align: center;
    }
    .boxfour .info_box{
        max-width: 7.5rem;
    }
    .boxfour .text_box{
        padding-left: 0.05rem;
    padding-right: 0.05rem;
    
    }
    .countryItem{
        transform: scale(0.6)!important;
    }
    .aboutMap{
        top: 2.9rem!important;
        height: 3.5rem!important;
    }
    .boxthree{
            height: 7.08rem!important;
    }
    img.aboutMap{
        object-fit: cover!important;
    }
}