body{font-family:"微軟正黑體",Arial,sans-serif; margin:0; padding:0;}
h1 {font-family:Arial, Microsoft JhengHei, "微軟正黑體", LiHei Pro, "儷黑體", PMingLiu,"新細明體", sans-serif; }
li > a {font-family:Arial, Microsoft JhengHei, "微軟正黑體", LiHei Pro, "儷黑體", PMingLiu,"新細明體", sans-serif; text-decoration:none; }
ul {margin:0; padding:0;}
.main_inner {width:1014px; margin:0 auto;}
.clear {clear:both;}




/*------header--------*/
#header {width:100%; height:auto; background-color:#11357e; position:fixed; top:0; z-index:9;}
.logo_ico img {height:25px; padding:10px}
.main_menu {float:right; margin-top:8px;}
.main_menu li{display:inline-block;}
    .main_menu li a {color:#fff; padding:10px 15px;}

@media (min-width: 768px) and (max-width: 1023px) {
    .main_inner {width:768px;}
}

@media (min-width: 640px) and (max-width: 767px) {
    .main_inner {width:640px;}
}

@media (max-width: 639px) {
    .logo_ico img {height:20px; margin-top:2px; padding:10px 12px}
     .main_inner {width:100%;}
     .main_menu {float:right; font-size:0.9em;}
     .main_menu li a {color:#fff; padding:10px 10px;}
}
@media (max-width: 518px) {
    .main_menu {font-size: 10px; margin-top:15px;}
}

/*------content--------*/
#content { background-color:white; min-height:500px; margin-top:79px;}
.slogan { margin:auto 0; text-align:center; padding:70px 0}
    .slogan h1 {margin:0;}
.grid-sort-container {width:100%; margin-bottom:50px;}
.grid-item {display:inline-block; width:227px; border:1px solid #cfcfcf; margin:15px 10px; vertical-align:top;}
.grid-img {width:227px; height:151px; display:block; overflow:hidden; position: relative; border-bottom:1px solid #e9e9e9;}
    .grid-img img {max-width:100%; height:auto; min-height:151px; }
.grid-info {background-color:#fff; padding:15px 10px 10px 10px;}
.grid-info h3{color:#4a4a4a; text-align:center; font-size:17px; margin:0 0 10px 0;}
.grid-info p{color:#ababab; font-size:15px; margin:0; font-style:italic; }
.grid-footer {background-color:#787878;color:#fff;text-align:center; height:55px; overflow:hidden; }
.grid-footer .comp_btn {display: inline-block; padding:17px 21px; font-size:17px; color:#fff; text-decoration:none; }
    .grid-footer .comp_btn:hover {color:#cff1ff;}
    .grid-footer .comp_btn:first-child {border-right:1px solid #cfcfcf;}


@media (min-width: 768px) and (max-width: 1023px){
    .slogan img {width:400px;}
}

@media (min-width: 640px) and (max-width: 767px) {
    .slogan { padding:50px 0}
    .slogan img {width:320px;}
      .grid-sort-container {width:609px; margin:auto; margin-bottom:50px;}
    .grid-item {width:280px; margin:15px 10px; }
.grid-img {width:280px; height:186px;}
    .grid-img img {min-height:186px; }
    .grid-footer .comp_btn {padding:17px 34px;}
}

@media (min-width: 518px) and (max-width: 639px) {
            .slogan { padding:40px 0}
    #content {margin-top:60px;}
       .slogan img {width:260px;}
        .grid-sort-container {width:503px; margin:auto;  margin-bottom:50px;}
        .grid-item {margin:10px; }
}

@media  (min-width: 420px) and (max-width: 517px) {
        .slogan { padding:30px 0}
       .slogan img {width:260px;}
        .grid-sort-container {margin:auto;  margin-bottom:50px;}
    .grid-item {display:block; width:420px; margin:20px auto; }
    .grid-img {width:420px; height:280px;}
    .grid-img img {min-height:280px; }
    .grid-info h3 {margin:10px 0;}
    .grid-info p {margin: 10px 0;}
    .grid-footer .comp_btn {padding:17px 69px;}
}

@media (max-width: 419px) {
            .slogan { padding:30px 0}
       .slogan img {width:260px;}
        .grid-sort-container {margin:auto;  margin-bottom:50px;}
    .grid-item {display:block; width:300px; margin:20px auto; }
    .grid-img {width:300px; height:200px;}
    .grid-img img {min-height:200px; }
        .grid-info h3 {margin:10px 0;}
    .grid-info p {margin: 10px 0;}
    .grid-footer .comp_btn {padding:17px 39px;}
}

/*--------footer--------*/

#footer {background-color:#f5f5f5; color:#9c9c9c; padding:20px;
}
    #footer .section {float:left; line-height:1.7em; font-size:17px; height:auto;}
.section ul, .section ol {list-style-position:inside; padding-left:20px;}
.section .subtitle {color:#11357E;}
.section p {margin:0;}
.section1 {width:200px; margin-left:70px;}
.section2 {width:300px; margin-left:50px;}
.section3 {width:335px; margin-left:20px;}
.footer_slogan {padding:20px; clear:both; color:#fff; background-color:#11357E; text-align:center; }
    .footer_slogan h2 {margin:0; font-size:19px;}

@media (min-width: 768px) and (max-width: 1023px) {
    .section1 {width:200px; margin-left:0;}
.section2 {width:280px; margin-left:0;}
.section3 {width:255px; margin-left:0;}
}
@media (min-width: 640px) and (max-width: 767px) {
  #footer .section3 {float:none; width:335px; margin-top:20px; margin-left:70px;}
}

@media (max-width: 639px) {
    #footer .section {float: none; font-size:15px;  margin:0 0 25px 0;}
}

@media (max-width: 518px) {
   .footer_slogan h2 {font-size:17px;}
}