@charset "utf-8";
/*action red*/
.note{
	float: left;
	width: 100%;
	margin:1% 0;
}
.note01{
	float: left;
	width: 100%;
	margin:2% 0;
}
.note a{
	font-size: 1.3em;
}
.note span,.note h2{
	color:red;
	font-weight:700;
	font-size:1.5em;
	line-height:1.5em;
	background:yellow;
	font-family: "Microsoft JhengHei UI", "微軟正黑體", "Helvetica Neue", Helvetica, Arial;
}
.note01 h1{
	background:red;
	color:#fff;
	border:2px red solid;
	text-align:center;
}
.new-btn{
	color: #FFF;
    background-color: red;
    padding: 2%;
	text-align:center;
}
/*================*/
* {
    margin: 0px;
    padding: 0px;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
li,
div,
td,
input {
    font-family: "Microsoft JhengHei UI", "微軟正黑體", "Helvetica Neue", Helvetica, Arial !important;
}

p,
a,
span,
li {
    font-size: 13pt;
}

a {
    text-decoration: none;
}

body {
    counter-reset: rule;
}

li {
    list-style-type: none;
}

table {
    text-align: center;
}

/* Header
-----------------------------------------------------------------------------*/

.headers {
    float: left;
    width: 100%;
    height: 30px;
    background-color: #070743;
    color: #fff;
}

.centers {
    width: 1000px;
    height: 100%;
    margin: 0px auto;
    position: relative;
}

.headers a {
    color: #fff;
}

.top_left {
    float: left;
    width: 310px;
    height: 100%;
}

.top_right {
    float: left;
    width: 690px;
    height: 100%;
    text-align: right;
}

/*.top_right a :hover {
    color: #300030;
}*/

.centerin {
    text-align: center;
}

/*section
-----------------------------------------------------------------------------*/
.sections {
    float: left;
    width: 100%;
    min-height: 1000px;
    /*background: #eeef;*/
}

.ad {
    margin: 0px auto;
    width: 100%;
}

.ad img {
    margin: 0px auto;
    width: 100%;
}

.asides {
    float: left;
    width: 220px;
}

.buts {
    width: 219px;
}

.uls {
    width: 200px;
    padding: 20px 0 20px 19px;
    background-color: #FCFCFC;
    border-radius: 10px;
    line-height: 30pt;
}

.uls a {
    color: #000;
    width: 100%;
    transition: all 0.5s ease 0s;
}

.uls li {
    width: 100%;
}

.uls ul li a:hover {
    color: #AB0768;
    position: relative;
    padding: 10px 15px;
    transition: all 0.5s ease 0s;
}

.listtitle {
    font-size: 17pt;
    color: #169D99 !important;
}

.calls {
    width: 220px;
    text-align: center;
    background-color: #FCFCFC;
    border-radius: 10px;
    line-height: 30pt;
    margin-bottom: 50px;
    word-wrap: break-word;
}
.calls a{
    color:#bb1e10;
}
.calls span{
    color:#bb1e10;
}

.calls img {
    width: 210px;
}

.calls hr {
    border-top: 1px solid #fff;
}

.articles {
    float: left;
    width: 770px;
    padding: 10px 5px;
}

.articletop {
    float: left;
    width: 700px;
    margin: 10px 39px;
    text-align: center;
}

.articletop span {
    color: red;
    background-color: yellow;
}

.ad1 {
    float: left;
    width: 769px;
    margin: 0 5px;
	text-align:center;
}

.ad1 img {
    width: 300px;
}

.ad2 {
    float: left;
    width: 256px;
    text-align: center;
}

.ad2 img {
    width: 215px;
}



.articletop1 {
    position: relative;
    float: left;
    width: 750px;
    margin: 10px 10px;
    text-align: left;
    overflow: hidden;
}

.articletop1 h1 {
    font-size: 20pt;
}

.title1 {
    width: 400px;
    display: inline-block;
    margin-top: 50px;
}

.title1 h1 {
    width: 400px;

}

.title2 {
    position: relative;
    width: 280px;
    float: right;
    border: 5px #E84A5F solid;
    padding: 5px;
    border-radius: 10px 10px 0 0;
    height: 130px;
    z-index: 2;
}

.title3 {
    position: absolute;
    width: 430px;
    padding: 10px 10px;
    background-color: #E84A5F;
    color: #fff;
    bottom: 0;
    left: 0;
    z-index: 1;
    border-left: 5px solid #FF847C;
}

.ad4 {
    float: left;
    width: 369px;
    margin: 10px 0 10px 10px;
    min-height: 370px;
    background-color: #FEECD6;
    border-radius: 10px 10px 0 0;
	padding-bottom:10px;
}

.ad4title {
    float: left;
    width: 100%;
    background-color: #00B4CC;
    border-radius: 10px 10px 0 0;
}

.ad4title a {
    font-size: 17pt;
    color: #fff;
    font-weight: 900;
    padding-left: 10px;
    line-height: 35pt;
	width:370px;
}

.ad4title span {
    float: left;
    font-size: 13pt;
    color: #fff;
    padding: 7px;
    background-color: #008C9E;
    border-radius: 10px;
    margin: 5px;
}

.ad4imgs {
    float: right;
    margin: 10px 5px 10px 0;
}

.ad4imgs img {
    width: 160px;
}

.ad4 .tables {
    float: left;
    width: 190px;
    margin: 10px 5px 10px 5px;
	text-align:center;
}

.ad4 .tables table td {
    padding: 3px 7px;
    font-size: 11pt;
}

.ad4 .tables table th {
    padding: 5px 0;
    font-size: 11pt;
}

.ad4 .buts {
    float: left;
    width: 100%;
    margin: 20px 0 10px 25px;
}

.tr1 {
    background-color: #00B4FF;
}

.tr2 {
    background-color: #fff;
}

.ad4footer {
    float: left;
    width: 100%;
    margin: 10px 0 10px 0;
}

.ad5 {
    float: left;
    width: 375px;
    margin: 10px 0 0 10px;
}
/*
.ad5con {
    float: left;
    width: 360px;
    background-color: #FCFCFC;
    padding: 10px 0 10px 10px;
    margin: 10px 5px 0 10px;
}*/

.butons {
    width: 219px;
}

.buts {
    float: left;
    width: 750px;
    margin: 20px 0 10px 10px;
}

.but1 {
    width: 115px;
    margin: 5px;
    padding: 10px 17px;
    border-radius: 30px;
    background-color: #DB3026;
    color: #fff;
    text-align: center;
    box-shadow: 2px 2px 2px #000;
}

.buts a.but1:hover {
    background-color: #fff;
    color: #DB3026;
    box-shadow: inset 2px 2px 2px #000;
}

.but2 {
    width: 115px;
    margin: 5px;
    padding: 10px 17px;
    border-radius: 30px;
    background-color: #E88A25;
    color: #fff;
    text-align: center;
    box-shadow: 2px 2px 2px #000;
}

.buts a.but2:hover {
    background-color: #fff;
    color: #E88A25;
    box-shadow: inset 2px 2px 2px #000;
}

.but3 {
    width: 115px;
    margin: 5px;
    padding: 10px 17px;
    border-radius: 30px;
    background-color: #7ABF66;
    color: #fff;
    text-align: center;
    box-shadow: 2px 2px 2px #000;
}

.buts a.but3:hover {
    background-color: #fff;
    color: #7ABF66;
    box-shadow: inset 2px 2px 2px #000;
}

.but4 {
    width: 115px;
    margin: 5px;
    padding: 10px 17px;
    border-radius: 30px;
    background-color: #9CD6C8;
    color: #fff;
    text-align: center;
    box-shadow: 2px 2px 2px #000;
}

.buts a.but4:hover {
    background-color: #fff;
    color: #9CD6C8;
    box-shadow: inset 2px 2px 2px #000;
}

.ad6 {
    float: left;
    width: 375px;
    margin: 10px 0 20px 0;
    min-height: 300px;
    background-color: #E8F3F8;
    border-radius: 10px 10px 0 0;
}

.tables{
	float:left;
	width:100%;
}

.ad6title {
    float: left;
    width: 100%;
    background-color: #EB7B59;
    border-radius: 10px 10px 0 0;
}

.ad6title a {
    font-size: 17pt;
    color: #fff;
    font-weight: 900;
    padding-left: 10px;
    line-height: 35pt;
}

.ad6title span {
    float: left;
    font-size: 13pt;
    color: #fff;
    padding: 7px;
    background-color: #CF4647;
    border-radius: 10px;
    margin: 5px;
}

.ad6 .tables table {
    float: left;
    width: 365px;
    margin: 10px 5px;
	text-align:center;
}
.ad6 .tables span {
    float: left;
    width: 355px;
    margin: 10px 10px;
	text-align:center;
}

.ad6 .tables table td {
    padding: 3px 7px;
    font-size: 11pt;
}

.ad6 .tables table th {
    padding: 5px 0;
    font-size: 11pt;
}

.ad5con {
    float: left;
    width: 345px;
    background-color: #FCFCFC;
    padding: 5px;
    margin: 20px 10px;
    line-height: 25pt;
}

.note1 {
    float: left;
    width: 720px;
    border-left: 5px solid #FF6600;
    padding: 10px;
    background-color: #FFF2AF;
    margin: 20px 0 0 0;
}

.note2 {
    float: left;
    width: 720px;
    border-left: 5px solid #DF151A;
    padding: 10px;
    background-color: #FFD9AB;
    margin: 20px 0 0 0;
}

.maps {
    float: left;
    width: 770px;
    min-height: 300px;
    background-color: #fff;
    margin: 20px 0;
}

.mapstitle {
    float: left;
    width: 700px;
    background-color: #E878FF;
    border-radius: 10px 10px 0 0;
    padding: 10px 35px;
    color: #fff;
}

.mapscon {
    float: left;
    width: 700px;
    padding: 10px 35px;
    text-align: center;
    background-color: #F5B8F4;
}

.mapscon form {
    text-align: left;
}

.mapscon input {
    width: 670px;
    color: #898888;
    background: none;
    outline: none;
    font-size: 16px;
    padding: .5em;
    margin-bottom: 1em;
    border: solid 0px #fff;
    -webkit-appearance: none;
    background-color: #fff;
}

.mapscon textarea {
    resize: none;
    width: 670px;
    color: #898888;
    font-size: 16px;
    outline: none;
    padding: .5em;
    border: solid 0px #fff;
    min-height: 150px;
    -webkit-appearance: none;
}

.mapscon input[type="submit"] {
    width: 100px;
    border: none;
    outline: none;
    color: #FFF;
    padding: .5em 1.5em;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    margin: 0.5em 0 0 0;
    -webkit-appearance: none;
    background: #bb1e10;

}

.mapscon input[type="submit"]:hover {
    background: #4D4D4D;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
}

.mapscon input[type="reset"] {
    width: 100px;
    border: none;
    outline: none;
    color: #FFF;
    padding: .5em 1.5em;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    margin: 0.5em 0 0 0;
    -webkit-appearance: none;
    background: #bb1e10;
}

.mapscon input[type="reset"]:hover {
    background: #4D4D4D;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
}

#Contact_Form #Show_Number img {
    height: auto;
    width: auto;
    margin: 0 auto;
}

.mapscon input#Chk_Number_Btn {
    width: 100px;
    border: none;
    outline: none;
    color: #FFF;
    padding: .5em 1.5em;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    margin: 0.5em 0 0 0;
    -webkit-appearance: none;
    background: #bb1e10;
}

.goback {
    float: left;
    width: 750px;
    margin: 50px auto;
    text-align: center;
}

.but5 {
    width: 115px;
    margin: 0 auto;
    padding: 10px 17px;
    border-radius: 30px;
    background-color: #00CBE7;
    color: #fff;
    text-align: center;
    box-shadow: 2px 2px 2px #000;
}

.goback a.but5:hover {
    background-color: #fff;
    color: #00CBE7;
    box-shadow: inset 2px 2px 2px #000;
}

.pro {
    float: left;
    width: 745px;
    margin-top: 30px;
}

.pro img {
    width: 100%;
}
.dropdowns {
    display: none;
}
/* footer
-----------------------------------------------------------------------------*/
.footers {
    float: left;
    width: 100%;
    background-color: #070743;
    color: #fff;
    padding-top: 10px;
}

.footers a {
    color: #fff;
}
/* 平板-999-768*/
@media (min-width: 768px) and (max-width: 1020px) {
	.headers{
		height:auto;
	}
	.centers{
		width:100%;
	}
	.top_left{
		width:100%;
		line-height:2em;
	}
	.top_right{
		width:100%;
		text-align:left;
		line-height:2em;
	}
	.asides{
		width:25%;
	}
	.articles{
		width:75%;
		padding:0;
	}
	.uls{
		width:97%;
		padding:3% 0 0 3%;
	}
	.calls{
		width:97%;
		padding:3% 0 0 3%;
	}
	.articletop{
		width:100%;
		margin:0;
	}
	.ad1{
		width:100%;
		margin:0;
	}
	.ad1 img{
		width:45%;
	}
	.ad2{
		width:30%;
		margin:1%;
	}
	.ad2 img{
		width:100%;
	}
	.maps{
		width:100%;
	}
	.mapstitle{
		width:94%;
		padding:2% 3%;
	}
	.mapscon{
		width:96%;
		padding:2%;
	}
	.mapscon input{
		width:98%;
		padding:1%;
	}
	.mapscon textarea{
		width:98%;
		padding:1%;
	}
	.articletop1{
		width:100%;
		margin:3% 0 0 0 ;
	}
	.title1{
		width:100%;
		margin:0;
	}
	.title2{
		width:50%;
		padding:1%;
		z-index:0;
		float:left;
		height:auto;
	}
	.title3{
		width:100%;
		z-index:0;
		float:left;
		position:static;
	}
	.ad5{
		width:48%;
		margin:1%;
	}
	.ad6{
		width:48%;
		margin:1%;
	}
	.ad5con{
		width:90%;
		margin:3%;
		padding:2%;
	}
	.ad6 .tables span{
		width:98%;
		padding:3% 0;
		margin:0;
	}
	.ad6 .tables table{
		width:100%;
		margin:0;
	}
	.buts{
		width:100%;
		margin:3% 0;
	}
	.but1{
		float:left;
		width:auto;
	}
	.but2{
		float:left;
		width:auto;
	}
	.but3{
		float:left;
		width:auto;
	}
	.but4{
		float:left;
		width:auto;
	}
	.note1{
		width:94%;
		margin:1% 0;
		padding:2% 2%;
	}
	.note2{
		width:94%;
		margin:1% 0;
		padding:2% 2%;
	}
	.pro{
		width:100%;
	}
	.goback{
		width:100%;
	}
	.footers{
		height:auto;
		
	}
	
}

/* 手機-767*/
@media (max-width: 767px) {
	.headers{
		height:auto;
	}
	.centers{
		width:100%;
	}
	.top_left{
		width:100%;
		line-height:2em;
	}
	.top_right{
		width:100%;
		text-align:left;
		line-height:2em;
	}
	.asides{
		width:100%;
	}
	.articles{
		width:100%;
		padding:0;
	}
	.uls{
		/*width:98%;
		padding:1%;
		text-align:center;*/
		display:none;
	}
	.calls{
		width:98%;
		padding:1%;
		text-align:center;
	}
	.articletop{
		width:100%;
		margin:0;
	}
	.ad1{
		width:94%;
		margin:3%;
	}
	.ad1 img{
		width:100%;
	}
	.ad2{
		width:94%;
		margin:3%;
	}
	.ad2 img{
		width:100%;
	}
	.maps{
		width:100%;
	}
	.mapstitle{
		width:94%;
		padding:2% 3%;
	}
	.mapscon{
		width:96%;
		padding:2%;
	}
	.mapscon input{
		width:98%;
		padding:1%;
	}
	.mapscon textarea{
		width:98%;
		padding:1%;
	}
	.articletop1{
		width:100%;
		margin:3% 0 0 0 ;
	}
	.title1{
		width:100%;
		margin:0;
	}
	.title2{
		width:95%;
		padding:1%;
		z-index:0;
		float:left;
		height:auto;
	}
	.title3{
		width:96%;
		padding:1%;
		z-index:0;
		float:left;
		position:static;
	}
	.ad5{
		width:98%;
		margin:1%;
	}
	.ad6{
		width:98%;
		margin:1%;
	}
	.ad5con{
		width:90%;
		margin:3%;
		padding:2%;
	}
	.ad6 .tables span{
		width:98%;
		padding:3% 0;
		margin:0;
	}
	.ad6 .tables table{
		width:100%;
		margin:0;
	}
	.buts{
		width:100%;
		margin:3% 0;
	}
	.but1{
		float:left;
		width:auto;
	}
	.but2{
		float:left;
		width:auto;
	}
	.but3{
		float:left;
		width:auto;
	}
	.but4{
		float:left;
		width:auto;
	}
	.note1{
		width:94%;
		margin:1% 0;
		padding:2% 2%;
	}
	.note2{
		width:94%;
		margin:1% 0;
		padding:2% 2%;
	}
	.pro{
		width:100%;
	}
	.goback{
		width:100%;
	}
	.dropdowns {
        display: block;
        width: 100%;
    }

    .dropdowns .drops {
        display: block;
        width: 50%;
        margin: 3% 25%;
        line-height: 3em;
        height: 2em;
        font-size: 1em;
        border: 0px;
        border: 1px solid #ccc;
        border-radius: 10px;
        padding-left: 3%;
    }
	.footers{
		height:auto;
	}
}