@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: #F07241;
    color: #fff;
}

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

.headers a {
    color: #fff;
}

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

.top_right {
    float: left;
    width: 330px;
    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: #DC143C;
    position: relative;
    padding: 10px 15px;
    transition: all 0.5s ease 0s;
}

.listtitle {
    font-size: 17pt;
    color: #EB7B59 !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 #2196F3 solid;
    padding: 5px;
    border-radius: 10px 10px 0 0;
    height: 130px;
    z-index: 2;
}

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

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

.ad4title {
    float: left;
    width: 100%;
    background-color: #EB7B59;
    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: #CF4647;
    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;
}
tr:nth-child(even) {background: #FFF}
tr:nth-child(odd) {background: #FFBE40}
/*.tr1 {
    background-color: #FFBE40;
}

.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: #FEECD6;
    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 #2196F3;
    padding: 10px;
    background-color: #ddffff;
    margin: 20px 0 0 0;
}

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

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

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

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

.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%;
    /*height: 250px;*/
    background-color: #F07241;
    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%;
    }

    .butons {
        width: 100%;
    }

    .butons img {
        width: 100%;
    }

    .calls img {
        width: 100%;
    }
	
	
	.ad4{
		width:90%;
		margin:5%;
	}
	.ad4 .tables{
		width:48%;
		margin:1%;
	}
	.ad4imgs{
		width:48%;
		margin:1%;
	}
	.ad4 .buts{
		margin:0;
	}
	.ad4imgs img{
		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:100%;
		text-align:center;
		padding:0;*/
        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%;
    }

    .butons {
        width: auto;
        margin: 0 auto;
    }

    .butons a {
        width: 50%;
    }

    .butons img {
        width: auto;
        display: block;
        margin: auto;
    }

    .calls img {
        width: 70%;
    }
	.ad4{
		width:90%;
		margin:5%;
	}
	.ad4 .tables{
		width:98%;
		margin:1%;
	}
	.ad4imgs{
		width:98%;
		margin:1%;
	}
	.ad4 .buts{
		margin:0;
	}
	.ad4imgs img{
		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;

    }

}