@charset "UTF-8";
@import url(reset.css);
@import url(font-awesome.min.css);
@import url(rwdgrid.css);
@import url(textEditor.css);
@import url(https://fonts.googleapis.com/css?family=Noto+Sans+TC:300,400,500,700|Raleway:400,500,600|Roboto:400,500,900&display=swap);
.orderCheckArea input[type=password], .orderCheckArea input[type=text], .side_share a {
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}
	.pc{display: block;}
	.mo{display: none;}
body {
	background-color: #fff;
	font-family: Helvetica, Arial, "微軟正黑體", Heiti TC, "メイリオ", sans-serif;
	font-size: 13px;
	-webkit-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
	opacity: 0
}
body::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
	background-color: #F5F5F5
}
body::-webkit-scrollbar {
	width: 6px;
	background-color: #F5F5F5
}
body::-webkit-scrollbar-thumb {
	background-color: #3e536f
}
.pc {display: block;}
.mo {display: none;}
a {
	color: #000;
	cursor: pointer;
	-webkit-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
	outline: none
}
[class*=col-] {
	float: left;
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}
.b-box {
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}
div.titan {
	display: none
}
.col-1 {
	width: 100%
}
.col-2 {
	width: 50%
}
.col-3 {
	width: 33.33%
}
.col-4 {
	width: 25%
}
.col-5 {
	width: 20%
}
a.btn_color1 {
	color: #fff;
	background-color: #516190
}
a.btn_color1:hover {
	background-color: #C85A56
}
a.btn_color2 {
	color: #fff;
	background-color: #A0A0A0
}
a.btn_color2:hover {
	background-color: #999
}
input[type=text] {
	-webkit-appearance: none
}
textarea {
	-webkit-appearance: none
}
.outerWrap {
	position: relative;
	padding-top: 80px
}
.wrap {
	width: 1650px;
	margin: 0 auto
}
.label {
	padding: 5px 7px;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.8)
}
.moduleBox {
	position: fixed;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 1005;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	-webkit-transition-property: top, opacity, visibility;
	-o-transition-property: top, opacity, visibility;
	transition-property: top, opacity, visibility;
	-webkit-transition-duration: .5s;
	-o-transition-duration: .5s;
	transition-duration: .5s;
	-webkit-transition-timing-function: ease-in-out;
	-o-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out
}
.moduleBox.show {
	top: 50%;
	opacity: 1;
	visibility: visible;
	pointer-events: auto
}
.moduleMask {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1003;
	background-color: rgba(255, 255, 255, 0.8);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	-webkit-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out
}
.moduleMask.show {
	opacity: 1;
	visibility: visible;
	pointer-events: auto
}
.sideInquiryBox {
	position: fixed;
	top: 0;
	right: 0;
	-webkit-transform: translateX(110%);
	-ms-transform: translateX(110%);
	transform: translateX(110%);
	height: 100%;
	z-index: 1005;
	pointer-events: none;
	-webkit-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out
}
.sideInquiryBox.show {
	-webkit-transform: translateX(0%);
	-ms-transform: translateX(0%);
	transform: translateX(0%);
	pointer-events: auto
}
.sideInquiryBox #closeInquiry {
	position: absolute;
	top: 30px;
	right: 25px;
	font-size: 18px;
	width: 50px;
	height: 50px;
	border: 1px solid #e5e5e5;
	border-radius: 50%
}
.sideInquiryBox #closeInquiry:hover {
	background-color: #2378c0
}
.sideInquiryBox #closeInquiry:hover span:after, .sideInquiryBox #closeInquiry:hover span:before {
	background-color: #fff
}
.sideInquiryBox #closeInquiry span {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 20px;
	height: 3px
}
.sideInquiryBox #closeInquiry span:after, .sideInquiryBox #closeInquiry span:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #1b1b1b;
	-webkit-transform-origin: center center;
	-ms-transform-origin: center center;
	transform-origin: center center;
	-webkit-transition: all .4s ease;
	-o-transition: all .4s ease;
	transition: all .4s ease
}
.sideInquiryBox #closeInquiry span:before {
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg)
}
.sideInquiryBox #closeInquiry span:after {
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg)
}
.cartArea {
	width: 460px;
	border-left: 1px solid #e5e5e5;
	background-color: #fff
}
.cartArea .wrap {
	position: relative;
	width: auto;
	padding: 75px 85px 40px 50px;
	height: 100%;
	overflow-y: auto
}
.cartArea .titleBox .subTitle {
	font-size: 14px;
	font-weight: 400
}
.cartArea .titleBox .title {
	padding: 5px 0 15px;
	font-size: 21px;
	font-weight: normal
}
.cartArea .countBox {
	margin-top: 10px;
	font-size: 13px;
	color: #333;
	text-align: center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between
}
.cartArea .countBox a {
	display: inline-block;
	height: 50px;
	line-height: 50px;
	font-size: 14px;
	font-weight: normal;
	font-family: "Noto Sans TC", "微軟正黑體", sans-serif;
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}
.cartArea .countBox a.btn_pay {
	width: 190px;
	background-color: #2378c0;
	color: #fff
}
.cartArea .countBox a.clearAll {
	margin-left: 10px;
	width: 120px;
	color: #111;
	border: 1px solid #111
}
.cartArea .goto_pay_btn {
	margin-left: 15px
}
.cartArea .cart {
	clear: both
}
.cartArea .cart li {
	position: relative;
	padding: 25px 0;
	text-align: left
}
.cartArea .cart li:not(:first-child) {
	border-top: 1px solid #eee
}
.cartArea .cart li i {
	cursor: pointer;
	display: block;
	float: right;
	font-size: 18px;
	color: #949494
}
.cartArea .cart .Img {
	float: left;
	width: 76px;
	overflow: hidden
}
.cartArea .cart .Img img {
	display: block;
	width: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden
}
.cartArea .cart .Txt {
	float: left;
	padding-left: 25px;
	position: relative;
	width: calc(100% - 76px);
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}
.cartArea .cart .Txt .itemClose {
	position: absolute;
	top: -10px;
	right: 0;
	width: 25px;
	height: 25px;
	-webkit-transition: all .4s ease;
	-o-transition: all .4s ease;
	transition: all .4s ease
}
.cartArea .cart .Txt .itemClose:hover {
	background-color: #2378c0
}
.cartArea .cart .Txt .itemClose:hover span:after, .cartArea .cart .Txt .itemClose:hover span:before {
	background-color: #fff
}
.cartArea .cart .Txt .itemClose span {
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	position: absolute;
	width: 15px;
	height: 1px
}
.cartArea .cart .Txt .itemClose span:after, .cartArea .cart .Txt .itemClose span:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #1b1b1b;
	-webkit-transform-origin: center center;
	-ms-transform-origin: center center;
	transform-origin: center center;
	-webkit-transition: all .4s ease;
	-o-transition: all .4s ease;
	transition: all .4s ease
}
.cartArea .cart .Txt .itemClose span:before {
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg)
}
.cartArea .cart .Txt .itemClose span:after {
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg)
}
.cartArea .cart .Txt strong a {
	display: block;
	font-size: 17px;
	font-weight: normal;
	font-family: "Noto Sans TC", "微軟正黑體", sans-serif;
	color: #000
}
.cartArea .cart .Txt .dataNo {
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: normal;
	font-family: "Noto Sans TC", "微軟正黑體", sans-serif;
	color: #2378c0
}
.cartArea .cart .Txt .subTitle {
	margin-bottom: 3px;
	font-size: 14px;
	font-weight: 400;
	font-weight: normal;
	font-family: "Noto Sans TC", "微軟正黑體", sans-serif;
	color: #111111
}
.cartArea .cart .Txt .baseNum {
	font-size: 14px;
	font-weight: 400;
	font-family: "Noto Sans TC", "微軟正黑體", sans-serif;
	color: #888888
}
.cartArea .cart .Txt b {
	display: inline-block;
	padding-right: 10px;
	font-weight: 400;
	font-size: 12px
}
.cartArea .cart .Txt b.price {
	font-size: 15px;
	color: #e83336
}
.orderCheckArea {
	width: 320px;
	border: 5px solid #d8d8d8;
	background-color: #fff
}
.orderCheckArea .wrap {
	position: relative;
	width: auto;
	padding: 40px 10px;
	text-align: center
}
#closeCart, #closeInquiry, #closeOrder, #closePrice {
	position: absolute;
	top: 8px;
	right: 10px;
	font-size: 18px
}
.orderCheckArea h4 {
	margin-bottom: 10px;
	font-weight: 400;
	font-size: 16px;
	font-family: "微軟正黑體", "新細明體", sans-serif;
	color: #222;
	text-align: left
}
.orderCheckArea input[type=password], .orderCheckArea input[type=text] {
	width: 100%;
	height: 40px;
	margin-bottom: 10px;
	padding: 5px;
	border: 2px solid #ccc
}
.orderCheckArea a.btn {
	display: inline-block;
	margin-top: 10px;
	padding: 10px 20px;
	border-radius: 4px;
	font-size: 13px;
	color: #fff
}
@media screen and (max-width:480px) {
	.orderCheckArea {
		width: 300px!important
	}
	.cartArea {
		width: 100%
	}
	#closeCart, #closeInquiry, #closeOrder, #closePrice {
		top: 5px;
		font-size: 25px
	}
}
@media screen and (max-width:360px) {
	.cartArea .wrap {
		padding: 75px 30px 50px
	}
	.sideInquiryBox #closeInquiry {
		top: 12px;
		right: 10px
	}
}
.loadingArea {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 10000;
	width: 100%;
	height: 100vh;
	background-color: #2378c0;
	background-repeat: no-repeat;
	background-image: url(../images/productBg.png);
	background-size: cover;
	opacity: 0;
	pointer-events: none
}
.loadingArea.show {
	opacity: 1;
	pointer-events: auto;
	-webkit-animation: logoFadeOut 0.6s 3.8s forwards linear;
	animation: logoFadeOut 0.6s 3.8s forwards linear
}
.loadingArea.show .word {
	-webkit-animation: wordMove 1s 2.4s forwards ease;
	animation: wordMove 1s 2.4s forwards ease
}
.loadingArea.show .picBox {
	-webkit-animation: picMove 1s 2.2s forwards ease;
	animation: picMove 1s 2.2s forwards ease
}
.loadingArea.show .picBg {
	-webkit-animation: picScale 0.4s forwards cubic-bezier(0.42, 0, 0.43, 1.38);
	animation: picScale 0.4s forwards cubic-bezier(0.42, 0, 0.43, 1.38)
}
.loadingArea.show .pic01 {
	-webkit-animation: picScale 0.3s 0.4s forwards ease;
	animation: picScale 0.3s 0.4s forwards ease
}
.loadingArea.show .pic02 {
	-webkit-animation: picFadeIn 0.3s 0.6s forwards ease;
	animation: picFadeIn 0.3s 0.6s forwards ease
}
.loadingArea.show .pic03 img {
	-webkit-animation: picScale 0.7s 0.8s forwards ease;
	animation: picScale 0.7s 0.8s forwards ease
}
.loadingArea.show .pic04 img {
	-webkit-animation: picScale 0.2s 1.4s forwards ease-in-out;
	animation: picScale 0.2s 1.4s forwards ease-in-out
}
.loadingArea.show .pic05 img {
	-webkit-animation: picScale 0.2s 1.5s forwards ease-in-out;
	animation: picScale 0.2s 1.5s forwards ease-in-out
}
.loadingArea.show .pic06 img {
	-webkit-animation: picScale 0.2s 1.6s forwards ease-in-out;
	animation: picScale 0.2s 1.6s forwards ease-in-out
}
.loadingArea.show .pic07 img {
	-webkit-animation: picScale 0.2s 1.7s forwards ease-in-out;
	animation: picScale 0.2s 1.7s forwards ease-in-out
}
.loadingArea .loadLogo {
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 1;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex
}
.loadingArea .loadLeft {
	position: relative;
	width: 111px;
	height: 111px
}
.loadingArea .loadRight {
	position: relative;
	width: 224px;
	height: 111px
}
.loadingArea .word {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	opacity: 0
}
.loadingArea .picBox {
	position: relative;
	left: 112px;
	z-index: 1
}
.loadingArea .pic img {
	display: block;
	width: 100%
}
.loadingArea .picBg {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	background-color: #6eb92b;
	border-radius: 50%;
	width: 111px;
	height: 111px;
	overflow: hidden;
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0)
}
.loadingArea .pic01 {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0)
}
.loadingArea .pic02 {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	opacity: 0
}
.loadingArea .pic03 {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	border-radius: 50%;
	overflow: hidden
}
.loadingArea .pic03 img {
	-webkit-transform-origin: 20px calc(100% - 10px);
	-ms-transform-origin: 20px calc(100% - 10px);
	transform-origin: 20px calc(100% - 10px);
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0)
}
.loadingArea .pic04 {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0
}
.loadingArea .pic04 img {
	-webkit-transform-origin: 35px 40px;
	-ms-transform-origin: 35px 40px;
	transform-origin: 35px 40px;
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0)
}
.loadingArea .pic05 {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0
}
.loadingArea .pic05 img {
	-webkit-transform-origin: 5px 30px;
	-ms-transform-origin: 5px 30px;
	transform-origin: 5px 30px;
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0)
}
.loadingArea .pic06 {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0
}
.loadingArea .pic06 img {
	-webkit-transform-origin: 10px 65px;
	-ms-transform-origin: 10px 65px;
	transform-origin: 10px 65px;
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0)
}
.loadingArea .pic07 {
	position: absolute;
	width: 100%;
	top: 58px;
	left: -3px
}
.loadingArea .pic07 img {
	-webkit-transform-origin: center center;
	-ms-transform-origin: center center;
	transform-origin: center center;
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0)
}
@-webkit-keyframes picMove {
	0% {
		left: 112px
	}
	to {
		left: 0px
	}
}
@keyframes picMove {
	0% {
		left: 112px
	}
	to {
		left: 0px
	}
}
@-webkit-keyframes wordMove {
	0% {
		-webkit-transform: translateX(-20px);
		transform: translateX(-20px);
		opacity: 0
	}
	to {
		-webkit-transform: translateX(0px);
		transform: translateX(0px);
		opacity: 1
	}
}
@keyframes wordMove {
	0% {
		-webkit-transform: translateX(-20px);
		transform: translateX(-20px);
		opacity: 0
	}
	to {
		-webkit-transform: translateX(0px);
		transform: translateX(0px);
		opacity: 1
	}
}
@-webkit-keyframes picScale {
	0% {
		-webkit-transform: scale(0);
		transform: scale(0)
	}
	to {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}
@keyframes picScale {
	0% {
		-webkit-transform: scale(0);
		transform: scale(0)
	}
	to {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}
@-webkit-keyframes picFadeIn {
	0% {
		opacity: 0
	}
	to {
		opacity: 1
	}
}
@keyframes picFadeIn {
	0% {
		opacity: 0
	}
	to {
		opacity: 1
	}
}
@-webkit-keyframes logoFadeOut {
	0% {
		opacity: 1
	}
	to {
		opacity: 0
	}
}
@keyframes logoFadeOut {
	0% {
		opacity: 1
	}
	to {
		opacity: 0
	}
}
.floatArea {
	position: fixed;
	bottom: 5%;
	right: 60px;
	z-index: 4;
	-webkit-transition: opacity .4s ease;
	-o-transition: opacity .4s ease;
	transition: opacity .4s ease;
	pointer-events: none;
	opacity: 0
}
.floatArea.show {
	pointer-events: auto;
	opacity: 1
}
.floatArea a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	background-color: #151515;
	border-radius: 50%
}
.floatArea a:hover {
	background-color: #2378c0
}
.floatArea a:not(:first-child) {
	margin-top: 12px
}
.floatArea b {
	position: absolute;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	bottom: 0;
	right: -10px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: #22c1f5;
	font-size: 15px;
	font-weight: 400;
	font-family: "Raleway", sans-serif;
	color: #fff
}
header {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 50;
	background-color: #fff;
	-webkit-box-shadow: 0px 5px 19.8px 0.2px rgba(0, 0, 0, 0.08);
	box-shadow: 0px 5px 19.8px 0.2px rgba(0, 0, 0, 0.08)
}
header .wrap {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between
}
header .logo {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 300px;
	height: 90px;
}
header .logo a {
	display: block;
	width: 100%;
	height: 90px;
	background: url("../images/logo.png") no-repeat;
	background-size: contain;
	text-indent: -9999px
}
.socialBox .googleSearch {
	opacity: 0;
	-webkit-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
	pointer-events: none;
	width: 45px
}
.socialBox .googleSearch.active {
	pointer-events: auto;
	width: 170px;
	opacity: 1
}
.socialBox .googleSearch .gsc-control-cse {
	border-color: transparent;
	background-color: transparent;
	border: none;
	padding: 0
}
.socialBox .googleSearch .gsc-search-button-v2 {
	border: none
}
.socialBox .googleSearch .gsc-search-button-v2:hover {
	border: none
}
.socialBox .googleSearch .gsc-search-button-v2:focus {
	-webkit-box-shadow: none;
	box-shadow: none
}
.socialBox .googleSearch .td.gsc-search-button {
	margin: 0 5px
}
.socialBox .googleSearch td.gsc-search-button {
	height: 40px
}
.socialBox .googleSearch .gsc-search-button {
	cursor: pointer;
	width: 40px;
	height: 40px;
	margin: 0px;
	padding: 0;
	background-repeat: no-repeat;
	background-image: url(../images/iconSearch.png);
	background-position: center center;
	border-radius: 50%;
	background-color: #2378c0;
	border-color: transparent;
	outline: none;
	-webkit-transition: all .4s ease;
	-o-transition: all .4s ease;
	transition: all .4s ease;
	border: none!important
}
.socialBox .googleSearch .gsc-search-button:hover {
	background-color: #2378c0;
	opacity: 0.85
}
.socialBox .googleSearch .gsc-search-button svg {
	display: none
}
.socialBox .googleSearch .gsib_a {
	padding: 0
}
.socialBox .googleSearch .gsib_a input {
	text-indent: 10px!important;
	height: 40px!important
}
.socialBox .googleSearch .gsib_b {
	display: none
}
.socialBox .googleSearch .gsc-input {
	padding-right: 5px!important;
	background: none!important
}
.socialBox .googleSearch .gsc-input-box {
	height: 40px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}
.searchBox {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex
}
.searchBox input {
	width: 100%;
	height: 45px;
	padding: 0 15px;
	border: none;
	font-family: '微軟正黑體';
	background-color: #fafafa;
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}
.searchBox a {
	-ms-flex-negative: 0;
	flex-shrink: 0;
	display: block;
	width: 45px;
	height: 45px;
	line-height: 45px;
	font-size: 16px;
	color: #fff;
	text-align: center;
	background-color: #51649A
}
.socialBox .social {
	position: relative;
	font-size: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex
}
.socialBox .social>a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin: 0 5px;
	font-size: 19px;
	color: #fff;
	text-align: center;
	background-color: #2378c0
}
.socialBox .social>a:hover {
	opacity: 0.85
}
.socialBox .social .btnSearch {
	margin: 0;
	position: absolute;
	top: 0;
	right: 0
}
.socialBox .social .btnSearch.hidden {
	display: none
}
.searchArea {
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	background: rgba(0, 0, 0, 0.87);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-transition: all .4s ease-in;
	-o-transition: all .4s ease-in;
	transition: all .4s ease-in;
	pointer-events: none;
	opacity: 0
}
.searchArea.active {
	pointer-events: auto;
	opacity: 1
}
.searchArea .inner {
	width: 90%;
	max-width: 960px
}
.searchArea .btnSearch {
	display: inline-block;
	color: #fff;
	font-size: 18px;
	width: 35px;
	height: 35px;
	line-height: 35px;
	text-align: center
}
.searchArea .btnSearch:hover {
	opacity: .78
}
.searchArea input {
	width: 400px;
	height: 35px;
	line-height: 35px;
	background: none;
	border: none;
	border-bottom: 1px solid #ddd;
	font-size: 16px;
	color: #fff;
	font-family: "微軟正黑體", Helvetica, Arial, sans-serif, Heiti TC, "メイリオ"
}
.searchArea input:focus {
	outline: none
}
.btnClose {
	position: absolute;
	right: 15px;
	top: 15px;
	display: block;
	width: 40px;
	height: 40px;
	padding: 10px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s
}
.btnClose:after, .btnClose:before {
	content: '';
	position: absolute;
	top: 50%;
	width: 60%;
	height: 1px;
	background: #fff
}
.btnClose:before {
	left: 8px;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg)
}
.btnClose:after {
	right: 8px;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg)
}
.menu {
	font-size: 0
}
.menu>li {
	position: relative;
	display: inline-block
}
.menu>li>a {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	height: 80px;
	text-align: center;
	padding: 0px 30px;
	font-size: 17px;
	font-weight: normal;
	font-family: "Noto Sans TC", "微軟正黑體", sans-serif;
	color: #111
}
.menu>li>a.current, .menu>li>a:hover {
	color: #2378c0
}
.menu>li>a.current:after, .menu>li>a.current:before, .menu>li>a:hover:after, .menu>li>a:hover:before {
	bottom: 67px
}
.menu>li>a:after, .menu>li>a:before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 100px;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 1px;
	height: 33px;
	background-color: #2378c0;
	-webkit-transition: all .4s ease;
	-o-transition: all .4s ease;
	transition: all .4s ease
}
.menu>li>a:after {
	width: 7px;
	height: 7px;
	/*border-radius: 50%*/
}
.menu .submenu {
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	z-index: 99;
	width: 150px;
	text-align: center;
	background-color: #f7f7f7
}
.menu .submenu a {
	display: block;
	padding: 10px;
	border-bottom: 1px solid #dadada;
	font-size: 15px;
	color: #666;
	background-color: #fff
}
.menu .submenu a:hover {
	color: #fff;
	background-color: #2378c0
}
.m_menu {
	display: none
}
.bannerArea {
	clear: both;
	position: relative
}
.contactArea .wrap {
	position: relative;
	width: 100%
}
.contactArea .titleBox .subTitle {
	color: #fff
}
.contactArea .titleBox .title {
	padding: 5px 0 30px;
	color: #fff
}
.contactArea .Img img {
	display: block;
	width: 100%
}
.contactArea .Txt {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	font-size: 14px;
	font-weight: normal;
	font-family: "Noto Sans TC", "微軟正黑體", sans-serif;
	color: #fff;
	letter-spacing: 1px;
	text-align: center
}
.contactArea ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center
}
.contactArea li:not(:first-child) {
	margin-left: 10px;
	padding-left: 10px;
	border-left: 1px solid rgba(255, 255, 255, 0.2)
}
.contactArea .btn {
	margin-top: 40px
}
.contactArea .btn a {
	display: inline-block;
	width: 240px;
	height: 50px;
	line-height: 50px;
	background-color: #2378c0;
	font-size: 15px;
	font-weight: 300;
	font-family: "Noto Sans TC", "微軟正黑體", sans-serif;
	color: #fff
}
footer .wrap {
	width: 1070px
}
footer .top {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between
}
footer .bottom {
	padding: 25px 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}
footer .right .title {
	padding: 10px 0;
	font-size: 17px;
	font-weight: 600;
	font-family: "Raleway", sans-serif;
	color: #050505
}
footer .footerBorder {
	padding: 60px 0 40px;
	border-bottom: 1px solid #dddddd
}
footer .footerList {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	width: 700px;
	padding: 0 30px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}
footer .footerList .title {
	padding: 10px 0;
	font-size: 17px;
	font-weight: 600;
	font-family: "Raleway", sans-serif;
	color: #2378c0
}
footer .footerList li a {
	display: inline-block;
	padding: 7px 0;
	font-size: 14px;
	font-weight: 400;
	font-family: "Noto Sans TC", "微軟正黑體", sans-serif;
	color: #666666
}
footer .footerList li a:hover {
	color: #2378c0
}
footer .footerInfo {
	padding: 7px 0;
	font-size: 14px;
	font-weight: 300;
	font-family: "Noto Sans TC", "微軟正黑體", sans-serif;
	line-height: 1.8;
	color: #666
}
footer .footerInfo .item {
	padding: 5px 20px
}
footer .footerInfo .tel {
	position: relative
}
footer .footerInfo .tel:before {
	content: "";
	position: absolute;
	left: -20px;
	top: calc(50% - 4px);
	width: 12px;
	height: 12px;
	background-repeat: no-repeat;
	background-image: url(../images/iconTel.png);
	background-size: 8px 12px;
	background-position: center center
}
footer .footerInfo .time {
	position: relative
}
footer .footerInfo .time:before {
	content: "";
	position: absolute;
	left: -20px;
	top: calc(50% - 4px);
	width: 12px;
	height: 12px;
	background-repeat: no-repeat;
	background-image: url(../images/iconClock.png);
	background-size: 12px 12px;
	background-position: center center
}
footer .footerInfo .num {
	font-size: 17px;
	font-weight: 400;
	color: #050505
}
footer .footerInfo p {
	color: #050505
}
footer .social {
	font-size: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center
}
footer .social a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	font-size: 13px;
	font-weight: 400;
	font-family: "Raleway", sans-serif;
	color: #777777;
	white-space: nowrap
}
footer .social a:hover {
	color: #2378c0
}
footer .social a:hover .icon {
	color: #fff;
	background-color: #2378c0
}
footer .social .icon {
	margin-left: 10px;
	margin-right: 3px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 25px;
	height: 25px;
	min-width: 25px;
	border-radius: 50%;
	font-size: 14px;
	text-align: center;
	color: #777777;
	-webkit-transition: all .4s ease;
	-o-transition: all .4s ease;
	transition: all .4s ease
}
.downLogo {
	width: 172px;
}
.copyright {
	display: inline-block;
	font-size: 13px;
	font-weight: 300;
	font-family: "Noto Sans TC", "微軟正黑體", sans-serif;
	color: #454545
}
.bannerArea .wrap {
	width: 100%;
	padding: 0
}
.bannerArea .bannerBox img {
	display: block;
	width: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden
}
.bannerArea.ins .bannerBox {
	position: relative
}
.bannerArea.ins .bannerBox li .Txt {
	color: #fff;
	text-shadow: 0px 0px 2px #222;
}
.bannerArea.ins .bannerBox li.noPic .Txt {
	color: #050505
}
.bannerArea.ins .bannerBox img {
	display: block;
	width: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden
}
.bannerArea.ins .Txt {
	position: absolute;
	top: 40%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center
}
.bannerArea.ins .Txt .subTitle {
	font-size: 26px;
	font-weight: normal;
	font-family: "Noto Sans TC", "微軟正黑體", sans-serif
}
.bannerArea.ins .Txt .title {
	font-size: 75px;
	font-weight: 900;
	font-family: "微軟正黑體", sans-serif
}
.mainArea {
	padding: 30px 0 75px
}
.titleBox .title {
	font-size: 38px;
	font-weight: 400;
	font-family: "Noto Sans TC", "微軟正黑體", sans-serif;
	color: #050505;
	letter-spacing: 0.5px
}
.titleBox .subTitle {
	font-size: 17px;
	font-weight: 500;
	font-family: "Raleway", sans-serif;
	color: #888888;
	letter-spacing: 1px
}
.breadArea {
	padding: 30px 0
}
.breadArea .wrap {
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}
.bread {
	font-size: 15px;
	font-weight: 300;
	font-family: "Noto Sans TC", "微軟正黑體", sans-serif;
	color: #333
}
.bread a {
	color: #aaa
}
.bread span {
	padding: 0 6px 0 5px;
	color: #aaa
}
.mainArea .contentBox {
	clear: both
}
.articleTitle {
	clear: both;
	font-size: 24px;
	font-weight: normal;
	font-family: "Noto Sans TC", "微軟正黑體", sans-serif;
	color: #050505
}
table.breakpoint>tbody>tr>td.expand {
	cursor: pointer;
	background: url("../images/plus.png") no-repeat 5px center;
	padding-left: 40px
}
.m_classLink {
	display: none
}
.classBox {
	padding: 20px 0
}
.classLink li.classDown>a:hover:before {
	color: #2378c0
}
.classLink li.classDown>a.current {
	border: none
}
.classLink li.classDown>a.current:before {
	content: "\f106";
	color: #2378c0
}
.classLink li.classDown>a:before {
	content: "\f107";
	position: absolute;
	right: 12px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	font-family: FontAwesome;
	font-size: 18px;
	color: #111;
	-webkit-transition: all .4s ease;
	-o-transition: all .4s ease;
	transition: all .4s ease
}
.classLink li>a {
	position: relative;
	display: block;
	padding: 15px;
	font-size: 16px;
	font-weight: 400;
	font-family: "Noto Sans TC", "微軟正黑體", sans-serif;
	color: #050505;
	border-bottom: 1px solid #e5e5e5
}
.classLink li>a:hover {
	color: #2378c0
}
.classLink li>a.current {
	color: #2378c0
}
.classLink dl {
	display: none
}
.classLink dl.active {
	display: block
}
.classLink dl a {
	position: relative;
	display: inline-block;
	margin: 0 15px;
	padding: 5px 0px;
	font-size: 15px;
	font-weight: 300;
	font-family: "Noto Sans TC", "微軟正黑體", sans-serif;
	color: #333333
}
.classLink dl a.current, .classLink dl a:hover {
	padding-left: 15px;
	color: #347b59
}
.classLink dl a.current:before, .classLink dl a:hover:before {
	opacity: 1
}
.classLink dl a:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 6px;
	height: 6px;
	background-color: #2378c0;
	border-radius: 50%;
	opacity: 0;
	-webkit-transition: all .4s ease;
	-o-transition: all .4s ease;
	transition: all .4s ease
}
.tagBox {
	padding: 20px 0
}
.tagBox b {
	display: inline-block;
	margin-right: 10px
}
.tagBox ul {
	display: inline-block
}
.tagBox li {
	display: inline-block;
	margin-bottom: 5px
}
.tagBox a {
	position: relative;
	display: block;
	margin: 0 3px;
	padding: 5px 10px;
	border: 1px solid #51649A;
	font-size: 13px;
	color: #51649A
}
.tagBox a:hover {
	color: #fff;
	background-color: #51649A
}
.tagBox a.current {
	color: #fff;
	background-color: #51649A
}
.tagBox a.current:before {
	content: "\f00d";
	margin-right: 5px;
	font-family: FontAwesome;
	font-size: 12px
}
.sectionTitle {
	margin-bottom: 20px;
	padding: 5px;
	border-bottom: 1px solid #d6d6d6;
	font-weight: 400;
	font-size: 15px;
	color: #061540
}
.sectionTitle strong {
	display: block;
	position: relative;
	font-weight: 400
}
.sectionTitle a {
	display: block;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis
}
.tab {
	margin-top: 40px
}
.tab a {
	position: relative;
	display: block;
	float: left;
	padding: 15px 30px;
	font-size: 16px;
	font-weight: 300;
	font-family: "Noto Sans TC", "微軟正黑體", sans-serif;
	color: #454545
}
.tab a:not(:first-child):after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 1px;
	height: 15px;
	background-color: #e5e5e5
}
.tab a.current, .tab a:hover {
	color: #2378c0
}
.tab a.current:before, .tab a:hover:before {
	width: 100%
}
.tab a:before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: #2378c0;
	width: 0%;
	height: 3px;
	-webkit-transition: all .4s ease;
	-o-transition: all .4s ease;
	transition: all .4s ease
}
.tabContent {
	padding: 20px 0px;
	border-top: 1px solid #dcdcdc
}
.tabContent>li {
	display: none
}
.tabContent .textEditor {
	margin: 0
}
.tabContent .sectionTitle {
	display: none
}
.side_menu {
	margin-bottom: 50px
}
.side_menu li {
	position: relative;
	border-bottom: 1px solid #e1e1e1
}
.side_menu li>a {
	display: block;
	padding: 10px 15px;
	font-size: 14px
}
.side_menu li>a.current {
	color: #fff;
	background-color: #8c8c8c
}
.side_menu li>a b {
	margin-left: 10px;
	font-weight: 400;
	font-size: 13px;
	color: #808080
}
.side_menu dl {
	padding-left: 25px
}
.side_menu dl a {
	display: block;
	padding: 10px 15px;
	font-size: 14px
}
.side_menu dl a.current {
	color: #000;
	text-decoration: underline
}
.side_album {
	margin-top: 30px;
	margin-bottom: 30px;
	margin-right: -10px
}
.side_album li {
	float: left;
	width: 33.33%;
	padding: 0 10px 10px 0
}
.side_album a {
	display: block;
	-webkit-box-shadow: 2px 2px 5px #c3c3c3;
	box-shadow: 2px 2px 5px #c3c3c3
}
.side_album a img {
	display: block;
	width: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden
}
.side_booking {
	margin-bottom: 30px
}
.side_booking a {
	display: block;
	border-radius: 4px;
	-webkit-box-shadow: 0 1px 1px #8d2121;
	box-shadow: 0 1px 1px #8d2121;
	font-weight: bold;
	font-size: 25px;
	color: #fff;
	background-color: #f05b8f
}
.side_booking a i {
	display: inline-block;
	font-size: 28px;
	padding: 10px 15px;
	margin-right: 15px;
	border-right: 1px solid #d33434;
	-webkit-box-shadow: 1px 0 #f38a8a;
	box-shadow: 1px 0 #f38a8a
}
.side_booking a:hover {
	-webkit-box-shadow: inset 0 3px 3px #8d2121;
	box-shadow: inset 0 3px 3px #8d2121
}
.side_contactInfo li {
	margin-bottom: 20px
}
.side_contactInfo a {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	font-size: 16px;
	color: #414141
}
.side_contactInfo i {
	display: inline-block;
	vertical-align: middle;
	-ms-flex-negative: 0;
	flex-shrink: 0;
	width: 35px;
	height: 35px;
	line-height: 35px;
	margin-right: 8px;
	border: 2px solid #a5a5a5;
	border-radius: 50%;
	font-size: 20px;
	color: #a5a5a5;
	text-align: center
}
.side_contactInfo b {
	display: inline-block;
	vertical-align: middle;
	font-weight: 400
}
.side_room {
	margin-bottom: 50px
}
.side_room .Img img {
	display: block;
	width: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden
}
.side_room .Txt {
	margin-top: 5px
}
.side_room .Txt p {
	max-height: 100px;
	font-size: 13px;
	color: #858383;
	line-height: 1.8;
	overflow: hidden
}
.side_room h3 a {
	font-size: 16px;
	font-weight: 400
}
.side_share {
	clear: both;
	display: none;
	margin-top: 30px
}
.side_share a {
	display: block;
	width: 100%;
	margin-top: 5px;
	padding: 15px 10px;
	border-radius: 4px;
	font-weight: bold;
	font-size: 13px;
	line-height: 1;
	color: #fff;
	text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
	text-align: center
}
.side_share i {
	padding-right: 5px;
	font-size: 18px
}
.side_share .line {
	-webkit-box-shadow: 0 0 0 1px #22a00b;
	box-shadow: 0 0 0 1px #22a00b;
	border-top: 1px solid #e1ffa9;
	background: #a7e732;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjYTdlNzMyIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMzUlIiBzdG9wLWNvbG9yPSIjMWZiNTBlIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
	background: -moz-linear-gradient(-45deg, #a7e732 0%, #1fb50e 35%);
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #a7e732), color-stop(35%, #1fb50e));
	background: -webkit-linear-gradient(-45deg, #a7e732 0%, #1fb50e 35%);
	background: -o-linear-gradient(-45deg, #a7e732 0%, #1fb50e 35%);
	background: -ms-linear-gradient(-45deg, #a7e732 0%, #1fb50e 35%);
	background: -webkit-linear-gradient(315deg, #a7e732 0%, #1fb50e 35%);
	background: -o-linear-gradient(315deg, #a7e732 0%, #1fb50e 35%);
	background: linear-gradient(135deg, #a7e732 0%, #1fb50e 35%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a7e732', endColorstr='#1fb50e', GradientType=1)
}
.side_share .fb {
	-webkit-box-shadow: 0 0 0 1px #235c9b;
	box-shadow: 0 0 0 1px #235c9b;
	border-top: 1px solid #8DCFF5;
	background: #5da0ea;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVkYTBlYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzZDhjZTYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top, #5da0ea 0%, #3d8ce6 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5da0ea), color-stop(100%, #3d8ce6));
	background: -webkit-linear-gradient(top, #5da0ea 0%, #3d8ce6 100%);
	background: -o-linear-gradient(top, #5da0ea 0%, #3d8ce6 100%);
	background: -ms-linear-gradient(top, #5da0ea 0%, #3d8ce6 100%);
	background: -webkit-gradient(linear, left top, left bottom, from(#5da0ea), to(#3d8ce6));
	background: linear-gradient(to bottom, #5da0ea 0%, #3d8ce6 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5da0ea', endColorstr='#3d8ce6', GradientType=0)
}
.side_news {
	margin: 30px 0
}
.side_news ul {
	margin-top: 20px
}
.side_news li {
	margin-bottom: 25px
}
.side_news .Img {
	overflow: hidden
}
.side_news .Img img {
	display: block;
	max-width: 100%
}
.captchaArea {
	position: relative;
	width: 200px;
	height: 50px;
	background-color: #ddd
}
.captchaArea.unlocking .sliderBtn {
	-webkit-transition: none;
	-o-transition: none;
	transition: none
}
.captchaArea .note {
	position: absolute;
	top: 17px;
	right: 30px;
	z-index: 1;
	font-size: 15px;
	text-align: center;
	font-family: '微軟正黑體';
	color: #777;
	letter-spacing: 1px;
	pointer-events: none
}
.sliderBtn {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 50px;
	height: 50px;
	border: none;
	outline: none;
	background-color: RoyalBlue;
	cursor: pointer;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s linear;
	-o-transition: all .3s linear;
	transition: all .3s linear
}
.sliderBtn:before {
	content: '\f105';
	position: absolute;
	top: 13px;
	left: 23px;
	color: #fff;
	font-size: 24px;
	font-family: FontAwesome;
	pointer-events: none
}
.pageBox {
	margin-top: 45px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center
}
.pageBox a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 35px;
	height: 35px;
	margin: 0 5px;
	font-size: 14px;
	font-weight: 400;
	font-family: "Roboto", sans-serif;
	color: #222;
	border-radius: 50%
}
.pageBox a.noHover {
	pointer-events: none;
	color: #888
}
.pageBox a.current, .pageBox a:hover {
	background-color: #2378c0;
	color: #fff
}
.pageBox a i {
	font-size: 20px
}
@media (max-width:1670px) {
	.wrap {
		width: 100%;
		padding: 0 20px
	}
	.contactArea .wrap {
		padding: 0
	}
}
@media (max-width:1400px) {
	.menu>li>a {
		padding: 0 15px
	}
	.contactArea .Img {
		position: relative;
		height: 280px;
		overflow: hidden
	}
	.contactArea .Img img {
		position: absolute;
		top: 0;
		left: 0;
		width: auto;
		height: 100%
	}
}
@media (max-width:1180px) {
	.pc{display: none;}
	.mo{display: block;}
	.side_menu {
		display: none;
	}
	.outerWrap {
		padding-top: 60px
	}
	header {
		display: none
	}
	.bannerArea.ins .Txt .title {
		font-size: 45px
	}
	.bannerArea.ins .Txt .subTitle {
		font-size: 20px
	}
	.floatArea {
		display: none
	}
	footer .wrap {
		width: 100%
	}
	footer .top {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center
	}
	footer .top .left {
		margin-bottom: 20px
	}
footer .top .left .downLogo {
		margin-left: -100px;
	}


	footer .top .right {
		margin-top: 20px
	}
	footer .right {
		text-align: center
	}
	footer .right .title {
		text-align: center
	}
	footer .footerInfo {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex
	}
	footer .footerInfo .tel {
		display: inline-block
	}
	footer .footerInfo .tel:before {
		top: calc(50% - 6px)
	}
	footer .footerInfo .time {
		display: inline-block
	}
	footer .footerInfo .time:before {
		top: calc(50% - 6px)
	}
	.m_menu {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		display: block;
		width: 100%;
		-webkit-box-shadow: 0 2px 5px rgba(126, 126, 126, 0.68);
		box-shadow: 0 2px 5px rgba(126, 126, 126, 0.68)
	}
	.m_menu .mask {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		display: none;
		background-color: rgba(0, 0, 0, 0.6);
		width: 100%;
		height: 100%;
		padding-bottom: 60px
	}
	.m_menu .m_logo {
		float: left;
		margin-left: 70px;
		-webkit-transition: all .4s ease;
		-o-transition: all .4s ease;
		transition: all .4s ease
	}
	.m_menu .m_logo img {
		padding: 0;
		display: block;
		width: 200px
	}
	.m_menu .controlBox {
		position: relative;
		z-index: 99;
		background-color: #fff
	}
	.m_menu .controlBox a.main {
		position: absolute;
		left: 0;
		top: 0;
		width: 60px;
		height: 60px
	}
	.m_menu .controlBox a.main span {
		position: absolute;
		top: 39px;
		left: 13px;
		margin-top: -1px;
		width: 34px;
		height: 2px;
		background-color: #111;
		-webkit-transition: all .5s;
		-o-transition: all .5s;
		transition: all .5s;
		-webkit-box-sizing: border-box;
		box-sizing: border-box
	}
	.m_menu .controlBox a.main span:after, .m_menu .controlBox a.main span:before {
		content: '';
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: #111;
		-webkit-transition: all .5s;
		-o-transition: all .5s;
		transition: all .5s
	}
	.m_menu .controlBox a.main span:before {
		top: -9px
	}
	.m_menu .controlBox a.main span:after {
		top: -18px
	}
	.m_menu .controlBox a.main.show span:before {
		width: 23px
	}
	.m_menu .controlBox a.main.show span:after {
		width: 0
	}
	.m_menu .controlBox .btn_cart {
		display: inline-block;
		vertical-align: middle
	}
	.m_menu .controlBox .right {
		float: right;
		line-height: 60px;
		margin-right: 10px
	}
	.m_menu .controlBox .right a {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		margin-left: 8px;
		font-size: 13px;
		color: #fff
	}
	.m_menu .controlBox .right a em {
		display: none
	}
	.m_menu .controlBox .right i {
		display: inline-block;
		vertical-align: middle;
		width: 30px;
		height: 30px;
		line-height: 30px;
		font-size: 20px;
		color: #fff;
		text-align: center;
		border-radius: 100%;
		background: #799A1B
	}
	.m_menu .controlBox .right b {
		position: absolute;
		top: 6px;
		right: -5px;
		display: block;
		border-radius: 5px;
		line-height: normal;
		padding: 3px 5px;
		font-size: 13px;
		color: #fff;
		background-color: #C40000
	}
	.m_menu .controlBox .language:hover .submenu {
		display: block
	}
	.hideBox {
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		z-index: 11;
		width: 100%;
		padding: 100px 0 55px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		background-color: #fff;
		-webkit-transform: translateX(-105%);
		-ms-transform: translateX(-105%);
		transform: translateX(-105%);
		-webkit-transition: all .6s ease;
		-o-transition: all .6s ease;
		transition: all .6s ease;
		opacity: .95;
	}
	.hideBox.active {
		-webkit-transform: translateX(0%);
		-ms-transform: translateX(0%);
		transform: translateX(0%)
	}
	.hideBox .contentBox {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.hideBox .sp {
		display: none;
		padding: 10px;
		font-size: 13px;
		color: #fff;
		background-color: #c80303
	}
	.m_floatArea {
		position: absolute;
		top: 10px;
		right: 30px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex
	}
	.m_floatArea a {
		margin: 0 5px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		background-color: #151515;
		border-radius: 50%
	}
	.m_floatArea a:hover {
		background-color: #2378c0
	}
	.m_floatArea a:first-of-type img {
		width: 22px
	}
	.m_floatArea a:nth-of-type(2) img {
		width: 21px
	}
	.m_floatArea b {
		position: absolute;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		bottom: 0;
		right: -10px;
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background-color: #22c1f5;
		font-size: 15px;
		font-weight: 400;
		font-family: "Raleway", sans-serif;
		color: #fff
	}
	.searchBox_m {
		margin: 20px 35px 25px;
		padding: 0 10px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		text-align: center;
		border: 1px solid #e5e5e5;
		border-radius: 20px;
		height: 40px
	}
	.searchBox_m input[type=text] {
		display: inline-block;
		vertical-align: middle;
		width: 100%;
		height: 40px;
		border: none;
		outline: none
	}
	.searchBox_m a {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		vertical-align: middle;
		width: 40px;
		height: 40px;
		font-size: 15px;
		text-align: center;
		color: #fff
	}
	.searchBox_m a img {
		-webkit-filter: contrast(0.3);
		filter: contrast(0.3)
	}
	.m_menu .mfun {
		position: fixed;
		bottom: 0;
		left: 0;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		width: 100%;
		text-align: center
	}
	.m_menu .mfun a {
		-webkit-box-flex: 1;
		-ms-flex-positive: 1;
		flex-grow: 1;
		height: 55px;
		line-height: 55px;
		font-size: 22px;
		color: #fff;
		text-align: center
	}
	.m_menu .mfun a:first-of-type {
		background-color: #2378c0
	}
	.m_menu .mfun a:nth-of-type(2) {
		background-color: #22c1f5
	}
	.m_menu .mfun a:nth-of-type(3) {
		background-color: #2378c0
	}
	.nav a {
		position: relative;
		display: block;
		padding: 10px 50px;
		font-size: 17px;
		font-weight: 500;
		font-family: "Noto Sans TC", "微軟正黑體", sans-serif;
		color: #111111
	}
	.nav a.current, .nav a:hover {
		color: #2378c0
	}
	.nav a.current i, .nav a:hover i {
		color: #2378c0
	}
	.nav a i {
		position: absolute;
		right: 50px;
		top: 50%;
		display: block;
		margin-top: -7px;
		color: #aeaeae
	}
	.nav .submenu {
		padding: 20px 0;
		display: none;
		background-color: #2378c0
	}
	.nav .submenu a {
		position: relative;
		font-size: 13px;
		font-weight: 300;
		font-family: "Noto Sans TC", "微軟正黑體", sans-serif;
		color: #fff;
		padding: 5px 20px 5px 70px
	}
	.nav .submenu a:hover:before {
		opacity: 1
	}
	.nav .submenu a:before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50px;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background-color: #fff;
		-webkit-transition: all .4s ease;
		-o-transition: all .4s ease;
		transition: all .4s ease;
		opacity: 0
	}
}
@media (max-width:960px) {
	.breadArea {
		display: none
	}
}
@media (max-width:767px) {
	.bannerArea.ins .Txt .title {
		font-size: 30px
	}
	.bannerArea.ins .Txt .subTitle {
		font-size: 18px
	}
	footer .mid {
		width: 100%
	}
	footer .footerList {
		width: 100%
	}
	footer .bottom {
		padding: 15px 0;
		-webkit-box-orient: vertical;
		-webkit-box-direction: reverse;
		-ms-flex-direction: column-reverse;
		flex-direction: column-reverse
	}
	footer .bottom>div {
		padding: 10px 0
	}
	ul.classLink {
		display: none
	}
	.m_classLink {
		display: block;
		position: relative
	}
	.m_classLink a.main {
		display: block;
		font-size: 16px;
		font-family: "Noto Sans TC", "微軟正黑體", sans-serif;
		position: relative;
		padding: 12px 20px;
		color: #fff;
		letter-spacing: 0.5px;
		background-color: #2378c0;
		background-repeat: no-repeat;
		background-image: url(../images/faq_hover.png);
		background-size: 537px 100%
	}
	.m_classLink a.main b {
		font-weight: 500
	}
	.m_classLink a.main i {
		display: block;
		font-size: 15px;
		position: absolute;
		right: 10px;
		top: 50%;
		margin-top: -6px
	}
	.m_classLink ul {
		padding: 0;
		list-style: none;
		display: none;
		width: 100%;
		background: #FFF;
		border: 1px solid #d1d1d1;
		position: absolute;
		left: 0;
		top: 100%;
		z-index: 99;
		-webkit-box-sizing: border-box;
		box-sizing: border-box
	}
	.m_classLink ul li {
		padding: 0
	}
	.m_classLink ul li a {
		display: block;
		padding: 12px 20px;
		border-top: 1px solid #d1d1d1;
		font-size: 15px;
		font-weight: 300;
		font-family: "Noto Sans TC", "微軟正黑體", sans-serif;
		letter-spacing: 0.5px;
		background-color: #f4f4f4
	}
	.m_classLink ul li:first-child>a {
		border: none
	}
	.m_classLink .classDown>a {
		position: relative
	}
	.m_classLink .classDown>a:before {
		content: "\f107";
		position: absolute;
		top: 50%;
		right: 10px;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		font-family: FontAwesome
	}
	.m_classLink .classDown>a.open:before {
		content: "\f106"
	}
	.m_classLink dl {
		display: none
	}
	.m_classLink dl dt a {
		border-top: 1px solid #d1d1d1;
		padding-left: 40px
	}
}
@media (max-width:640px) {
	.breadArea {
		display: none
	}
	.mainArea {
		padding: 30px 0
	}
	footer .footerList {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		padding: 0px
	}
	footer .footerList ul {
		display: none
	}
	footer .footerList .title {
		cursor: pointer;
		position: relative;
		border-bottom: 2px solid #eee
	}
	footer .footerList .title.open:after {
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg)
	}
	footer .footerList .title:after, footer .footerList .title:before {
		content: "";
		position: absolute;
		left: auto;
		bottom: auto;
		top: 20px;
		right: 12px;
		width: 10px;
		height: 2px;
		background-color: #2378c0;
		-webkit-transform-origin: center center;
		-ms-transform-origin: center center;
		transform-origin: center center;
		-webkit-transition: all .4s ease;
		-o-transition: all .4s ease;
		transition: all .4s ease
	}
	footer .footerList .title:after {
		-webkit-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		transform: rotate(90deg)
	}
	footer .footerList .title a {
		display: inline-block;
		font-size: 14px;
		font-weight: 300;
		font-family: "Noto Sans TC", "微軟正黑體", sans-serif;
		color: #fff
	}
	footer .bottom>div {
		text-align: center
	}
}
@media (max-width:480px) {
	.col-2 {
		float: none;
		width: 100%
	}
	.col-3 {
		float: none;
		width: 100%
	}
	.col-4 {
		float: none;
		width: 100%
	}
	.col-5 {
		float: none;
		width: 100%
	}
	.titleBox .title {
		font-size: 24px
	}
	.titleBox .subTitle {
		font-size: 14px
	}
	.bannerArea.ins .Txt {
		top: 45%
	}
	.bannerArea.ins .Txt .title {
		font-size: 20px
	}
	.bannerArea.ins .Txt .subTitle {
		font-size: 14px
	}
	.m_floatArea {
		right: 15px
	}
	.m_floatArea a {
		margin: 0 2px
	}
	.m_menu .m_logo {
		margin-left: 60px
	}
}
.imh_opacity {
	background-color: #000;
	overflow: hidden
}
.imh_opacity img {
	-webkit-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden
}
.imh_opacity:hover img {
	opacity: 0.8;
	-webkit-transform: scale(1.05);
	-ms-transform: scale(1.05);
	transform: scale(1.05)
}
.imh_detail {
	background-color: #000;
	overflow: hidden
}
.imh_detail img {
	-webkit-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden
}
.imh_detail a:before {
	content: "Details+";
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 99;
	margin-left: -45px;
	margin-top: -80px;
	display: block;
	padding: 10px 20px;
	font-size: 13px;
	color: #fff;
	border: 2px solid #fff;
	opacity: 0;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease
}
.imh_detail:hover a:before {
	opacity: 1;
	margin-top: -20px
}
.imh_detail:hover img {
	opacity: 0.3;
	-webkit-transform: scale(1.05);
	-ms-transform: scale(1.05);
	transform: scale(1.05)
}
.imh_zoom {
	position: relative;
	background-color: #000;
	overflow: hidden
}
.imh_zoom img {
	-webkit-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
	-webkit-backface-visibility: hidden
}
.imh_zoom a:before {
	content: "\f002";
	display: block;
	position: absolute;
	left: 50%;
	top: -30px;
	margin-top: -20px;
	margin-left: -20px;
	z-index: 99;
	width: 40px;
	height: 40px;
	line-height: 40px;
	border-radius: 50%;
	font-size: 18px;
	color: #fff;
	font-family: FontAwesome;
	text-align: center;
	background-color: #000;
	-webkit-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease
}
.imh_zoom:hover a:before {
	top: 50%
}
.imh_zoom:hover img {
	opacity: 0.3;
	-webkit-transform: scale(1.05);
	-ms-transform: scale(1.05);
	transform: scale(1.05)
}
.newIcon {
	display: inline-block;
	margin-right: 3px;
	padding: 3px 5px;
	border-radius: 3px;
	font-size: 12px;
	font-weight: 400;
	font-family: '微軟正黑體';
	color: #fff
}

.fixedPdCompareBtn {
  position: fixed;
  right: 0;
  bottom: 30%;
  z-index: 9999999;
}

.fixedPdCompareBtn.show {
  right: 0;
}

.fixedPdCompareBtn a {
  position: relative;
  display: block;
  width: 40px;
  height: 130px;
  line-height: 40px;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  letter-spacing: 1px;
  color: #fff;
  text-align: center;
  background-color: #1094c5;
}

.fixedPdCompareBtn a span {
  position: absolute;
  bottom: 0;
  left: 55%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  display: block;
  -webkit-writing-mode: horizontal-tb;
      -ms-writing-mode: lr-tb;
          writing-mode: horizontal-tb;
}

.fixedPdCompareBtn a span:before {
  content: '(';
}

.fixedPdCompareBtn a span:after {
  content: ')';
}

.fixedPdCompareBtn a:hover {
  background-color: #1dc1dd;
}

@media screen and (min-width: 0\0) {
  .fixedPdCompareBtn a span {
    bottom: -18px;
    left: 30%;
  }
}