@CHARSET "utf-8";

/*******************************************/

* {
  box-sizing: border-box;
}

body {
	margin: 0;
	font-family: 'Noto Sans TC', sans-serif;
	text-align: center;
	background: linear-gradient(rgba(0, 0, 0, 0), rgba(0,0,0,0)), url('../images/subject/background_馬興企業有限公司MIGHT_PNEUMATIC_TOOL_COMPANY_氣動工具PNEUMATIC_TOOL_MACHINE.gif') repeat center center fixed;
	background-size: contain;
	color: #fff;
}

.logo {
  width: 120px;
  margin-bottom: 30px;
  opacity: 0;
  animation: fadeIn 1s ease-in-out forwards;
}

.loader-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.knob-container {
  background: rgba(255, 255, 255, 0.1);
  padding: 30px;
  border-radius: 15px;
  backdrop-filter: blur(5px);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
}

.loading-text {
  margin-top: 20px;
  font-size: 1.2em;
  color: #eee;
  opacity: 0;
  animation: fadeIn 1.2s ease-in-out 0.5s forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@media (max-width: 767.98px) {	
	.hid-v2 {
	    display: contents !important;
	}
}
@media (min-width: 768px) {
	.hid {
	    display: none !important;
	}
	
	.collapse.flex-nowrap {
		display: -ms-flexbox!important;
		display: flex !important;
		-ms-flex-preferred-size: auto;
		flex-basis: auto;
	}
}

.clickable {
    cursor: pointer;
  }

.place-self-center {
	place-self: center;
}
  
/**********回頁首*************/
/* 40px */
@media (max-width: 368px) {
.toTop-arrow {
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 33%;
	opacity: 0.6;
	background: #000;
	cursor: pointer;
	position:fixed;
	right: 1rem;
	bottom: 1rem;
	display: none;
}
.toTop-arrow::before, .toTop-arrow::after {
	width: 18px;
	height: 5px;
	border-radius: 3px;
	background: #f90;
	position: absolute;
	content: "";
}
.toTop-arrow::before {
	transform: rotate(-45deg) translate(0, -50%);
	left: 0.5rem;
}
.toTop-arrow::after {
	transform: rotate(45deg) translate(0, -50%);
	right: 0.5rem;
}
.toTop-arrow:focus {outline: none;}
}
 
/* 48px */
@media (max-width: 768px) {
.toTop-arrow {
	width: 3rem;
	height: 3rem;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 33%;
	opacity: 0.6;
	background: #000;
	cursor: pointer;
	position:fixed;
	right: 1rem;
	bottom: 1rem;
	display: none;
}
.toTop-arrow::before, .toTop-arrow::after {
	width: 25px;
	height: 6px;
	border-radius: 3px;
	background: #f90;
	position: absolute;
	content: "";
}
.toTop-arrow::before {
	transform: rotate(-45deg) translate(0, -50%);
	left: 0.42rem;
}
.toTop-arrow::after {
	transform: rotate(45deg) translate(0, -50%);
	right: 0.42rem;
}
.toTop-arrow:focus {outline: none;}
}

/* 56px */
@media (max-width: 980px) {

.toTop-arrow {
	width: 3.5rem;
	height: 3.5rem;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 33%;
	opacity: 0.6;
	background: #000;
	cursor: pointer;
	position:fixed;
	right: 1rem;
	bottom: 1rem;
	display: none;
}
.toTop-arrow::before, .toTop-arrow::after {
	width: 31px;
	height: 7px;
	border-radius: 3px;
	background: #f90;
	position: absolute;
	content: "";
}
.toTop-arrow::before {
	transform: rotate(-45deg) translate(0, -50%);
	left: 0.4rem;
}
.toTop-arrow::after {
	transform: rotate(45deg) translate(0, -50%);
	right: 0.4rem;
}
.toTop-arrow:focus {outline: none;}
}

.toTop-arrow {
	width: 3.5rem;
	height: 3.5rem;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 33%;
	opacity: 0.6;
	background: #000;
	cursor: pointer;
	position:fixed;
	right: 1rem;
	bottom: 1rem;
	display: none;
}
.toTop-arrow::before, .toTop-arrow::after {
	width: 31px;
	height: 7px;
	border-radius: 3px;
	background: #f90;
	position: absolute;
	content: "";
}
.toTop-arrow::before {
	transform: rotate(-45deg) translate(0, -50%);
	left: 0.4rem;
}
.toTop-arrow::after {
	transform: rotate(45deg) translate(0, -50%);
	right: 0.4rem;
}
.toTop-arrow:focus {outline: none;}

/*****************側邊攔*********************************/

.menu-toggle-btn {
	text-wrap: nowrap;
    -webkit-writing-mode: vertical-lr;
    line-height: normal !important;
    display: table;
	padding: 4vw 0;
	z-index: 1040;
	position: fixed;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}

.sideMenu {
	width: 300px;
	height: auto;
	background-color: #ffffca;
	border-right: 3px solid #d1d1d1;
	display: flex;
	flex-direction: column;
	padding: 0;
	box-shadow: 5px 0 5px rgba(23, 23, 54, 0.6);
	/*position: absolute;*/
	position:fixed;
    top:0rem; /*看你要設定黏在螢幕上離頂端多少距離的位置*/
	max-height:100%;
	transform: translateX(-100%);
	transition: 0.5s;
	z-index: 100;
}

.sideMenu.collapse {
	display: flex;
}

button.menu-toggle-btn {
	width: 30px;
	height: 210px;
	background-color: #d1d1d1;
	color: #686666;
	/*position: absolute;
	left: 0;
	top: 0;*/
	bottom: 0;
	margin: auto;
	line-height: 80px;
	text-align: center;
	border-radius: 0 5px 5px 0;
	box-shadow: 5px 0 5px rgba(23, 23, 54, 0.6);
}

.sideMenu.show  {
	transform: translateX(0);
}

.sideMenu .menu-toggle-btn  {
	top: 0;
	left: 300px;
	transform: translateY(0);
}

#sideMenu-active {
	position: absolute;
	max-height: none;	
	opacity: 1;
	z-index: 1039;
}
	
.c100 {
	background: #ffffff!important;
}
.c101 {
	background: #ff6868 !important;
}
.c102 {
	background: #f9ca24 !important;
}
.c103 {
	background: #99ff99 !important;
}
.c104 {
	background: #9595ff !important;
}
.c105 {
	background: #c78eff !important;
}
.c106 {
	background: #f7c58c !important;
}
.c107 {
	background: #d56a00 !important;
}
.c108 {
	background: #a4ffff !important;
}
.c109 {
	background: #ec9593 !important;
}
.c110 {
	background: #84c1ff !important;
}
.c111 {
	background: #ffb66c !important;
}
.c112 {
	background: #94e2eb !important;
}
.c113 {
	background: #aea6ec !important;
}
.c114 {
	background: #ceceb7 !important;
}
.c115 {
	background: #ff88f3 !important;
}
.c116 {
	background: #a793aa !important;
}
.c117 {
	background: #ceceb7 !important;
}
.c118 {
	background: #f9ca24 !important;
}
.c119 {
	background: #0d6efd !important;
}

/*********** 影片輪播 *************/
.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden; }
  .embed-responsive::before {
    display: block;
    content: ""; }
  .embed-responsive .embed-responsive-item,
  .embed-responsive iframe,
  .embed-responsive embed,
  .embed-responsive object,
  .embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; }

.embed-responsive-21by9::before {
  padding-top: 42.85714%; }

.embed-responsive-16by9::before {
  padding-top: 56.25%; }

.embed-responsive-4by3::before {
  padding-top: 75%; }

.embed-responsive-1by1::before {
  padding-top: 100%; }

/**************圖片格式***************/
.img-fluid-v2 {
    max-width: 3.5vw;
    height: auto;
}

.img-swap {
  position: relative;
  display: inline-block;
}

.img-swap img {
  display: block;
  max-width: 100%;
  height: auto;
  z-index: 10;	
}

.img-swap img.hover-img {
  display: none;
}

.img-swap:hover img.default-img {
  display: none;
}

.img-swap:hover img.hover-img {
  display: inline;
}

/**********隔間Bar樣式************/

.hr-blue {
	margin: 1% auto;
	height: 0.5vmin;
	background-color: #0000ff;
	border-color: #0000ff;
}

.hr-blue2 {
	margin: 1% auto;
	height: 0.5vmin;
	background-color: #c7ecee;
	border-color: #c7ecee;
}

.hr-blu {
	margin: 1% auto;
	height: 0.5vmin;
	background-color: #84c1ff;
	border-color: #84c1ff;
}

.hr-green {
	margin: 1% auto;
	height: 0.5vmin;
	background-color: #00ff00;
	border-color: #00ff00;
}

.hr-green2 {
	margin: 1% auto;
	height: 0.5vmin;
	background-color: #9bcb87;
	border-color: #9bcb87;
}

.hr-pink {
	margin: 1% auto;
	height: 0.5vmin;
	background-color: #ffc0cb;
	border-color: #ffc0cb;
}

.hr-pink2 {
	margin: 1% auto;
	height: 0.5vmin;
	background-color:#ff88f3;
	border-color: #ff88f3;
}

.hr-purple {
	margin: 1% auto;
	height: 0.5vmin;
	background-color: #8B00FF;
	border-color: #8B00FF;
}

.hr-red {
	margin: 1% auto;
	height: 0.5vmin;
	background-color: #ff0000;
	border-color: #ff0000;
}

.hr-salmon {
	margin: 1% auto;
	height: 0.5vmin;
	background-color: #ff8c69;
	border-color: #ff8c69;
}

.hr-sepia {
	margin: 1% auto;
	height: 0.5vmin;
	background-color: #704214;
	border-color: #704214;
}

.hr-turquoise {
	margin: 1% auto;
	height: 1vmin;
	background-color: #30d5c8;
	border-color: #30d5c8;
}

.hr-yellow {
	margin: 1% auto;
	height: 0.5vmin;
	background-color: #fff000;
	border-color: #fff000;
}

.hr-yellow2 {
	margin: 1% auto;
	height: 0.5vmin;
	background-color: #f9ca24;
	border-color: #f9ca24;
}

.hr-grayGreen {
	margin: 1% auto;
	height: 0.5vmin;
	background-color: #ceceb7;
	border-color: #ceceb7;
}

/*************字體格式************/
.small-v2 {
    font-size: 0.7em;
	color: #000 !important;
}
.small-v3 {
    font-size: 2em;
	color: #000 !important;
}

.text-Dimgray {
	color: #696969;
}

.text-Red {
	color: #ff0000;
}

.text-Blue {
	color: #0000ff;
}

.text-Blue2 {
	color: #94e2eb !important;
}
	
.text-Bul {
	color: #0080ff;
}

.text-Sepia {
	color: #704214;
}

.text-Turquoise {
	color: #30d5c8;
}

.text-Green {
	color: #00ff00;
}

.text-Green2 {
	color: #6ab04c;
}

.text-Pink {
	color: #ffc0cb;
}

.text-Pink2 {
	color:#ff88f3
}
	
.text-Purple {
	color: #8B00FF;
}

.text-Purple2 {
	color: #4834d4;
}

.text-Salmon {
	color: #ff8c69;
}

.text-Yellow {
	color: #fff000;
}

.text-Blue-MS {
	color: #4834d4;
}

.text-grayGreen {
	color: #ceceb7;
}
 
.text-left {
	text-align: left !important;
}
.text-right {
	text-align: right !important;
}
 
.font-size-small {
	font-size: small;
}
.font-size-smaller {
	font-size: smaller;
}
.font-size-x-small {
	font-size: x-small;
}
.font-size-x2-small {
	font-size: xx-small;
}
.font-size-larger {
	font-size: larger;
}
.font-size-largel {
	font-size: large;
}
.font-size-x-largel {
	font-size: x-large;
}
.font-size-x2-largel {
	font-size: xx-large;
}

.bg-antiquewhite {
	background-color: AntiqueWhite;
}

.diagonal-line {
	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjEwMCUiIHkyPSIxMDAlIiBzdHJva2U9ImdyYXkiIHN0cm9rZS13aWR0aD0iMSIvPjwvc3ZnPg==) no-repeat 100% center;
}