/* CSS Document */

body{margin:0;padding:0;text-align:center;}
.wrapper_box{position:relative;width:100%;max-width:1000px;display:inline-block;}
#top_box{min-height:100px}
#logo{width:300px;height:70px;display:block;background:url(../image/index/ht_logo.jpg) 0 0 no-repeat;
position:absolute;top:10px;left:10px;padding:0;margin:0;}
#logo span{display:none;}
#menu{margin:0;padding:0px;position:absolute;top:0;right:0;}
#menu li{list-style:none;height:60px;display:inline;
font:bold 16px/20px Verdana, Geneva, sans-serif,"微軟正黑體";
text-align:center;top:10px;position:relative;line-height: 60px;cursor:pointer;
letter-spacing:0.2em;}

#menu li:first-child::before{content:"";border-left:2px solid #cccccc;}
#menu li::before{content:"";}
#menu li::after{content:"";border-right:2px solid #cccccc;}
#menu li:hover{color:#005bac;}

#menu li a{padding:0 16px;color:#444444;text-decoration:none;}
#menu li a.selected{color:#005bac;}

#slide_album{max-height:300px;position:relative;margin-bottom: 20px;}
#slide_album img{width:100%;height:auto;}

#slide_album ul{margin:0;padding:0;width:100%;max-height:300px;overflow:hidden;}
#slide_album ul li{margin:0;padding:0;list-style:none;}

#slide_album ol{margin:0;padding:0;height: 30px;line-height: 30px;}
#slide_album ol li{cursor:pointer;margin:0;padding:0;list-style:none;width:60px;height:10px;display:inline-block;text-align:center;}
#slide_album ol li::before{content:"";width:10px;height:10px;display:block;margin:auto;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background:#979797;}
#slide_album ol li.selected::before{background:#025299;}
#slide_album ol li:hover::before{background:#025299;}


#menu li.back {
    position: absolute;
    z-index: 8;
	top: 60px;
    height: 3px;
    border-bottom: 3px solid #005BAA;
}
#menu li.back::before{padding:0;border:0;}
#menu li.back::after{padding:0;border:0;}
#menu li.back .left {
margin: auto;
    top: 0;
    position: relative;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 3px 3px 3px;
    border-color: transparent transparent #005BAA transparent;
}
#body_box{vertical-align:top;min-height:100px;width:100%;}
.content_area{overflow: hidden;text-align:left;margin:30px 5px 0 5px;position:relative;width:320px;height:185px;display:inline-block;vertical-align:top;}
.content_area::before {
    content: "";
    width: 100%;
    height: 4px;
    background: #e7e7e7;
    display: block;
    position: absolute;
    top: 15px;
}
.content_area::after {
    content: "";
    width: 100%;
    height: 4px;
    background: #e7e7e7;
    display: block;
    position: absolute;
    bottom: 0;
}
.content{vertical-align:top;font: 14px/20px "微軟正黑體";color:#444444;padding: 5px 0px;height:150px;overflow:hidden;}
.content p{padding:0;margin:5px 0 0 0;}
.content img{margin:0 15px;vertical-align:top;float: left;}
.content_about img{margin:5px;vertical-align:top;float: left;}
.content_about p{text-indent:2em;}
.content_machining {height:100px;}
.content ul{width:320px;margin:0;padding:0;position:relative;}
.content ul li{display:inline-block;width:330px;height:110px;padding: 5px 0;}
.subtitle{color:#005bac;font:18px/20px "微軟正黑體";}

a.more{color:#acacac;
	font:bold 10px/15px arial;
	text-decoration:none;display:block;
	position: absolute;
    right: 0;
    bottom: 15px;}
a.more:hover{color:#1e7cb2}
a.more::before{
content: "";
    margin-right: 5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 3px 0 3px 4px;
    border-color: transparent transparent transparent #1e7cb2;
    position: relative;
    float: left;
    top: 5px;
}
.menu_machining{text-align:center;}
.menu_machining ol{margin:20px 0 0 0;padding:1px 2px;border:1px solid #e7e7e7;width:300px;height:5px;text-align:center;}
.menu_machining ol li{list-style:none;width:90px;height:3px;display:inline-block;text-align:center;top: 1px;position: relative;}
.menu_machining ol li.selected{background:#00549d;}
.menu_machining ol li::before{content: attr(title);
    position: relative;
    top: -25px;
    font: 10px/10px arail;
    color: #747474;
    width: 100px;
    height: 10px;
    display: inline-block;
    cursor: pointer;}
.content_contact{margin: 5px 10px;}
.content_contact div{font:bold 16px/20px "微軟正黑體";color:#444444;letter-spacing:2px;}
.content_contact span{font:14px/20px "微軟正黑體";color:#444444;}
.content_contact span span{font:bold 14px/20px "微軟正黑體";color:#444444;}
.content_contact span.phone{font:bold 14px/20px "微軟正黑體";color:#444444;color:#cc0000;}
a.email{text-decoration:none;color:#444444;}
a.email:hover{text-decoration:underline;color:#1e7cb2;}

a.email::before{content: url(../image/home/ht_e_mail.jpg);
    margin-right: 10px;
    position: relative;
    top: 3px;}
	


.t_title{text-align: left;
    line-height: 20px;
    vertical-align: bottom;
    font: bold 16px/20px "微軟正黑體";
    color: #005db1;
    padding-left: 10px;
    position: relative;
	background:#fff;letter-spacing: 2px;}
.t_title::before{content: "";
    width: 5px;
    height: 15px;
    top: 3px;
    left: 0;
    background: #e7e7e7;
    display: inline-block;
    position: absolute;}
.t_title::after{content: attr(data-title);
    height: 20px;
    background: #FFF;
    padding: 0 7px;
    font: 10px/20px arial;
    color: #b0b0b0;
	top: 4px;
    position: relative;}
	
#bottom_box {clear:both;min-height:50px;}
.copyright{color: #949494;
    font: 10px/22px arial;
    background: #f0f0f0;
    position:relative;top: 18px;}

.facebook_loading::before,
.facebook_loading::after,
.facebook_loading {
	background-color: #005BAC;
    border: 1px solid #009FE9;
	display:inline-block;
	height:24px;
	width:8px;
	-webkit-animation: bounce 1s .2s linear infinite;
}
.facebook_loading{margin-left:5px;margin-top:50px;}
.facebook_loading::before{content:"";right:-18px;position:absolute;-webkit-animation: bounce 1s .3s linear infinite;}
.facebook_loading::after{content:"";right:-36px;position:absolute;-webkit-animation: bounce 1s .4s linear infinite;}
@-webkit-keyframes bounce{
	0%{-webkit-transform: scale(1.2);opacity:1;}
	100%{-webkit-transform: scale(0.7);opacity:0.1;}
}


#sub_menu {float:left;margin:0 20px 0 40px;padding:20px 10px 10px 10px;background:#005bac;font:bold 24px/30px "微軟正黑體";color:#fff;width:200px;text-align:left;}
#sub_menu ul{margin:20px 0 0 0;padding:0;}
#sub_menu ul li{margin:0;padding:5px 0;list-style:none;display:block;color:#fff;font:14px/20px "微軟正黑體";border-top:1px solid #4d8dc5;}
#sub_body{float:left;vertical-align:top;text-align:left;width: 680px;position:relative;}
#sub_menu ul li a{color:#fff;text-decoration:none;}

#sub_body.full_wide{width:880px;float:none;margin:auto;}

#sub_body::before {
    content: "";
    width: 100%;
    height: 1px;
    background: #c7c7c7;
    display: block;
    position: absolute;
    top: 33px;
}
#sub_body::after {
    content: "";
    width: 100%;
    height: 5px;
    background: #ececec;
    display: block;
    position: absolute;
    top: 34px;
}
#sub_body .t_title{text-align: left;
    vertical-align: bottom;
    font: 20px/20px "微軟正黑體";
    color: #000;
    padding-left: 20px;
    position: relative;
	background:transparent;letter-spacing: 2px;height:50px;}
#sub_body .t_title::before{content: url(../image/home/ht_a_tip.png);
	font: bold 12px/15px arial;
    width: 15px;
    height: 15px;
    top: 7px;
    left: 0;
	color:#fff;
    background: #000;
	text-align: center;
    display: inline-block;
    position: absolute;
	-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;}
#sub_body .t_title::after{content: attr(data-title);
    height: 25px;
    background: #FFF;
    padding: 0 7px;
    font: 12px/25px arial;
    color: #b0b0b0;
    position: relative;
    letter-spacing: 2px;
    border-left: 1px dotted #c7c7c7;
    display: inline-block;
    vertical-align: bottom;}
#sub_body p{font:14px/30px "微軟正黑體";text-indent:2.2em;color:#444444;letter-spacing: 0.1em;margin-left:20px;}
#sub_body > ul li{list-style:none;font:14px/30px "微軟正黑體";color:#444444;float:left;width:210px;position:relative;letter-spacing: 2px;}
#sub_body > ul li::before{content:"";width:4px;height:4px;background:#989898;-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
display: block;
    position: absolute;
    top: 13px;
    left: -10px;}
#sub_body hr{clear:both;border: 0;border-bottom:1px dotted #898989;padding:10px 0;}

#sub_pic{max-height:200px;position:relative;margin-bottom: 20px;}
#sub_pic img{width:100%;height:auto;display:none;}
.cookie_bar{float:right;font:12px/15px "微軟正黑體";letter-spacing: 0;margin-top: 5px;}
.cookie_bar::before{
	content:url(../image/home/ht_in_home.jpg);
}
.cookie_bar span{position:relative;margin-left: 20px;}
.cookie_bar span::before{
content:"";
position:absolute;
left:-10px;
top:2px;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 5px;
border-color: transparent transparent transparent #000000;
}
.cookie_bar span::after{
content:"";
position:absolute;
left:-11px;
top:2px;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 5px;
border-color: transparent transparent transparent #ffffff;
}
.s_title{position:relative;}
.s_title::before{content: "";
    width: 100%;
    height: 3px;
    position: relative;
    top: 15px;
    display: inline-block;
    background: #e7e7e7;}
.s_title span{text-align: left;
    line-height: 20px;
    vertical-align: bottom;
    font: bold 16px/20px "微軟正黑體";
    color: #005db1;
	background:#fff;
    padding-left: 10px;
    position: relative;
	background:#fff;letter-spacing: 2px;}
.s_title span::before{content: "";
    width: 3px;
    height: 3px;
    top: -5px;
    background: #ff9801;
    display: inline-block;
    position: relative;
    margin-right: 6px;}
.s_title span::after{content: "";
    width: 3px;
    height: 3px;
    top: -5px;
    margin-left: 2px;
    background: #ff9801;
    display: inline-block;
    position: relative;
    margin-right: 6px;}
.img_title {text-align:center;}
.img_title span{float:left;margin: 10px 15px;}
.img_title span::before{content:attr(title);font: 18px/30px "微軟正黑體";color:#444444;margin-bottom:6px;display: block;}
.img_title span img{display:block;}

.img_description{text-align:left;}
.img_description span{    float: left;
    margin: 10px 15px;
    font: 14px/20px "微軟正黑體";
    color: #444444;
    width: 310px;position:relative;}
.img_description span::after{content: "";
    width: 3px;
    height: 3px;
    top: 12px;
    left: 0px;
    background: #ff9801;
    display: inline-block;
    position: absolute;}
.img_description span::before{content: attr(title);
    font: 18px/30px "微軟正黑體";
    color: #005bac;
    margin: 0 0 6px 10px;
    display: block;}
.img_description span img{float: left;margin-right: 10px;}
#contact_form{float:left;width:530px;min-height:200px;margin:20px 30px 0 0;display:block;}

#contact_form input, #contact_form textarea{font:16px/20px "微軟正黑體";color:#a4a4a4;background:#eceff4;border:1px solid #cad4e0;margin: 10px 0;padding:10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}
input#contact_name{width:230px;margin-right:14px;}
input#contact_phone{width:230px;}
input#contact_email{width:500px;}
textarea#contact_note{width:500px;height:106px;}

a.sendfor{cursor:pointer;float:right;background:#9ebf16;color:#fff;padding:0 20px;font: 16px/30px "微軟正黑體";-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-right:7px;}
a.sendfor:hover{background:#1642bf}

#contact_info {float:left;margin:30px 0 14px 0;padding:20px 10px 0 10px;background:#eceff4;font:bold 24px/30px "微軟正黑體";color:#444444;width:300px;text-align:left;}
#contact_info ul{margin:c;padding:0;}
#contact_info ul li{margin:0;padding:5px 0;list-style:none;display:block;color:#444444;font:14px/20px "微軟正黑體";border-top:1px solid #cecece;}
#contact_info ul li a{color:#444444;}

a.go{
cursor: pointer;
    background: #999999;
    text-align: center;
    width: 20px;
    height: 20px;
    position: relative;
    display: inline-block;
    margin-left: 20px;
    text-decoration: none;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
a.go::before{content:"Go";color:#fff;font:10px/20px monospace;vertical-align: top;}
a.go:hover{background:#00529c;}

@media only screen and (max-width:800px){
	#googlemap{width:100%;}
	#top_box{margin-bottom: 15px;}
	#logo {position:relative;top:auto;left:auto;}
	#menu {position:relative;}
	#menu li:first-child{border-top:1px solid #005bac;}
	#menu li{line-height:45px;height: 45px;width:100%;display:block;float:none;position: relative;border-bottom: 1px solid #005bac;}
	#menu li::before{display:none;}
	#menu li::after{display:none;}
	#menu li.back{display:none;}
	#menu li a{line-height:45px;height: 45px;width:100%;display:block;margin:0;padding:0;}
	#menu li a.selected{background:#005bac;color:#fff;}
	#sub_body{width:100%;}
	#sub_body img.subtop_pic{width:100%;height:auto;}
	#sub_body.full_wide{width:100%;}
}
@media only screen and (max-width:600px){
	a.sendfor{float:none;display:block;text-align:center;}
	#googlemap{width:100%;}
	#contact_form, #contact_info{float:none;width:100%;
	display: block;
    margin: 10px 0 0 0;
    padding: 0;
    text-align: center;
	}
	#sub_body.full_wide{width:100%;}
	#contact_form input{width:90%;}
	#contact_form textarea{width:90%;}
	.content_area{width:95%}
	#sub_menu{width:100%;margin:0}
	#sub_body img:not(.subtop_pic){max-width:150px;height:auto;}
}