@charset "utf-8"

body{margin: 0; padding: 0;}

/*layout*/
#header {width: 100%; height: 750px; background: linear-gradient(to bottom, #f7e9df 30%,#d6b696 70%); }
    
/* container */
.container {position: relative; width: 1280px; height: 100%; margin: 0 auto; /*background-color: aquamarine;*/}
    
    
/* row */
.row {padding: 0 24px 0 24px;}


/*contents*/

.headerTop {width: 100%; height: 8%; background-color: #505050; display: block;}
.headerTop a img{position: relative; padding-top: 18px;}

.header {width: 100%; height: 80%;  display: block;}
.header img {position: relative; display: block; left: 5%; bottom: 0; }

.proZone {width: 100%; height: 12%; background-color: #fff; display: inline-block;   border-top: 1px solid #505050; }
.product > div {float: left; width: 30%; padding: 35px 0;}
.product > div:last-child {width: 40%;}
.product > div li {float: left; padding-left: 15px;}
.product > div li:first-child {padding-top: 5px;}
.admini li:last-child {margin-top: -5px;}

.section01 {padding-top: 280px;}
.section01 > div {padding-left: 20px; width: 90%;}
.section01 > div > h4 {padding-top: 40px;}
.section01 > div > p {padding-top: 20px;}

.section02 {padding-top: 70px;}
.section02 > div {padding-left: 20px; width: 90%;}
.section02 > div > h4 {padding-top: 40px;}
.section02 > div > p {padding-top: 20px;}

.section03 {padding-top: 70px;}
.section03 > div {padding-left: 20px; width: 90%;}
.section03 > div > h4 {padding-top: 40px;}
.section03 > div > p {padding-top: 20px;}
.section03 .proc img {padding-top: 20px; width: 90%;}
.section03 .Mproc {display: none;}

.section04 {padding-top: 70px;}
.section04 > div {padding-left: 20px; width: 90%;}
.section04 > div > h4 {padding-top: 40px;}
.section04 > div > p {padding-top: 20px;}

.section05 {padding-top: 70px;}
.section05 > div {padding-left: 20px; width: 90%;}
.section05 > div > h4 {padding-top: 40px;}
.section05 > div > p {padding-top: 20px;}

.section06 {padding-top: 70px;}
.section06 > div {padding-left: 20px; width: 90%;}
.section06 > div > h4 {padding-top: 40px;}
.section06 > div > p {padding-top: 20px;}

.section07 {padding-top: 70px;}
.section07 > div {padding-left: 20px; width: 90%;}
.section07 > div > h4 {padding-top: 40px;}
.section07 > div > p {padding-top: 20px;}
.section07 table {margin-top: 30px; text-align: center;width: 100%; border: 2px solid #666666; height: 450px;}
.section07 table tr td {border: 1px solid #999999; font-size: 16px; padding: 5px;}


.section08 {padding-top: 70px;}
.section08 > div {padding-left: 20px; width: 90%;}
.section08 > div > h4 {padding-top: 40px;}
.section08 > div > p {padding-top: 20px;}

.section09 {padding-top: 70px;}
.section09 > div {padding-left: 20px; width: 90%;}
.section09 > div > h4 {padding-top: 40px;}
.section09 > div > p {padding-top: 20px;}

.section10 {width: 90%; padding-left: 7%; padding-top: 80px; padding-bottom: 50px;}
.section10 {text-align: center; font-size: 21px;}





<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-9wq8{border-color:inherit;text-align:center;vertical-align:middle}
.tg .tg-fsme{background-color:#efefef;border-color:inherit;text-align:center;vertical-align:middle}
.tg .tg-nrix{text-align:center;vertical-align:middle}
</style>


/* media query*/
@media (max-width: 1280px){
    .container {width: 100%;}
    
}


@media (max-width: 960px){
    .container {width: 100%;}
    
    .header {height: 60%;}
    .header img {width: 100%;left: 2%; padding-top: 11px;}
    
    .proZone {height: 20%;}
    .product {position: relative; margin: 0 auto; left: 30%;}
    .product > div {float: none; width: 100%;  padding: 20px 0;}
    .product > div:last-child {width: 100%;}

}


@media (max-width: 768px){
    .container {width: 100%;}
    
    #header {height: 600px;}
    .headerTop a img{padding-top: 10px;}
    
    .proZone { height: 24%;}
    .product {left: 25%;}
    
    .section03 .proc {display: none;}
    .section03 .Mproc {display: block; position: relative; margin: 0 auto; left: 30%; }
    .section03 .Mproc img {padding-top: 20px;}
    
    .section04 table {width: 100%;}
    .section04 table tr td {font-size: 16px;}

}


@media (max-width: 600px){
    .container {width: 100%;}
    
    #header {height: 450px;}
    
    .headerTop {height: 10%;}
    
    .proZone { height:30%;}
    .product {left: 13%;}
    .product > div {padding: 18px 0;}
    
    
}


@media (max-width: 480px){
    .container {width: 100%;}
    
    #header {height: 350px;}
    
    .headerTop {height: 12%;}
    .headerTop a img {width: 25%;}
    
    .proZone { height:32%;}
    .product {left: 0;}
    .product > div {padding: 15px 0;}
    
    .section03 .Mproc {left: 15%; }
    
    h2 {font-size: 24px;}
    h4 {font-size: 16px;}
    p {font-size: 16px;}
    
    
}


@media (max-width: 380px){
    .container {width: 100%;}
    .row {padding: 0 12px 0 12px;}
    
    .product > div li {padding-left: 5px;}
}

.footer{
position: relative;
width: 100%;
margin-top:100px;
padding-top: 100px;
text-align: center;
}