/* -------------------------------------------------------------------------------------------------------------------------------------------------
	fonts
------------------------------------------------------------------------------------------------------------------------------------------------- */

@font-face {
	font-family: 'arial_0';
	src: url('../../fonts/arial_0/arial_0.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'arialbd_0';
	src: url('../../fonts/arialbd_0/arialbd_0.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'arialbi_0';
	src: url('../../fonts/arialbi_0/arialbi_0.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'ariali_0';
	src: local('☺'), url('../../fonts/ariali_0/ariali_0.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'ARIALN_0';
	src: local('☺'), url('../../fonts/ARIALN_0/ARIALN_0.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'ARIALNB_0';
	src: url('../../fonts/ARIALNB_0/ARIALNB_0.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'ARIALNBI_0';
	src: url('../../fonts/ARIALNBI_0/ARIALNBI_0.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'ARIALNI_0';
	src: local('☺'), url('../../fonts/ARIALNI_0/ARIALNI_0.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'ariblk_0';
	src: local('☺'), url('../../fonts/ariblk_0/ariblk_0.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
.arial_0 {font-family: "arial_0";}
.arialbd_0 {font-family: "arialbd_0";}
.arialbi_0 {font-family: "arialbi_0";}
.ariali_0 {font-family: "ariali_0";}
.ARIALN_0 {font-family: "ARIALN_0";}
.ARIALNB_0 {font-family: "ARIALNB_0";}
.ARIALNBI_0 {font-family: "ARIALNBI_0";}
.ARIALNI_0 {font-family: "ARIALNI_0";}
.ariblk_0 {font-family: "ariblk_0";}

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('../../fonts/digitalclock/BebasNeue-webfont.eot');
    src: url('../../fonts/digitalclock/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/digitalclock/BebasNeue-webfont.woff') format('woff'),
         url('../../fonts/digitalclock/BebasNeue-webfont.ttf') format('truetype'),
         url('../../fonts/digitalclock/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: Lato;
	src: local("微軟正黑體"), local("Microsoft JhengHei");
	unicode-range: U+4E00-9FFF;
}

@font-face {
	font-family: arial_0;
	src: local("微軟正黑體"), local("Microsoft JhengHei");
	unicode-range: U+4E00-9FFF;
}



/*
@font-face {
    font-family: 'uuu';
	src: url('../../fonts/arial_0/arial_0.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: uuu;
	src: local("微軟正黑體"), local("Microsoft JhengHei");
	unicode-range: U+4E00-9FFF;
}*/
/* -------------------------------------------------------------------------------------------------------------------------------------------------
	default
------------------------------------------------------------------------------------------------------------------------------------------------- */

html,body,header,nav,main,section,footer,div,ul,li,h1,h2,h3,h4,p,a,b,span,label,fieldset,figure,select,input,button,textarea,mark,form {
	padding: 0px;
	margin: 0px;
	box-sizing: border-box;
}

html, body { padding: 0px; margin: 0px; float: left; position: relative; height: 100%; width: 100%; -webkit-overflow-scrolling: touch;}

html {
	-webkit-text-size-adjust: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
body { padding-top: 60px; background-color: #ebebeb; text-align: center; font-family:'Microsoft JhengHei', sans-serif; overflow-x: hidden; overflow-y: auto;}

a,img {border:none;}
p {word-wrap: break-word;}
a, button {text-decoration: none; outline: none; cursor: pointer;}
li {list-style-type: none; }
select, input, button, textarea {border-style: none; outline: none;}

.select-none {
	-webkit-user-select: none;
	-moz-user-select: none;
    -o-user-select: none;
	-ms-user-select: none;
	-khtml-user-select: none;
	user-select: none;
}

/* -------------------------------------------------------------------------------------------------------------------------------------------------
	color
------------------------------------------------------------------------------------------------------------------------------------------------- */

.mb {background-color: #bbaa98;}
.mc {color: #bbaa98;}
.ms {border-color: #bbaa98;}
.pink {background-color: #d95c00;}
.green {background-color: #2ade73;}

.sb {background-color: #dad9de;}
.sc {color: #8b9094;}
.ss {border-color: #dad9de;}

/* -------------------------------------------------------------------------------------------------------------------------------------------------
	effict
------------------------------------------------------------------------------------------------------------------------------------------------- */

.animation {
	-moz-transition: all 0.215s ease-in-out;
	-ms-transition: all 0.215s ease-in-out;
	-webkit-transition: all 0.215s ease-in-out;
	transition: all 0.215s ease-in-out;
}

.trans {
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition:  all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;

    -moz-transition-timing-function: cubic-bezier(1,0,0.3,1);
	-ms-transition-timing-function: cubic-bezier(1,0,0.3,1);
	-webkit-transition-timing-function: cubic-bezier(1,0,0.3,1);
	transition-timing-function: cubic-bezier(1,0,0.3,1);
}

.fade {
    -moz-transition: all 1s ease-in;
	-ms-transition:  all 1s ease-in;
	-webkit-transition: all 1s ease-in;
    transition: all 1s ease-in;

    -moz-transition-timing-function: cubic-bezier(1,0,0.3,1);
	-ms-transition-timing-function: cubic-bezier(1,0,0.3,1);
	-webkit-transition-timing-function: cubic-bezier(1,0,0.3,1);
	transition-timing-function: cubic-bezier(1,0,0.3,1);
}

.zoom100 {
	-ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
.zoom0 {
	-ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
}

/* -------------------------------------------------------------------------------------------------------------------------------------------------
	header area
------------------------------------------------------------------------------------------------------------------------------------------------- */
/*
.header {z-index: 4; border-bottom-color: #e6e6e6; border-bottom-style: solid; border-bottom-width: 1px; background-color: white; clear: both; float: left; position: relative; width: 100%;}
*/
.header {right: 0px; left: 0px; top: 0px; z-index: 4; border-bottom-color: #e6e6e6; border-bottom-style: solid; border-bottom-width: 1px; background-color: white; clear: both; float: left; position: absolute; width: 100%;}


.unit-logo {width: 240px; float: left; position: relative; height: 60px; overflow: hidden;}
.logo {left: 0px; width: 100%; margin-top: -25px; top: 50%; float: left; position: absolute; height: 50px;}

/* unit-nav */
.unit-nav { padding-right: 15px; padding-left: 15px; width: auto; float: left; position: relative;}
.unit-nav .unit-btn { padding-right: 15px; padding-left: 15px; float: left; position: relative; color: #8b9094; height: 60px; line-height: 60px; font-size: 16px;}
.unit-nav .active {color: #bbaa98;}

.nav-btn {display: none; float: left; position: relative; height: 60px; width: 60px;}

/* unit-bar */
.unit-bar {float: left; z-index: 999; background-color: #2d2d2d; width: 240px; bottom: 0px; top: 0px; position: fixed; -webkit-overflow-scrolling: touch;}
.bar-on {left: 0px;}
.bar-off {left: -240px;}
.unit-bar-inner {right: 0px; padding-bottom: 68px; padding-top: 68px; bottom: 0px; top: 0px; float: left; position: absolute; width: 100%; overflow-x: hidden; overflow-y: auto;}
.unit-bar-inner .bar-btn {color: white; line-height: 52px; font-size: 16px; border-bottom-color: #999999; border-bottom-style: dotted; border-bottom-width: 1px; height: 52px; width: 100%; clear: both; float: left; position: relative;}
.unit-bar-inner .active {color: white; background-color: #bbaa98;}
.unit-bar-inner .bar-btn:active {background-color: #bbaa98;}

.tools-btn {display: none; float: right; position: relative; height: 60px; width: 60px;}
.tools-bar {right: 0px; top: 0px; z-index: 5; width: auto; float: right; position: absolute;}
.tools-on {right: 0px;}
.tools-off {right: 0px;}


.member-btn {float: left; position: relative; width: auto; height: 60px;}

.member-name { font-style: normal; font-weight: normal; float: left; position: relative; padding-left: 10px; color: #8b9094; text-align: center; line-height: 60px; font-size: 16px; height: 60px;}

.member-nav { display: none; z-index: 9; right: 72px; top: 52px; float: left; position: fixed; height: auto; width: 168px; border-radius: 2px;}
.member-nav-inner {border-left-color: #bbaa98; border-right-color: #bbaa98; border-top-color: #bbaa98; border-left-style: solid; border-right-style: solid; border-top-style: solid; border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; background-color: white; width: 100%; float: left; position: relative;}
.top-arrow {margin-right: 10px; float: right; position: relative; border-right-color: transparent; border-left-color: transparent; border-bottom-color: #bbaa98; border-right-style: solid; border-left-style: solid; border-bottom-style: solid; border-right-width: 8px; border-left-width: 8px; border-bottom-width: 12px;}
.member-nav-btn {padding-right: 15px; padding-left: 15px; background-color: white; border-bottom-color: #bbaa98; border-bottom-style: solid; border-bottom-width: 1px; font-style: normal; font-weight: normal; text-align: left; clear: both; position: relative; float: left; height: 40px; color: #8b9094; line-height: 40px; font-size: 15px; width: 100%;}
.member-nav-inner .active {color: #bbaa98;}





.search-btn, .cart-btn, .item-btn {height: 60px; width: 60px; float: left; position: relative;}
.area-line {float: left; position: relative; height: 60px; width: 1px;}

/* search */
.search {float: left; position: relative; height: 60px; overflow: hidden;}
.show {width: 300px;}
.close {width: 60px;}
.search .keyword {padding-left: 15px; float: left; position: relative; padding-right: 15px; text-align: left; font-size: 16px; height: 60px; width: 240px;}

.sign-icon {height: 60px; float: left; position: relative;}
.sign-btn {display: inline-block; color: #8b9094; font-style: normal; font-weight: normal; text-align: center; line-height: 60px; font-size: 16px; float: none; position: relative; height: 60px; width: 60px;}

.lan-bar { display: none; z-index: 9; right: 12px; top: 52px; float: left; position: fixed; height: auto; width: 168px; border-radius: 2px;}
.lan-nav-inner {border-left-color: #bbaa98; border-right-color: #bbaa98; border-top-color: #bbaa98; border-left-style: solid; border-right-style: solid; border-top-style: solid; border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; background-color: white; width: 100%; float: left; position: relative;}
.lan-bar .top-arrow {margin-right: 10px; float: right; position: relative; border-right-color: transparent; border-left-color: transparent; border-bottom-color: #bbaa98; border-right-style: solid; border-left-style: solid; border-bottom-style: solid; border-right-width: 8px; border-left-width: 8px; border-bottom-width: 12px;}
.lan-nav-btn {padding-right: 15px; padding-left: 15px; background-color: white; border-bottom-color: #bbaa98; border-bottom-style: solid; border-bottom-width: 1px; font-style: normal; font-weight: normal; text-align: left; clear: both; position: relative; float: left; height: 40px; color: #8b9094; line-height: 40px; font-size: 15px; width: 100%;}
.lan-nav-inner .active {border-bottom-width: 1px; border-bottom-color: #bbaa98; border-bottom-style: solid; color: #bbaa98;}



/* -------------------------------------------------------------------------------------------------------------------------------------------------
	slide
------------------------------------------------------------------------------------------------------------------------------------------------- */

.slide {z-index: 3; text-align: center; background-color: #2d2d2d; height: auto; float: left; position: relative; width: 100%; overflow: hidden;}


.slide .slide-img {right: 0px; left: 0px; top: 0px; width: 100%; float: left; position: absolute;}

.slide .banner-img { z-index: 1; width: 100%; float: left; position: relative;}

.banner-content {
	text-align: left;
	right: 0px; left: 0px; bottom: 0px; top: 0px; z-index: 9999; float: left; position: absolute;

	display : -webkit-flex;
	display: flex;

   	-webkit-align-items: center;
   	align-items: center;

   	-webkit-justify-content: center;
    justify-content: center;

    -webkit-flex-direction: column;
    flex-direction: column;
}
.banner-logo {margin-top: 37px; margin-bottom: 10px; float: left; position: relative;}
.banner-content h2 { font-style: normal; color: white; font-family: Lato; font-weight: normal; display: inline-block; margin-bottom: 18px; line-height: 43px; height: auto; font-size: 40px; width: 100%; float: none; position: relative;}
.banner-content h3 { color: white; font-family: Lato; margin-bottom: 32px; display: inline-block; line-height: 23px; height: auto; font-size: 20px; width: 100%; float: none; position: relative;}
.banner-content p { font-family: Lato; color: #4e5456; display: inline-block; line-height: 18px; height: auto; font-size: 13px; width: 100%; float: none; position: relative;}


.title-content {padding-right: 20px; padding-left: 20px; padding-bottom: 60px; padding-top: 100px; clear: both; float: left; position: relative; background-color: white; width: 100%;}
.title-content h2 { font-family: Lato; color: #bbaa98; display: inline-block; margin-bottom: 10px; line-height: 24px; height: auto; font-size: 21px; width: 100%; float: none; position: relative;}
.title-content p { font-family: Lato; color: #a0a0a0; display: inline-block; line-height: 24px; height: auto; font-size: 16px; width: 100%; float: none; position: relative;}







.slide .BR {
	float: right;
	left: auto;
	right: 3%;
	text-align: left;
	height: auto;
	width: 32%;
}

.slide .BC {
	margin-left: -30%;
	text-align: center;
	left: 50%;
	height: auto;
	width: 60%;
}

.slide-content {
	bottom: 0px; top: 0px; position: absolute;

	display : -webkit-flex;
	display: flex;

   	-webkit-align-items: center;
   	align-items: center;

   	-webkit-justify-content: center;
    justify-content: center;

    -webkit-flex-direction: column;
    flex-direction: column;
}


.slide .C {
	margin-left: -30%;
	text-align: center;
	left: 50%;
	height: auto;
	width: 60%;
}
.slide .Cout {z-index: 1; opacity: 0; transform: translateY(-68px);}
.slide .Cin {z-index: 999; opacity: 1; transform: translateY(0px);}

.slide .L {
	float: left;
	right: 0px;
	text-align: left;
	left: 5.8%;
}
.slide .Lout {opacity: 0; transform: translateY(-68px);}
.slide .Lin {opacity: 1; transform: translateY(0px);}

.slide .R {
	float: right;
	left: 0px;
	right: 5.8%;
	text-align: right;
}
.slide .Rout {
	opacity: 0;
	/*transform: translateY(-68px);*/

	-ms-transform: translateY(-68px);
    -webkit-transform: translateY(-68px);
    transform: translateY(-68px);

}
.slide .Rin {
	opacity: 1;
	/*transform: translateY(0px);*/

	-ms-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
}

.slide .slide-out { opacity: 0;}
.slide .slide-in { opacity: 1;}

.slide-content-inner { width: auto; bottom: 10%; height: 71%; position: absolute;}

.slide-content-inner .logo-img {float: none; height: 35%; width: 100%; display: inline-block; position: relative; margin-bottom: 1.6%;}
.slide-content-inner .logo-img img {float: none; position: relative; display: inline-block;}
.slide-content-inner .suject { min-width: 300px; clear: both; content: ""; margin-bottom: 1%; height: auto; color: white; line-height: auto; position: relative;}
.slide-content-inner .suject h2 { width: 100%; font-family: Arial; position: relative;}
.slide-content-inner .suject h2 {font-size: 1.8vw;}
.slide-content-inner .suject p { font-family: Arial; position: relative;}
.slide-content-inner .suject p {font-size: 0.9vw;}
/*
.slide-content .ileft {float: left; text-align: left; left: 0px;}
.slide-content .iright {float: right; text-align: right; right: 0px;}
.slide-content .icenter {float: left; width: 100%; left: 0px; right: 0px; text-align: center;}
*/

.ileft {float: left; text-align: left; left: 0px;}
.iright {float: right; text-align: right; right: 0px;}
.icenter {float: left; width: 100%; left: 0px; right: 0px; text-align: center;}


.link-frame { right: 0px; bottom: 0px; margin-top: 50px; height: 12%; float: none; width: 100%; position: absolute; display: inline-block;}
.link-frame .link-btn { font-family: Arial; height: auto; z-index: 999; position: relative; width: auto; padding-right: 20px; padding-left: 20px;color: #9f3224; background-color: rgba(0,0,0,0.8); border-radius: 3px; cursor: pointer;}
.link-frame .link-btn {font-size: 1.2vw; line-height: 3vw;}
.link-frame .link-btn:hover {color: #9f3224; background-color: white;}
.link-frame .Clink {float: none; position: relative; display: inline-block;}
.link-frame .Llink {float: left;}
.link-frame .Rlink {float: right;}

.dot-control { margin-left: -40%; left: 50%; bottom: 5%; display: inline-block; text-align: center; z-index: 999999; float: none; position: absolute; width: 80%;}
.dot-control .dot {background-color: #999999; margin-bottom: -4px; display: inline-block; margin-right: 8px; margin-left: 8px; float: none; position: relative; height: 10px; width: 10px; border-radius: 12px;}
.dot-control .active {background-color: white;}

/* -------------------------------------------------------------------------------------------------------------------------------------------------
	content area
------------------------------------------------------------------------------------------------------------------------------------------------- */

.content {z-index: 2; background-color: white; text-align: center; clear: both; float: left; position: relative; width: 100%; overflow: hidden;}
.inner {margin-bottom: -4px; width: 1122px; display: inline-block; float: none; position: relative;}
.page-inner {padding-right: 22px; padding-left: 22px; margin-bottom: -4px; width: 1122px; display: inline-block; float: none; position: relative;}

.single-inner { clear: both; margin-bottom: -4px; float: none; position: relative; display: inline-block; width: 800px;}


.none {
	display: none;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------
	media screen
------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 1200px) {

	.inner {width: 100%;}
	.page-inner {width: 100%;}

	.nav-btn {display: block;}
	.unit-nav {display: none;}

	/* slide */
	/*
	.slide-content h2 { line-height: 43px; font-size: 40px;}
	.slide-content p {line-height: 22px; font-size: 15px;}
	*/
}

@media screen and (max-width: 1024px) {


	/* slide */
	/*
	.slide .L {width: 80%;}
	.slide .R {width: 80%;}
	*/
	/*
	.slide-content h2 { line-height: 28px; font-size: 25px;}
	.slide-content p {line-height: 20px; font-size: 14px;}
	*/
	/*
	.link-frame {bottom: 15%;}
	.link-frame .link-btn { padding-right: 15px; padding-left: 15px; height: 36px; line-height: 36px; font-size: 12px;}
	*/
}







@media screen and (max-width: 880px) {

	.single-inner {padding-right: 20px; padding-left: 20px; width: 100%;}
	/* slide */
	/*
	.slide-content p {line-height: 16px; font-size: 12px;}
	*/
}
@media screen and (max-width: 768px) {

	/* tools-bar */
	.tools-bar {border-left-color: #bbaa98; border-left-width: 1px; border-left-style: solid; bottom: 0px; top: 61px; background-color: white; position: fixed; width: 61px;}

	.tools-off {right: -301px;}
	.tools-btn {display: block;}

	.area-line {height: 1px; width: 100%;}

	.search { border-bottom-color: #bbaa98; border-bottom-style: solid; border-bottom-width: 1px; width: 100%; clear: both;}
	.show {right: 0px; top: 61px; position: fixed;}
	.search .keyword {width: auto; left: 60px; position: absolute; right: 0px;}


	.item-btn { width: 100%; clear: both;}
	.cart-btn { width: 100%; clear: both;}
	.member-btn {clear: both; width: 100%;}
	.member-icon {float: left;}
	.member-name {display: none; padding-right: 20px; float: right;}
	.sign-icon, .sign-btn {width: 100%; clear: both;}



	.top-arrow {display: none;}
	.member-nav {top: 168px; right: 68px;}
	.lan-bar {top: 268px; right: 68px;}




	/* slide */
	/*
	.slide-content p {display: none;}

	.link-frame {margin-top: 0px; position: relative; bottom: auto;}
	*/
}


@media screen and (max-width: 480px) {


	.title-content {padding-bottom: 48px; padding-top: 48px;}

	.unit-bar {width: calc(100% - 120px);}
	.bar-off {left: -300px}

	.unit-logo {width: calc(100% - 120px);}
	/* slide */


	.slide .L {
		left: 12%;
	}

	.slide .R {
		right: 12%;
	}

	/*.slide-content h2 { line-height: 21px; font-size: 18px;}*/
	/*.slide-content {display: none;}*/
}