@charset "utf-8";
/* CSS Document */

*, body, html{ margin:0; padding:0;}
.clear{ clear:both}

/*線上預約*/
.reserve{background:#ECE3D2; margin-top:5px;}
.reserve_img{ float:left; width:65%; height:150px;}
.reserve_title{ float:right; width:35%; height:150px; line-height:130px;}
/*slogan*/
.slogan{text-align:center;}

/*Dfnewsbox*/
.Dfnewsbox{ background: url(../images/d-bg1.jpg) bottom center no-repeat;}
.dfshare{ width:50%; float:left;}
.dfnews{ width:50%; float:right; padding-left:25px;}
.dftitle{padding:10px 0px 10px 0px;}

.dfnews ul{ margin:0px; padding:0px;}
.dfnews li{ list-style-type:none; width:100%px; border-bottom:#CCC dotted 1px; display:block;
	transition:0.5s all;
	-webkit-transition:0.5s all;
	-moz-transition:0.5s all;
	-o-transition:0.5s all;
	-ms-transition:0.5s all;}
.dfnews li.titleli{padding:15px 0px 15px 0px;}
.dfnews span.content{ color:#333; display:inline-table; font-size:14px; font-weight:normal; line-height:20px;}
.dfnews span.content.date{ width:15%;}
.dfnews span.content.subject{width:85%;}
.dfnews li.titleli:hover{ cursor:pointer; color:#F05F23;}
.dfnews li:hover span.content.subject, .dfnews li:hover span.content.date{color:#F05F23;}

/*toTop*/
#toTop {
	display:none;
	text-decoration:none;
	position:fixed;
	bottom:2px;
	right:2px;
	overflow:hidden;
	width:27px;
	height:26px;
	border:none;
	text-indent:100%;
	background:url(../images/ui.totop.png) no-repeat left top;
	z-index:999;
}
#toTopHover {
	background:url(../images/ui.totop.png) no-repeat left -26px;
	width:27px;
	height:26px;
	display:block;
	overflow:hidden;
	float:left;
	opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);
}
#toTop:active, #toTop:focus {
	outline:none;
}

/*foot*/
.foot{ margin-top:20px; background:#F6F6F6; padding:10px 0px 10px 0px;}
.foot2{ float:right; width:230px; padding:8px;}

/*foot3*/
.foot3{ text-align:center;background:#F6F6F6; border-top:#FFF solid 1px; padding:5px; font-size:14px;}
.foot3 ul{ list-style-type:none;}
.foot3 ul li{ display:inline-block; margin-right:10px; padding:5px; height:20px; line-height:20px;}
.foot3 ul li span{ color:#F05F23;}

/*topimg*/
.topbg_contact{ background:#B35100; overflow:hidden;}
.topbg_news{ background:#644B31; overflow:hidden;}
.topbg_blog{ background:#AB6927; overflow:hidden;}
.topbg_product{ background:#FFF; overflow:hidden;}

/*contactmcont*/
.contactmcont{ padding:40px 0px 40px 0px; background:url(../images/contact_bg.jpg) top right no-repeat;}
.contactmcont h1{ font-size:50px; text-align:center; padding-bottom:20px;}
.contactmcont .cont{ font-size:16px; line-height:22px; text-align:center;}

/*maincont*/
.maincont{ padding:20px 0px 10px 0px;}
.maincont .mh1{ background:url(../images/dot.svg) top right no-repeat; padding:20px 50px 10px 0px; display:inline-block; font-size:30px; color:#535362;}
.maincont .mh2{ padding:20px 0px 10px 30px; display:inline-block; font-size:20px; color:#535362;}
.mypage{ text-align:center; margin-top:20px;}

/*contbox詳細內容*/
.contbox{ max-width:1000px; margin:20px auto 15px auto; min-height:100%; padding-bottom:80px;}
.ctitle{ border-bottom:#D3D3D3 dotted 1px; padding-bottom:15px;}
.ctitle h2{font-size:24px; font-weight:600; padding-bottom:20px; margin:0}
.ctitle .ndate{ font-size:13px; color:#9797A6;}
.ctitle .button{ font-size:14px;}
.ctitle .button .btn, .backbtn{
	height: 25px;
	overflow: hidden;
	margin: 0px 0 0 0px;
	padding: 0 10px;
	outline: none;
	border: 0;
	text-decoration: none;
	color: #fff;
	cursor: pointer;
	background:#F05F23;
	border-radius:25px;
	line-height:20px;transition:0.5s all;	-webkit-transition:0.5s all;-moz-transition:0.5s all;-o-transition:0.5s all;-ms-transition:0.5s all;
}
.ctitle .button .btn:hover, .backbtn:hover{background:#F38A5C;}

.backbtn{
	height: 36px;
	overflow: hidden;
	margin: 0px 0 0 0px;
	padding: 0 20px;
	outline: none;
	border: 0;
	text-decoration: none;
	color:#F05F23;
	border: #F05F23 solid 2px;
	cursor: pointer;
	background:#FFF;
	border-radius:25px;
	line-height:20px;transition:0.5s all;	-webkit-transition:0.5s all;-moz-transition:0.5s all;-o-transition:0.5s all;-ms-transition:0.5s all;
}
.backbtn:hover{background:#F05F23; color:#FFFFFF}

.cdetailbox{ padding:15px 0px 15px 0px; font-size:15px; line-height:30px;}

/*news*/
.news{padding:0px; position:relative;}
.news ul{ margin:0px; padding:0px;}
.news li{ list-style-type:none; width:100%; border-bottom:#CCC dotted 1px; display:block;
	transition:0.5s all;
	-webkit-transition:0.5s all;
	-moz-transition:0.5s all;
	-o-transition:0.5s all;
	-ms-transition:0.5s all;}
.news li.titleli{padding:15px 0px 15px 10px;}
.news .newstitlebg{background: url(../images/news_title_bg.png) top left repeat; color:#A8000D;}
.news span.title{ display:inline-table; font-size:15px; font-weight:800; height:40px; line-height:42px; padding-left:10px;}
.news span.title.t1{ width:15%;}
.news span.title.t2{ width:85%;}
.news span.content{ color:#20202F; display:inline-table; font-size:16px; font-weight:600;line-height:20px;transition:0.5s all;	-webkit-transition:0.5s all;-moz-transition:0.5s all;-o-transition:0.5s all;-ms-transition:0.5s all;}
.news span.content.date{ width:15%; color:#9797A6; font-weight:normal; font-size:14px;}
.news span.content.subject{width:85%;}
.news li.titleli:hover{ background:#F7F7F7; cursor:pointer; color:#9F1E23;}
.news li:hover span.content.subject, .news li:hover span.content.date{color:#EB6700;}

/*專欄分享*/
.blogbox{ float:left; width:23%; margin:10px; border:#FFF solid 1px; line-height:20px;transition:0.5s all;-webkit-transition:0.5s all;-moz-transition:0.5s all;-o-transition:0.5s all;-ms-transition:0.5s all; height:280px;}
.blogbox .bimg{ position:relative;}
/*.blogbox .tptitle{ color:#FFF; position:absolute; bottom:5px; right:5px; font-size:14px;-webkit-filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 1));
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 1))}
.blogbox .tptitle:hover{color:#F9E474}*/
.blogbox .tptitle{ color:#FFF; background:#689E00; position:absolute; bottom:0px; right:0px; font-size:14px; padding:2px 4px 2px 4px;}
.blogbox .tptitle:hover{color:#F9E474; background:#006935}

.blogbox img{}
.blogbox:hover{ border-color:#FFF; cursor:pointer;}
.blogbox:hover img{opacity: 0.8; filter: alpha(opacity=80);}
.blogbox .bdate{ font-size:13px; padding:5px 0px 0px 5px;color:#9797A6;}
.blogbox .bh1{ font-size:16px; padding:5px;color:#EB6700; font-weight:600;transition:0.5s all;-webkit-transition:0.5s all;-moz-transition:0.5s all;-o-transition:0.5s all;-ms-transition:0.5s all;}
/*
.blogbox:hover .bh1{color:#F05F23;}
.blogbox:hover .bcont{color:#535362;}
*/
.blogbox .bcont{ font-size:14px; padding: 0px 5px; color:#9797A6;transition:0.5s all;-webkit-transition:0.5s all;-moz-transition:0.5s all;-o-transition:0.5s all;-ms-transition:0.5s all;}

.blogbox:hover .bimg{background:#000000; overflow:hidden;}
.blogbox .bdate span.btype{color:#689E00; }
.blogbox .bdate span.btype:hover{ color:#EB6700}
.blogbox .bdate span i{border-radius:25px; background:#689E00; padding:3px; color:#FFFFFF;}
.blogbox .bdate span:hover i{background:#EB6700}

/*product*/
.prdbox{ float:left; width:23%; margin:10px 10px 30px 10px; border:#FFF solid 1px; line-height:20px;transition:0.5s all;-webkit-transition:0.5s all;-moz-transition:0.5s all;-o-transition:0.5s all;-ms-transition:0.5s all;}
.prdbox .bimg{ text-align:center;}
.prdbox img{ transition:0.5s all;-webkit-transition:0.5s all;-moz-transition:0.5s all;-o-transition:0.5s all;-ms-transition:0.5s all;}
.prdbox:hover{ border-color:#FFF; cursor:pointer;}
.prdbox:hover img{filter:contrast(115%);-webkit-filter:contrast(115%);}
.prdbox .bh1{ text-align:center; font-size:16px; height:45px; padding:5px 5px 5px 5px;color:#EB6700; font-weight:600;transition:0.5s all;-webkit-transition:0.5s all;-moz-transition:0.5s all;-o-transition:0.5s all;-ms-transition:0.5s all;}
.prdbox:hover .bh1{color:#CE2B2B; font-size:17px;}
.prdbox:hover .bimg{background:#FFF; overflow:hidden;}

/*product detail*/
.pddetailbox{ padding:30px 0px 30px 0px}
.pddetailbox a{ color:#F05F23}
.pddetailbox a:hover{ color:#EB6700}
.pddetailbox .pddetimg{ float:left; width:40%;}
.pddetailbox .pddetcont{ float:right; width:60%; padding:20px 30px 0px 30px;}
.pddetailbox .pddetcont h1{ font-size:30px; color:#EB6700; font-weight:800; border-bottom:#DBDBEA solid 1px; padding-bottom:20px; margin-bottom:10px;}
.pddetailbox .pddetcont div{ padding:5px 0px 5px 0px; line-height:25px; font-size:14px; }
.pddetailbox .pddetcont .pdseries{ font-weight:600; color:#006834}
.pddetailbox .pddetcont span.subtitle{ color:#9797A5; display: inline-block; width:80px; font-weight:800;}
.pddetailbox .pddetcont span.subcont_1{ color:#313140; display: inline-block;}
.pddetailbox .pddetcont .memo{ font-size:14px;}
.pddetailbox .pddetcont .memo ul {list-style-type: disc; display: table; margin-bottom:10px;margin-left:20px;}
.pddetailbox .pddetcont .memo ol {list-style-type: decimal; display: table; margin-bottom:10px; margin-left:20px;}

.pddetailbox .pddetcont .button .btn{
	font-size:13px;
	height: 25px;
	overflow: hidden;
	margin: 0px 0 0 0px;
	padding: 0 10px;
	outline: none;
	border: 0;
	text-decoration: none;
	color: #fff;
	cursor: pointer;
	background:#F05F23;
	border-radius:25px;
	line-height:20px;transition:0.5s all;	-webkit-transition:0.5s all;-moz-transition:0.5s all;-o-transition:0.5s all;-ms-transition:0.5s all;
}
.pddetailbox .pddetcont .button .btn:hover{background:#F38A5C;}
.pddetailbox .pddetcont .backbtn{
	color:#F05F23;
	font-size:13px;
	height: 30px;
	overflow: hidden;
	margin: 0px 0 0 0px;
	padding: 0 20px;
	outline: none;
	border: #F05F23 solid 2px;
	text-decoration: none;
	cursor: pointer;
	background:#FFF;
	border-radius:25px;
	line-height:20px;transition:0.5s all;	-webkit-transition:0.5s all;-moz-transition:0.5s all;-o-transition:0.5s all;-ms-transition:0.5s all;
}
.pddetailbox .pddetcont .backbtn:hover{background:#F05F23; color:#FFF;}

.pddetailbox .pddetcont .buybtn{
	color:#CC3D3D;
	font-size:13px;
	height: 30px;
	overflow: hidden;
	margin: 0px 0 0 0px;
	padding: 0 20px;
	outline: none;
	border: #CC3D3D solid 2px;
	text-decoration: none;
	cursor: pointer;
	background:#FFF;
	border-radius:25px;
	line-height:20px;transition:0.5s all;	-webkit-transition:0.5s all;-moz-transition:0.5s all;-o-transition:0.5s all;-ms-transition:0.5s all;
}
.pddetailbox .pddetcont .buybtn:hover{background:#CC3D3D; color:#FFF;}



/*SPA*/
.spabox{ float:left; width:23%; height:250px; margin:10px; border:#FFF solid 1px; line-height:20px;transition:0.5s all;-webkit-transition:0.5s all;-moz-transition:0.5s all;-o-transition:0.5s all;-ms-transition:0.5s all;}
.spabox img{}
.spabox:hover{ border-color:#FFF; cursor:pointer;}
.spabox:hover img{opacity: 0.8; filter: alpha(opacity=80);}
.spabox .bh1{ font-size:16px; padding:5px;color:#EB6700; font-weight:600;transition:0.5s all;-webkit-transition:0.5s all;-moz-transition:0.5s all;-o-transition:0.5s all;-ms-transition:0.5s all;}
.spabox:hover .bh1{color:#F05F23;}
.spabox:hover .bimg{background:#000000; overflow:hidden;}

/*SPAdet*/
.spadet { padding-bottom:20px; line-height:25px;}
.spadet h1 { font-size:30px; color:#EB6700; font-weight:600;}
.spadet span.stitle{ display:inline-table; width:98px; background:none; font-size:14px; color:#828282; font-weight:normal; text-align:right; padding:0px;}
.spadet span.scont{ display:inline-table; color:#F38A5C; font-size:14px;font-weight:normal; width: 80px; text-align:right;}
.spadet .spadetLeft{ float:left; width:30%;}
.spadet .spadetRight{ float:right; width:70%; font-size:14px; padding-top:10px; padding-right:30px; line-height:25px;}
.spadet table{border-collapse: separate;border-spacing: 2px; border-bottom:#ECECFB solid 1px; margin-bottom:15px;}
.spadet table th{ background:#ECECFB; padding:7px; width:33.333%; text-align:center}
.spadet table td{ background:none; padding:7px; width:33.333%; text-align:center;color:#EB6700;}

hr {
	border-bottom: 1px solid #fefefe;
	border-top: 1px solid #ccc;
	margin: 0;
}
/*旗艦館*/
.fullimg{ 
	background: url(../images/flagship/1.jpg) center center no-repeat; 
	-webkit-background-size: cover;
  	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.fullimg2{
	background:url(../images/flagship/4.jpg?v=2) center center no-repeat;
}
.fullimg3{
	background:url(../images/flagship/5.jpg?v=2) center center no-repeat;
}
.mx1160{ max-width:1160px; padding:20px; margin:0px auto;}
.fs_nt1{float:left; font-size:60px; font-weight:800; color:#FFF; text-align:center; line-height:60px;padding:420px 0px 20px 0px; vertical-align: bottom;}
.fs_nt2{ float:right; font-size:16px; font-weight:600; color:#FFF; padding:300px 0px 80px 0px; height:520px; text-shadow: 0px 0px 20px #000,0px 0px 20px #000,0px 0px 20px #000;}

.fs_t1{ font-size:60px; font-weight:800; color:#FFF; text-align:center; padding:400px 0px 80px 0px; line-height:60px; }
.fs_t2{ font-size:60px; font-weight:800; color:#333; text-align:center; padding:80px 0px 30px 0px; line-height:60px; }


.fs_c1{ background-color:rgba(255,255,255,0.9); padding:60px; font-size:16px; text-align:center; line-height:23px; color:#000000; font-weight:600;}
.fs_c2{ background-color:#F2F2F2; padding:0px 0px 30px 0px; font-size:16px; text-align:center; line-height:23px; color:#000000; font-weight:600;}

.storeselect {
    padding:5px;
    margin: 0;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    color:#333;
    border: #979797 solid 1px;
    outline:none;
    display: inline-block;
    cursor:pointer;
	font-size:16px;
}
.stitle{ background:#F6F6F6; padding:7px; font-size:16px; font-weight:600; color:#F05F23; margin-top:10px;}
.col20{ width:20%}
.col30{ width:30%;}
.col35{ width:40%;}
.col50{ width:50%;}
.col500{ width:50%;}
.col70{ width:70%;}
.col30, .col70{ padding:5px; float:left;}

.myindex{ font-size:13px; color:#666666; text-align:right;}
.myindex a{color:#666666; text-decoration:none;}
.myindex a:hover{ color:#EB6700}
.myindex ul{ list-style-type:none;}
.myindex li{ display:inline-table; padding:0px 5px 0px 0px;}
.myindex i{ padding-right:5px;}

/*youtube*/
center, .center{
    text-align: center;
	padding-bottom: 60px;
	max-width:1130px;
}
.youtubecontent{
	float: none;
	clear: both;
	width: 1130px;
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 25px;
	height: 0;
    margin: 0px auto;
	max-width:100%;
		
}
.youtubecontent iframe,
.youtubecontent object,
.youtubecontent embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    max-width: 1130px;
    max-height: 660px;
}

.mystore{ float:left; width:50%; text-align:center; line-height:30px;}
.mystore h2{ font-size:20px; color:#D66417; font-weight:600;}

@media (max-width:1200px) {
	.blogbox{ width:22.5%;}
	.spabox{ width:22.5%;}
	.prdbox{ width:22.5%;}
	.youtubecontent embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.container{ max-width:940px;}
}


@media (max-width:992px) {
	/*線上預約*/
	.reserve_img{ float:left; width:70%; height:124px;}
	.reserve_title{ float:right; width:30%; height:124px; line-height:110px; text-align:center;}
	
	.dfnews span.content.date{ background-color:#F05F23; width:auto; padding:2px 5px 2px 5px; color:#FFFFFF; border-radius:5px; font-size:13px;}
	.dfnews li:hover span.content.date{background-color:#F2880E; color:#FFF;}
	.dfnews .news5, .dfnews .news6, .dfnews .news7, .dfnews .news8{display:none;}
	.contbox{ width:100%; margin:15px auto 15px auto;}
	.blogbox{ width:30%;}
	.spabox{ width:30%;}
	.prdbox{ width:30%;}
}


@media (max-width:768px) {
	
	.dfnews .news5, .dfnews .news6, .dfnews .news7, .dfnews .news8{display:none;}
	.dfnews span.content.date{ width:15%; background:none; color:#333; padding:0;}
	.dfnews span.content.subject{width:85%;}
	.dfnews li.titleli:hover{ cursor:pointer; color:#F05F23;}
	.dfnews li:hover span.content.subject, .dfnews li:hover span.content.date{color:#F05F23; background:none;}
	/*contactmcont*/
	.contactmcont{ padding:40px 0px 40px 0px; background:url(../images/contact_bg_small.jpg) top right no-repeat;}
	.contbox{ width:100%; margin:15px auto 15px auto;}
	.blogbox{ width:30%;}
	.spabox{ width:30%;}
	.prdbox{ width:30%;}
}


@media (max-width:720px) {
	/*線上預約*/
	.reserve_img{ float:none; width:100%; height:auto;}
	.reserve_title{ float:none; width:100%; height:50px; line-height:50px; text-align:center;}
	.blogbox{ width:46%;}
	.spabox{ width:46%; height:280px}
	.prdbox{ width:46%;}
	.col30{ width:40%;}
	.col70{ width:60%;}
	.col30, .col70{ padding:5px; float:left;}
	.spadet .spadetLeft{ width:40%;}
	.spadet .spadetRight{ width:60%;}
	.pddetailbox .pddetimg{ float:left; width:40%;}
	.pddetailbox .pddetcont{ float:left; width:60%; padding:20px 30px 0px 30px;}
	.pddetailbox .pddetcont h1{ padding-top:0px;}
	.pddetailbox .pddetcont span.subtitle{width:25%; vertical-align:top;}
	.pddetailbox .pddetcont span.subcont_1{ width:73%;}
	
	.mx1160{ padding:0px;}
	.fs_nt1{float:none; font-size:60px; font-weight:800; color:#FFF; text-align:center; padding:400px 0px 80px 0px; line-height:60px;}
	.fs_nt2{ float:none; background-color:rgba(255,255,255,0.7); padding:30px; font-size:16px; text-align:center; line-height:23px; color:#000000; font-weight:600; height:auto;text-shadow: 0px 0px 20px #FFF,0px 0px 20px #FFF,0px 0px 20px #FFF;}
	.mystore{ float:none; width:100%; padding:10px;}	
}


@media (max-width:600px) {
	.dfshare{ width:100%; float:none;}
	.dfnews{ width:100%; float:none; padding:0;}
	.dfnews .news4, .dfnews .news5{display:block;}
	.dfnews li.titleli{padding:10px 0px 10px 0px;}
	.news span.title.t1, .news span.content.date{ width:20%;}
	.news span.title.t2, .news span.content.subject{ width:80%;}
	.blogbox{ width:44%; height:auto;}
	.spabox{ width:44%; height:240px}
	.prdbox{ width:44%;}
	.ctitle .ndate{ font-size:13px; display:block; padding-top:10px;}
	.col30, .col70{ padding:5px; float:none; width:100%;}
	.spadet .spadetLeft{ width:40%;}
	.spadet .spadetRight{ width:60%;padding:20px 30px 0px 30px;}
	.youtubecontent iframe,
	.youtubecontent object,
	.youtubecontent embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
} 


@media (max-width:480px) {
	
	.dfnews span.content.date{ width:20%;}
	.dfnews span.content.subject{width:80%;}
	
	.news li.titleli{padding:10px 0px 10px 10px;}
	.news span.content.date{ width:100%; margin-bottom:5px;}
	.news span.content.subject{width:100%;}
	.news span.content.date{ background-color:#CACAD9; width:auto; padding:2px 5px 2px 5px; color:#FFFFFF; border-radius:5px; font-size:13px; transition:0.5s all;	-webkit-transition:0.5s all;-moz-transition:0.5s all;-o-transition:0.5s all;-ms-transition:0.5s all;}
	.news li:hover span.content.date{background-color:#EB6700; color:#FFF;}
	.blogbox{ width:100%; float:none; margin:10px 0px 10px 0px;}
	.spabox{ width:100%; float:none; margin:10px 0px 10px 0px; height:320px;}
	.prdbox{ width:40%;}
	.spadet h1{ text-align:center;}
	.spadet .spadetLeft{ width:100%;}
	.spadet .spadetRight{ width:100%; padding-right:0px; font-size:16px;}
	.pddetailbox .pddetimg{ float:none; width:100%;}
	.pddetailbox .pddetcont{ float:none; width:100%; padding:20px 30px 0px 30px;}
	.pddetback{ text-align:center;}
}