@charset "UTF-8";
#pd-nav.single-pd .sub-nav-con .btn-black-empty {
  display: none; }

#pd-nav.single-pd .sub-nav-con .sub-nav {
  margin-right: 0px !important; }

.island-content {
  display: none; }

#ocean {
  position: relative;
  height: 1200px;
  background-position: top center;
  z-index: 10;
  /* 上下漂浮 */
  /* 縮放律動感 */
  /* 縮放律動感2 */ }
  #ocean .title {
    width: 100%;
    position: relative;
    max-width: 420px;
    margin: 120px auto 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 10; }
    #ocean .title img {
      width: 100%;
      max-width: 400px; }
  #ocean .container {
    position: absolute;
    bottom: 60px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    z-index: 45;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
  #ocean .j01 {
    width: 215px;
    height: auto;
    position: absolute;
    z-index: 32;
    left: 48%;
    top: 330px;
    -webkit-animation: pulse 3s ease-in-out infinite;
    animation: pulse 3s ease-in-out infinite;
    opacity: 0; }
  #ocean .j02 {
    width: 120px;
    height: 140px;
    position: absolute;
    z-index: 32;
    top: 410px;
    left: 79%;
    -webkit-animation: pulse2 5s ease-in-out infinite;
    animation: pulse2 5s ease-in-out infinite;
    opacity: 0; }

@-webkit-keyframes float {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  50% {
    -webkit-transform: translate(-1000px, -100px);
    transform: translate(-1000px, -100px); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes float {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  50% {
    -webkit-transform: translate(-1000px, -100px);
    transform: translate(-1000px, -100px); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@-webkit-keyframes pulse {
  0%, 100% {
    -webkit-transform: scaleX(1) scaleY(1);
    transform: scaleX(1) scaleY(1); }
  50% {
    -webkit-transform: scaleX(1.05) scaleY(1.05);
    transform: scaleX(1.05) scaleY(1.05); }
  80% {
    -webkit-transform: scaleX(1) scaleY(1);
    transform: scaleX(1) scaleY(1); } }

@keyframes pulse {
  0%, 100% {
    -webkit-transform: scaleX(1) scaleY(1);
    transform: scaleX(1) scaleY(1); }
  50% {
    -webkit-transform: scaleX(1.05) scaleY(1.05);
    transform: scaleX(1.05) scaleY(1.05); }
  80% {
    -webkit-transform: scaleX(1) scaleY(1);
    transform: scaleX(1) scaleY(1); } }

@-webkit-keyframes pulse2 {
  0%, 100% {
    -webkit-transform: translate(-50%, -50%) translateY(0px);
    transform: translate(-50%, -50%) translateY(0px);
    -webkit-transform: scaleX(1) scaleY(1);
    transform: scaleX(1) scaleY(1); }
  25% {
    -webkit-transform: translate(-50%, -50%) translateY(-15px) translateX(10px);
    transform: translate(-50%, -50%) translateY(-15px) translateX(10px);
    -webkit-transform: scaleX(1.05) scaleY(1.1);
    transform: scaleX(1.05) scaleY(1.1); }
  50% {
    -webkit-transform: translate(-50%, -50%) translateY(-5px) translateX(-5px);
    transform: translate(-50%, -50%) translateY(-5px) translateX(-5px);
    -webkit-transform: scaleX(1) scaleY(1);
    transform: scaleX(1) scaleY(1); }
  75% {
    -webkit-transform: translate(-50%, -50%) translateY(-20px) translateX(15px);
    transform: translate(-50%, -50%) translateY(-20px) translateX(15px);
    -webkit-transform: scaleX(1.05) scaleY(1.1);
    transform: scaleX(1.05) scaleY(1.1); } }

@keyframes pulse2 {
  0%, 100% {
    -webkit-transform: translate(-50%, -50%) translateY(0px);
    transform: translate(-50%, -50%) translateY(0px);
    -webkit-transform: scaleX(1) scaleY(1);
    transform: scaleX(1) scaleY(1); }
  25% {
    -webkit-transform: translate(-50%, -50%) translateY(-15px) translateX(10px);
    transform: translate(-50%, -50%) translateY(-15px) translateX(10px);
    -webkit-transform: scaleX(1.05) scaleY(1.1);
    transform: scaleX(1.05) scaleY(1.1); }
  50% {
    -webkit-transform: translate(-50%, -50%) translateY(-5px) translateX(-5px);
    transform: translate(-50%, -50%) translateY(-5px) translateX(-5px);
    -webkit-transform: scaleX(1) scaleY(1);
    transform: scaleX(1) scaleY(1); }
  75% {
    -webkit-transform: translate(-50%, -50%) translateY(-20px) translateX(15px);
    transform: translate(-50%, -50%) translateY(-20px) translateX(15px);
    -webkit-transform: scaleX(1.05) scaleY(1.1);
    transform: scaleX(1.05) scaleY(1.1); } }
  #ocean .ocean-blue {
    width: 608px;
    height: 425px;
    position: absolute;
    top: 266px;
    left: 668px;
    z-index: 30;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    opacity: 0; }
  #ocean .white-g {
    opacity: 0.2;
    z-index: 1 !important; }
  #ocean .container-text {
    position: absolute;
    top: 56%;
    left: 39%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 936px;
    height: 1186px;
    z-index: 25; }
    #ocean .container-text .goggles, #ocean .container-text .white-g {
      width: 100%;
      max-width: 936px;
      height: auto;
      position: absolute;
      top: -270px;
      margin-top: 0;
      left: 78%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, 0); }
    #ocean .container-text .white-g {
      z-index: 1 !important; }
    #ocean .container-text .goggles {
      z-index: 30; }
  #ocean .container-img {
    position: absolute;
    top: 8%;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    z-index: 35;
    width: 80%;
    height: 100vh; }
    #ocean .container-img .place {
      width: 120px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
      #ocean .container-img .place .circle {
        width: 75px;
        border-radius: 50%;
        -webkit-box-shadow: 1px 8px 8px 0px rgba(54, 94, 151, 0.7);
        box-shadow: 1px 8px 8px 0px rgba(54, 94, 151, 0.7);
        cursor: pointer; }
      #ocean .container-img .place .text {
        width: 150px; }
    #ocean .container-img .p01 {
      position: absolute;
      top: 20px;
      left: 100px; }
      #ocean .container-img .p01 .circle {
        -webkit-animation: scaleAnimation 0.8s ease-in-out infinite alternate;
        animation: scaleAnimation 0.8s ease-in-out infinite alternate; }
    #ocean .container-img .p02 {
      position: absolute;
      top: 410px;
      left: 80px; }
      #ocean .container-img .p02 .circle {
        -webkit-animation: scaleAnimation 1.5s ease-in-out infinite alternate;
        animation: scaleAnimation 1.5s ease-in-out infinite alternate; }
    #ocean .container-img .p03 {
      position: absolute;
      right: 90px;
      top: 50px; }
      #ocean .container-img .p03 .circle {
        -webkit-animation: scaleAnimation 0.7s ease-in-out infinite alternate;
        animation: scaleAnimation 0.7s ease-in-out infinite alternate; }
    #ocean .container-img .p04 {
      position: absolute;
      right: -110px;
      top: 335px; }
      #ocean .container-img .p04 .circle {
        -webkit-animation: scaleAnimation 1.1s ease-in-out infinite alternate;
        animation: scaleAnimation 1.1s ease-in-out infinite alternate; }
    #ocean .container-img .p05 {
      position: absolute;
      right: 110px;
      top: 595px; }
      #ocean .container-img .p05 .circle {
        -webkit-animation: scaleAnimation 2s ease-in-out infinite alternate;
        animation: scaleAnimation 2s ease-in-out infinite alternate; }
    #ocean .container-img .manta {
      width: 120px;
      position: absolute;
      right: -110px;
      top: 470px; }
    #ocean .container-img .turtle {
      width: 120px;
      position: absolute;
      top: 220px;
      left: 170px; }
    #ocean .container-img .whale-shark {
      width: 120px;
      position: absolute;
      top: 620px;
      left: 140px; }
    #ocean .container-img .line-left-01 {
      width: 130px;
      height: auto;
      position: absolute;
      top: 140px;
      left: 30px;
      opacity: 1; }
    #ocean .container-img .line-left-02 {
      width: 230px;
      height: auto;
      position: absolute;
      top: 530px;
      left: -60px;
      opacity: 1; }
    #ocean .container-img .line-right-01 {
      width: 230px;
      height: auto;
      position: absolute;
      top: 78px;
      right: -125px;
      opacity: 1;
      -webkit-transform: rotate(9deg);
      -ms-transform: rotate(9deg);
      transform: rotate(9deg); }
    #ocean .container-img .line-right-02 {
      width: 132px;
      height: auto;
      position: absolute;
      top: 355px;
      right: 40px;
      opacity: 1;
      -webkit-transform: rotate(22deg);
      -ms-transform: rotate(22deg);
      transform: rotate(22deg); }

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

@keyframes scaleAnimation {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2); } }
  #ocean .text {
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
    #ocean .text h2,
    #ocean .text p, #ocean .text .tag {
      color: #ffffff; }
    #ocean .text h2 {
      font-size: 48px;
      font-weight: normal;
      margin-top: 10px; }
    #ocean .text h4 {
      font-size: 24px;
      margin-bottom: 0;
      text-shadow: 0px 1px 10px #398EE0;
      font-family: 'Roboto';
      width: 80%;
      line-height: 1.4 !important; }
    #ocean .text p {
      width: 70%;
      text-shadow: 0px 1px 10px #398EE0; }
    #ocean .text img {
      max-width: 250px; }
  #ocean .text-link {
    color: #D3EFFD;
    text-decoration: underline; }
  #ocean .text-link:hover {
    color: #042f65;
    -webkit-transition: all 0.6s;
    -o-transition: all 0.6s;
    transition: all 0.6s; }
  #ocean .link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    justify-self: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 10px; }
    #ocean .link a {
      margin: 0 5px;
      margin-top: 20px; }
  #ocean .ocean-bg {
    position: absolute;
    top: 0%;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    background-image: url(../images/ocean-kv.jpg);
    background-size: cover;
    opacity: 1;
    width: 100%;
    background-position: top center;
    z-index: 1;
    height: 1400px; }

.fancybox-inner .fancybox-stage .fancybox-slide .ocean-place, .island-content .ocean-place {
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }
  .fancybox-inner .fancybox-stage .fancybox-slide .ocean-place a img, .island-content .ocean-place a img {
    width: 13px;
    margin-bottom: 0;
    margin-right: 3px; }
  .fancybox-inner .fancybox-stage .fancybox-slide .ocean-place h2, .island-content .ocean-place h2 {
    color: #141B35;
    font-size: 36px;
    margin-bottom: 5px;
    text-transform: uppercase; }
  .fancybox-inner .fancybox-stage .fancybox-slide .ocean-place h4, .island-content .ocean-place h4 {
    color: #141B35;
    margin-bottom: 10px; }
  .fancybox-inner .fancybox-stage .fancybox-slide .ocean-place p, .island-content .ocean-place p {
    color: #555555;
    font-size: 16px;
    width: 85%;
    margin: 0 auto 15px auto; }
  .fancybox-inner .fancybox-stage .fancybox-slide .ocean-place .content, .island-content .ocean-place .content {
    position: absolute;
    bottom: 95px;
    left: 0;
    right: auto;
    width: 100%;
    height: 30%; }
  .fancybox-inner .fancybox-stage .fancybox-slide .ocean-place .bg, .island-content .ocean-place .bg {
    background-size: cover;
    opacity: 1;
    width: 100%;
    background-position: center center;
    z-index: 1;
    height: 50%;
    position: absolute;
    left: 0;
    top: 0; }
  .fancybox-inner .fancybox-stage .fancybox-slide .ocean-place .manta, .island-content .ocean-place .manta {
    position: absolute;
    z-index: 20;
    width: 120px;
    top: 335px;
    right: 30px; }
  .fancybox-inner .fancybox-stage .fancybox-slide .ocean-place .turtle, .island-content .ocean-place .turtle {
    position: absolute;
    z-index: 20;
    width: 120px;
    top: 260px;
    left: 20px; }
  .fancybox-inner .fancybox-stage .fancybox-slide .ocean-place .whale-shark, .island-content .ocean-place .whale-shark {
    position: absolute;
    z-index: 20;
    width: 120px;
    top: 0px;
    right: 80px; }

.fancybox-inner .fancybox-stage .fancybox-slide .date, .island-content .date {
  background-image: url(../images/date-bg.png);
  background-size: cover;
  position: absolute;
  top: 43.5%;
  z-index: 10;
  left: 50%;
  -webkit-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  width: 90px;
  height: 90px; }
  .fancybox-inner .fancybox-stage .fancybox-slide .date h3, .island-content .date h3 {
    color: #ffffff;
    padding: 0;
    line-height: 1.2 !important;
    margin-top: 18px;
    font-size: 21px; }

.fancybox-inner .fancybox-stage .fancybox-slide #place-all .bg, .island-content #place-all .bg {
  background-image: url(../images/place-bg-all.jpg);
  height: 50vh; }

.fancybox-inner .fancybox-stage .fancybox-slide #place-all .longtext-tw, .island-content #place-all .longtext-tw {
  position: relative;
  z-index: 20;
  width: 45%; }

.fancybox-inner .fancybox-stage .fancybox-slide #place-id .bg, .island-content #place-id .bg {
  background-image: url(../images/place-bg-id.jpg); }

.fancybox-inner .fancybox-stage .fancybox-slide #place-id .longtext-tw, .island-content #place-id .longtext-tw {
  position: relative;
  z-index: 20;
  width: 60%; }

.fancybox-inner .fancybox-stage .fancybox-slide #place-th .bg, .island-content #place-th .bg {
  background-image: url(../images/place-sea.jpg); }

.fancybox-inner .fancybox-stage .fancybox-slide #place-th .longtext-tw, .island-content #place-th .longtext-tw {
  position: relative;
  z-index: 20;
  width: 40%; }

.fancybox-inner .fancybox-stage .fancybox-slide #place-kr .bg, .island-content #place-kr .bg {
  background-image: url(../images/place-bg-kr.jpg); }

.fancybox-inner .fancybox-stage .fancybox-slide #place-kr .longtext-tw, .island-content #place-kr .longtext-tw {
  position: relative;
  z-index: 20;
  width: 40%; }

.fancybox-inner .fancybox-stage .fancybox-slide #place-tw .bg, .island-content #place-tw .bg {
  background-image: url(../images/place-bg-tw.jpg); }

.fancybox-inner .fancybox-stage .fancybox-slide #place-tw .longtext-tw, .island-content #place-tw .longtext-tw {
  position: relative;
  z-index: 20;
  width: 50%; }

.fancybox-inner .fancybox-stage .fancybox-slide #place-ph .bg, .island-content #place-ph .bg {
  background-image: url(../images/place-sea.jpg); }

.fancybox-inner .fancybox-stage .fancybox-slide #place-ph .longtext-tw, .island-content #place-ph .longtext-tw {
  position: relative;
  z-index: 20;
  width: 40%; }

.fancybox-inner .fancybox-stage .fancybox-slide .btn-white-empty, .island-content .btn-white-empty {
  border: 1px solid #000000 !important;
  color: #000000 !important; }

.fancybox-navigation .fancybox-button--arrow_right {
  right: 30px !important;
  padding: 0 !important;
  background-color: transparent !important; }

.fancybox-navigation .fancybox-button--arrow_left {
  left: 30px !important;
  padding: 0 !important;
  background-color: transparent !important; }

.fancybox-navigation .fancybox-button {
  background-clip: content-box;
  height: 70px;
  opacity: 1 !important;
  position: absolute;
  top: calc(50% - 50px);
  width: 70px;
  border-radius: 0 !important;
  opacity: 1 !important; }

.fancybox-infobar {
  font-size: 24px !important;
  top: 30px !important;
  left: 50% !important;
  padding: 0 !important; }

.fancybox-can-swipe .fancybox-content {
  height: 85%;
  max-height: 750px; }

@media (min-width: 2300px) and (max-width: 2560px) {
  #ocean .container-text .goggles, #ocean .container-text .white-g {
    left: 77.2%; }
  #ocean .ocean-blue {
    left: 663px; }
  #ocean .container-text {
    left: 42%; } }

@media (max-width: 1680px) {
  #ocean .container-img {
    width: 85%;
    left: 48%; }
  #ocean .container-text {
    top: 58%;
    left: 37%; }
  .fancybox-can-swipe .fancybox-content {
    height: 85%;
    min-height: 620px;
    max-height: 800px; }
  .fancybox-infobar {
    font-size: 18px !important;
    top: 20px !important;
    left: 50% !important; }
  .fancybox-content {
    padding: 20px 44px; }
  .fancybox-inner .fancybox-stage .fancybox-slide .ocean-place .turtle, .island-content .ocean-place .turtle,
  .fancybox-inner .fancybox-stage .fancybox-slide .ocean-place .manta, .island-content .ocean-place .manta,
  .fancybox-inner .fancybox-stage .fancybox-slide .ocean-place .whale-shark, .island-content .ocean-place .whale-shark {
    width: 100px; } }

@media (max-width: 1600px) {
  #ocean {
    height: 100vh;
    min-height: 980px; }
    #ocean .title {
      max-width: 350px;
      margin: 90px auto 0 auto; }
    #ocean .container {
      bottom: 70px; }
    #ocean .container-text {
      top: 170px;
      left: 38%;
      width: 710px;
      height: auto; }
      #ocean .container-text .goggles, #ocean .container-text .white-g {
        max-width: 936px;
        top: -300px;
        left: 78%; }
    #ocean .ocean-blue {
      width: 65%;
      height: auto;
      top: 105px;
      left: 507px; }
    #ocean .j01 {
      width: 155px;
      height: auto;
      left: 48%;
      top: 160px; }
    #ocean .j02 {
      width: 90px;
      height: auto;
      top: 210px;
      left: 79%; }
    #ocean .text p {
      width: 60%;
      font-size: 14px; }
    #ocean .text h4 {
      font-size: 21px;
      width: 60%;
      margin-bottom: 0; }
  .fancybox-can-swipe .fancybox-content {
    height: 88%; }
  .fancybox-infobar {
    top: 10px !important; }
  .fancybox-inner .fancybox-stage .fancybox-slide .ocean-place h2 {
    font-size: 40px;
    margin-bottom: 0; }
  .fancybox-inner .fancybox-stage .fancybox-slide .ocean-place p {
    font-size: 14px;
    width: 92%; }
  .fancybox-inner .fancybox-stage .fancybox-slide .ocean-place .manta {
    width: 100px;
    top: 260px;
    right: 30px; }
  .fancybox-inner .fancybox-stage .fancybox-slide .ocean-place .turtle {
    width: 100px;
    top: 230px;
    left: 20px; }
  .fancybox-inner .fancybox-stage .fancybox-slide .ocean-place .whale-shark {
    width: 100px;
    top: 10px;
    right: 80px; }
  .fancybox-inner .fancybox-stage .fancybox-slide .ocean-place .content, .island-content .ocean-place .content {
    bottom: 80px; } }

@media (max-width: 1440px) {
  #ocean {
    min-height: 900px; }
    #ocean .title {
      max-width: 320px;
      margin: 50px auto 0 auto; }
    #ocean .container-img .place .circle {
      width: 60px; }
    #ocean .container-img .place .text {
      width: 150px; }
    #ocean .container-text {
      top: 110px; }
    #ocean .container {
      bottom: 50px; }
    #ocean .link a {
      font-size: 14px !important; }
  #ocean .container-img .p02 {
    position: absolute;
    top: 320px;
    left: 60px; }
  #ocean .container-img .p03 {
    position: absolute;
    right: 75px;
    top: 20px; }
  #ocean .container-img .p04 {
    position: absolute;
    right: -79px;
    top: 270px; }
  #ocean .container-img .p05 {
    position: absolute;
    right: 105px;
    top: 435px; }
  #ocean .container-img .line-left-01 {
    width: 110px;
    height: auto;
    top: 80px;
    left: 45px; }
  #ocean .container-img .line-left-02 {
    width: 190px;
    top: 450px;
    left: -60px; }
  #ocean .container-img .line-right-01 {
    width: 160px;
    top: 88px;
    right: -42px; }
  #ocean .container-img .line-right-02 {
    width: 92px;
    top: 272px;
    right: 50px; }
  #ocean .container-img .whale-shark {
    width: 100px;
    top: 540px;
    left: 110px; }
  #ocean .container-img .turtle {
    width: 100px;
    top: 180px;
    left: 140px; }
  #ocean .container-img .manta {
    width: 100px;
    right: -53px;
    top: 460px; }
  .fancybox-inner .fancybox-stage .fancybox-slide .ocean-place h2 {
    font-size: 32px; }
  .fancybox-inner .fancybox-stage .fancybox-slide .ocean-place h4, .island-content .ocean-place h4 {
    font-size: 18px; }
  .fancybox-inner .fancybox-stage .fancybox-slide .ocean-place p, .island-content .ocean-place p {
    width: 92%;
    font-size: 13px; }
  .fancybox-can-swipe .fancybox-content {
    height: 85%;
    min-height: 550px;
    max-height: 720px; }
  .fancybox-inner .fancybox-stage .fancybox-slide .ocean-place .content, .island-content .ocean-place .content {
    bottom: 75px; } }

@media (max-width: 1368px) {
  #ocean {
    min-height: 950px; }
    #ocean .bg {
      background-size: cover; }
    #ocean .text p {
      width: 50%; }
  .fancybox-inner .fancybox-stage .fancybox-slide .ocean-place p {
    font-size: 12px; }
  .fancybox-slide .btn-size-default {
    font-size: 13px !important; }
  .fancybox-inner .fancybox-stage .fancybox-slide .ocean-place h2 {
    font-size: 32px;
    margin-bottom: 0; }
  .fancybox-inner .fancybox-stage .fancybox-slide .ocean-place .turtle {
    width: 80px;
    top: 160px;
    left: 20px; }
  .fancybox-inner .fancybox-stage .fancybox-slide .ocean-place .whale-shark {
    width: 80px;
    top: 10px;
    right: 80px; }
  .fancybox-inner .fancybox-stage .fancybox-slide .ocean-place .manta {
    width: 80px;
    top: 191px;
    right: 30px; }
  .fancybox-can-swipe .fancybox-content {
    height: 88%;
    min-height: 400px;
    max-height: 650px; }
  .fancybox-inner .fancybox-stage .fancybox-slide .date, .island-content .date {
    width: 70px;
    height: 70px; }
  .fancybox-inner .fancybox-stage .fancybox-slide #place-tw .longtext-tw, .island-content #place-tw .longtext-tw {
    width: 40%; }
  .fancybox-inner .fancybox-stage .fancybox-slide .date h3, .island-content .date h3 {
    font-size: 16px; }
  .fancybox-infobar {
    font-size: 16px !important;
    top: 10px !important;
    left: 50% !important; } }

@media (max-width: 1280px) {
  .fancybox-can-swipe .fancybox-content {
    height: 85%;
    min-height: 400px;
    max-height: 600px; }
  #ocean .title {
    max-width: 270px;
    margin: 70px auto 0 auto; }
  #ocean .container-img {
    width: 91%;
    left: 48%; }
  #ocean .container-text {
    left: 38%; }
  #ocean .container-img {
    width: 95%;
    left: 46%; }
  .fancybox-inner .fancybox-stage .fancybox-slide .ocean-place .turtle {
    top: 190px; } }

@media (max-width: 1024px) {
  #pd-nav.single-pd .sub-nav-con .btn-black-empty {
    display: none; }
  #ocean {
    height: 50vh;
    min-height: 940px; }
    #ocean .bg {
      background-size: cover; }
    #ocean .text h4 {
      font-size: 18px; }
    #ocean .container {
      bottom: 45px; }
    #ocean .container-text {
      left: 34%; }
    #ocean .container-img {
      width: 93%;
      left: 46%; }
  .fancybox-can-swipe .fancybox-content {
    height: 75%;
    min-height: 400px;
    max-height: 700px; }
  .fancybox-inner .fancybox-stage .fancybox-slide .ocean-place .turtle {
    width: 100px;
    top: 300px;
    left: 20px; }
  .fancybox-inner .fancybox-stage .fancybox-slide .ocean-place .manta {
    width: 100px;
    top: 380px;
    right: 30px; }
  .fancybox-inner .fancybox-stage .fancybox-slide .ocean-place .whale-shark {
    width: 100px;
    top: 10px;
    right: 80px; }
  .fancybox-inner .fancybox-stage .fancybox-slide .date, .island-content .date {
    width: 90px;
    height: 90px; }
  .fancybox-inner .fancybox-stage .fancybox-slide .date h3, .island-content .date h3 {
    font-size: 20px; }
  #ocean .container-img .p05 {
    position: absolute;
    right: 45px;
    top: 385px; }
  .fancybox-inner .fancybox-stage .fancybox-slide #place-all .bg, .island-content #place-all .bg {
    max-height: 600px; } }

@media (max-width: 820px) {
  #ocean {
    height: 50vh;
    min-height: 840px; }
    #ocean .container {
      bottom: 50px; }
  #ocean .container-text {
    width: 520px;
    top: 210px;
    left: 36%; }
  #ocean .ocean-blue {
    width: 65%;
    height: auto;
    top: -5px;
    left: 372px; }
  #ocean .j01 {
    width: 105px;
    height: auto;
    left: 48%;
    top: 40px; }
  #ocean .j02 {
    width: 70px;
    height: auto;
    top: 80px;
    left: 79%; }
  #ocean .container-img .line-right-02 {
    width: 92px;
    top: 322px;
    right: 13px;
    -webkit-transform: rotate(1deg);
    -ms-transform: rotate(1deg);
    transform: rotate(1deg); }
  #ocean .container-img .p04 {
    position: absolute;
    right: -64px;
    top: 270px; }
  #ocean .container-img .p05 {
    position: absolute;
    right: 5px;
    top: 515px; }
  #ocean .container-img .place .circle {
    width: 50px; }
  #ocean .container-img .place .text {
    width: 120px; }
  #ocean .container-img .turtle {
    width: 100px;
    top: 160px;
    left: 90px; }
  .fancybox-inner .fancybox-stage .fancybox-slide #place-kr .longtext-tw,
  .fancybox-inner .fancybox-stage .fancybox-slide #place-ph .longtext-tw,
  .fancybox-inner .fancybox-stage .fancybox-slide #place-th .longtext-tw, .island-content #place-kr .longtext-tw,
  .island-content #place-ph .longtext-tw,
  .island-content #place-th .longtext-tw {
    width: 90%; }
  #ocean .text {
    width: 80%; }
    #ocean .text h4 {
      font-size: 18px;
      width: 70%;
      line-height: 1.4 !important; }
    #ocean .text p {
      width: 70%;
      font-size: 14px; }
  #ocean .container {
    z-index: 30; }
  .fancybox-infobar {
    left: 45% !important; } }

@media (max-width: 768px) {
  .fancybox-can-swipe .fancybox-content {
    max-height: 700px; }
  #ocean .container {
    bottom: 50px; }
  #ocean .container-img {
    width: 95%;
    left: 45%; }
  #ocean .text p {
    width: 70%;
    font-size: 13px; }
  #ocean .text h4 {
    font-size: 16px;
    width: 65%; } }

@media (max-width: 599px) {
  #pd-nav a.buy-now.mobile {
    display: none;
    margin-right: 10px; }
  .pc-version {
    display: none !important; }
  #ocean {
    height: 1450px;
    min-height: 1000px;
    max-height: 1600px; }
    #ocean .container {
      bottom: auto;
      top: 420px; }
    #ocean .title {
      max-width: 250px;
      margin: 60px auto 0 auto; }
    #ocean .container-text {
      width: 100%;
      top: 260px;
      left: 24%; }
    #ocean .ocean-bg {
      background-image: url(../images/ocean-kv-mobile.jpg);
      background-size: cover;
      height: 1500px; }
    #ocean .text {
      width: 100%; }
      #ocean .text p {
        width: 90%;
        font-size: 14px; }
      #ocean .text h4 {
        font-size: 16px;
        margin-bottom: 0;
        width: 90%;
        line-height: 1.4 !important; }
    #ocean .ocean-blue {
      width: 65%;
      height: auto;
      top: -54px;
      left: 307px; }
    #ocean .j01 {
      width: 100px;
      height: auto;
      left: 48%;
      top: -20px; }
    #ocean .j02 {
      width: 60px;
      height: auto;
      top: 11px;
      left: 79%; }
    #ocean .text-link {
      margin-top: 700px !important; }
    #ocean .link a {
      font-size: 14px !important; }
  #ocean .link .main-link {
    display: none; }
  .island-content > * {
    min-width: 330px;
    /* 子元素的寬度 */ }
  .island-content {
    width: auto;
    height: 640px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    position: relative;
    top: 545px;
    margin-left: 15px;
    padding-right: 15px;
    z-index: 60;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    /* 啟用平滑滾動（適用於 iOS） */ }
    .island-content .ocean-place {
      text-align: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      height: 600px;
      width: 380px;
      background: #ffffff;
      border-radius: 15px;
      z-index: 50;
      margin: 0 10px;
      position: relative; }
      .island-content .ocean-place a img {
        width: 13px;
        margin-bottom: 0;
        margin-right: 3px; }
      .island-content .ocean-place h2 {
        font-size: 32px;
        margin-bottom: 0; }
      .island-content .ocean-place p {
        width: 100%;
        font-size: 13px;
        white-space: normal;
        line-height: 1.5 !important;
        margin: 0 auto 5px auto; }
      .island-content .ocean-place .content {
        position: absolute;
        top: 165px;
        left: auto;
        width: 90%; }
      .island-content .ocean-place .bg {
        background-size: cover;
        opacity: 1;
        width: 100%;
        height: 320px;
        position: absolute;
        left: 0;
        top: 0; }
      .island-content .ocean-place .manta {
        position: absolute;
        z-index: 20;
        width: 60px;
        top: 165px;
        right: 30px; }
      .island-content .ocean-place .turtle {
        position: absolute;
        z-index: 20;
        width: 60px;
        top: 130px;
        left: 20px; }
      .island-content .ocean-place .whale-shark {
        position: absolute;
        z-index: 20;
        width: 60px;
        top: 10px;
        right: 60px; }
    .island-content #place-all {
      display: none; }
    .island-content #place-id, .island-content #place-th, .island-content #place-kr, .island-content #place-tw, .island-content #place-ph {
      position: relative;
      overflow: hidden; }
      .island-content #place-id .bg, .island-content #place-th .bg, .island-content #place-kr .bg, .island-content #place-tw .bg, .island-content #place-ph .bg {
        height: 160px;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-transform: translate(0, 0%);
        -ms-transform: translate(0, 0%);
        transform: translate(0, 0%); }
      .island-content #place-id .longtext-tw, .island-content #place-th .longtext-tw, .island-content #place-kr .longtext-tw, .island-content #place-tw .longtext-tw, .island-content #place-ph .longtext-tw {
        position: relative;
        z-index: 20;
        width: 95%;
        max-width: 280px;
        margin-bottom: 10px; }
      .island-content #place-id .link, .island-content #place-id a, .island-content #place-th .link, .island-content #place-th a, .island-content #place-kr .link, .island-content #place-kr a, .island-content #place-tw .link, .island-content #place-tw a, .island-content #place-ph .link, .island-content #place-ph a {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        margin-top: 10px;
        font-size: 12px !important; }
    .island-content .btn-white-empty {
      border: 1px solid #000000 !important;
      color: #000000 !important; }
  .fancybox-inner .fancybox-stage .fancybox-slide .date, .island-content .date,
  .fancybox-inner .fancybox-stage .fancybox-slide #place-id .date, .island-content #place-id .date {
    width: 70px;
    height: 70px;
    top: 80px;
    right: -20px;
    left: auto; }
    .fancybox-inner .fancybox-stage .fancybox-slide .date h3, .island-content .date h3,
    .fancybox-inner .fancybox-stage .fancybox-slide #place-id .date h3, .island-content #place-id .date h3 {
      font-size: 15px; }
  .island-content #place-id .longtext-tw {
    max-width: 290px;
    width: 100%; }
  .fancybox-inner .fancybox-stage .fancybox-slide .ocean-place h4, .island-content .ocean-place h4 {
    font-size: 16px; }
  .fancybox-inner .fancybox-stage .fancybox-slide #place-ph .content, .fancybox-inner .fancybox-stage .fancybox-slide #place-ph .island-content,
  .fancybox-inner .fancybox-stage .fancybox-slide #place-th .content,
  .fancybox-inner .fancybox-stage .fancybox-slide #place-th .island-content, .island-content #place-ph .content, .island-content #place-ph .island-content,
  .island-content #place-th .content,
  .island-content #place-th .island-content {
    bottom: auto;
    margin-top: 30px;
    width: 90%; } }

@media (min-width: 530px) and (max-width: 540px) {
  #ocean .container-text .goggles, #ocean .container-text .white-g {
    max-width: 936px;
    top: -380px;
    left: 430px; }
  #ocean .ocean-blue {
    left: 395px;
    top: -72px; }
  #ocean .j01 {
    width: 130px;
    height: auto;
    left: 267px;
    top: -30px; }
  #ocean .j02 {
    width: 70px;
    height: auto;
    top: 11px;
    left: 81%; }
  #ocean .container {
    bottom: auto;
    top: 460px; }
  #ocean .text-link {
    margin-top: 720px !important; } }

@media (max-width: 430px) {
  #ocean .ocean-blue {
    top: -72px;
    left: 288px; }
  #ocean .j01 {
    top: -40px; }
  #ocean .j02 {
    top: -16px; } }

@media (max-width: 390px) {
  #ocean .ocean-blue {
    top: -78px;
    left: 279px; }
  #ocean .j01 {
    width: 95px;
    left: 47%;
    top: -44px; }
  #ocean .j02 {
    width: 60px;
    height: auto;
    top: -20px;
    left: 79%; }
  #ocean .container {
    bottom: auto;
    top: 390px; }
  #ocean .link a {
    font-size: 12px !important; }
  #ocean .text-link {
    margin-top: 710px !important; } }

@media (max-width: 375px) {
  .island-content > * {
    min-width: 300px; }
  #ocean {
    height: 1370px; }
    #ocean .ocean-blue {
      top: -85px;
      left: 269px; }
    #ocean .j01 {
      top: -60px; }
    #ocean .j02 {
      top: -30px; }
    #ocean .link a {
      font-size: 12px !important; }
    #ocean .text-link {
      margin-top: 630px !important; }
  #ocean .container-text .goggles {
    left: 78.5%; }
  .island-content .ocean-place {
    height: 560px; }
  .island-content .ocean-place h2 {
    font-size: 28px; }
  .fancybox-inner .fancybox-stage .fancybox-slide .ocean-place h4, .island-content .ocean-place h4 {
    font-size: 16px; }
  .island-content .ocean-place p {
    font-size: 12px; }
  .island-content .ocean-place .content {
    top: 170px; }
  .island-content {
    height: 590px; }
  #ocean .text-link {
    margin-top: 650px !important; } }

@media (max-width: 360px) {
  #ocean {
    height: 1280px; }
    #ocean #ocean .ocean-bg {
      height: 1420px; }
  #ocean .container-text .goggles, #ocean .container-text .white-g {
    max-width: 936px;
    top: -290px;
    left: 280px; }
  #ocean .ocean-blue {
    top: -86px;
    left: 256px; }
  #ocean .text p {
    width: 90%;
    font-size: 12px; }
  #ocean .j01 {
    width: 85px;
    left: 47%;
    top: -61px; }
  #ocean .j02 {
    width: 50px;
    top: -30px;
    left: 79%; }
  #ocean .container {
    bottom: auto;
    top: 360px; }
  .island-content > * {
    min-width: 280px; }
  .island-content {
    top: 470px; }
  .island-content .ocean-place p {
    font-size: 12px; }
  .island-content .ocean-place h2 {
    font-size: 28px;
    margin-top: 0; }
  .island-content .ocean-place .turtle {
    top: 130px; }
  .island-content .ocean-place .manta {
    top: 170px;
    right: 10px; }
  .island-content .ocean-place .whale-shark {
    top: 10px;
    right: 30px; }
  .island-content .ocean-place {
    height: 570px; }
  .fancybox-inner .fancybox-stage .fancybox-slide .ocean-place h4, .island-content .ocean-place h4 {
    font-size: 14px; }
  #ocean .text-link {
    margin-top: 630px !important; } }

@media (max-width: 320px) {
  #ocean {
    height: 1300px; }
    #ocean .title {
      max-width: 180px; }
    #ocean .ocean-blue {
      top: -106px;
      left: 236px;
      width: 64%; }
    #ocean .j01 {
      width: 75px;
      left: 50%;
      top: -80px; }
    #ocean .j02 {
      width: 47px;
      top: -60px;
      left: 80%; }
    #ocean .text h4 {
      font-size: 16px; }
    #ocean .container {
      bottom: auto;
      top: 320px; }
    #ocean .text-link {
      margin-top: 650px !important;
      width: 100%; }
  #ocean .container-text .goggles, #ocean .container-text .white-g {
    max-width: 936px;
    top: -290px;
    left: 258px; }
  .island-content {
    top: 470px;
    margin-left: 10px; }
  .island-content > * {
    min-width: 255px; }
  .island-content .ocean-place h2 {
    font-size: 22px;
    margin-top: 0; }
  .fancybox-inner .fancybox-stage .fancybox-slide .ocean-place h4, .island-content .ocean-place h4 {
    font-size: 14px; }
  .island-content .ocean-place p {
    margin-bottom: 0; }
  .island-content .ocean-place .content {
    position: absolute;
    top: 200px;
    left: auto;
    width: 90%; }
  .island-content .ocean-place {
    height: 560px; }
  .island-content #place-id .bg, .island-content #place-th .bg, .island-content #place-kr .bg, .island-content #place-tw .bg, .island-content #place-ph .bg {
    height: 180px; }
  .island-content .ocean-place .turtle {
    top: 150px; }
  .island-content .ocean-place .manta {
    top: 190px;
    right: 10px; }
  .island-content .ocean-place p {
    font-size: 11px; }
  .fancybox-inner .fancybox-stage .fancybox-slide .date, .island-content .date, .fancybox-inner .fancybox-stage .fancybox-slide #place-id .date, .island-content #place-id .date {
    width: 70px;
    height: 70px;
    top: 100px;
    right: -30px;
    left: auto; }
  .island-content #place-id .link, .island-content #place-id a,
  .island-content #place-th .link, .island-content #place-th a,
  .island-content #place-kr .link, .island-content #place-kr a,
  .island-content #place-tw .link, .island-content #place-tw a,
  .island-content #place-ph .link, .island-content #place-ph a {
    margin-top: 5px;
    font-size: 11px !important; } }