レスポンシブで画像が表示消える

すみません。
もう一度別な、サイトでレスポンシブしてみましたが、
メイン画像(クラス：__mainphoto__です。）のみ消えて１カラムになります。

２カラムから、１カラムレイアウトにしたいです。
解決策を教えて下さい。

※通常サイズのcssも追記します。

html
1コード
2<!DOCTYPE html>
3<html lang="ja">
4  <head>
5    <meta charset="utf-8">
6    <link href="base.css" rel="stylesheet" type="text/css">
7    <title>作</title>
8      <meta name="viewport" content="width=device-width,initial-scale=1">
9    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
10  </head>
11  <body>
12    <div class="header">
13      <h1>道</h1>
14    </div>
15    <div id="main">
16      <!-- グローバルナビゲーション部分 -->
17      <div id="gnav">
18        <ul>
19          <li>
20            <a href="top.html" target=”_blank”>first</a>
21          </li>&gt;&gt; 
22          <li>
23            <a href="ocean.html" target=”_blank”>second</a>
24          </li>&gt;&gt; 
25          <li>
26            <a href="memo.html">third</a>
27          </li>&gt;&gt; 
28          <li>
29            <a href="favorite.html">fourth</a>
30          </li>
31        </ul>
32      </div>
33      <div class="clear"></div>
34      <div class="main">
35       ** <div class="mainphoto"></div>**
36        <p>このサイトは
37        </p>
38         <p class="relax">ごゆっくり、ご覧ください。</p>
39      </div>
40    </div>
41    <div class="clear"></div>
42      <hr>
43    <footer>
44      <p class="last">Copyright© 2019 All Rights Reserved.</p>
45    </footer>
46  </body>
47</html>

css
1コード
2@charset "utf-8";
3* {
4        margin: 0;
5	padding: 0;
6}
7@media screen and (max-width:330px) {
8    body {
9        width: 100%;
10	margin: auto;
11	background: #EEFFFF;
12	font-family: avenir, sans-serif;
13}
14h1 {
15	color: #00ff00;
16        background: #FFFFCC;
17	font-style: italic;
18	text-align: center;
19	border-top: 1px dashed #9933ff;
20	border-bottom: 1px dashed #9933ff;
21	padding: 10px;
22	margin: 10px;
23        text-shadow: 2px 2px 3px #999;
24}
25h2 {
26	margin-top: 10px;
27}
28ul {
29        width: 40%;
30	padding-bottom: 20px;
31}
32/* デフォルトリンク色の設定 */
33a {
34	color: #000080;
35	text-decoration: none;
36}
37a:hover {
38	color: #cce739;
39	text-decoration: underline;
40}
41/* グローバルナビゲーション
42---------------------------*/
43#gnav{
44    text-align: center;
45}
46#gnav li {
47	display: inline;
48	padding-right: 10px;
49	font-weight: bold;
50}
51    .mainphoto {
52        width:100%;
53	height: 400px;
54	background: #ff0000;
55}
56hr{
57    width:330px;
58    margin-top: 10px;
59}
60.last {
61    font-weight: bold;
62    margin-top: 30px;
63    text-align: center;
64    text-shadow: -1px -1px 0 #fff, 1px 1px 0 #aaa;
65}

css
1コード
2@media screen and (min-width:1000px) {
3body {
4        width: 800px;
5	margin: auto;
6	background: #EEFFFF;
7	font-family: avenir, sans-serif;
8}
9h1 {
10	color: #00ff00;
11        background: #FFFFCC;
12	font-style: italic;
13	text-align: center;
14	border-top: 1px dashed #9933ff;
15	border-bottom: 1px dashed #9933ff;
16	padding: 10px;
17	margin: 10px;
18        text-shadow: 2px 2px 3px #999;
19}
20h2 {
21	margin-top: 10px;
22}
23
24ul {
25	padding-bottom: 20px;
26}
27/* デフォルトリンク色の設定 */
28a {
29	color: #000080;
30	text-decoration: none;
31}
32a:hover {
33	color: #cce739;
34	text-decoration: underline;
35}
36/* グローバルナビゲーション
37---------------------------*/
38#gnav{
39    text-align: center;
40}
41#gnav li {
42	display: inline;
43	padding-right: 10px;
44	font-weight: bold;
45}
46.mainphoto {
47	width: 400px;
48	height: 400px;
49	margin-right: 20px;
50	background: #ff0000;
51	float: left;
52}
53.clear {
54	clear: both;
55}
56.main {
57	overflow: hidden;
58	/* 追記 */
59}