#hpchoice li{list-style-type:none;}
#hpchoice {padding-top:50px; padding-bottom:1em; font-weight:300; overflow:hidden; margin-bottom:80px;}
#hpchoice h2 {font-size:250%; font-weight:300; padding-bottom:140px;}
#hpchoice .container {display:block; position:relative; z-index:2; width:88vw; height:44vw; max-width:925px; max-height:463px;  margin:0 auto;}
#hpchoice .circle {width:100%; height:200%; border:2px dashed #e4e4e4; border-radius:50%; position:absolute; top:0; left:0; z-index:1; animation:hpchoicerotate 50s infinite linear;}
#hpchoice .nodecore {width:100%; height:200%; position:static; z-index:2;}
#hpchoice .nodecore li {position:absolute; z-index:3; font-size:90%; top:0; left:50%; right:50%; opacity:0; transition:top 1.5s ease-in-out .5s,left 1.5s ease-in-out .5s,right 1.5s ease-in-out .5s,opacity .4s ease-in-out .5s,font-size .3s ease-in-out;}
#hpchoice .nodecore li .i {display:block; position:absolute; z-index:2; top:0; left:0; font-size:16px; width:9em; text-align:center; line-height:130%; transition:font-size .3s ease-in-out;}
#hpchoice .nodecore a {color:#5d332a; transition:color .3s ease-in-out;}
#hpchoice .nodecore a:hover {color:#3AA1D5;}
#hpchoice .nodecore a:hover .icon {background-color:white; border-color:#3AA1D5; background-size:65% auto; box-shadow:0 0 12px rgba(0,0,0,0.3);}
#hpchoice .nodecore .icon {display:block; width:6em; height:6em; background:#f0f0f0 none 50% 50% no-repeat; background-size:60% auto; border-radius:50%; border:2px solid #f0f0f0; box-shadow:0 0 0 white; transition:background-color .3s ease-in-out,border-color .3s ease-in-out,box-shadow .3s ease-in-out, background-size .2s ease-in-out;}
#hpchoice .nodecore .icon::before {display:block; width:100%; height:100%; text-align:center; font-size:3em; line-height:1.9em;}
#hpchoice.goanims .nodecore li {opacity:1; top:0; left:0;}
#hpchoice.goanims .nodecore li .i {top:0; left:0; transition:top .3s ease-in-out,left .3s ease-in-out;}
#hpchoice.goanims .nodecore li:nth-child(1) {top:75%; left:-4%; right:auto;}
#hpchoice.goanims .nodecore li:nth-child(1) .i {left:6em; top:2em;}
#hpchoice.goanims .nodecore li:nth-child(1) .icon {background-image:url("http://www.mornlaser.cn/wp-jscss/img/tb1.png");}
#hpchoice.goanims .nodecore li:nth-child(2) {top:39%; left:2%; right:auto;}
#hpchoice.goanims .nodecore li:nth-child(2) .i {left:4.5em; top:4em;}
#hpchoice.goanims .nodecore li:nth-child(2) .icon {background-image:url("http://www.mornlaser.cn/wp-jscss/img/tb2.png");}
#hpchoice.goanims .nodecore li:nth-child(3) {top:10%; left:16%; right:auto;}
#hpchoice.goanims .nodecore li:nth-child(3) .i {left:1em; top:6em;}
#hpchoice.goanims .nodecore li:nth-child(3) .icon {background-image:url("http://www.mornlaser.cn/wp-jscss/img/tb3.png");}
#hpchoice.goanims .nodecore li:nth-child(4) {top:-7%; left:35%; right:auto;}
#hpchoice.goanims .nodecore li:nth-child(4) .i {left:-1.7em; top:6em;}
#hpchoice.goanims .nodecore li:nth-child(4) .icon {background-image:url("http://www.mornlaser.cn/wp-jscss/img/tb4.png");}
#hpchoice.goanims .nodecore li:nth-child(5) {top:-7%; right:35%; left:auto;}
#hpchoice.goanims .nodecore li:nth-child(5) .i {left:-1.7em; top:6em;}
#hpchoice.goanims .nodecore li:nth-child(5) .icon {background-image:url("http://www.mornlaser.cn/wp-jscss/img/tb5.png");}
#hpchoice.goanims .nodecore li:nth-child(6) {top:10%; right:15%; left:auto;}
#hpchoice.goanims .nodecore li:nth-child(6) .i {left:-5em; top:6em;}
#hpchoice.goanims .nodecore li:nth-child(6) .icon {background-image:url("http://www.mornlaser.cn/wp-jscss/img/tb6.png");}
#hpchoice.goanims .nodecore li:nth-child(7) {top:39%; right:2%; left:auto;}
#hpchoice.goanims .nodecore li:nth-child(7) .i {left:-8em; top:4em;}
#hpchoice.goanims .nodecore li:nth-child(7) .icon {background-image:url("http://www.mornlaser.cn/wp-jscss/img/tb7.png");}
#hpchoice.goanims .nodecore li:nth-child(8) {top:75%; right:-5%; left:auto;}
#hpchoice.goanims .nodecore li:nth-child(8) .i {left:-9em; top:2em;}
#hpchoice.goanims .nodecore li:nth-child(8) .icon {background-image:url("http://www.mornlaser.cn/wp-jscss/img/tb8.png");}
#hpchoice .footer {margin:0 auto; position:relative; z-index:3; height:2px; background-color:white;}
#hpchoice .footer > span {text-align:center;display:block; position:absolute; bottom:0; left:calc(50% - 195px); width:40vw; height:20vw; max-width:400px; max-height:200px;}
#hpchoice .footer > span > b {display:block; margin:0 auto; padding-top:20%; width:100%; height:200%; border:2px solid #0c045b; border-radius:100%;}
#hpchoice .footer > span > b > img {width:63%;}
#hpchoice .footer > i {display:block; position:absolute; z-index:2; width:100%; height:3em; background-color:white; font-size:140%; line-height:3em;}
#hpchoice .footer > i > b {display:block; width:90%; max-width:870px; margin:0 auto; border-top:2px solid #0c045b;}

@media (max-width: 1020px) {
  #hpchoice .footer > span {left:calc(50% - 20vw);}
}
@media (max-width: 925px) {
  #hpchoice .nodecore li {font-size:80%;}
  #hpchoice .nodecore li .i {font-size:120%;}
  #hpchoice {padding-top:0px;}
  #hpchoice .nodecore {padding-left: 0px;}
}
@media (max-width: 700px) {
  #hpchoice {margin-bottom:0;}
  #hpchoice .circle {display:none;}
  #hpchoice .nodecore a,
  #hpchoice .nodecore li {display:block !important; width:100% !important; position:static !important;}
  #hpchoice .nodecore li {clear:both; padding-top:15px;}
  #hpchoice .nodecore li .i,
  #hpchoice .nodecore li .icon {position:static; float:left;}
  #hpchoice .nodecore li .i {width:auto; padding:1.2em 0 0 6em; font-size:140%; float:none; text-decoration:none; text-align:left;}
  #hpchoice > .centeralign {display:none;}
  #hpchoice > h2.centeralign {display:block; padding-bottom:5px;}
}
@media (max-width: 530px) {
  #hpblog .img img {transform:scale(1,1);}
}
@keyframes hlbannerfl {
  0% {left:-1000px; opacity:0;}
  25% {left:-1000px; opacity:0;}
  85% {left:15%; opacity:1;}
  100% {left:0;}
}
@keyframes hlbannerll {
  0% {left:1000px; opacity:0;}
  55% {left:1000px; opacity:0;}
  100% {left:0; opacity:1;}
}
@keyframes hpchoicerotate {
  0% {transform:rotate(0deg);}
  100% {transform:rotate(360deg);}
}