@charset "UTF-8";
html { font-family: '黑体'; }

body { margin: 0; padding: 0; overflow: hidden; position: fixed; top: 0; bottom: 0; left: 0; right: 0; }

.section { position: relative; overflow: hidden; }

@-webkit-keyframes nebula { 0% { background-position: -800px 0; }
  50% { background-position: -400px 0; }
  100% { background-position: 0 0; } }

@keyframes nebula { 0% { background-position: -800px 0; }
  50% { background-position: -400px 0; }
  100% { background-position: 0 0; } }

@-webkit-keyframes meteor { 0% { -webkit-transform: translateX(0) translateY(0);
    opacity: 0; }
  100% { -webkit-transform: translateX(-500px) translateY(500px);
    opacity: 0.6; } }

@keyframes meteor { 0% { transform: translateX(0) translateY(0);
    opacity: 0; }
  100% { transform: translateX(-500px) translateY(500px);
    opacity: 0.6; } }

@-webkit-keyframes showsubtitle { 0% { -webkit-transform: translateY(-50px);
    opacity: 0; }
  100% { -webkit-transform: translateY(0);
    opacity: 1; } }

@keyframes showsubtitle { 0% { transform: translateY(-50px);
    opacity: 0; }
  100% { transform: translateY(0);
    opacity: 1; } }

@-webkit-keyframes flash { 0% { -webkit-box-shadow: 0 0 20px #678;
    box-shadow: 0 0 20px #678; }
  100% { -webkit-box-shadow: 0 0 40px #abc;
    box-shadow: 0 0 40px red; } }

@keyframes flash { 0% { box-shadow: 0 0 20px #678; }
  100% { box-shadow: 0 0 40px red; } }

@-webkit-keyframes loading { 0% { transform: translateY(0);
    opacity: 0.7; }
  70% { transform: translateY(-42px);
    opacity: 0.7; }
  70.1% { transform: translateY(0);
    opacity: 0; }
  100% { transform: translateY(0);
    opacity: 0.7; } }

@keyframes loading { 0% { transform: translateY(0);
    opacity: 0.7; }
  70% { transform: translateY(-42px);
    opacity: 0.7; }
  70.1% { transform: translateY(0);
    opacity: 0; }
  100% { transform: translateY(0);
    opacity: 0.7; } }

.section-loading { background-size: cover; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 500; background-color: #333; }

.section-loading .progress { background-image: url("loading.png"); background-repeat: no-repeat; background-size: auto 42px; height: 42px; width: 260px; margin-top: 100px; position: relative; margin-right: auto; margin-left: auto; }

.section-loading .progress:after { position: absolute; opacity: 0.7; left: 0; right: 0; height: 42px; background-color: #333; z-index: 10; }

.section-loading .progress .text { position: absolute; right: 0; color: #AF0; z-index: 20; font-size: 42px; line-height: 1em; font-family: 'Century Gothic'; text-align: left; width: 85px; }

.section-loading .progress .text:after { content: "%"; font-size: 12px; line-height: 1.6em; position: absolute; right: 0; bottom: 0; }

.section-loading .progress-loading:after { -webkit-animation: loading 3s ease-out infinite; animation: loading 3s ease-out infinite; }

.section-loading .progress-complete:after { opacity: 0 !important; -webkit-transform: 0.3s; transform: 0.3s; -webkit-animation: none; animation: none; }

.section-loading .progress-foot { position: absolute; text-align: center; left: 0; right: 0; font-family: 'Century Gothic'; color: #FFF; opacity: 0.3; bottom: 60px; }

.section-loading .lead { opacity: .6; margin-top: 40%; }

.section-loading .lead img { width: 100%; display: block; }

.section-loading .gear { position: absolute; right: 0; width: 32px; }

.section-loading .gear img { width: 100%; display: block; animation: rote 1s linear infinite; }

.section-loading .progress-loading:after { -webkit-animation: loading 3s ease-out infinite; animation: loading 3s ease-out infinite; }

.section-loading .progress:after { content: ""; position: absolute; opacity: 0.7; left: 0; right: 0; height: 42px; background-color: #333; z-index: 10; }

@keyframes rote { 0% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); } }

.section-cover .site-name { z-index: 20; position: relative; margin: auto; width: 46%; margin-top: 120px; }

.section-loading .progress { background-image: url("loading.png"); background-repeat: no-repeat; background-size: auto 42px; height: 42px; width: 260px; margin-top: 100px; position: relative; margin-right: auto; margin-left: auto; }

.section-cover .site-name .site-title-yq { opacity: 0; }

.section-cover .site-name .site-subtitle, .section-cover .site-name .site-title { color: #FFF; font-size: 31px; font-weight: bolder; margin-top: -30px; }

.section-cover .site-name .site-subtitle { left: auto; right: 0; top: 130px; opacity: 0; }

.section-cover .site-name .show-subtitle { opacity: 1; -webkit-animation: showsubtitle 0.3s ease-out; animation: showsubtitle 0.3s ease-out; }

.section-cover .btn-enter-box { opacity: 0; }

.section-cover .btn-enter { width: 90px; margin: auto; position: absolute; bottom: 150px; background-color: #fff; border-radius: 3px; font-size: 18px; text-align: center; padding: 8px 20px; color: #fff; opacity: 1; background-image: -webkit-linear-gradient(-75deg, #F44336, #f44333); -webkit-animation: flash 0.5s linear infinite alternate; animation: flash 0.5s linear infinite alternate; left: 50%; transform: translateX(-50%); }

.section-cover .show-btn { opacity: 1; -webkit-animation: showsubtitle 0.3s ease-out; animation: showsubtitle 0.3s ease-out; }

@-webkit-keyframes scaleout { 0% { -webkit-transform: scale(0); }
  100% { -webkit-transform: scale(1);
    opacity: 0; } }

@keyframes scaleout { 0% { transform: scale(0);
    -webkit-transform: scale(0); }
  100% { transform: scale(1);
    -webkit-transform: scale(1);
    opacity: 0; } }
@keyframes scalebig { 0% { transform: scale(1); }
  100% { transform: scale(3); } }

@-webkit-keyframes scalebig { 0% { transform: scale(1); }
  100% { transform: scale(3); } }

@keyframes zoombig { 0% { zoom: 1; }
  100% { zoom: 2; } }

@keyframes shark { 0% { transform: translateY(0); }
  30% { transform: translateY(-1px); }
  50% { transform: translateY(1px); }
  100% { transform: translateY(0); } }

@-webkit-keyframes shark { 0% { -webkit-transform: translateY(0); }
  30% { -webkit-transform: translateY(-1px); }
  50% { -webkit-transform: translateY(1px); }
  100% { -webkit-transform: translateY(0); } }

@keyframes mountain { 0% { left: 0;
    right: 0;
    top: 40%; }
  100% { top: 50%;
    left: -25%;
    right: -25%; } }

@keyframes wave { 0% { opacity: 1;
    transform: scale(1) translateY(0); }
  100% { opacity: .7;
    transform: scale(1.3) translateY(-10px); } }

@-webkit-keyframes wave { 0% { opacity: 1;
    -webkit-transform: scale(1) translateY(0); }
  100% { opacity: .7;
    -webkit-transform: scale(1.3) translateY(-10px); } }

@keyframes rotate { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }

@-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); } }

@keyframes heartbeat { 0% { transform: scale(0.9); }
  100% { transform: scale(1.1); } }

@-webkit-keyframes heartbeat { 0% { -webkit-transform: scale(0.9); }
  100% { -webkit-transform: scale(1.1); } }

@keyframes control { 0% { box-shadow: inset 0 0 12px rgba(255, 251, 251, 0.8); }
  50% { box-shadow: inset 0 0 24px rgba(255, 251, 251, 0.8); }
  100% { box-shadow: inset 0 0 12px rgba(255, 251, 251, 0.8); } }

@-webkit-keyframes control { 0% { -webkit-box-shadow: inset 0 0 12px rgba(255, 251, 251, 0.8); }
  50% { -webkit-box-shadow: inset 0 0 24px rgba(255, 251, 251, 0.8); }
  100% { -webkit-box-shadow: inset 0 0 12px rgba(255, 251, 251, 0.8); } }

@keyframes opacityChenge { 0% { opacity: .3; }
  50% { opacity: .7; }
  100% { opacity: .3; } }

@-webkit-keyframes opacityChenge { 0% { opacity: .3; }
  50% { opacity: .7; }
  100% { opacity: .3; } }

@keyframes scaleReef { 0% { transform: scale(1); }
  50% { transform: scale(1.01); }
  100% { transform: scale(1); } }

@-webkit-keyframes scaleReef { 0% { -webkit-transform: scale(1); }
  50% { -webkit-transform: scale(1.01); }
  100% { -webkit-transform: scale(1); } }

@keyframes shake { 0%, 25%, 50%, 75%, 100% { transform: translateX(5px); }
  12.5%, 37.5%, 62.5%, 87.5% { transform: translateX(-5px); } }

@-webkit-keyframes shake { 0%, 25%, 50%, 75%, 100% { -webkit-transform: translateX(5px); }
  12.5%, 37.5%, 62.5%, 87.5% { -webkit-transform: translateX(-5px); } }

@-webkit-keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  20% { -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1); }
  40% { -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9); }
  60% { opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03); }
  80% { -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97); }
  to { opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  20% { -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1); }
  40% { -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9); }
  60% { opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03); }
  80% { -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97); }
  to { opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@keyframes anglepointer { 0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(90deg); } }

@-webkit-keyframes anglepointer { 0%, 100% { -webkit-transform: rotate(0deg); }
  50% { -webkit-transform: rotate(90deg); } }

@keyframes powerpointer { 0%, 100% { top: 0; }
  50% { top: 100%; } }

@-webkit-keyframes powerpointer { 0%, 100% { top: 0; }
  50% { top: 100%; } }

@keyframes shot { 0% { bottom: -15%; }
  50% { bottom: -20%; }
  100% { bottom: -15%; } }

@-webkit-keyframes shot { 0% { bottom: -15%; }
  50% { bottom: -20%; }
  100% { bottom: -15; } }

@keyframes shell { 0% { opacity: 1;
    bottom: 0;
    transform: scale(1); }
  100% { transform: scale(0.3);
    opacity: 0;
    bottom: 260%; } }

@-webkit-keyframes shell { 0% { opacity: 1;
    bottom: 0;
    -webkit-transform: scale(1); }
  100% { -webkit-transform: scale(0.3);
    opacity: 0;
    bottom: 260%; } }

@keyframes burst { 0% { opacity: .2;
    transform: scale(0.8); }
  100% { opacity: .8;
    transform: scale(1.01); } }

@-webkit-keyframes burst { 0% { opacity: .2;
    -webkit-transform: scale(0.8); }
  100% { opacity: .8;
    -webkit-transform: scale(1.01); } }

@keyframes smoke { 0% { opacity: .3;
    transform: scale(0.3); }
  100% { opacity: 1;
    transform: scale(1); } }

@-webkit-keyframes smoke { 0% { opacity: .3;
    -webkit-transform: scale(0.3); }
  100% { opacity: 1;
    -webkit-transform: scale(1); } }

@keyframes water { 0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.01) translateY(3px); } }

@-webkit-keyframes water { 0%, 100% { -webkit-transform: scale(1) translateY(0); }
  50% { -webkit-transform: scale(1.01) translateY(3px); } }
body.shake { animation: shake linear .4s; }

.page { position: absolute; left: 0; right: 0; bottom: 0; z-index: -3; top: 0; background: linear-gradient(180deg, #0ea7f1, #0b91ec); overflow: hidden;height: 100%;min-height: 100%;}

.page:before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 50%; background: #6aceff; z-index: -2; }

.page:after { content: ""; position: absolute; left: 0; right: 0; top: 41%; background: #0b91ec; bottom: 0; z-index: -1; }

.hidden { display: none !important; }

.beach { position: absolute; left: -3%; right: 0; top: 36%; z-index: 2; }

.beach img { display: block; width: 100%; }

.page.high .beach { transition: linear all .5s; -webkit-transition: linear all .5s; top: 18%; }

.page.high:after { top: 23%; }

.could { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 2; display: block !important; }

.could .item { position: absolute; left: 0; right: 0; top: 0; bottom: 0; transition: linear all 40s; -webkit-transition: linear all 40s; }

.could .item img { display: block; width: 100%; }

#init .title { display: none; position: absolute; left: 15%; right: 15%; top: 8%; z-index: 99; }

#init .title img { width: 100%; display: block; }

#init .mountain { position: absolute; top: 40%; left: 0; right: 0; bottom: 0; z-index: 3; }

#init .mountain.zoom { animation: mountain linear 5s; animation-fill-mode: forwards; -webkit-animation: mountain linear 5s; -webkit-animation-fill-mode: forwards; }

#init .mountain img { display: block; width: 100%; }

#init .info { display: none; position: absolute; left: 10%; right: 10%; top: 44%; width: 80%; z-index: 9; color: #fff; font-size: 3.8vw; line-height: 6vw; text-indent: 1em; text-shadow: 0 0 1px #6aceff; height:18%;width:22em;}

#init .info span{display:inline;float:left;text-indent:0;}

#init .ingo span:first{text-indent:2em;color:#000;}

#init .ship { position: absolute; left: 0; right: 0; top: 60%; z-index: 4; }

#init .ship.scale { animation: scalebig linear 5s; animation-fill-mode: forwards; -webkit-animation: scalebig linear 5s; -webkit-animation-fill-mode: forwards; }

#init .ship.scale img { animation: shark linear 3s infinite; -webkit-animation: shark linear 3s infinite; }

#init .ship img { display: block; width: 20%; margin: 0 auto; }

#init .ship .ripples { position: absolute; left: 35%; right: 35%; z-index: -1; top: 0; bottom: 0; background: url(ripples.png) no-repeat center center; background-size: cover; }

#init .ship .wave { position: absolute; top: 0; bottom: 0; }

#init .wave { position: absolute; left: 0; right: 0; top: 43%; bottom: 10%; z-index: 2; }

#init .wave .item { position: relative; height: 10vh; animation: wave linear 2s infinite; animation-direction: reverse; -webkit-animation: wave linear 2s infinite; -webkit-animation-direction: reverse; }

#init .wave .item:after { content: ""; position: absolute; left: 20%; right: 50%; bottom: 0; top: 0; background: url(wave-left.png) no-repeat; }

#init .wave .item:before { content: ""; position: absolute; left: 50%; right: 20%; bottom: 0; top: 0; background: url(wave-right.png) no-repeat; }

#init .wave img { display: block; }

#init #btn { position: absolute; margin: 0 auto; bottom: 10%; width: 25vw; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); z-index: 9; display: none; }

#init #btn img { display: block; width: 100%; }

#control { position: fixed; left: 10%; bottom: 8%; width: 17vh; height: 17vh; border-radius: 50%; box-shadow: inset 0 0 12px rgba(255, 251, 251, 0.8); z-index: 9; visibility: hidden; display: block; }

#control.show { visibility: visible; }

#control.active { animation: control ease-in-out 1s infinite; }

#control:before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: 2; }

#control.leave .point { top: 4.5vh; }

#control .point { transform-origin: center center; -webkit-transform-origin: center center; position: absolute; left: 6.5vh; width: 4vh; top: 0; bottom: 0%; }

#control .point:after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4vh; width: 4vh; border-radius: 50%; box-shadow: inset 0 0 12px rgba(255, 251, 251, 0.8); }

#control ul { display: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: 0; padding: 0; list-style: none; }

#control ul li { padding: 6px; }

#control ul li:nth-child(1) { position: absolute; top: 0; left: 50%; color: #fff; transform: translateX(-50%); -webkit-transform: translateX(-50%); }

#control ul li:nth-child(2) { position: absolute; right: 0; top: 50%; color: #fff; transform: translateY(-50%); -webkit-transform: translateY(-50%); }

#control ul li:nth-child(3) { position: absolute; bottom: 0; left: 50%; color: #fff; transform: translateX(-50%); -webkit-transform: translateX(-50%); }

#control ul li:nth-child(4) { position: absolute; left: 0; top: 50%; color: #fff; transform: translateY(-50%); -webkit-transform: translateY(-50%); }

.medal { position: absolute; left: 0; right: 0; z-index: 3; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); }

.medal img { display: block; width: 100%; position: relative; z-index: 2; }

.medal:before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: url(medal-bg.png) no-repeat; background-size: 100% 100%; }

.medal:after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: url(medal-light.png) no-repeat; background-size: 100% 100%; animation: rotate 3s linear infinite; -webkit-animation: rotate 3s linear infinite; }

#btnlq { position: absolute; bottom: 10%; left: 0; right: 0; z-index: 332; }

#btnlq img { width: 25%; display: block; margin: 0 auto; }

.result-info { position: absolute; left: 0; right: 0; top:0; bottom: 0; background: url(result.png) no-repeat; background-position: center center; background-size: 100% 100%; z-index: 222; }

.result-info .line { height: 2px; background: radial-gradient(rgba(106, 206, 255, 0.6), #fddf9c); }

.result-info .close { position: absolute; right: 0; top: 0; width: 6vh; height: 6vh; }

.result-info .close img { display: block; width: 100%; }

#share { position: absolute; left: 0; right: 0; bottom: 0; display: none; top: 0; z-index: 299; background: rgba(0, 0, 0, 0.85); }

#share img { display: block; width: 100%; }

#heart { position: absolute; left: 0; right: 0; height: 10vh; }

#heart .item { height: 10vw; width: 10vw; position: relative; float: left; }

#heart .item:before { opacity: 1; content: ''; background: url(heart-l.png) no-repeat 100% 100%; background-size: 100% 100%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; transition: linear all .5s; -webkit-transition: linear all .5s; }

#heart .item:after { content: ""; opacity: 1; position: absolute; background: url(heart-r.png) no-repeat 100% 100%; background-size: 100% 100%; transition: linear all .5s; -webkit-transition: linear all .5s; left: 0; top: 0; bottom: 0; right: 0; }

#heart .item.broken:before { opacity: 0; transform: rotate(-8deg) translateX(-1px) translateY(5px); -webkit-transform: rotate(-8deg) translateX(-1px) translateY(5px); }

#heart .item.broken:after { opacity: 0; transform: rotate(8deg) translateX(1px) translateY(5px); -webkit-transform: rotate(8deg) translateX(1px) translateY(5px); }

.dialog { display: none; position: absolute; left: 0; right: 0; bottom: 0; top: 0; }

#result .beach { position: absolute; top: 0; left: 0; right: 0; }

#result .beach img { display: block; width: 100%; }

#tip { position: absolute; color: #fff; font-size: 12px; line-height: 1.5em; padding: .5em; left: 0; right: 0; bottom: 0; display: block; background: rgba(0, 0, 0, 0.4); }

.boat { position: absolute; bottom: 24%; height: 20%; width: 100%; }

.boat .img { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: 0 auto; width: 8vw; display: block; }

.boat .img img { display: block; width: 100%; }

.boat .img .posi { position: absolute; left: 10%; right: 10%; top: 4vh; bottom: 0; height: 14vh; }

.boat .captain { position: absolute; left: 52%; right: 2%; bottom: 0; top: -50%; }

.boat .other { position: absolute; right: 49%; left: 2%; bottom: 0; top: -50%; }

.boat .bobble { background: url(dialog.png) no-repeat; background-size: 100% 100%; padding: 1em 2em 5em 2em; visibility: hidden; text-align: right; color: #0d9eef;font-size:3.5vw; }

.boat .pic { width: 40%; margin: 0 auto; margin-top: 15px; padding-left: 20px; }

.boat .pic img { display: block; width: 100%; }

#inset { transform: translateX(100%); transition: linear all .3s; -webkit-transform: translateX(100%); -webkit-transition: linear all .3s; }

#inset.active { transform: translateX(0); -webkit-transform: translateX(0); }

#inset:after, #inset:before { display: none; }

#reef:after, #reef:before { display: none; }

#reef .reefs { position: absolute; left: 0; right: 0; top: -100%; bottom: 0; }

#reef .reefs .beach { position: absolute; top: 0; left: 0; right: 0; }

#reef .reefs .beach img { display: block; width: 100%; }

#reef .reefs .water { left: 0; right: 0; top: 0; bottom: 0; animation: water ease 1s infinite; -webkit-animation: water ease 1s infinite; }

#reef .reefs .water img { margin-bottom: 50%; }

#reef .reefs .img { position: relative; }

#reef .reefs .reef { position: absolute; left: 0; bottom: 0; }

#reef .reefs .reef .posi { position: absolute; left: 10%; right: 10%; bottom: 10%; top: 10%; }

#reef .reefs .reef img { width: 100%; display: block; }

#reef .reefs .reef:nth-child(1) { right: 0; top: 20%; width: 25%; left: auto; animation: opacityChenge linear 1s infinite; -webkit-animation: opacityChenge linear 1s infinite; }

#reef .reefs .reef:nth-child(2) { top: 30%; right: 0; width: 25%; left: 30%; animation: scaleReef linear 1s infinite; -webkit-animation: scaleReef linear 1s infinite; }

#reef .reefs .reef:nth-child(3) { left: auto; top: auto; bottom: 20%; right: 0; width: 35%; }

#game { transform: translateX(0); -webkit-transform: translateX(0); z-index: 2; transition: linear all .3s; -webkit-transition: linear all .3s; }

#game.left { transform: translateX(-100%); -webkit-transform: translateX(-100%); }

#boats img { display: block; width: 100%; }

#boats .posi { position: absolute; top: 20%; left: 10%; right: 10%; bottom: 20%; }

#boats .sc { position: absolute; width: 10%; top: 0; bottom: 0; left: 50%; transform: rotate(107deg); -webkit-transform: rotate(107deg); }

#boats .sc .img { position: absolute; left: 0; right: 0; top: 50%; }

#boats .sc .img .posi { transform: rotate(-107deg); -webkit-transform: rotate(-107deg); }

#boats .hd { position: absolute; left: 32%; top: 0; right: 0; width: 10%; bottom: 0; transform: rotate(120deg); -webkit-transform: rotate(120deg); }

#boats .hd .img { position: absolute; left: 0; right: 0; top: 58%; }

#boats .hd .img .posi { transform: rotate(-120deg); -webkit-transform: rotate(-120deg); }

#boats .mc { position: absolute; width: 8%; left: 6%; top: 0; bottom: 0; right: 0; transform: rotate(140deg); -webkit-transform: rotate(140deg); }

#boats .mc .img { position: absolute; left: 0; right: 0; top: 43%; }

#boats .mc .img .posi { transform: rotate(-140deg); -webkit-transform: rotate(-140deg); }

#boats .hw { position: absolute; left: 70%; width: 10%; top: 0; bottom: 0; }

#boats .hw .img { position: absolute; left: 0; right: 0; top: 60%; }

#boats .main { position: absolute; width: 15%; left: 45%; bottom: 5%; }

.water { position: absolute; left: 0; right: 0; top: 55%; bottom: 20%; }

.water img { display: block; width: 100%; }

.water img:nth-child(1) { animation: water linear 1s infinite; -webkit-animation: water linear 1s infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; }

.water img:nth-child(3) { animation: water linear 1s infinite; -webkit-animation: water linear 1s infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; }

#boats { display: none; }

#overview:before, #overview:after, #result:before, #result:after { display: none; }

#loseGame { position: absolute; z-index: 10; left: 0%; right: 0%; top: 0%; bottom: 0%; background: rgba(0, 0, 0, 0.5); }

#loseGame img { display: block; box-sizing: border-box; padding: 40% 10%; width: 100%; }

.component { display: none; }

.component.show { display: block; }

#next { position: absolute; left: 50%; top: 40%; transform: translateX(-50%); -webkit-transform: translateX(-50%); right: 30%; }

#next img { display: block; width: 100%; }

#fight:after { top: 0; bottom: 0; background: url(light.png) no-repeat center center; animation: bounceIn linear 1s; -webkit-animation: bounceIn linear 1s; }

#fight:before { display: none; }

#fight .pirate { position: absolute; left: 45%; right: 45%; top: 15%; transition: linear all .5s; -webkit-transition: linear all .5s; }

#fight .pirate img { display: block; width: 100%; }

#fight.active .pirate { left: 30%; right: 30%; animation: bounceIn linear 1s; -webkit-animation: bounceIn linear 1s; }

#fight #angle { border-radius: 0 100% 0 0; position: absolute; display: none; left: 0; bottom: 0; width: 45vw; height: 45vw; background: url(angle.png); background-size: 100% 100%; }

#fight #angle .pointer { transform-origin: bottom; -webkit-transform-origin: bottom; position: absolute; left: 0; width: 4vw; top: 0; bottom: 0%; animation: anglepointer 1.5s linear infinite; -webkit-animation: anglepointer 1.5s linear infinite; }

#fight #angle .pointer:after { background: url(angle-pointer.png) no-repeat; background-size: 100% 100%; content: ""; position: absolute; left: 0; right: 0; top: 20%; bottom: 5%; }

#fight #angle.pause .pointer { animation-play-state: paused; -webkit-animation-play-state: paused; }

#fight #power { position: absolute; display: none; right: 0; width: 10vw; height: 50vh; bottom: 15%; background: url(power.png); background-size: 100% 100%; }

#fight #power .pointer { background: url(power-pointer.png) no-repeat; background-size: 100% 100%; position: absolute; height: 4vw; left: -4vw; right: 0; }

#fight #power.move .pointer { -webkit-animation: powerpointer 1.5s linear infinite; animation: powerpointer 1.5s linear infinite; }

#fight #power.pause .pointer { animation-play-state: paused; -webkit-animation-play-state: paused; }

#fight .gun { position: absolute; bottom: -15%; left: 42%; right: 42%; display: none; }

#fight .gun img { display: block; width: 100%; margin: 0 auto; }

#fight .gun .shell { position: absolute; bottom: 0; left: 10%; right: 10%; opacity: 0; }

#fight .gun .smoke { position: absolute; left: 15%; right: 15%; bottom: 10%; height: 10vh; z-index: 22; top: -7vh; opacity: 0; }

#fight .gun .smoke.show { animation: smoke ease-in-out 1s; -webkit-animation: smoke ease-in-out 1s; }

#fight .gun.shot { animation: shot ease-in-out .5s; -webkit-animation: shot ease-in-out .5s; }

#fight .gun.shot .shell { animation: shell cubic-bezier(0.11, 0.41, 1, 0.28) 1s; -webkit-animation: shell cubic-bezier(0.11, 0.41, 1, 0.28) 1s; }

#fight .burst { position: absolute; left: 55%; right: 25%; top: 20%; opacity: 0; }

#fight .burst img { display: block; width: 100%; }

#fight .burst.a { animation: burst ease 1s; animation-delay: 1s; animation-fill-mode: forwards; -webkit-animation: burst ease 1s; -webkit-animation-delay: 1s; -webkit-animation-fill-mode: forwards; top: 40%; left: 40%; right: 40%; }

#fight .burst.b { animation: burst ease 1s; animation-delay: 1s; animation-fill-mode: forwards; -webkit-animation: burst ease 1s; -webkit-animation-delay: 1s; -webkit-animation-fill-mode: forwards; }

#fight #btn-btn { width: 8vh; height: 6vh; position: absolute; display: none; right: 19%; bottom: 13%; background: url(btn-btn.png) no-repeat; background-size: contain; }

#medal { position: absolute; display: none; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); }

#message { position: absolute; left: 10%; right: 10%; top: 30%; }

#message img { display: block; width: 100%; }

#message .text { position: absolute; left: 0; right: 0; top: 0; bottom: 0; line-height: 1.5em; color: #0782d6; font-size: 5vw; padding: 2em; }

*{-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;-khtml-user-select: none;user-select: none;}