@charset "UTF-8";

body,a,font{font-family:Helvetica,Arial,'LiHei Pro','Apple LiGothic','Microsoft JhengHei',微軟正黑體,sans-serif;}

body{background-color:#fff;}

li{list-style:none;}
table{background-color:transparent;table-layout:fixed;}
input:-webkit-autofill{-webkit-box-shadow: 0 0 0px 1000px white inset;border:1px solid #CCC!important;}
textarea:focus, input:focus{outline:none;border-color:inherit;-webkit-box-shadow:none;box-shadow: none;}
.form-control:focus {box-shadow:none}

.hidezone{display:none;}
a:hover{ text-decoration:none;}
a:focus, textarea:focus, input:focus{outline: none;}

.d-hover:hover{ background-color:#eee;}

.w-10{width:10% !important; display:inline-block;}
.w-20{width:20% !important; display:inline-block;}
.w-30{width:30% !important; display:inline-block;}
.w-40{width:40% !important; display:inline-block;}
.w-60{width:60% !important; display:inline-block;}
.w-70{width:70% !important; display:inline-block;}
.w-80{width:80% !important; display:inline-block;}


.text-msg{color::#5c6bc0}
.text-msg:hover{color::#4a5bbc}
.text-main{color::#c69c6d}
.text-main:hover{color::#e7b175}
.text-secon{color::#ff9933}
.text-secon:hover{color::#ff9900}
.text-tree{color::#9933cc}
.text-tree:hover{color::#9900cc}

.btn-msg{background-color:#5c6bc0;color:#fff}
.btn-msg:hover{background-color:#4a5bbc;color:#fff}
.btn-main{background-color:#c69c6d;color:#fff}
.btn-main:hover{background-color:#e7b175;color:#fff}
.btn-secon{background-color:#ff9933;color:#fff}
.btn-secon:hover{background-color:#ff9900;color:#fff}
.btn-tree{background-color:#9933cc;color:#fff}
.btn-tree:hover{background-color:#9900cc;color:#fff}

.talk1{ padding:5px 8px; background-color:#eee; font-size:1.1em; color:#333; margin-top:8px ; float:left; border-radius:12px; max-width:60%;margin-left:15px; margin-top:22px; position:relative;word-break: break-all;}
.talk1 li{display:block;position:absolute; width:14px; height:13px; top:px; left:-10px; background: url(/images/talk1.png) center center / 100% auto no-repeat;}
.talk2{ padding:5px 8px; background-color:#03a9f4; font-size:1.1em; color:#fff; margin-top:8px ; float:right; border-radius:12px;max-width:60%; margin-right:15px; position:relative;word-break: break-all;}
.talk2 li{display:block; position:absolute; width:14px; height:13px; top:3px; right:-10px; background: url(/images/talk2.png) center center / 100% auto no-repeat;}
.talk2 a{color:#fff;}

@keyframes godown {
 from {top: -80px;}
  to {top:0px;}
}
.header{
	position: absolute;
	text-align:center;
	height: 40px;
	width: 100%;
	max-width:600px;
	z-index:22; 
	background:#e3342f url(../images/owed_favicon.ico) 5px center / auto 100% no-repeat;
}
.header.fixed{
	position: fixed;
	top: 0px;
	z-index:999;
	animation-name: godown;
  	animation-duration: 0.5s;
}

.stock_header{
	position: absolute;
	text-align:center;
	height: 40px;
	width: 100%;
	max-width:600px;
	z-index:22; 
	background:#00c853 url(../images/owed_favicon.ico) 5px center / auto 100% no-repeat;
}
.stock_header.fixed{
	position: fixed;
	top: 0px;
	z-index:999;
	animation-name: godown;
  	animation-duration: 0.5s;
}
	
.scroll::-webkit-scrollbar {display:none}
.btbg{position:absolute;left: 0px;top: 0px;background-color:rgba(0,0,0,0.5);width: 100%;height: 100%;z-index:11;display: none;}
.button_container {position: absolute;top: 10px;right: 20px;height: 27px;width: 27px;cursor: pointer;z-index: 100;	transition: opacity .25s ease;display: inline-block;}
.button_container:hover { opacity: .9;}
.button_container.active .top {-webkit-transform: translateY(9px) translateX(0) rotate(45deg);transform: translateY(9px) translateX(0) rotate(45deg);background-color: #FFF;}
.button_container.active .middle { opacity: 0;background: #FFF;}
.button_container.active .bottom {-webkit-transform: translateY(-9px) translateX(0) rotate(-45deg);transform: translateY(-9px) translateX(0) rotate(-45deg);background-color: #FFF;}
.button_container span {border: none;height: 2px;width: 100%;position: absolute;top: 0px;left: 0;transition: all .35s ease;	cursor: pointer;background-color: #FFF;}
.button_container span:nth-of-type(2){top: 9px;}
.button_container span:nth-of-type(3) { top: 18px;}
.main-menu {display:none;float: none;padding-right: 0px;position: absolute;top: 40px;height: auto;width: 100%;	background-color: #FFF;	border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: #eee;left: 0px;z-index: 100;}
.menu-ul li{height: auto;margin-right: 0px;margin-left: 0px;display: block;padding: 0px;}
.menu-ul li a{display: block;color: #333;text-decoration: none;border: 1px solid #eee;padding-top: 15px;padding-right: 20px;padding-bottom: 15px;padding-left: 20px;font-weight: bold;}
.menu-ul li a:hover{background-color: #F7FBF2;color: #000;}
.bg_loading {position: fixed;left: 0px;top: 0px;width: 100%;height: 100%;z-index: 99999;background-color: rgba(125,125,125,0.3);background-image: url(/images/Ring.gif);background-repeat: no-repeat;background-position: center;}
#showspace{display:none}
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e3342f;;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}
.video-container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
}
.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.img-container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
}
.img-container img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.chat-input{
	margin-bottom: 50px;
	position: relative;
}
.chat-input input{
	outline:none;
}
.send-chat{
	font-size: 20px;
	color: #FFF;
	background-color: #df2a2f;
	text-align: center;
	height: 42px;
	width: 50px;
	position: absolute;
	right: 0px;
	z-index: 9;
	top: 0px;
	padding-top: 0px;
	padding-right: 15px;
	padding-left: 15px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
.upload{
	font-size: 20px;
	color: #8EC555;
	background-color: #df2a2f;
	text-align: center;
	height: 42px;
	width: 50px;
	position: absolute;
	z-index: 9;
	left:0px;
	top: 0px;
	padding-top: 0px;
	border: 1px solid #df2a2f;
	padding-right: 15px;
	padding-left: 15px;
}
.form-control {
	-webkit-appearance: none;
	display: block;
	width: 100%;
	height: 42px;
    padding: .375rem 5px;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #495057;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #df2a2f;
	border-radius: 0;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.inner-container::-webkit-scrollbar {
    display: none;
	overflow:-moz-scrollbars-none;
	overflow: auto;
    -ms-overflow-style: none; /* IE 11 */
    scrollbar-width: none; /* Firefox 64 */