@charset "utf-8";
/* CSS Document */

.box4{ background:url(../images/icons/bg4.jpg) center bottom no-repeat; background-size:cover; padding:0 0 30px;}
.box4::before{ content:''; display:block; width:100%; height:100%; background:linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.1)); position:absolute; left:0; top:0; z-index:1; opacity:0.5;}
.box4 .con{ position:relative; z-index:2;}
.box4 h2.title em{ color:rgba(255,255,255,0.4);}
.box4 h2.title span{ color:#fff;}

.box4 h2.title em{ color:#fff;}
.box4 h2.title span{ color:rgba(255,255,255,0.7);}

.box4 .map{ width:1294px; position:relative; margin:20px 0 0; margin-left:50%; transform:translateX(-50%);}
.box4 .map::before{ content:''; display:block; width:100%; height:100%; background:url(../images/icons/line1.png) no-repeat; position:absolute; left:0; top:0; z-index:2; opacity:0.5;}
.box4 img{ display:block; width:100%; position:relative; z-index:1;}

.box4 ul.lines{ display:block; width:100%; height:100%; position:absolute; left:0; top:0; z-index:3;}
.box4 ul.lines li{ display:block; position:absolute; left:218px; top:178px;}
.box4 ul.lines li i{ display:block; position:absolute; left:0; top:0; transform:translate(-50%,-50%);}
.box4 ul.lines li i::before{ content:''; display:block; width:6px; height:6px; background:linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.5)); border-radius:50%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.box4 ul.lines li i::after{ content:''; display:block; width:24px; height:6px; background:linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.8)); border-radius:6px; position:absolute; left:50%; top:50%; transform:translate(-21px,-50%);}

.box4 ul.lines li.l1{ width:766px; height:74px;} /*美国*/
.box4 ul.lines li.l1 i{ transform:rotate(5.52deg); animation:line1 8s linear infinite;}
@keyframes line1{
	0%{ transform:rotate(5.52deg);}
	100%{ transform: translate(766px, 74px) rotate(5.52deg);}
}

.box4 ul.lines li.l2{ width:832px; height:192px;} /*巴拿马*/
.box4 ul.lines li.l2 i{ transform:rotate(13deg); animation:line2 8s linear infinite;}
@keyframes line2{
	0%{ transform:rotate(13deg);}
	100%{ transform: translate(832px, 192px) rotate(13deg);}
}

.box4 ul.lines li.l3{ width:880px; height:364px;} /*阿根廷*/
.box4 ul.lines li.l3 i{ transform:rotate(22.47deg); animation:line3 8s linear infinite;}
@keyframes line3{
	0%{ transform:rotate(22.47deg);}
	100%{ transform: translate(880px, 364px) rotate(22.47deg);}
}

.box4 ul.lines li.l4{ width:223px; height:217px;} /*新加坡*/
.box4 ul.lines li.l4 i{ transform:rotate(44.22deg); animation:line4 8s linear infinite;}
@keyframes line4{
	0%{ transform:rotate(44.22deg);}
	100%{ transform: translate(223px, 217px) rotate(44.22deg);}
}

.box4 ul.lines li.l5{ width:162px; height:75px; transform:rotateY(180deg); transform-origin:left top;} /*葡萄牙*/
.box4 ul.lines li.l5 i{ transform:rotate(24.84deg); animation:line5 8s linear infinite;}
@keyframes line5{
	0%{ transform:rotate(24.84deg);}
	100%{ transform: translate(162px, 75px) rotate(24.84deg);}
}

.box4 ul.lines li.l6{ width:165px; height:197px; transform:rotateY(180deg); transform-origin:left top;} /*利比里亚*/
.box4 ul.lines li.l6 i{ transform:rotate(50.05deg); animation:line6 8s linear infinite;}
@keyframes line6{
	0%{ transform:rotate(50.05deg);}
	100%{ transform: translate(165px, 197px) rotate(50.05deg);}
}

.box4 ul.lines li.l7{ width:14px; height:284px; transform:rotateY(180deg); transform-origin:left top;} /*莫桑比克*/
.box4 ul.lines li.l7 i{ transform:rotate(87.18deg); animation:line7 8s linear infinite;}
@keyframes line7{
	0%{ transform:rotate(87.18deg);}
	100%{ transform: translate(14px, 284px) rotate(87.18deg);}
}

.box4 ul.dots{ display:block; width:100%; height:100%; position:absolute; left:0; top:0; z-index:5;}
.box4 ul.dots li{ display:block; position:absolute; cursor:pointer;}
.box4 ul.dots li::before/{ content:''; display:block; width:14px; height:18px; background:url(../images/icons/dot.png) center bottom no-repeat; background-size:contain; position:absolute; left:50%; bottom:100%; transform:translateX(-50%);}
.box4 ul.dots li::after{ content:attr(data-txt); display:block; line-height:1; color:#fff; font-size:14px; padding:0.9em 0; white-space:nowrap; position:absolute; left:50%; top:0; transform:translateX(-50%);}

.box4 ul.dots li b{ display:block; width:24px; height:24px; background:url(../images/icons/star.png) center no-repeat; background-size:contain; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.box4 ul.dots li em{ display:block; width:6px; height:6px; background:#ea2a29; border-radius:50%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.box4 ul.dots li em::before,
.box4 ul.dots li em::after{ content:''; display:block; width:100%; height:100%; background:rgba(234,42,41,0.3); border-radius:50%; position:absolute; top:0; left:0; z-index:1; animation:playBtn 2s linear infinite; opacity:0;}
.box4 ul.dots li em::after{ animation-delay:1s;}

.box4 ul.dots li i{ display:block; width:8px; height:8px; background:#fff; border-radius:50%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.box4 ul.dots li i::before,
.box4 ul.dots li i::after{ content:''; display:block; width:100%; height:100%; background:rgba(255,255,255,0.25); border-radius:50%; position:absolute; top:0; left:0; z-index:1; animation:playBtn 2s linear infinite; opacity:0;}
.box4 ul.dots li i::after{ animation-delay:1s;}

.box4 ul.dots li i{ background:#ffe400;}
.box4 ul.dots li i::before,
.box4 ul.dots li i::after{ background:rgba(255,228,0,0.25);}

@keyframes playBtn{
	0%{ opacity:0; transform:scale(2);}
	20%{ opacity:1;}
	80%{ opacity:1;}
	100%{ opacity:0; transform:scale(4);}
}

/*总部*/
.box4 ul.dots li.sy{ left:461px; top:330px; z-index:9;} /*三亚*/
/*亚洲*/
.box4 ul.dots li.alq{ left:272px; top:315px;} /*阿联酋*/
.box4 ul.dots li.mlxy{ left:434px; top:384px;} /*马来西亚*/
.box4 ul.dots li.afh{ left:308px; top:278px;} /*阿富汗*/
.box4 ul.dots li.hg{ left:525px; top:268px;} /*韩国*/
.box4 ul.dots li.trq{ left:214px; top:249px;} /*土耳其*/
.box4 ul.dots li.yn{ left:424px; top:352px;} /*越南*/
.box4 ul.dots li.xjp{ left:441px; top:395px;} /*新加坡*/
.box4 ul.dots li.ydnxy{ left:499px; top:407px;} /*印度尼西亚*/
.box4 ul.dots li.ysl{ left:214px; top:286px;} /*以色列*/
/*欧洲*/
.box4 ul.dots li.bjly{ left:178px; top:235px;} /*保加利亚*/
.box4 ul.dots li.yg{ left:78px; top:187px;} /*英国*/
.box4 ul.dots li.pty{ left:56px; top:253px;} /*葡萄牙*/
.box4 ul.dots li.spls{ left:205px; top:269px;} /*塞浦路斯*/
.box4 ul.dots li.xby{ left:68px; top:247px;} /*西班牙*/
.box4 ul.dots li.ael{ left:57px; top:191px;} /*爱尔兰*/
.box4 ul.dots li.els{ left:218px; top:178px;} /*俄罗斯*/
.box4 ul.dots li.asny{ left:173px; top:163px;} /*爱沙尼亚*/
.box4 ul.dots li.ltwy{ left:176px; top:174px;} /*拉脱维亚*/
.box4 ul.dots li.rs{ left:112px; top:225px;} /*瑞士*/
/*非洲*/
.box4 ul.dots li.lby{ left:152px; top:302px;} /*利比亚*/
.box4 ul.dots li.lbly{ left:53px; top:375px;} /*利比里亚*/
.box4 ul.dots li.msbk{ left:204px; top:462px;} /*莫桑比克*/
.box4 ul.dots li.nrly{ left:109px; top:368px;} /*尼日利亚*/
.box4 ul.dots li.mlqs{ left:280px; top:467px;} /*毛里求斯*/
/*北美洲*/
.box4 ul.dots li.mxg{ left:974px; top:306px;} /*墨西哥*/
.box4 ul.dots li.sewd{ left:1026px; top:350px;} /*萨尔瓦多*/
.box4 ul.dots li.mg{ left:984px; top:252px;} /*美国*/
.box4 ul.dots li.bhm{ left:1060px; top:311px;} /*巴哈马*/
.box4 ul.dots li.gsdlj{ left:1039px; top:363px;} /*哥斯达黎加*/
/*中美地区*/
.box4 ul.dots li.hdls{ left:1036px; top:344px;} /*洪都拉斯*/
.box4 ul.dots li.wdml{ left:1018px; top:339px;} /*危地马拉*/
/*南美洲*/
.box4 ul.dots li.bnm{ left:1050px; top:370px;} /*巴拿马*/
.box4 ul.dots li.egde{ left:1059px; top:407px;} /*厄瓜多尔*/
.box4 ul.dots li.zl{ left:1091px; top:490px;} /*智利*/
.box4 ul.dots li.glby{ left:1082px; top:381px;} /*哥伦比亚*/
.box4 ul.dots li.wlg{ left:1139px; top:519px;} /*乌拉圭*/
.box4 ul.dots li.agt{ left:1098px; top:542px;} /*阿根廷*/
.box4 ul.dots li.bx{ left:1151px; top:422px;} /*巴西*/
/*大洋洲*/
.box4 ul.dots li.mseqd{ left:667px; top:386px;} /*马绍尔群岛*/

.box4 ul.dots li.l::after{ padding:0; left:auto; right:0.8em; top:50%; transform:translate(0,-50%);} /*文字在左*/
.box4 ul.dots li.lt::after{ padding:0; left:auto; right:0.8em; top:50%; transform:translate(0,-80%);} /*文字在左上*/
.box4 ul.dots li.lb::after{ padding:0; left:auto; right:0.8em; top:50%; transform:translate(0,-30%);} /*文字在左下*/
.box4 ul.dots li.r::after{ padding:0; left:0.8em; top:50%; transform:translate(0,-50%);} /*文字在右*/
.box4 ul.dots li.rt::after{ padding:0; left:0.8em; top:50%; transform:translate(0,-80%);} /*文字在右上*/
.box4 ul.dots li.rb::after{ padding:0; left:0.8em; top:50%; transform:translate(0,-30%);} /*文字在右下*/
.box4 ul.dots li.t::after{ top:auto; bottom:18px; transform:translate(-50%,0);} /*文字在上*/

.box4 ul.dots li .info{ display:block; color:#fff; font-size:16px; white-space:nowrap; background:#fff; padding:0.25em 0.5em; border-radius:0.25em; position:absolute; left:50%; bottom:100%; transform:translate(-50%,-1em); animation:balloon 4s infinite ease;}
.box4 ul.dots li .info::after{ content:''; display:block; border:1px solid #fff; border-width:4px 6px 0; border-color:#fff transparent; position:absolute; left:50%; top:100%; transform:translate(-50%,0);}
.box4 ul.dots li .info img{ display:block; width:60px;}
.box4 ul.dots li .info b{ display:block; line-height:2.125;}
.box4 ul.dots li .info p{ display:block; line-height:1.725; font-size:0.875em;}
@keyframes balloon{
	0%{ transform:translate(-50%,-1em) rotate(0deg);}
	40%{ transform:translate(-50%,-1.1em) rotate(0deg);}    
	80%{ transform:translate(-50%,-1.2em) rotate(0deg);}    
	100%{ transform:translate(-50%,-1em) rotate(0deg);}
}

.box4 .list{ display:none;}



@media only screen and (max-width:1440px){


}

@media only screen and (max-width:768px){

.box4{ padding:0 0 40px;}
.box4 .map{ zoom:0.2782; margin-top:60px;}
.box4 ul.dots li{ transform:scale(2);}
.box4 ul.dots li::after{ display:none;}
.box4 ul.dots li .info{ padding:6px 8px;}
.box4 ul.dots li .info img{ width:80px;}
@keyframes playBtn{
	0%{ opacity:0; transform:scale(2);}
	20%{ opacity:1;}
	80%{ opacity:1;}
	100%{ opacity:0; transform:scale(3.5);}
}

.box4 .list{ display:block; font-size:14px;}
.box4 .list p{ display:block; line-height:1.5; color:#fff; padding:0.5em 0 0.25em; padding-left:4em; overflow:hidden;}
.box4 .list p em{ display:block; width:4em; float:left; margin:0 0 0 -4em;}

}





/**/