@charset "utf-8"; /* CSS Document */
 
main {width: 80%;} header {background-color:#000000; padding-left: 10%; padding-right: 10%;}
header li a:hover, header li a.english {background-color: #880000;}

.row1 {height: auto;  width:100%; overflow: hidden; padding-top:16px; padding-bottom:16px; padding-left: 6%; padding-right: 6%; font-size: 30px;}
.row2 {height: auto;  width:100%; overflow: hidden;} 
.left {height: auto; width:40%; overflow: hidden; float: left; margin-left: 6%; margin-right: 4%;}
.right {height: auto; width:40%; overflow: hidden; float: left; margin-left: 4%; margin-right: 6%;}
.rowpic {height: auto;  width:100%; overflow: hidden; padding-top: 20px;}
.rowword {height: auto; width:100%; overflow: hidden; line-height: 180%; padding-top: 5px; padding-bottom: 15px;}
.rowword- {height: auto; width:100%; overflow: hidden; line-height: 150%; padding-top: 5px; padding-bottom: 15px;}
.left :first-child,.right :first-child {padding-top: 0px;} .left :last-child,.right :last-child {padding-bottom: 0px;}

.hr {border-bottom:0.8px solid #C0C0C0;}
.row2 a:link,.row2 a:visited {color: #000000;}  .row2 a:hover,.row2 a:active {color: #FF0000;}
footer {margin-top: 2%; padding-top:15px; padding-bottom:25px;}

@media screen and (min-width: 2000px) {main {width: 60%;}  header {padding-left: 20%; padding-right: 20%;}}
@media screen and (min-width: 1050px) and (max-width: 1299px) {main {width: 88%;}  header {padding-left: 6%; padding-right: 6%;}}
@media screen and (min-width: 800px) and (max-width: 1049px) {main {width: 94%;}  header {padding-left: 3%; padding-right: 3%;}}
@media screen and (min-width: 480px) and (max-width: 799px) {.row1 {padding:8px 5%;} .left {width:41.5%; margin-left: 5%; margin-right: 3.5%;} .right {width:41.5%; margin-left: 3.5%; margin-right: 5%;}}
@media screen and (max-width: 479px) {.row1 {padding: 8px 0%;} .left {width:46.5%; margin-left: 0%; margin-right: 3.5%;} .right {width:46.5%; margin-left: 3.5%; margin-right: 0%;} .rowword {line-height: 160%;} footer {margin-top: 2.5%;}}