@charset "UTF-8";

html,
body {
  width: 100vw;
  overflow-x: hidden;
}

body {
  font-family: '微軟正黑體', 'Malgun Gothic', Dotum, Tahoma, sans-serif;
  background: url(../image/brahma_main.jpg) no-repeat 50% 0;
  background-size: cover;
  color: #fff;
  position: relative;
  overflow-x: hidden;
}

* {
  margin: 0px;
  padding: 0px;
}

img {
  height: auto;
}

:focus {
  outline: none;
}

a:hover,
a:active,
a:focus {
  text-decoration: none;
  outline: none;
}

button:focus {
  outline: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

/* header */
#header {
  position: relative;
  background-size: cover;
  height: 100vh;
  padding-top: 50px;
}

#header .title {
  z-index: 7;
  text-align: right;
  margin-top: 2vw;
  margin-right: 20vw;
}

/* header */

/* sidebar */
.fixedBox {
  position: fixed;
  top: 6vw;
  right: 1vw;
  padding: 0;
  overflow: hidden;
  z-index: 999;
  display: flex;
  flex-direction: column;
  transition: 1s all;
  align-items: center;
}

.fixedBox button {
  position: relative;
  border: none;
}

.fixedBox img {
  margin: 0.3vh 0;
}

.gift:hover {
  filter: drop-shadow(2px 4px 6px black)
}

.fixedBox>a,
.fixedBox button,
.sideBtn ul>li>a,
.button01,
.button02,
.button03 {
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.btn-on {
  position: absolute;
  z-index: 99;
  background-color: #0000;
  right: -40px;
  top: 52%;
  transform: translateY(-50px);
  border-width: 0px 0px 0px 0px;
  transition: .6s all;
}

.sideBtn {
  position: fixed;
  z-index: 999;
  height: 100%;
  background-image: url(../image/brahma_left_bg.png);
  padding: 8vh 3vh 0 2vw;
  text-align: center;
  transition: 1s all;
}

.sideBtn ul {
  padding: 0;
  margin-top: 11vh;
  list-style: none;
}

.sideBtn ul>li {
  margin: 16px 0;
}

.sideBtn ul>li>a {
  display: block;
  padding: 0;
  text-decoration: none;
  position: relative;
}

.sideBtn ul>li>a:hover img,
.sideBtn ul>li>a.active:hover img,
.sideBtn ul>li>a.active:focus img,
.sideBtn ul>li>a.active img {
  outline: none;
  filter: brightness(2);
}

.sideBtn ul>li:hover a::before,
.sideBtn ul>li>a.active::before {
  content: "";
  background: url(../image/brahma_redcircle.png);
  width: 30px;
  height: 29px;
  position: absolute;
  left: -24px;
  top: -2px;
}

.btn-on img {
  transition: 1s all;
  transform: rotate(0deg);
}

.btn-on.open img {
  transform: rotate(-180deg);
}

.sideBtn.off {
  transform: translateX(-100%);
}

/* clean */
.gift,
a.nav-link:hover {
  background: none;
}

.logo {
  display: none;
}

/* clean */

/* sidebar */
#contents {
  padding: 0 2rem 150px;
  text-align: center;
}

.brahmaflex:nth-child(3) .brahmabox img:nth-child(2) {
  margin-left: -135px;
}

.brahmaflex-4:nth-child(3) .brahmabox img:nth-child(2) {
  margin-left: 0px;
}

.brahmaflex {
  margin-top: 10vh;
  position: relative;
}

.brahmaflex-4 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0vh;
  position: relative;
}

.chapic01,
.chapic03,
.chapic05 {
  position: absolute;
  right: 2vw;
  bottom: -10vw;
}

.chapic02,
.chapic04,
.chapic06 {
  position: absolute;
  left: 6vw;
  bottom: -4vw;
}

.chapic04 {
  left: -4vw;
}

.chapic05 {
  right: 4vw;
  bottom: -8vw;
}

.member {
  background: transparent url(../image/brahma_ss1.png) no-repeat 0 0;
}

.member:hover {
  background: transparent url(../image/brahma_ss1_h.png) no-repeat 0 0;
}

.download {
  background: transparent url(../image/brahma_ss2.png) no-repeat 0 0;
}

.download:hover {
  background: transparent url(../image/brahma_ss2_h.png) no-repeat 0 0;
}

.event {
  background: transparent url(../image/brahma_ss3.png) no-repeat 0 0;
}

.event:hover {
  background: transparent url(../image/brahma_ss3_h.png) no-repeat 0 0;
}

.member,
.download,
.event {
  width: 121px;
  height: 130px;
  display: block;
}

.member,
.download,
.event,
.member:hover,
.download:hover,
.event:hover {
  background-size: contain;
}

.button01,
.button02,
.button03 {
  position: absolute;
  background: transparent url(../image/brahma_btn.png) no-repeat 0 0;
  width: 202px;
  height: 181px;
  border: none;
  z-index: 999;
  background-size: contain;
}

.button01:hover,
.button02:hover,
.button03:hover {
  background: transparent url(../image/brahma_btn_h.png) no-repeat 0 0;
  background-size: contain;
}

.button01 {
  left: 35%;
  bottom: 0%;
}

.button02 {
  right: 36%;
  bottom: 0%;
}

.button03 {
  left: 36%;
  bottom: 16%;
}

.brahmaflex img:nth-of-type(2) {
  filter: drop-shadow(0 0 8px rgba(47, 39, 39, 0.3));
}

.brahmabox img {
  margin-bottom: 2rem;
}

.brahmabox {
  box-shadow: outset 0px 0px 10px 4px #260e0e40;
  padding: 2vw;
}

.brahmabox table {
  border-collapse: collapse;
  width: 100%;
  margin: 3vh 0;
}

.brahmabox table,
.brahmabox table th,
.brahmabox table td {
  text-align: center;
  border: 1px solid #552323;
  padding: 8px;
}

.brahmabox table th {
  color: #ee462a;
  font-size: 1.2rem;
}

.brahmabox table td:first-child {
  width: 30%;
}

.brahmabox ul {
  padding-left: 10px;
  /* Modifier Letter Minus Sign */
  list-style-type: "\2212";
  text-align: left;
  line-height: 2rem;
}

/* modal */
button.close {
  opacity: 1;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 70px;
  height: 70px;
  font-size: 70px;
  font-weight: lighter;
  color: #bd2130;
  text-shadow: none;
  overflow: hidden;
  cursor: pointer;
  border: solid 1px #bd2130;
  border-radius: 70px;
  z-index: 9;
}

button.close:hover {
  opacity: 1;
  background-color: #bd2130;
  color: #000000;
}

button.close span {
  display: block;
  margin-top: -6px;
}

.modal-dialog {
  opacity: 0;
}

.show .modal-dialog {
  opacity: 1;
  transition: all .5s ease-in-out;
}

/* modal */

@media (max-width: 1440px) {

  @media (max-height: 850px) {
    #header {
      position: relative;
      background-size: cover;
      height: 120vh;
    }
  }

  @media (max-height: 700px) {
    #header {
      position: relative;
      background-size: cover;
      height: 140vh;
    }
  }

  #header .title {
    margin-top: 8vw;
  }

  .title img {
    width: 20vw;
  }

  #contents {
    background-size: cover !important;
    position: relative;
    z-index: 2;
    padding: 0;
    text-align: center;
  }

  .brahmaflex {
    margin-top: 0vh;
    margin-bottom: 1rem;
  }

  .brahmaflex:nth-of-type(even) .brahmabox img:last-of-type {
    margin-left: -20%;
  }

  .chapic01 img,
  .chapic02 img,
  .chapic03 img,
  .chapic04 img,
  .chapic05 img,
  .chapic06 img {
    width: 30vw;
  }

  .chapic01,
  .chapic03,
  .chapic05 {
    right: -2vw;
    bottom: 0vw;
  }

  .chapic02,
  .chapic04,
  .chapic06 {
    left: 0vw;
    bottom: 6vw;
  }

  .chapic04 {
    left: -2vw;
  }

}

@media (max-width: 1030px) {

  .chapic01,
  .chapic02,
  .chapic03,
  .chapic04,
  .chapic05,
  .chapic06 {
    display: none;
  }

  .brahmaflex:first-of-type .brahmabox img:last-of-type {
    margin-left: -6%;
  }

  .brahmaflex:nth-of-type(even) .brahmabox img:last-of-type {
    margin-left: -70%;
  }

  .button01,
  .button02 {
    right: auto;
    left: 6%;
  }

  .button03 {
    left: auto;
    bottom: 20%;
    right: 20%;
  }
}

@media (max-width: 850px) {
  .fixedBox {
    top: 10vw;
  }

  .member,
  .download,
  .event {
    width: 80px;
    height: 90px;
  }

  .fixedBox img {
    width: 20vw;
  }

  .brahmaflex {
    margin-top: 0rem;
  }

  .brahmabox img:last-of-type {
    width: 160%;
  }

  .button01,
  .button02,
  .button03 {
    width: 140px;
    height: 120px;
  }
}

@media (max-width: 480px) {
  button.close {
    width: 50px;
    height: 50px;
    font-size: 50px;
  }

  #header {
    height: 60vh;
  }

  .fixedBox {
    top: 60vw;
  }

  .fixedBox img {
    width: 20vw;
  }

  .sideBtn {
    padding: 8vh 1vh 0 6vw;
  }

  .sideBtn ul {
    margin-top: 0vh;
  }

  .brahmabox img:first-of-type {
    width: 100%;
  }

  .button01,
  .button02,
  .button03 {
    width: 90px;
    height: 80px;
  }

}

@media (max-width: 300px) {

  .member,
  .download,
  .event {
    width: 60px;
    height: 70px;
  }

  .brahmaflex:nth-of-type(even) .brahmabox img:last-of-type {
    margin-left: -60%;
  }

  .brahmaflex:nth-child(3) .brahmabox img:nth-child(2) {
    margin-left: -24%;
  }

  .button01,
  .button02 {
    bottom: -4%;
  }

  .button03 {
    right: 0%;
  }
}