@charset "utf-8";

/* commen */
body{
	margin: 0;
	min-width: 100%;
	padding: 0;
	font-family: Arial, sans-serif, Helvetica, 微軟正黑體, Microsoft JhengHei;
	background: #fce5c8;
}

a:link {text-decoration:none; color: #333333;}
a:visited {text-decoration:none; color: #333333;}
a:active {text-decoration:none; color: #333333;}
a:hover {text-decoration:none; color: #555555;}

ul, li {
margin: 0;
padding: 0;
}

.clear {display: inline-block;}
.clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clear {height: 1%;}
.clear {display: block;}
/* End hide from IE-mac */

img { max-width: 100%; border: 0;} 
.shadow {
-moz-box-shadow:  0px 3px 10px 0px #555555;
-webkit-box-shadow:  0px 3px 10px 0px #555555;
box-shadow:  0px 3px 10px 0px #555555;
}
.title1 {color: #2A8177; font-size: 24px; font-weight: bold;}
.title2 {color: #ffffff; font-size: 24px; font-weight: bold;}
.title3 {color: #ffffff; font-size: 48px; font-weight: bold; text-shadow: 1px 1px 1px #222222; line-height: 52px;}
.title4 {color: #2A8177; font-size: 16px; font-weight: bold;}

.title1 a:link, .title1 a:visited, .title4 a:visited {color: #2A8177;}
.title1 a:hover, .title4 a:hover {color: #3A978D;}

.dashed { border: dotted 1px #555555;}
.dashed_bottom { border-bottom: dotted 1px #555555;}

.float { float: left;}


/*navigation*/
.header { min-width: 320px; max-width: 100%;}
.nav {
width: 100%;
max-width: 100%;
height: 6em;
margin: 0 auto;
top: 0;
line-height: 96px;
background: url(../images/header_bg3.png) 50% bottom repeat-x, -moz-linear-gradient(top, #8D3A9C 0%,#4E1F53 100%); /* FF3.6+ */
background: url(../images/header_bg3.png) 50% bottom repeat-x, linear-gradient(top, #8D3A9C 0%,#4E1F53 100%);
background: url(../images/header_bg3.png) 50% bottom repeat-x, -webkit-linear-gradient(top, #8D3A9C 0%,#4E1F53 100%);
background: url(../images/header_bg3.png) 50% bottom repeat-x, -ms-linear-gradient(top, rgba(141,58,156,1) 0%,rgba(78,31,83,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8d3a9c', endColorstr='#4e1f53',GradientType=0 ); /* IE6-8 */
-pie-background: url(../images/header_bg3.png) 50% bottom repeat-x, linear-gradient(#8D3A9C, #4E1F53);
behavior: url(PIE.htc);
}

.nav_inner {
width: 70%;
margin-left: 15%;
height: 6em; 
position: relative;
}
.nav ul { 
list-style: none;
width: 70%;
height: 6em;
right: 0;
position: absolute;
}
.nav ul li {
width: 20%;
height: 6em;
text-align: center;
font-weight: bold;
float: left;
position: relative;
}

.nav ul li a{ display: block; height: 3em; padding: 24px 0;}

.nav ul li a:link, .nav ul li a:visited, .nav ul li a:hover { color: #ffffff;}
.nav ul li:hover {
background: rgba(255, 255, 255, .2);
background: #78417F\9;
-webkit-transition: all .3s linear;
}
.nav ul li:hover a:link, .nav ul li:hover a:visited { color: #DAB384;}
.nav ul li:hover > ul {
  display: block; /* 滑鼠滑入母選單後，顯示子選單 */
  top: 100%;
}
.nav ul .child {
list-style: none;
width: 315px;
height: auto;
min-height: 160px;
max-height: 210px;
text-align: center;
right: auto;
padding: 10%;
position: absolute;
z-index: 500;
display: none;
border-radius: 0 0 50px 50px;
background: rgba(96, 45, 102, .8);
background: #78417F\9;
}
.nav ul .child a {
height: auto;
padding: 0;
z-index: 500\9;
}
.nav ul .child a li {
width: auto;
height: auto;
list-style: none;
font-size: 19px;
text-align: center;
line-height: normal;
color: #602d66;
background: rgba(255, 255, 255, .7);
background: #ffffff\9;
padding: 10px;
float: left;
margin: 5px;
border-radius: 30px;
behavior: url(PIE.htc);
}
.nav ul .child a li:hover { background: rgba(218, 179, 132, .8); background: #dddddd\9;}

#nav_small {
width: auto;
max-width: 100%;
position: absolute;
right: 0;
display: none;
}

/*行動裝置才會出現的nav*/
.menu { 
display: none;
position: static;
width: 100%;
height: auto;
overflow: hidden;
}
.menu li { 
list-style: none;
width: 100%;
float: left;
text-align: center;
font-weight: bold;
background: #ffffff;
padding: 2% 0;
display: none;
border-bottom: 1px dotted #602d66;
}
.menu li a { display: block;} 

.logo {
width: auto;
float: left;
max-width: 100%;
position: absolute;
top: 10%;
}

.menu ul {
position: absolute;
list-style: none;
height: auto;
width: 11.875em;
max-width: 100%;
top: 100%;
left: 40%;
margin-left: 0;
background: #ffa347;
text-align: center;
display: none;
z-index: 900;

}
.menu li li {
padding: 2% 0 2% 0;
float: none;
width: 100%;
}
.ul_bg { box-shadow: inset 0px -2px 2px 0px rgb(219, 146, 96);}


.wrap{
width: 100%;
min-width: 320px;
max-height: 100%;
background: url(../images/palace.png) right bottom no-repeat;
}

/*index*/
.article {
position: relative;
height: auto;
min-height: 22em;
width: 70%;
max-width: 100%;
margin-left: 15%;
}
.index_news {
width: 25em;
height: auto;
float: none;
top: -475px;
right: -200px;
position: absolute;
background:#FFFFFF;
border-radius: 0.5em;
padding-bottom: 2%;
behavior: url('hack/PIE.htc');
-moz-box-shadow:  0px 3px 10px 0px #555555;
-webkit-box-shadow:  0px 3px 10px 0px #555555;
box-shadow:  0px 3px 10px 0px #555555;
}
.index_news .index_news_title{ /*最新訊息四個字*/
text-align: center;
padding-top: 2%;
padding-bottom: 1%;
font-size: 19px;
font-weight: bold;
color: #555555;
}
.index_news_inner { padding: 2% 4%; overflow: hidden;}
.index_news_inner:visited , .index_news_inner a:visited { color: #000000;}
.index_news_inner:hover { background: #eeeeee;}
/*.index_news_inner:hover > .newsimg { border: 3px solid #FF8040;}*/
.newsimg {
float: left;
}
.newsimg .newsimg_inner { 
width: 155px;
height: 110px;
display: table-cell;
display: block\9;
vertical-align: middle;
text-align: center;
overflow: hidden;
}
.newsimg .newsimg_inner img { max-width: 100%; max-height: 100%; vertical-align: middle;}
.content_wrap {
margin-left: 4%;
float: left;
width: 50%;
}
.newstitle { font-weight: bold;
/*float: left;
overflow: auto;*/
word-break: break-word;
font-size: 15px;
line-height: 1.2em;
color: #2A8177;
}
.newscontent { 
color: #000000;
float: left;
font-size: 13px;
margin-top: 5px;
}
.newscontent:visited { color: #000000;}

.index_contact {
float: left;
width: 25%;
height: auto;
padding: 1em 0 1em 0;
}
.index_contact_inner {
padding-left: 5%;
padding-right: 5%;
}
.index_contact_info {
margin: 15px 0;
font-size: 15px;
line-height: 30px;
white-space: nowrap;
}
.index_add { max-width: 81.2%;text-align: left;}
.index_phone a { cursor: default; color: #000000;}

.index_service {
float: left;
width: 25%;
height: auto;
padding: 1em 0 1em 0;
}
.nopadding {padding: 0;}

.serv_img1 {
width: auto;
height: auto;
max-width: 100%;
text-align: center;
-webkit-transition-duration: .5s;
-moz-transition-duration: .5s;
-o-transition-duration: .5s;
}
.serv_img1:hover {
opacity: 0.8;
}
/*
.serv_img2 {
width: auto;
height: 16em;
max-width: 100%;
text-align: center;
-webkit-transition-duration: .5s;
-moz-transition-duration: .5s;
-o-transition-duration: .5s;
}
.serv_img2:hover {
background: url(../images/food2.png) 50% no-repeat;
background-size: contain;
}
.serv_img3 {
width: auto;
height: 16em;
max-width: 100%;
text-align: center;
-webkit-transition-duration: .5s;
-moz-transition-duration: .5s;
-o-transition-duration: .5s;
}
.serv_img3:hover {
background: url(../images/class2.png) 50% no-repeat;
background-size: contain;
}
*/
.service_title {
text-align: center;
padding-bottom: 2%;
}
.title_bg { 
background: #602d66; 
padding: 5px 0 5px 0; 
border-radius: 1em; 
behavior: url(PIE.htc);
}

.footer {
width: 100%;
height: 5em;
background: url(../images/footer_decor2.png) 50% 5px repeat-x, url(../images/footer_bg2.jpg) 50% repeat-x;
background: url(../images/footer_bg2.jpg) 50% repeat-x;
bottom: 0;
}
.footer_inner {
width: 80%;
margin-left: 10%;
padding-top: 3%;
text-align: center;
font-size: 13px;
color: #ca9f6c;
}
.footer_inner a:link {color: #2A8177; text-shadow: 2px 2px 2px #000000;filter: dropshadow(color=#000000, offx=2, offy=2);}
.footer_inner a:visited {color: #81BEB7; text-shadow: 2px 2px 2px #000000;filter: dropshadow(color=#000000, offx=2, offy=2);}
.footer_inner a:hover {color: #eeeeee; text-shadow: 2px 2px 2px #000000;filter: dropshadow(color=#000000, offx=2, offy=2);}


/*about*/
.article2 {
position: relative;
height: auto;
min-height: 18em;
width: 100%;
max-width: 100%;
}
.image {
width: 100%;
position: relative;
height: auto;
max-height: 32em;
-moz-box-shadow: 0px 3px 10px 0px #555555;
-webkit-box-shadow: 0px 3px 10px 0px #555555;
box-shadow: 0px 3px 10px 0px #555555;
}
.section {
line-height: 1.5em;
padding: 2% 15% 2% 15%;
}
.section2 {
line-height: 1.5em;
padding: 2% 0 0 0;
}
.section .direction { margin-bottom: 2%; font-size: 14px;}
.about_img { 
width: 27%;
max-width: 100%;
min-width: 14em;
height: auto;
float: left;
text-align: center;
padding: 0 2% 0 0;
}
/*about訂購方式專用*/
.half { width: 48%; padding: 0 1%; float: left;}


/*service*/
.left { width: 30%; float: right; text-align: right;}
.right { float: right; padding-left: 2%; width: 68%;}
.serv_child {
width: 790px;
height: auto;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -395px;
overflow: hidden;
z-index: 200;
text-align: center;
}
.serv_child li {
padding: 10px;
background: rgba(255, 255, 255, 0.5);
background: #ffffff\9;
display: inline-block;
list-style: none;
text-align: center;
color: #602d66;
margin-right: 20px;
margin-bottom: 10px;
font-size: 19px;
border-radius: 30px;
}
.serv_child li:hover {
background: rgba(96, 45, 102, .8);
background: #78417F\9;
color: #ffffff;
}

/*news*/
.section .news_display1 { /*news list*/
width: 100%;
height: auto;
max-width: 100%;
float: left;
}
.section .news_display {
width: 70%;
height: auto;
max-width: 100%;
float: left;
padding: 0 0 0 3%;
}

.news1 {
width: 100%;
height: auto;
float: left;
background: #ffffff;
border-radius: 2em;
padding-bottom: 3%;
}
.news2 {
width: 24.2%;
height: auto;
float: left;
background: #ffffff;
margin-top: 1%;
border-radius: 1em;
padding-bottom: 2%;
}
.margin_right2 { margin-right: 1%;}

.section .news_list {
width: 23%;
height: auto;
max-width: 100%;
float: left;
padding: 0 3% 0 1%;
}
.news_list .list {
background: #ffffff;
border-radius: 1em;
padding: 5%;
height: auto;
}
.list_content {
height: 400px; 
overflow: hidden;
}
.list_item {
width: 100%;
padding: 2%;
border-bottom: 1px dotted #555555;
}
.list_item:hover { background: #eeeeee;}
.list_item:hover > .title4 { color: ;}

/*.jcarousel-clip-vertical ul { top: auto!important;}*/

.title_item1 {
padding: 3%;
background: #eeeeee;
margin: 1.5% 1.5% 0 1.5%;
border-radius: 0.9em 0.9em 5px 5px;
}
.title_item {
padding: 3%;
background: #eeeeee;
margin: 3% 3% 0 3%; 
border-radius: 0.7em 0.7em 5px 5px;
}
.title_item:hover, .title_item1:hover {
background: #602d66;
color: #ffffff;
}

.date { font-size: 13px; color: #555555; position: relative; padding: 0 1.5% 0 0;}
.news_img {
margin: 0 1.7%;
float: left;
}
.news_img .news_img_inner { 
max-width: 350px;
width: auto;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.news_img .news_img_inner img { width: auto; max-height: 250px; vertical-align: middle;}
.news_img2 {
margin: 0 3%;
float: left;
}
.news_img2 .news_img2_inner { 
height: 100px;
width: 140px;
display: table-cell;
display: block\9;
vertical-align: middle;
text-align: center;
}
.news_img2 .news_img2_inner img { width: auto; max-height: 100px; vertical-align: middle;}
.news_img3 {
width: 42%;
margin-left: 3%;
margin-right: 2%;
padding: 0.6%;
border: 1px solid #555555;
float: left;
}
.content {
width: 97%;
font-size: 14px;
line-height: 20px;
padding: 5% 0 0 1.5%;
}
.content2 {
font-size: 14px;
line-height: 20px;
padding: 0 3%;
overflow: auto;
word-wrap: break-word;
}
.content3 {
font-size: 14px;
line-height: 20px;
padding: 0 3%;
}
.more {
float: right;
padding: 0.5% 1%;
margin: 2% 3% 0 0;
font-size: 14px;
color: #ffffff;
background: #b08b5e;
border-radius: 5px;
border: 1px solid #b08b5e;
letter-spacing: 1px;
}
.more:hover { color: #b08b5e; background: #ffffff; border: 1px solid #b08b5e;}
.more2 {
float: right;
padding: 0.5% 2%;
margin: 3% 4% 0 0;
font-size: 13px;
color: #ffffff;
background: #b08b5e;
border-radius: 5px;
border: 1px solid #b08b5e;
}
.more2:hover { color: #b08b5e; background: #ffffff; border: 1px solid #b08b5e;}

.page {
width: 100%;
padding-top: 1.5%;
margin: 0 auto;
overflow: hidden;
}
.page li { 
list-style: none;
display: inline-block;
color: #602d66;
background: #ffffff;
padding: 0 10px;
margin: 0 3px;
border-radius: 12px;
font-size: 14px;
}
.page li:hover { color: #ffffff; background: #602d66; cursor: pointer;}

.page_select {
margin: 0 auto;
padding: 3% 0;
clear: both;
width: 88px;
height: 30px;
display: none;
}
.page_select select {
width: 88px;
height: 30px;
padding: 2px;
border-radius: 5px;
border: none;
}

/*contact*/
.contact_contact {
float: left;
width: 25%;
height: 230px;
padding: 0 1% 0 0;
}
.contact_contact_inner {
padding-left: 5%;
padding-right: 5%;
overflow: auto;
}
.contact_contact2 {
float: left;
width: 40%;
padding: 0 1% 0 0;
}
.contact_contact_inner2 {
padding-left: 5%;
}
.contact_contact_info {
margin: 15px 0;
font-size: 15px;
line-height: 30px;
white-space: nowrap;
}

.contact_add {width: 80%;}
.phone { padding-top: 5px;}

.title_bg2 { background: #602d66; padding: 50% 0% 5% 7%; border-radius: 0.5em; margin-top: -1%;}

.map { width: 100%; height: 32em;}
.map_icon {
display: none;
width: 88%;
min-width: 195px;
}
.contact_map_icon {
display: none;
width: 253px;
}

.contact_img {
float: left;
width: 30%;
height: 16.5em;
background: url(../images/contact_img.jpg) 50% no-repeat;
background-size: cover;
margin: 0 0 0 2%;
border-radius: 0.5em;
display: none;
}

.info_wrap { float: left; width: 70%;}
.pay_wrap { 
float: left;
width: 55%;
height: auto;
}
.pay { margin: 15px 0; padding-left: 15px; padding-bottom: 5px; border-bottom: 1px dotted #602d66; font-size: 15px;}
.pay_title { 
width: 100%;
background: #602d66;
padding: 5px 0 5px 0;
border-radius: 1em;
color: #ffffff;
font-size: 18px;
font-weight: bold;
text-align: center;
behavior: url(PIE.htc);
}

/*form*/
.form_wrap {
width: 30%;
/*height: 230px;*/
margin: 0 auto;
float: left;
}
form img {margin: 0 5px -10px 5px; *margin: 0 5px;} /*icon*/
.IEimg { position: relative\9; top: -5px\9; float: left\9; *position: relative; *top: -5px; *float: left;}
/*核取方塊*/
@media \0screen { /*IE8*/
.icon-form { /*FORM的錨點ICON隱藏*/
display: none;}
}
.text { /*包覆所有文字欄位*/
padding: 2% 0;
}
/*.half_left { 
width: 45%;
float: left;
}
.half_right { 
width: 55%;
float: left;
}*/
.textarea input, .textarea textarea {   
width: 75%;
padding: 2% 3%; 
margin: 1.5% 0;
border: solid 1px #E5E5E5;
font-size: 16px;
outline: 0;  
color: #666666;
border-radius: 5px;
background: #FFFFFF url('bg_form.png') left top repeat-x;  
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));  
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);  
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;  
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;  
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;  
}
.textarea textarea {   
margin-top: 10px;
height: 8.6em;
line-height: 150%;
resize : none;
}  
.textarea input:hover, .textarea textarea:hover,  
.textarea input:focus, .textarea textarea:focus {   
border-color: #C9C9C9;   
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;  
}
::-webkit-input-placeholder {color: #555555;}
:-moz-placeholder {color: #555555;} /* Firefox 18- */
::-moz-placeholder {color: #555555;}  /* Firefox 19+ */
:-ms-input-placeholder {color: #555555;}  

.varify_wrap { margin: 5px 0; margin-left: 42px; font-size: 15px;}
.varify_wrap div { float: left;}
.varify_img { height: 30px; margin-bottom: 2px;}
.varify_input { }
.varify_refresh input {
background: #eeeeee;
border: 1px solid #602d66;
line-height: 18px;
border-radius: 3px;
}



.submit { float: right; margin-right: 7.5%;}
.submit .button {  
width: 105px; 
height: 37px; 
margin: 1% 0;
margin-left: 41px;
background: url(../images/submit.png) no-repeat center;
border: 0;  
cursor: pointer;
}