/* ============================================================
UI-Button Definition
============================================================ */

/* ============================================================
colro Definition
============================================================ */

.red {
	color: red;
}

/* ============================================================
html5 input Definition
============================================================ */
.btn {
	display: inline-block;
	margin-bottom: 0;
	font-weight: 400;
	text-align: center;
	vertical-align: middle;
	touch-action: manipulation;
	cursor: pointer;
	background-image: none;
	border: 1px solid transparent;
	white-space: nowrap;
	padding: 6px 24px;
	font-size: 16px;
	line-height: 1.5;
	border-radius: 20px;
	margin : 0px 5px;
}

@media screen and (min-width: 540px) {
	.btn {
	  font-size: 18px;
	}
}

.btn-info {
	color: #000 !important;
	background-color: #fff;
	border-color: #000;
}

.btn-primary {
	color: #fff;
	background-color: #1b62b4;
	border-color: #18569e;
}

.btn-border-white {
	background: none;
    border: 1px solid #fff;
    color: #fff;
}

.btn-border-blue {
	background: none;
    border: 1px solid #1b62b4;
    color: #1b62b4;
}

.btn-disable {
	background: #999;
    color: #cecece;
    cursor : not-allowed;
    border-color: #999;
}

.btn-blue {
  background: #1b62b4;
  color: #fff;
}

.btn-white {
  background: #fff;
  color: #1b62b4;
}

label.radio input[type="radio"] {
	display: none;
}

label.radio input[type="radio"] + span {
	display: inline-block;
    width: 19px;
    height: 19px;
    background: url(/img/mdetail/radio_default.svg) no-repeat left top;
    padding-left: 10px;
    line-height: 19px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin: 5px;
    padding: 10px;
}

label.radio input[type="radio"]:checked + span {
    background: url(/img/mdetail/radio_checked.svg) no-repeat left top;
}
/* ============================================================
標籤 Definition
============================================================ */
.tag {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
  padding: 4px 7px;
  border-radius: 1000px;
  line-height: 1em;
  font-size: .75em;
  font-weight: 300;
  color: #fff;
}

@media all and (min-width: 768px) {
  .tag {
    padding: 4px 8px;
    font-size: .875em;
  }
}

.tag span img {
  width: 14px;
  height: 14px;
  vertical-align: bottom;
  cursor: pointer;
  margin-left: 2px;
}

.tag.event {
  border: 1px solid #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
/*即將下架、院線、跟播中、新上架、即將下架*/
.tag.feature.purple {
  background: #5D4A88;
}
/*獨家*/
.tag.feature.red {
  background: #B70B0B;
}
/*4K*/
.tag.feature.orange {
  background: #DD6332;
}
/*多視角*/
.tag.feature.multi-blue {
  background: #3D5AFE;
}

/*免費*/
.tag.payment.pink {
  background: #C04B84;
}
/*用券*/
.tag.payment.blue-purple {
  background: #313F9A;
}

/*多視角 | 單次付費*/
.tag.payment.blue {
  background: #1B62B4;
}
/*數位珍藏*/
.tag.payment.green {
  background: #1A8BA6;
}

/* ============================================================
behave Definition
============================================================ */

.hide{
	display : none;
	opacity: 0;
}

.show{
	display : flex;
	opacity: 1;
}

.pointer {
	cursor: pointer;
}

/* ============================================================
RESET
============================================================ */
* {
  font-family: "PingFangTC-Regular", "微軟正黑體", "Microsoft JhengHei", "Open Sans", sans-serif;
}

html, body {
  width: 100%;
  overflow: auto;
  overflow-x: hidden;
  font-size: 16px;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: #12172C;
}
@media screen and (min-width: 768px) {
	body {
	  font-size: 18px;
	}
}
@media (orientation: landscape) and (min-width: 1200px) {
  html, body {
    background: #12172C;
  }
}

a {
  text-decoration: none;
  cursor: pointer;
}

ul, li {
  list-style: none;
  text-decoration: none;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6, p, em {
  margin: 0;
  padding: 0;
}

em {
  font-style: normal;
  text-transform: none;
  list-style: none;
}

::-moz-selection {
  color: #fff;
  background: #00afeb;
}

::selection {
  color: #fff;
  background: #00afeb;
}

.scrollfixed {
  overflow: hidden;
}

html::-webkit-scrollbar, body::-webkit-scrollbar {
  width: 8px;
}
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
}
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}
html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
}