/* 自訂樣式 ----------------------------------------------------- */
/* CSS 原生變數 */
:root{
    /* 主題色 */
    --happy: #fdd000 !important;
    --tuk: #69e147 !important;
    --orange_bg: #fb8b40 !important;
    --blue_text: #2581ff !important;
    --blue_bg: #4e45fd !important;
    --black_bg: #070707 !important;

    /* 黑色透明 */
    --black25: rgba(0, 0, 0, 0.25) !important;
    --black50: rgba(0, 0, 0, 0.5) !important;
    --black75: rgba(0, 0, 0, 0.75) !important;

   /* 白色透明 */
    --white25: rgba(255, 255, 255, 0.25) !important;
    --white50: rgba(255, 255, 255, 0.5) !important;
    --white75: rgba(255, 255, 255, 0.75) !important;

   /* 陰影 */
    --shadow1: 0 0 5px var(--black25) !important;
    --shadow2: 0 0 10px var(--black50) !important;
    --shadow3: 0 0 15px var(--black75) !important;

   /* 內距、外距級數 */
    --s0: 0 !important;
    --s1: 0.25rem !important;
    --s2: 0.5rem !important;
    --s3: 1rem !important;
    --s4: 1.5rem !important;
    --s5: 3rem !important;
}

/* body -------------------------------------------------------- */
body {
  font-family: 'Noto Sans TC', sans-serif;
}

#section01,
#section02,
#section03,
#section04 {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* section:nth-child(even){
  background-color: rgb(82, 81, 81);
}

section:nth-child(odd){
  background-color: #ccc;
} */

a {
  text-decoration:none !important;
}
ul,li{
  list-style: none;
  margin: var(--s0);
  padding: var(--s0);
}

/* header------------------------------------------------------- */
#navigation{
  height: 120px;
  width: 100%;
  background-color: var(--black_bg);
  display: flex;
  align-items: center;
  position: absolute;
  z-index: 999;
}

#navigation .menu{
  display: flex;
}

#navigation .menu li{
  font-size: 2rem;
  padding: var(--s1);
}

#navigation .menu li a{
  display: inline-block;
  color: white;
  text-shadow: 0px 0px 10px #fff, 0px 0px 10px #fff;

}


#navigation .menu li a:hover{
  display: inline-block;
  color: var(--happy);
  text-shadow: 0px 0px 10px  var(--happy), 0px 0px 10px  var(--happy);
}

.fa-slash{
  transform: rotate(51deg);
  color: rgb(146, 146, 146);
  text-shadow: 0px 0px 10px #fff;

}
#navigation .nav_title{
  position: absolute;
  z-index: 100;
  right: 50%;
  transform: translatex(50%);
}

#navigation .nav_icon{
  position: absolute;
  z-index: 200;
  right: 0;
}
#navigation .nav_icon img{
  width: 80px;
}

#navigation .nav_icon img:hover{
  width: 80px;
  -webkit-filter: brightness(1.2);
}
/* sidebar------------------------------------------------------ */
#sidebar{
  width: 60px;
  height: 100vh;
  position: fixed;
  right: 0;
  z-index: 800;
}

.sidebar_img{
  position: relative;
  height: 250px;
  top:calc((100vh - 250px )/ 2);
  float: right;
}

#sidebar:hover{
-webkit-filter: brightness(1.2);
}
/* footer------------------------------------------------------- */
#footer{
  padding: var(--s1) 0;
  background-color: var(--black_bg);
  float: botton;
  color: white;
  font-weight: 100;
}

#footer p {
  margin: var(--s0);
}

#footer .tuk{
  font-style: italic;
  font-weight: bolder;
  color: var(--tuk);
  margin-right: var(--s1);
}
/* section01-section06 */
#section01,
#section02,
#section0 {
  height: 100vh;
}

#section03{
  height: 100%;
}

#section04{
  height: 100%;
  margin-bottom: 2rem;
  overflow: visible;
}
/* section0 */
#section0{
  width: 100vw;
  position: fixed;
  z-index: -100;
  background-image: url(../img/bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
}
/* section01 */
#mp4{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  /* opacity: 0.5; */
}

.video{
  width: 80%;
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  object-fit: cover;
  /* -webkit-filter:brightness(0.5); */
  left: 0;
  top: 50px;
}

.video-container{
  position:relative;
  padding-bottom:56.25%;
  /* padding-top:30px; */
  height:100%;
  width: 100%;
  overflow:hidden;
  }
  
  .video-container iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

  
.modal-content{
  background-color: #000 !important;
}
.modal-header {
  padding:0 !important;
}
.modal-header{
  padding: 0 !important;
  border-bottom:unset !important
}
.modal-img1{
  background-size: contain;
  background-repeat: no-repeat;
  width: 1200px;
  height: 880px;
  background-image: url(../img/stamp01.png);
}
.modal-img{
  background-size: contain;
  background-repeat: no-repeat;
  width: 1200px;
  height: 880px;
  background-image: url(../img/stamp02.png);
}

.btn:focus {
  outline: unset;
  box-shadow: unset;
}

.close{
  color: #fff ;
  font-size: 2rem;
  line-height: 1.5 !important;
  z-index: 999;
  padding: 0rem 1rem !important;
  margin: -0.8rem -1rem -1rem auto !important;
  position: absolute;
    right: 0px;
    top: 0px;
}
.close:hover{
  color: #333 ;
}

.close:focus{
outline: unset !important;
}

.video:focus{
  outline: unset !important;
}




#logo{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#logo img{
  width: 28%;
}




#happytuk-logo{
  margin-bottom: 2rem;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#happytuk-logo img{
  width: 20%;
}

#sponsor{
  width: 100%;
  height: 150px;
  /* background-color: var(--black25); */
  position: absolute;
  bottom: -50px;
  right: 0;
  font-weight: 500;;
}

#sponsor p{
  text-align: center;
  font-size: 1.5rem;
  color: #000;
  margin-bottom: 0 !important;
}

/* .icon{
  margin-top: 0.5rem;
} */
#sponsor .icon img{
  margin:0 0;
}

#sponsor::before{
  content: "";
  position: absolute;
  bottom:30px;
  right: 2%;
  background-image: url(../img/happy.png);
  background-repeat: no-repeat;
  height: 438px;
  width: 693px;
  animation-name:oxxo;
  animation-duration:1s;
  animation-iteration-count: 2;
}


#sponsor::after{
  content: "";
  position: absolute;
  bottom:10px;
  left: 10%;
  background-image: url(../img/tuk.png);
  background-repeat: no-repeat;
  height: 617px;
  width: 702px;
  animation-name:vina;
  animation-duration:1s;
  animation-iteration-count: 2;
}

@keyframes oxxo{
  0%{
    right:2%;
  }
  50%{
    right:1%;
  }
  100%{
  right:2%;
}
}

@keyframes vina{
  0%{
    left: 10%;
  }
  50%{
    left:8%;
  }
  100%{
    left:10%;
}
}
.container{
  /* background-color: var(--black50); */
  width: 100%;
  height: 100%;
}
.title{
  margin-top: var(--s5);
  text-align: center;
}

.title img{
  width: 40%;
}

.title_down{
  align-self: start;
  z-index: 100;
}

.carousel-control-next{
  opacity: 1;
  -webkit-filter: brightness(1) !important;
}
.carousel-control-prev{
  opacity: 1;
  -webkit-filter: brightness(1) !important;
}
.carousel-control-prev:hover{
  opacity: 1;
  -webkit-filter: brightness(1.1) !important;
}
.carousel-control-next:hover{
  opacity: 1;
  -webkit-filter: brightness(1.1) !important;
}
.img1{
  position: absolute;
  bottom: 0;
  left: -20%;
  width: 46%;
  }
  
  .img2{
    position: absolute;
    bottom:-20%;
    right: -12%;
    width: 37%;
    }
  
  .img3{
    position: absolute;
    bottom: -90%;
    left: 8%;
    width: 28%;
  }
  
  .img4{
    position: absolute;
    bottom: -88%;
    width: 25%;
    right: 33%;
  }

  .coser1{
    position: absolute;
    top: 500px;
    left: -120px;
    color: var(--blue_text);
    font-style: italic;
    font-weight: 900;
    -webkit-text-stroke: 1px rgb(0, 0, 0);
    text-shadow: 3px 3px #fff,-3px -3px #fff,3px -3px #fff,-3px 3px #fff;
    font-size: 2rem;
  }

  .coser2{
    position: absolute;
    top:500px;
    left: 680px;
    color: var(--blue_text);
    font-style: italic;
    font-weight: 900;
    -webkit-text-stroke: 1px rgb(0, 0, 0);
    text-shadow: 3px 3px #fff,-3px -3px #fff,3px -3px #fff,-3px 3px #fff;
    font-size: 2rem;
  }

  .img5{
    position: absolute;
    bottom: -100%;
    left: 10%;
    width: 35%;
  }
  
  .img6{
    position: absolute;
    bottom: -100%;
    width: 35%;
    right: 10%;
  }

  .img1-1{
    position: absolute;
    bottom: -20%;
    left: -10%;
    width: 60%;
    }
    
    .img2-1{
      position: absolute;
      bottom: 0;
      right: -10%;
      width: 50%;
      }
.text-01{
  width: 75%;
}
  .h1-01{
    color: var(--blue_text);
    font-style: italic;
    font-weight: 900;
    -webkit-text-stroke: 2px rgb(0, 0, 0);
    text-shadow: 3px 3px #fff,-3px -3px #fff,3px -3px #fff,-3px 3px #fff;
    font-size: 4rem;
  }

  .h3-01{
    color: var(--happy);
    font-weight: 900;
    -webkit-text-stroke: 2px rgb(0, 0, 0);
    text-shadow: 1px 1px #000,-1px -1px #000,1px -1px #000,-1px 1px #000;
    font-size: 2.5rem;
  }

  .p-01{
    color:white;
    text-shadow: var(--black50) 1px 1px 2px;
    font-size: 1.5rem;
    margin-top: 2rem !important;
    width: %;
  }

  .people{
    width: 17%;
    margin-bottom: 10px;
  }
/* section02--------------------------------------------------- */
#carouselExampleIndicators{
  margin-top: 100px;
}

.left{
  transform: translateX(-200px);
}

.right{
  transform: translateX(200px);
}

.carousel-indicators {
  position: absolute;
  display: flex;
  justify-content: center;
  right: 0;
  top: -40px;
  left: 0;
  z-index: 15;
  padding: 0;
  margin:0 4rem ;
}

.carousel-indicators li {
  width: 210px;
  height: 60px;
  background-color: #fff;
  border: none !important;
  border-radius: 5px;
  box-shadow: 0 0 0 2px var(--orange_bg), 0 0 0 6px black;
  opacity: 1 !important;
  color: #000;
  font-size:1.8rem;
  text-indent: 1px !important;
  text-align: center;
  line-height: 3.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin:0 1rem;
}

.carousel-indicators .active {
  background-color: var(--orange_bg);
  opacity: 1;
  text-shadow: 1.5px 1.5px 0 white, -1.5px -1.5px 0 white;
  font-weight: 900;
  -webkit-text-stroke: 0.5px rgb(255, 255, 255);
}
.carousel-caption-1{
  bottom: -3%;
  left: 2%;
  margin-bottom: 0 !important;
}
.carousel-caption-2{
   bottom: 45%;
}

.carousel-caption-3{
  bottom: 50%;
}

.carousel-inner{
  border-radius: 30px;
  border: solid black 0.5rem;
  box-shadow: 20px 20px 0 black;
}
/* section03 */
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  color: white;
  background-color: var(--blue_bg);
  border-color:var(--blue_bg);
}
.nav-item a{
  color: var(--blue_bg);
  background-color: white;
  border: 0.2rem solid var(--blue_bg) !important;
  border-bottom: unset !important;
}

.nav-tabs{
  border-bottom: unset;
}

.nav-tabs li{
  margin-right: var(--s2);
  width: 150px;
  text-align: center;
  font-size: 1.5rem;
}

.tab-content{
  height: 70vh;
  border: var(--blue_bg) 0.5rem solid;
  border-top:var(--blue_bg) 0.2rem solid;
  background-color: white;
  border-radius: 0 30px 30px 30px;
  box-shadow: 20px 20px 0 var(--black25);
}

.h1-03{
  font-size: 4.2rem;
  color: var(--blue_text);
  font-style: italic;
  font-weight: 900;
  /* -webkit-text-stroke: 2px rgb(0, 0, 0); */
  text-shadow: 3px 3px var(--happy),-3px -3px var(--happy),3px -3px var(--happy),-3px 3px var(--happy);
  line-height: 5.5rem;
  border-bottom:5px var(--blue_text) solid ;
  box-shadow: var(--happy)0px 3px ;
}

.h3-03{
  color: var(--happy);
  font-weight: 900;
    -webkit-text-stroke: 1px rgb(0, 0, 0);
    text-shadow: 1px 1px #000,-1px -1px #000,1px -1px #000,-1px 1px #000;
    font-size: 2.5rem;
    letter-spacing: 0.1rem;
    line-height: 3.5rem;
}
.h3-03-1{
  color: white;
  font-weight: 300;
  text-shadow:none !important;
  -webkit-text-stroke:2px rgb(255, 255, 255) !important;
}

.h3-03-2{
  color: black;
   font-weight: 700;
   /* -webkit-text-stroke: 1px rgb(0, 0, 0); */
   /* text-shadow: 1px 1px #000,-1px -1px #000,1px -1px #000,-1px 1px #000; */
   font-size: 1rem;
   letter-spacing: 0.1rem;
   /* line-height: 3.5rem; */
}

.li-03 li{
  font-size: 0.1rem;
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.h6-03{
  font-size: 1.8rem;
  margin-left: 1.8rem;
}
.h6-03-1{
  font-weight: 400;
  font-size: 1.3rem;
  margin-left: 1.8rem;
  margin-bottom: 1rem;
}
.map{
  width: 600px;
  height: 400px;
  position: relative;
}

.iframe{
align-self: e;
}
.zoom{
  display: inline-block;
  cursor: zoom-in;
}
.zoom-s{
  display:none;
}
#target{
	position: absolute;
	right:0;
	bottom: 0;
	height: 500px;
	width: 1000px;
  border: 3px solid black;
  visibility: hidden;
  overflow: visible;
  margin-right: 1rem;
  background-color: #fff;
}
.store{
  width: 100%;
}
.store01 img{
  width: 90% !important;
}
.store02{
  cursor: zoom-in;
  margin: 0 !important;
  margin-top: 1rem !important;
}
.store02 img{
  width: 100% !important;
}

.store3{
  display: none;
}
.store>img{
  border: black 1.5px solid;
}

.prize>img{
  border: black 1.5px solid;
}

.owl-nav{
  z-index: 9999;
  position: absolute;
  left: 45%;
  top: 20%;
  /* transform: translateY(-200px); */
}
.owl-nav button{
  margin: 0 1rem !important;
}

.owl-nav button:focus{
  outline: unset;
}

.owl-prev,.owl-next{
font-size: 5rem !important;

}


/* section04 */
.owl-item > div {
  cursor: pointer;
  margin: 6% 8%;
  transition: margin 0.4s ease;
}
.owl-item.center > div {
  margin: 0;
  pointer-events: none !important;
  cursor:none;
}

.owl-item .row{
  display: none!important;
}
.owl-item.center .row{
  display: flex !important;
}
.center{
  -webkit-filter:brightness(2);
}

.char_img{
  -webkit-filter:brightness(0.5);
}

.owl-item:not(.center) > div:hover {
  opacity: .75;
}

.owl-item{
  z-index: 1;
}
.owl-item.center{
  z-index: 0;
}
.owl-carousel .owl-stage-outer{
  overflow:visible;
  height: 100vh;
}
.char_bg{
  position: absolute;
  width: 100vw;
  height: 800px;
  left: 50%;
  top: 48%;
  transform: translate(-50%,0%);
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  transition: 1s all;
  -webkit-filter:brightness(0.5);
}
.owl-item.center .char_bg{
  opacity: 1;
  transition: 3.5s all;
}


/* 回到頂端 */
#go_top_page {
  width: 50px;
  height: 50px;
  background:rgba(100, 100, 100, 0.8);
  border-radius: 50%;
  position: fixed;
  right: 20px;
  bottom: 0;
  z-index: 9999;
  box-shadow: inset 0 0 0 2px rgb(255, 255, 255), inset 0 0 0 4px rgb(255, 255, 255);
}

#go_top_page a {
  display: block;
  font-size: 1.5rem;
  text-align: center;
  line-height: 50px;
  color: white;
  text-decoration: none;
}

.text04{
  z-index: 100 !important;
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.img04{
  width: 100%;
  max-width: 100%;
  z-index: 80 !important;
  position: absolute;
  bottom: 0;
  margin-bottom: 5rem;
  pointer-events: none;
}
.button04{
  margin-top: 2.5rem;
}
.button04 a{
  z-index: 999;
  color: #000;
  text-shadow: 3px 3px #fff ,-3px -3px #fff,3px -3px #fff,-3px 3px #fff;
}
.button04 img{
  pointer-events: auto;
  width: 40% !important;
  margin: auto !important;
  position: relative;
}

.button04 h1{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  line-height: 5rem;
}

.h1-04{
  font-size: 4.1rem;
  color:var(--blue_text);
  font-weight: 900;
  -webkit-text-stroke: 2px rgb(0, 0, 0);
  text-shadow: 3px 3px #fff,-3px -3px #fff,3px -3px #fff,-3px 3px #fff;
  margin-bottom: 1rem;
  font-style: italic;
}

.h1-04-1{
  font-size: 3.5rem !important;
}

.h3-04{
  font-size: 2.5rem;
  color:var(--happy);
  font-weight: 900;
  -webkit-text-stroke: 1px rgb(0, 0, 0);
  text-shadow: 1px 1px #000,-1px -1px #000,1px -1px #000,-1px 1px #000;
  letter-spacing: 0.1rem;
  line-height: 3.5rem;
  margin-left: 0.5rem;
}

.p-04{
  font-weight: bold;
  font-size: 1.8rem;
  color: rgb(77, 37, 3);
  line-height: 2.5rem;
  margin-top: 0px !important;
  letter-spacing: 0rem;
}

.p-04-1{
  line-height: 2.6rem !important;
}



/* @media------------------------------------------------------- */
/* 575px 以下 */
@media(max-width: 575px){
  /* slidebar */
  .sidebar_img{
    height: 150px;
    top:calc((100vh - 150px )/ 2);
    float: right;
  }
  /* header */
  #navigation{
    height: 130px;
    justify-content: center;
    align-items: center;
    flex-direction: column-reverse;
  }
  #navigation .nav_title{
    position: relative;
    right:unset;
    transform: unset;
  }
  
  #navigation .nav_icon{
    position: relative;
    z-index: 880;
  }

  
  #navigation .nav_icon img{
    width: 60px;
  }
  
  #navigation .menu li{
    font-size: 1.3rem;
    padding: var(--s1);
  }
  
  #navigation .menu li:hover{
  -webkit-filter: brightness(1.5);
  }

  /* section01-section04 */
  #section01 {
    height: 100vh;
  }

  #section03{
    height: calc( 70vh + 200px );
  }

  #section02,#section04{
    height: 700px;
  }
  /* section01 */
  .video{
    object-fit: cover;
      top: 50px;
  }

  .modal-dialog-centered {
    min-height: calc(100% - 20rem) !important;
}

  #logo img{
    width: 90%;
  }

  .h2-button{
    font-size: 1.1rem !important;
    padding: 0 !;
  }
  
  
#sponsor{
  width: 100%;
  height: 150px;
  /* background-color: var(--black25); */
  position: absolute;
  bottom: -70px;
  right: 0;
  font-weight: 500;;
}

  #sponsor p{
    font-size: 1.5rem;
  }

  /* .icon{
    margin-top: 0.6rem;
  } */
  
#logo img{
  width: 70%;
}
  #sponsor .icon img{
    width: 20%;
    margin-top: 0rem;
  }

  #sponsor::before{
    bottom:250px;
    right: 3%;
    background-size: contain;
    height: 70.8px;
    width: 110.72px;
  }
  
  
  #sponsor::after{
    bottom:250px;
    left: 3%;
    background-size: contain;
    height: 98.72px;
    width: 112.32px;
  }
  @keyframes oxxo{
    0%{
      right:3%;
    }
    50%{
      right:1%;
    }
    100%{
    right:3%;
  }
  }
@keyframes vina{
  0%{
    left: 3%;
  }
  50%{
    left:1%;
  }
  100%{
    left:3%;
}}
.main-bg{
  /* width: 800%;
  height: 800%;
  max-width: 1000%; */
}
  .title{
    margin-top: var(--s4);
  }
  .title img{
    width: 70%;;
  }

  .title_down img{
    height: 70px;
  }

  .img01{
    position: absolute;
    bottom:-50%;
    left: -60%;
    width: 100%;
    }
    
    .img02{
      position: absolute;
      bottom:-50%;
      right: -50%;
      width: 100%;
      }
      .text-01{
        width: 100%;
      }
      .h1-01{
        font-size: 2.1rem;
      }

      .h3-01{
        font-size: 1.8rem;
        -webkit-text-stroke: 1px rgb(0, 0, 0);
        /* letter-spacing: 0.15rem; */
      }

      .p-01{
        width: 100%;
        font-size: 1.2rem;
      }

      .p-01-1{
        display: none ;
      }
      
      .img1{
        position: absolute;
        bottom: 0%;
        left: -20%;
        width: 78%;
        }
        
        .img2{
          position: absolute;
          bottom: -15%;
          right:  -18%;
          width: 66%;
          }

      .img3{
        position: absolute;
        bottom:-85%;
        left: 15%;
        width: 38%;
        min-width: 40% !important;
        min-height: 40% !important;
      }
      
      .img4{
        position: absolute;
        bottom: -85%;
        width: 32%;
        right: 15%;
      }
      .coser1{
        position: absolute;
        top: 400px;
        left: 30px;
        color: var(--blue_text);
        font-style: italic;
        font-weight: 900;
        -webkit-text-stroke: 1px rgb(0, 0, 0);
        text-shadow: 2px 2px #fff,-2px -2px #fff,2px -2px #fff,-2px 2px #fff;
        font-size: 1rem;
      }
    
      .coser2{
        position: absolute;
        top: 400px;
        left: 200px;
        color: var(--blue_text);
        font-style: italic;
        font-weight: 900;
        -webkit-text-stroke: 1px rgb(0, 0, 0);
        text-shadow: 2px 2px #fff,-2px -2px #fff,2px -2px #fff,-2px 2px #fff;
        font-size: 1rem;
      }

      .img5{
        position: absolute;
        bottom:-60%;
        left: 5%;
        width: 40%;
        min-width: 40% !important;
        min-height: 40% !important;
      }
      
      .img6{
        position: absolute;
        bottom: -60%;
        width: 40%;
        right: 5%;
      }

      .img1-1{
        position: absolute;
        bottom: -20%;
        left: -20%;
        width: 100%;
        z-index: 5;
        }
        
        .img2-1{
          position: absolute;
          bottom:0;
          right: -20%;
          width: 70%;
          z-index: 4;
          }

          .people{
            margin: auto;
            margin-bottom: 1px;
            min-height: 25% !important;
            min-width: 25% !important;
            width: 12%;
          }

          .btn{
            width: 50%;
            padding-top: 0.8rem;
          }

          .btn h2{
            font-size: 1.2rem;
          }

/* section02---------------------------------------- */
.carousel-indicators {
  margin: 0;
}
.carousel-inner{
  height: 480px;
}
.carousel-item{
  height: 100%;
}
.carousel-item img:nth-of-type(1){
  min-height: 100%;
  min-width: 100%;
  background-size: cover;
}

.img-bg{
  width: 280% !important;
  right: -50px;
  position: absolute;
}

.img-bg-3{
  min-width: 100%;
  width: 220% !important;
  right: -220px;
  position: absolute;
}

.carousel-caption{
  width: 100%;
  right: 0 !important;
  left: 0 !important;
}

.row1{
  margin-left: 9px !important;
}



.char_bg{
  position: absolute;
  width:300px;
  height: 70vh;
  left: 50%;
  top: 80%;
  transform: translate(-50%,-10%);
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  transition: 1s all;
}

.carousel-indicators li {
  width: 90px;
  height: 50px;
  background-color: #fff;
  border: none !important;
  border-radius: 5px;
  box-shadow: 0 0 0 2px var(--orange_bg), 0 0 0 4px black;
  opacity: 1 !important;
  color: #000;
  font-size:1rem;
  text-indent: 1px !important;
  text-align: center;
  line-height: 1rem;
}
.carousel-caption{
  top: 0.5rem;
}
.carousel-caption h1{
  margin-bottom: 1rem !important;
}
/* section03 */
.tab-content {
  overflow-y: scroll;
}
.nav-tabs li{
  width: 100px;
  font-size: 1.2rem;
}

.nav-tabs a{
padding: 0.5rem;
}

#target{
	position: absolute;
	right:-5%;
	bottom: 0;
	height: 400px;
  width: 300px;
}

.prize img{
  min-width: 30%;
  width: 100%;
}

.btn1{
  display: none;
}

.store img{
  width: 100%;
  min-width: 100%;
}
.store02 img{
  width: 100%;
  min-width: 100%;
}
.store02{
  margin-left: 0!important;
}
.store3{
  display: block;
}
.h1-03{
  font-weight: 900;
  font-size: 3rem;
  font-style: italic;
  line-height: 3rem;
  border-bottom:5px var(--blue_text) solid ;
  padding-bottom:10px;
  text-shadow: 3px 3px var(--happy),-3px -3px var(--happy),3px -3px var(--happy),-3px 3px var(--happy);
}

/* .h1-03-1{
  text-decoration: none;
  border: unset;
  box-shadow: unset ;
} */

.h3-03{
  margin-top: 2rem;
    font-size: 1.65rem;
    letter-spacing: 0rem;
    line-height: 3rem;
}

.h3-03-2{
  color: black;
   font-weight: 700;
   /* -webkit-text-stroke: 1px rgb(0, 0, 0); */
   /* text-shadow: 1px 1px #000,-1px -1px #000,1px -1px #000,-1px 1px #000; */
   font-size: 1.2rem;
   letter-spacing: 0.1rem;
   /* line-height: 3.5rem; */
}

.li-03 li{
  font-size: 0.8rem;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.h6-03{
  font-size: 1.2rem;
  margin-left: 1.8rem;
  margin-top: 0 !important;
  margin-bottom: 1rem;
}

.h6-03-1{
  font-size: 1.2rem;
  margin-left: 1.8rem;
  margin-top: 0 !important;
  margin-bottom: 1rem;
}

.tabpanel{
  overflow-x: hidden;
}
#target{
  display: none;
}

.fa-search-plus{
  display: none;
}

.img04{
  width: 100%;
  max-width: 100%;
  z-index: 80 !important;
  position: absolute;
  bottom: -100px;
  margin-bottom: 2rem;
  pointer-events: none;
}
.owl-nav{
  display: none;
}

/* .owl-nav{
  z-index: 9999;
  position: absolute;
  left: 50%;
  top: 6%;
  transform: translatex(-50%);
}
.owl-nav button{
  margin: 0 1rem !important;
}

.owl-nav button:focus{
  outline: unset;
}

.owl-prev,.owl-next{
font-size: 3rem !important;

} */
/* section04 */
.text04{
  z-index: 100 !important;
  position: absolute;
  top:0;
  left: 0;
  transform: translate(0%, 30%);
  text-align: center;
}
.button04{
  margin-top: 0rem;
}
.button04 img{
  width: 70% !important;
  margin: auto !important;
}
.button04 h1{
  line-height: 3rem;
  font-size: 1rem;

}
.button04 a{
  pointer-events: auto;
  color: #000;
  text-shadow: 1px 1px #fff ,-1px -1px #fff,1px -1px #fff,-1px 1px #fff;
}
.h1-04{
  margin-top: 1rem;
  font-size: 2.6rem;
  color: var(--blue_text);
  font-weight: 900;
  text-shadow: 3px 3px #fff,-3px -3px #fff,3px -3px #fff,-3px 3px #fff;
  margin-bottom: 1rem;
  font-style: italic;
  margin-bottom: 1rem;
}
.h1-04-1{
  font-size:2.4rem !important;
}

.h3-04{
  font-size: 2rem;
  font-weight: 900;
  color:var(--happy);
  text-shadow: 3px 3px black;
  margin-bottom: 2rem;
  -webkit-text-stroke: 1px rgb(0, 0, 0);
  text-shadow: 1px 1px #000,-1px -1px #000,1px -1px #000,-1px 1px #000;
  letter-spacing: 0rem;
  line-height: 2.5rem;
}

.p-04{
  text-align: left;
  font-weight: bold;
  font-size: 1rem;
  color: #000;
  line-height: 1.5rem;
  margin-top: 0px !important;
}

.p-04-1{
  line-height: 1.4rem !important;
  margin-bottom: 1rem;
}
#zoom{
  display: none;
}
.zoom-s{
  display:block ;
}
}


/* lg 992px 以上 */
@media (min-width: 992px) {

}

@media (min-width: 576px){
  .modal-dialog-centered {
      min-height: calc(100% - 39.5rem) !important;
  }
}