/*---- font ----*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Noto+Serif+TC:wght@200..900&display=swap");

/*---- basic ----*/
*,
:after,
:before,
a {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0;
  font-family: "Noto Sans TC", 微軟正黑體, Microsoft JhengHei, Arial, Helvetica,
    sans-serif;
  /*font-family: 'Noto Serif TC', 微軟正黑體, Microsoft JhengHei, Arial, Helvetica, sans-serif;*/
  text-decoration: none;
  outline: none;
}
ul,
ol,
li {
  margin: 0 auto;
  text-align: justify;
}
html,
body {
  box-sizing: border-box;
  position: relative;
  margin: 0 auto;
  width: 100%;
  background: #ffffff;
}
img {
  width: 100%;
  height: auto;
  object-fit: cover;
  vertical-align: middle;
}
.container {
  position: relative;
  margin: 0 auto;
  padding: 0;
  max-width: initial;
}
.btn,
.btn:focus {
  position: relative;
  border: none;
  border-radius: initial;
  display: block;
  margin: 0 auto;
  padding: 0;
  transition: 0.3s;
}
.btn:focus {
  box-shadow: none;
}
.btn:hover {
  filter: brightness(1.2);
}

/*---- scrollbar ----*/
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  overflow: visible;
}
::-webkit-scrollbar-thumb {
  border: solid transparent;
  border-width: 0 0 0 0px;
  padding: 100px 0 0;
  min-height: 28px;
  background-color: #33527b;
  background-clip: padding-box;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0), inset 0 -1px 0 rgba(0, 0, 0, 0);
}
::-webkit-scrollbar-thumb:hover {
  background-color: #33527b;
  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0);
}
::-webkit-scrollbar-thumb:active {
  background-color: #33527b;
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0);
}
::-webkit-scrollbar-track {
  background-color: #eaf0f3;
}



/*---- logo ----*/
.logo {
  position: fixed;
  display: block;
  width: 6.893%;
  top: 2%;
  left: 0.8%;
  z-index: 6;
}



/*---- aside ----*/
aside {
  position: fixed;
  display: block;
  width: 8.878%;
  min-height: 100%;
  top: 0;
  left: 0;
  background: url(../images/aside/bg.webp) no-repeat center top;
  background-size: cover;
  box-shadow: 0px 0px 5px rgba(42, 44, 57, 0.3);
  transition: 0.3s;
  z-index: 5;
}
aside.close {
  left: -8.878%;
}
aside .events {
  position: relative;
  display: block;
  margin: 0 auto;
  margin-top: 100%;
  width: 88.24%;
}
aside .events a {
  position: relative;
  display: block;
  margin-bottom: 8%;
  color: #697b8d;
  font-size: 0.72vw;
  font-weight: 500;
  text-align: center;
}
aside .events a img {
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0px 0px 3px rgba(42, 44, 57, 0.3);
  transition: 0.5s;
}
aside .events a:hover img {
  filter: brightness(1.1);
}
/*aside .events a:last-child,
aside .events a:last-child:hover img {
  filter: brightness(1);
  cursor: default;
}*/
aside .events a span {
  position: relative;
  display: block;
  margin: 3% auto;
}
aside .arrow {
  position: absolute;
  display: block;
  width: 20.59%;
  right: -20.5%;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: -1;
}



/*---- member ----*/
.member {
  position: absolute;
  display: block;
  width: 7.4155%;
  right: 14.2%;
  top: 1.1%;
  z-index: 5;
}
.member .member_login,
.member .member_info {
  border-radius: 5px;
  border: 1px solid #4874a2;
  margin: 0;
  padding: 0;
  width: 100%;
  background: url(../images/btn_bg.webp) no-repeat center bottom;
  background-size: cover;
  overflow: hidden;
}
.member .member_info .member_name {
  padding: 8% 0;
  padding-top: 7%;
  padding-left: 8%;
  color: #4874a2;
  font-size: 0.83vw;
  font-weight: 600;
  letter-spacing: 0;
  text-align: left;
}
.member_name:after {
  right: 6%;
  background: url(../images/arrow.webp) no-repeat center top;
  background-size: 100%;
}
.member .member_info .member_logout {
  border-top: 1px solid #4874a2;
  position: absolute;
  cursor: pointer;
}
.member .member_info.open .member_logout {
  position: relative;
}

/*---- snslink ----*/
.snslink {
  position: absolute;
  display: flex;
  flex-direction: row;
  width: 12.43%;
  right: 1%;
  top: 1%;
  z-index: 5;
}
.snslink a {
  border-radius: 50%;
  border: 1px solid #4874a2;
  position: relative;
  display: block;
  margin: 0 2%;
  width: 100%;
  overflow: hidden;
  transition: 0.5s;
}
.snslink a:hover {
  filter: brightness(1.2);
}












/*---- footer ----*/
footer {
  position: relative;
  color: #2f2f2f;
  font-size: 0.62vw;
  font-weight: 500;
  background: #ffffff;
  z-index: 5;
}
footer .container {
  position: relative;
  padding: 0.6vw 0;
  width: 100%;
  text-align: center;
}
footer .container .copyright,
footer .container .copyright .company,
footer .container .copyright p,
footer .container .grading,
footer .container .grading img,
footer .container .grading ul,
footer .container .copyright .icon {
  display: inline-block;
  margin: 0 auto;
  vertical-align: middle;
}
footer .container .copyright img {
  width: 7.5vw;
}
footer .container .copyright a img {
  margin-left: 0.4vw;
  width: 5.782vw;
}
footer .container .copyright p {
  margin-left: 0.6vw;
  text-align: left;
}
footer .container .copyright p a {
  color: #2f2f2f;
}
footer .container .copyright p a:hover {
  text-decoration: underline;
}
footer .container .grading {
  margin-left: 1vw;
}
footer .container .grading img {
  width: 1.9795vw;
}
footer .container .grading ul {
  margin-left: 0.4vw;
  padding-left: 0;
  list-style: none;
}
footer .container .icon img {
  width: 2.5vw;
  margin: 0 6px;
}





/*---- modal ----*/
.modal-backdrop.show {
  opacity: 0.7;
}
#inquire .modal-dialog .modal-content .modal-body .select_rewards form {
  margin-left: 10%;
  width: 100%;
}
#inquire .modal-dialog .modal-content .modal-body form .form-check {
  margin: 2% auto;
  width: 100%;
}
#inquire .modal-dialog .modal-content .modal-body form .form-check-input {
  margin-top: 0.8%;
}
#inquire .modal-dialog .modal-content .modal-body form .form-check-label {
  display: flex;
  margin-left: 0;
  width: 70%;
  font-size: 0.83vw;
}
#inquire .modal-dialog .modal-content .modal-body form .form-check-label:hover {
  text-decoration: none;
}
#inquire .modal-dialog .modal-content .modal-body form .form-check-label span {
  margin-left: 1%;
  text-align: justify;
}
#inquire
  .modal-dialog
  .modal-content
  .modal-body
  form
  .form-check-label
  span.title {
  width: 40%;
}
#inquire
  .modal-dialog
  .modal-content
  .modal-body
  form
  .form-check-label
  span.text {
  width: 60%;
  color: #1a3753;
}
#inquire .modal-dialog .modal-content .modal-body form .form-select {
  margin-bottom: 3.5%;
  width: 100%;
  background-size: 7% 25%;
}
#inquire .modal-dialog .modal-content .modal-body .btn {
  margin: 15% auto;
  width: 36.75%;
}
#inquire .modal-dialog .modal-content .modal-body .bottom_btn {
  position: relative;
  margin-top: 15%;
  display: flex;
  width: 78.19%;
}
#inquire .modal-dialog .modal-content .modal-body .bottom_btn .btn {
  margin: 0 1.5%;
  margin-bottom: 0;
  width: 100%;
}
#inquire .modal-dialog .modal-content .modal-body .btn:hover {
  filter: brightness(1.03);
}
#inquire .modal-dialog .modal-content .modal-body .get_rewards span {
  position: relative;
  display: block;
  margin: 10% auto 15%;
  font-size: 0.72vw;
  letter-spacing: 0.03vw;
  text-align: center;
}
#rule .modal-dialog .modal-content .modal-body {
  width: 84%;
}
#rule .modal-dialog .modal-content .modal-body ol {
  height: 19.5vw;
}

@media (max-width: 1600px) {
  #inquire .modal-dialog .modal-content .modal-body {
    width: 80%;
  }
  #inquire .modal-dialog .modal-content .modal-body .select_rewards form {
    margin: 0 auto;
    width: 100;
  }
  #inquire .modal-dialog .modal-content .modal-body form .form-check-input {
    margin-top: 1.4%;
  }
  #inquire .modal-dialog .modal-content .modal-body form .form-check-label {
    display: block;
    width: 100%;
    font-size: 1vw;
  }
  #inquire .modal-dialog .modal-content .modal-body .get_rewards span {
    display: block;
    width: 75%;
    font-size: 0.9vw;
  }
  #rule .modal-dialog .modal-content .modal-body ol {
    padding-left: 1.4vw;
    padding-right: 0.8vw;
    height: 24vw;
    font-size: 0.9vw;
  }
}

@media (max-width: 1399.98px) {
  .logo {
    width: 8.5%;
  }
  aside {
    width: 10.5%;
  }
  aside.close {
    left: -10.5%;
  }
  aside .events a span {
    font-size: 1vw;
  }
  .member {
    width: 9%;
    right: 16.7%;
  }
  .member .member_info .member_name {
    font-size: 1.1vw;
  }
  .snslink {
    width: 15%;
  }

  
  #inquire .modal-dialog .modal-content .modal-body form .form-check-label {
    font-size: 1.2vw;
  }
  #inquire .modal-dialog .modal-content .modal-body .get_rewards span {
    font-size: 1vw;
  }
  #rule .modal-dialog .modal-content .modal-body ol {
    padding-left: 1.8vw;
    height: 28vw;
    font-size: 1.09vw;
  }
}

@media (max-width: 1199.98px) {
  .logo {
    width: 12%;
  }
  aside {
    width: 14%;
  }
  aside.close {
    left: -14%;
  }
  aside .events a span {
    font-size: 1.4vw;
  }
  .member {
    width: 11.5%;
    right: 20.5%;
    top: 2%;
  }
  .member .member_info .member_name {
    font-size: 1.4vw;
  }
  .snslink {
    width: 19%;
    top: 2%;
  }


  footer {
    padding: 3vw 0;
    font-size: 1vw;
    min-height: initial !important;
  }
  footer .container .copyright .company,
  footer .container .grading {
    display: block;
  }
  footer .container .copyright img {
    width: 12.011vw;
  }
  footer .container .copyright a img {
    margin-left: 1vw;
    width: 9.258vw;
  }
  footer .container .copyright p {
    margin: 1.5vw auto;
    text-align: center;
  }
  footer .container .grading img {
    width: 3.17vw;
  }


  #inquire .modal-dialog .modal-content .modal-body form .form-check-label {
    font-size: 1.4vw;
  }
  #inquire .modal-dialog .modal-content .modal-body .get_rewards span {
    font-size: 1.3vw;
  }
  #rule .modal-dialog .modal-content .modal-body ol {
    padding-left: 2vw;
    height: 32vw;
    font-size: 1.25vw;
  }
}

@media (max-width: 991.98px) {
  .logo {
    width: 15%;
    top: 1%;
  }
  aside {
    width: 17%;
  }
  aside.close {
    left: -17%;
  }
  aside .events a span {
    font-size: 1.6vw;
  }
  .member {
    width: 14.3%;
    right: 25%;
    top: 1.2%;
  }
  .member .member_info .member_name {
    font-size: 1.7vw;
  }
  .snslink {
    width: 23%;
    top: 1.2%;
  }


  footer {
    font-size: 1.3vw;
  }
  footer .container .copyright img {
    width: 14.531vw;
  }
  footer .container .copyright a img {
    width: 11.202vw;
  }
  footer .container .grading img {
    width: 3.835vw;
  }


  #inquire .modal-dialog .modal-content .modal-body form .form-check-label {
    font-size: 1.8vw;
  }
  #inquire .modal-dialog .modal-content .modal-body .get_rewards span {
    font-size: 1.7vw;
  }
  #rule .modal-dialog .modal-content .modal-body ol {
    padding-left: 2vw;
    height: 37vw;
    font-size: 1.6vw;
  }
}

@media (max-width: 768px) {
  .logo {
    width: 15.9%;
  }
  aside {
    width: 18%;
  }
  aside.close {
    left: -18%;
  }
  aside .events a span {
    font-size: 1.8vw;
  }
  .member {
    width: 16.8%;
    right: 29%;
    top: 1.2%;
  }
  .snslink {
    width: 27%;
    top: 1.2%;
  }



  footer {
    font-size: 1.7vw;
  }
  footer .container .copyright img {
    width: 18.775vw;
  }
  footer .container .copyright a img {
    width: 14.474vw;
  }
  footer .container .grading img {
    width: 4.955vw;
  }


  #inquire .modal-dialog .modal-content .modal-body form .form-check-label {
    font-size: 1.9vw;
  }
  #inquire .modal-dialog .modal-content .modal-body .get_rewards span {
    font-size: 1.8vw;
  }
}

@media (max-width: 575.98px) {
  .logo {
    width: 24%;
    top: 1%;
    left: 1.5%;
  }
  aside {
    width: 28%;
  }
  aside.close {
    left: -28%;
  }
  aside .events a span {
    font-size: 3.1vw;
  }
  .member {
    width: 24%;
    right: 43%;
    top: 1.2%;
  }
  .member .member_info .member_name {
    font-size: 2.3vw;
  }
  .snslink {
    width: 40%;
    right: 2%;
  }




  footer {
    padding: 6vw 0;
    font-size: 2vw;
  }
  footer .container .copyright img {
    width: 25.045vw;
  }
  footer .container .icon img {
    width: 13.5vw !important;
    margin: 11% 0px;
  }
  footer .container .copyright a img {
    width: 19.305vw;
  }
  footer .container .copyright p {
    margin: 2.5vw auto;
  }
  footer .container .grading img {
    width: 6.61vw;
  }
  footer .container .grading ul {
    margin-left: 1vw;
  }
  #inquire .modal-dialog .modal-content .modal-body form .form-check-label {
    font-size: 3.6vw;
  }
  #inquire .modal-dialog .modal-content .modal-body .get_rewards span {
    font-size: 3.4vw;
  }
  #inquire .modal-dialog .modal-content .modal-body .btn {
    width: 43%;
  }
  #inquire .modal-dialog .modal-content .modal-body .bottom_btn {
    width: 90%;
  }
  #rule .modal-dialog .modal-content .modal-body ol {
    padding-left: 4.5vw;
    padding-right: 1.5vw;
    height: 68vw;
    font-size: 3.2vw;
  }
}




@media (max-width: 430px) {
  footer {
    font-size: 2.7vw;
  }
  footer .container .copyright img {
    width: 33.49vw;
  }
  footer .container .copyright a img {
    width: 25.815vw;
  }
  footer .container .copyright p {
    margin: 3vw auto;
  }
  footer .container .grading img {
    width: 8.84vw;
  }
}