@charset "utf-8";
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, p, blockquote, th, td, header, main, footer, aside, section, article, nav { padding: 0; margin: 0; }

fieldset, img { border: 0; }

table { border-collapse: collapse; border-spacing: 0; }

ol, ul { list-style-type: none; }

address, caption, cite, code, dfn, em, th, var { font-weight: normal; font-style: normal; }

caption, th { text-align: left; }

h1, h2, h3, h4, h5, h6 { font-weight: normal; font-size: 100%; }

p:before, p:after { content: ''; }

abbr, acronym { border: 0; }

a { text-decoration: none; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; }

.clr { height: 0px; visibility: hidden; clear: both; font-size: 0px; overflow: hidden; width: 100%; }

body, samp { font-size: 12px; color: #333; font-family: '微软雅黑','microsoft yahei',"arial",'simsun',serif,"pingfang sc","苹方"; }

img { vertical-align: bottom; }

input[type="text"], input[type="hidden"], input[type="button"], input[type="radio"], input[type="submit"], input[type="checkbox"], input[type="password"], button, textarea, select { outline: none; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; }

body { opacity: 0; animation: show 1s ease 0.3s 1; animation-fill-mode: forwards; }

img { -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; }

.menu span, .header-right { -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; }

.move1, .move2, .move3, .move4, .move5 { opacity: 0; transition: all 0.8s ease 0.3s; }

.move1 { transform: translatey(70px); }

.move2 { transform: translatey(-70px); }

.move3 { transform: translatex(70px); }

.move4 { transform: translatex(-70px); }

.move5 { transform: translatey(70px); }

.move1.move-run, .move2.move-run { transform: translatey(0px); opacity: 1; }

.move3.move-run, .move4.move-run { transform: translatey(0px); opacity: 1; }

.move5.move-run { transform: translatey(0px); opacity: 1; }

@keyframes show { 0% { opacity: 0; }
  100% { opacity: 1; } }
@keyframes suofang { 0% { transform: scale(1); }
  100% { transform: scale(1.3); } }
@keyframes move { 0% { transform: translatey(-2px); }
  100% { transform: translatey(2px); } }
/*header*/
.header { width: 100%; height: 100px; line-height: 100px; overflow: hidden; position: fixed; left: 0px; top: 0px; z-index: 1000; background: #c6a164; box-sizing: border-box; padding: 0px 60px; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; }

.logo { width: 244px; overflow: hidden; height: 100%; }

.logo a { width: 100%; height: 100%; display: block; position: relative; }

.logo img { width: 100%; height: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

.logo a:hover { transform: translatey(3px); }

.header-back { width: 40px; height: 40px; background:  no-repeat center; background-size: 100%; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; }

.header-back a { width: 100%; height: 100%; display: block; overflow: hidden; }

.header-back:hover { transform: translatex(-3px); }

.header-lang { width: auto; position: absolute; top: 50%; transform: translatey(-50%); right: 160px; z-index: 12; font-size: 16px; color: #fff; }

.header-lang a { width: 100%; height: 100%; display: block; color: #fff; background:  no-repeat left center; padding-left: 35px; }

/*content*/
.bn-1 { width: 100%; overflow: hidden; margin-top: 100px; background: #fff  no-repeat left bottom; background-size: 100%; }

.bn-1head { width: 90%; margin: 110px auto 0px; overflow: hidden; text-align: center; }

.bn-1head .h3 { width: 100%; overflow: hidden; font-size: 48px; color: #333; font-weight: bold; position: relative; padding-bottom: 20px; }

.bn-1head .h3:before { width: 32px; height: 4px; content: ""; position: absolute; left: 50%; transform: translatex(-50%); bottom: 0px; background: #c3a16e; }

.bn-1info { width: 100%; overflow: hidden; line-height: 32px; font-size: 16px; color: #333; margin-top: 10px; }

#container { position: relative; display: block; width: 1100px; height: 1100px; margin: -80px auto 0px; }

.bn-1bg { width: 100%; height: 100%; background:  no-repeat center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; margin-left: 180px; margin-top: 170px; }

#sphere, #flights, #glow-shadows, #locations, #drag { position: absolute; top: 0px; left: 0px; width: 1100px; height: 1100px; z-index: 12; }

#glow-shadows { width: 1089px; height: 1089px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

#glow-shadows.earth { background: ; background-size: 100%; }

.location { position: absolute; cursor: pointer; }

.map1 { width: auto; position: absolute; left: 0px; top: 0px; }

.map1 samp { width: 20px; height: 20px; display: block; overflow: hidden; border-radius: 50%; background: rgba(195, 157, 95, 0.2); position: relative; }

.map1 samp:before { width: 10px; height: 10px; content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; background: #c39d5f; border-radius: 50%; }

.map1 span { width: auto; display: block; height: 28px; line-height: 28px; background: #fff; padding: 0px 20px; font-size: 14px; color: #191919; box-shadow: 5px 5px 20px 12px rgba(0, 0, 0, 0.06); border-radius: 8px 0px 8px 8px; position: absolute; right: 16px; top: 22px; white-space: pre; }

.map4 { width: auto; position: absolute; left: 0px; top: 0px; }

.map4 samp { width: 20px; height: 20px; display: block; overflow: hidden; border-radius: 50%; background: rgba(195, 157, 95, 0.2); position: relative; }

.map4 samp:before { width: 10px; height: 10px; content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; background: #c39d5f; border-radius: 50%; }

.map4 span { width: auto; display: block; height: 28px; line-height: 28px; background: #fff; padding: 0px 20px; font-size: 14px; color: #191919; box-shadow: 5px 5px 20px 12px rgba(0, 0, 0, 0.06); border-radius: 0px 8px 8px 8px; position: absolute; left: 16px; top: 22px; white-space: pre; }

.map2 { width: auto; position: absolute; left: 0px; top: 0px; }

.map2 samp { width: 20px; height: 20px; display: block; overflow: hidden; border-radius: 50%; background: rgba(195, 157, 95, 0.2); position: relative; }

.map2 samp:before { width: 10px; height: 10px; content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; background: #c39d5f; border-radius: 50%; }

.map2 span { width: auto; display: block; height: 28px; line-height: 28px; background: #fff; padding: 0px 20px; font-size: 14px; color: #191919; box-shadow: 5px 5px 20px 12px rgba(0, 0, 0, 0.06); border-radius: 8px 8px 0px 8px; position: absolute; right: 16px; bottom: 22px; white-space: pre; }

.map3 { width: auto; position: absolute; left: 0px; top: 0px; }

.map3 samp { width: 20px; height: 20px; display: block; overflow: hidden; border-radius: 50%; background: rgba(195, 157, 95, 0.2); position: relative; }

.map3 samp:before { width: 10px; height: 10px; content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; background: #c39d5f; border-radius: 50%; }

.map3 span { width: auto; display: block; height: 28px; line-height: 28px; background: #fff; padding: 0px 20px; font-size: 14px; color: #191919; box-shadow: 5px 5px 20px 12px rgba(0, 0, 0, 0.06); border-radius: 8px 8px 8px 0px; position: absolute; left: 16px; bottom: 22px; white-space: pre; }

.map-item { width: 690px; background: #ceaa73; border-radius: 8px; position: absolute; left: -200px; bottom: 50px; padding: 30px; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; box-shadow: 0px 0px 12px 5px rgba(0, 0, 0, 0.1); visibility: hidden; opacity: 0; }

.map-item:before { width: auto; content: ""; position: absolute; left: 200px; bottom: -10px; border-left: 10px transparent solid; border-right: 10px transparent solid; border-top: 10px #ceaa73 solid; }

.map-item:after { width: 15px; height: 20px; content: ""; position: absolute; left: 203px; bottom: -40px; background:  no-repeat; }

.location.active { z-index: 22; }

.location.active .map-item { visibility: visible; opacity: 1; }

.map-left { width: 240px; height: 135px; overflow: hidden; }

.map-left img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.map-right { width: calc(690px - 240px); overflow: hidden; color: #fff; }

.map-right h3 { width: 100%; overflow: hidden; padding-left: 30px; font-size: 18px; font-weight: bold; box-sizing: border-box; }

.map-right ul { width: 100%; overflow: hidden; margin-top: 5px; }

.map-right ul li { float: left; width: 50%; overflow: hidden; box-sizing: border-box; line-height: 32px; padding-left: 30px; font-size: 16px; }

.map-right ul.u3 li { width: 100%; }

.bn-list { width: 100%; overflow: hidden; }

.bn-item { width: 100%; height: 100vh; overflow: hidden; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; padding: 0px 180px; box-sizing: border-box; display: flex; justify-content: space-between; flex-wrap: wrap; align-content: center; justify-content: flex-end; }

.bn-item:before { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: rgba(0, 0, 0, 0.2); }

.bn-item:nth-child(2n) { justify-content: flex-start; }

.bn-pannel { width: 780px; overflow: hidden; box-sizing: border-box; padding: 90px 86px; background: rgba(8, 45, 83, 0.75); position: relative; z-index: 12; }

.bn-pannel .h3 { float: left; width: auto; position: relative; font-size: 32px; font-weight: bold; color: #fff; padding-bottom: 20px; }

.bn-pannel .h3:before { width: 32px; height: 4px; content: ""; position: absolute; left: 0px; bottom: 0px; background: #c3a16e; }

.bn-info { float: left; width: 100%; overflow: hidden; line-height: 32px; color: #fff; font-size: 16px; margin-top: 12px; }

.bn-tip { width: 178px; height: 178px; border-radius: 50%; background: rgba(198, 161, 100, 0.9); position: absolute; position: absolute; left: 50%; transform: translatex(-50%); bottom: 200px; z-index: 123456; display: flex; justify-content: space-between; flex-wrap: wrap; align-content: center; justify-content: center; cursor: pointer; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; }

.bn-tip.hiden { opacity: 0; visibility: hidden; }

.bn-tip samp { width: 40px; height: 60px; border-radius: 20px; box-sizing: border-box; display: block; border: 2px #fff solid; position: relative; cursor: pointer; }

.bn-tip samp:before { width: 2px; height: 8px; content: ""; position: absolute; left: 50%; transform: translatex(-50%); top: 20px; background: #fff; animation: move 1s linear infinite alternate; }

.bn-tip span { width: 100%; display: block; text-align: center; overflow: hidden; font-size: 16px; color: #fff; margin-top: 20px; }
.bn-1content{display:none}

/*footer*/
.footer { width: 100%; box-sizing: border-box; padding: 40px 180px; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; background: #002969; position: relative; z-index: 12; }

.footer-left { width: 50%; font-size: 14px; color: #99acca; }

.footer-left a { color: #99acca; margin-left: 20px; }

.footer-left a:hover { color: #fff; }

.footer-right { width: auto; position: relative; cursor: pointer; }

.footer-right span { width: 238px; display: block; overflow: hidden; height: 38px; line-height: 38px; border: 1px solid #1a4278; background: url(/uploads/image/shshimages/foot_linki.png) no-repeat 16px center; padding-left: 32px; font-size: 14px; color: #fff; text-align: center; box-sizing: border-box; }

.footer-right ul { width: 100%; overflow: hidden; position: absolute; left: 0px; border: 1px solid #1a4278; bottom: 37px; background: #002b69; padding: 12px 0px; transition: all 0.5s ease-in-out; opacity: 0; visibility: hidden; }

.footer-right ul li { width: 100%; }

.footer-right ul li a { display: block; padding: 5px 15px; line-height: 22px; font-size: 14px; color: #99acca; box-sizing: border-box; }

.footer-right ul li a:hover { color: #fff; }

.footer-right.active ul { opacity: 1; visibility: visible; }

/*back*/
.bn-back { width: 90px; height: 90px; border-radius: 50%; background: #ceaa73; position: fixed; right: 60px; bottom: 10%; z-index: 1000; opacity: 0; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; visibility: hidden; }

.bn-back a { width: 100%; height: 100%; display: block; overflow: hidden; display: flex; justify-content: space-between; flex-wrap: wrap; align-content: center; }

.bn-back samp { width: 100%; display: block; height: 24px; background:  no-repeat center; }

.bn-back span { width: 100%; display: block; text-align: center; font-size: 12px; color: #fff; margin-top: 8px; }

.bn-back.active { opacity: 1; visibility: visible; }

.bn-back p { width: 84px; height: 84px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

.load { width: 100%; height: 100%; overflow: hidden; position: absolute; left: 0px; top: 0px; }

.circle { stroke-dasharray: 360px; stroke-dashoffset: 360px; -webkit-transition: all 0.01s linear 0s; -moz-transition: all 0.01s linear 0s; -ms-transition: all 0.01s linear 0s; -o-transition: all 0.01s linear 0s; transition: all 0.01s linear 0s; }

@media screen and (max-width: 1366px) { /*header*/
  .header { height: 70px; line-height: 70px; }
  .logo { width: 160px; }
  .header-back { width: 36px; height: 36px; }
  /*content*/
  .bn-1 { margin-top: 70px; }
  .bn-1head { margin: 70px auto 0px; }
  .bn-1head .h3 { font-size: 36px; padding-bottom: 15px; }
  .bn-1head .h3:before { width: 28px; height: 3px; }
  .bn-1info { line-height: 30px; font-size: 15px; }
  #container { width: 800px; height: 800px; margin: -80px auto 0px; }
  .bn-1bg { margin-left: 70px; margin-top: 70px; }
  #sphere, #flights, #glow-shadows, #locations, #drag { width: 800px; height: 800px; }
  #glow-shadows { width: 795px; height: 795px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .map1 span, .map2 span, .map3 span, .map4 span { height: 26px; line-height: 26px; padding: 0px 15px; }
  .map-item { width: 500px; left: -160px; bottom: 40px; padding: 20px; }
  .map-item:before { left: 160px; }
  .map-item:after { left: 163px; bottom: -35px; }
  .map-left { width: 180px; height: 110px; }
  .map-right { width: calc(500px - 180px); }
  .map-right h3 { padding-left: 20px; font-size: 16px; }
  .map-right ul { margin-top: 3px; }
  .map-right ul li { line-height: 22px; padding-left: 20px; font-size: 12px; margin-top: 4px; }
  .bn-item { padding: 0px 120px; }
  .bn-pannel { width: 640px; padding: 50px; }
  .bn-pannel .h3 { font-size: 24px; padding-bottom: 15px; }
  .bn-pannel .h3:before { width: 28px; height: 3px; }
  .bn-info { line-height: 28px; font-size: 14px; margin-top: 10px; }
  .bn-tip { width: 140px; height: 140px; bottom: 150px; }
  .bn-tip samp { width: 30px; height: 50px; }
  .bn-tip span { font-size: 14px; margin-top: 12px; }
  /*footer*/
  .footer { padding: 30px 120px; }
  /*back*/
  .bn-back { width: 70px; height: 70px; right: 30px; }
  .bn-back samp { height: 20px; background-size: auto 100%; }
  .bn-back span { margin-top: 6px; }
  .bn-back p { width: 60px; height: 60px; } }
@media screen and (max-width: 1000px) { /*header*/
  .header { height: 50px; line-height: 50px; padding: 0px 5%; }
  .logo { width: 110px; }
  .header-back { width: 32px; height: 32px; }
  .header-lang { right: 120px; font-size: 14px; }
  .header-lang a { padding-left: 32px; background-size: 24px; }
  /*content*/
  .bn-1 { margin-top: 50px; }
  .bn-1head { margin: 40px auto 0px; }
  .bn-1head .h3 { font-size: 22px; padding-bottom: 12px; }
  .bn-1head .h3:before { width: 24px; height: 2px; }
  .bn-1info { line-height: 26px; font-size: 14px; }
  .bn-item { padding: 10vw 5%; height: auto; }
  .bn-pannel { width: 100%; padding: 30px; }
  .bn-pannel .h3 { font-size: 20px; padding-bottom: 12px; }
  .bn-pannel .h3:before { width: 24px; height: 2px; }
  .bn-info { line-height: 24px; font-size: 14px; margin-top: 8px; }
  /*footer*/
  .footer { padding: 30px 5%; }
  .footer-left { width: 100%; text-align: center; float: none; }
  .footer-right { float: none; width: 238px; margin: 30px auto 0px; }
  /*back*/
  .bn-back { display: none; } }
  .bn-1cont{display:none}
@media screen and (max-width: 768px) { 
.header-lang { right: 70px; }
  .header-lang a { padding-left: 28px; background-size: 20px; }
  /*content*/
  .bn-1 { margin-top: 50px; }
  .bn-1head { margin: 40px auto 0px; }
  .bn-1head .h3 { font-size: 22px; padding-bottom: 12px; }
  .bn-1head .h3:before { width: 24px; height: 2px; }
  .bn-1info { line-height: 26px; font-size: 14px;text-align:left}
  .bn-item { padding: 15vw 5%; }
  #container { width: 300px; height: 300px; margin: -20px auto 0px;display:none }
  .bn-1bg { background: none; width: 200px; height: 200px; border-radius: 50%; box-shadow: 20px 20px 30px 12px rgba(0, 0, 0, 0.1); margin-left: 0px; margin-top: 0px; }
  #sphere, #flights, #glow-shadows, #locations, #drag { width: 300px; height: 300px; }
  #glow-shadows { width: 297px; height: 297px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .map-item { display: none; }
  .bn-tip { width: 90px; height: 90px; bottom: 20px; }
  .bn-tip samp { width: 20px; height: 30px; }
  .bn-tip span { font-size: 12px; margin-top: 2px; }
  .bn-tip samp::before { width: 1px; height: 4px; top: 10px; } 
 @keyframes trans{
 0%{transform:translatey(50px);opacity:0 }
100%{transform:translatey(0px);opacity:1 }
 } 
.bn-1cont{width:90%;margin:40px auto;display:block}
.bn-1pic,.bn-1pic img{width:100%;overflow: hidden;display:block;height:auto}
.bn-1cont .bn-1ul{width:100%;overflow: hidden;margin-top:30px;display:grid;grid-template-columns:repeat(2,1fr);grid-gap:10px } .bn-1cont .bn-1ul li{width:100%;height:40px;line-height:40px;text-align:center;background:#d6d9de;border-radius:7px;font-size:14px;color:#333;transition:all 0.4s ease  }
.bn-1cont .bn-1ul li.active{background:#ceaa73;color:#fff  }  
.bn-1pannel{width:100%;margin-top:20px;position:relative}
.bn-1model{width:100%;overflow: hidden;position:absolute;left:0px;top:0px;z-index:1;background:#fff;border-radius:8px;box-shadow:0px 0px 12px 5px rgba(17,29,37,0.1);opacity:0;transform:translatey(50px);padding:20px;box-sizing:border-box}
.bn-1model.active{position:relative;z-index:2;animation:trans 0.6s ease 1;animation-fill-mode:forwards}  
.bn-1model samp,.bn-1model samp img{width:100%;display:block;overflow: hidden;height:auto}
.bn-1model span{width:100%;overflow: hidden;display:block;margin-top:20px;font-size:18px;color:#333 }
.bn-1des{width:100%;overflow: hidden;margin-top:5px }
.bn-1des ul{width:100% }
.bn-1des ul{width:100%;line-height:22px;font-size:14px;color:#808080  }
.bn-item{background-attachment: inherit}
  }