@media (min-width: 278.5px) and (max-width: 484.5px) {

  .user-area-inner, .ad_box { display:none; }

  .top_ad {
    width:100%;
    display:block;
    margin:10px 0px 4px 0px;
    text-align:center;
    overflow:hidden;
  }

  .logo {
    width:100%;
    display:block;
    margin:4px 0px 6px 0px;
    text-align:center;
  }

  .user-search {
    width:90%;
    display:block;
    margin:2px auto 12px;
    padding:6px 8px;
  }

  .searchbut {
    display:block;
    float:left;
    width:10%;
    margin:1px 0px 0px 4px;
  }

  .searchcont {
    display:block;
    float:left;
    margin:left:1px;
    width:30%;
  }

  .searchstr {
    display:block;
    float:left;
    width:52%;
    margin:left:1px;
  }

  .thumb_box {
    width:48%;
    float:left;
    margin:4px 0px 4px 4px;
    border:1px solid black;
    border-radius:0.4em;
  }

  .thumb_title { 
    width:100%;
    float:left;
    text-align:center;
    font-size:0.8em;
    color:black;
  }

  .box_main{ width:98%;font-size:0.8em; }

  .paper_box {
    display:block;
    width:98%;
    margin:6px auto;
    text-align:center;
  }  

  .ttlink {
    display:block;
    float:left;
    margin:4px 0px 4px 5px;
    width:10.5%;
    border-radius:0.4em;
  }

  .order {
    float:right;
    width:15%;
    margin:-2px 12px 0px 0px;
    text-align:right;
  }
} 

@media (min-width: 494.5px) and (max-width: 794.5px) {

  .user-area-inner, .ad_box { display:none; }

  .top_ad {
    width:100%;
    display:block;
    margin:10px 0px 4px 0px;
    text-align:center;
    overflow:hidden;
  }

  .logo {
    width:100%;
    display:block;
    margin:4px 0px 6px 0px;
    text-align:center;
  }

  .user-search {
    width:90%;
    display:block;
    margin:auto;
    padding:6px 8px;
  }

  .searchbut {
    display:block;
    float:left;
    width:12%;
    margin:1px 0px 0px 4px;
  }

  .searchcont {
    display:block;
    float:left;
    width:25%;
    margin-left:1px;
  }

  .searchstr {
    display:block;
    float:left;
    width:52%;
    margin:left:1px;
  }

  .thumb_box {
    width:24%;
    float:left;
    margin:4px 0px 8px 2px;
    border:1px solid black;
    border-radius:0.4em;
  }

  .thumb_title { 
    width:100%;
    float:left;
    text-align:center;
    font-size:0.8em;
    color:black;
  }

  .box_main{ font-size:0.8em; }

  .paper_box {
    display:block;
    width:96%;
    margin:6px auto;
    text-align:center;
  }  

   .ttlink {
    display:block;
    float:left;
    margin:4px 0px 4px 5px;
    width:11%;
    border-radius:0.4em;
  }

  .order {
    float:right;
    width:11%;
    padding-right:6px;
    text-align:right;
  }
}

@media (min-width: 802.5px) and (max-width: 1192.5px) {

  .user-area-inner, .ad_box { display:none; }

  .top_ad {
    width:100%;
    display:block;
    margin:10px 0px 4px 0px;
    text-align:center;
    overflow:hidden;
  }

  .logo {
    width:100%;
    display:block;
    margin:4px 0px 6px 0px;
    text-align:center;
  }

  .user-search {
    width:90%;
    display:block;
    margin:auto;
    padding:6px 8px;
  }

  .searchbut {
    display:block;
    float:left;
    width:10%;
    margin:1px 0px 0px 36px;
  }

  .searchcont {
    display:block;
    float:left;
    margin-left:1px;
  }

  .searchstr {
    display:block;
    float:left;
    margin-left:1px;
    width:60%;
  }

  .thumb_box {
    width:16%;
    float:left;
    margin:4px 0px 8px 5px;
    border:1px solid black;
    border-radius:0.4em;
  }

  .thumb_title { 
    width:100%;
    float:left;
    text-align:center;
    font-size:0.85em;
    color:black;
  }

  .paper_box {
    display:block;
    width:96%;
    margin:6px auto;
    text-align:center;
  }  
  
  .ttlink {
    display:block;
    float:left;
    margin:4px 0px 4px 5px;
    width:11.75%;
    border-radius:0.4em;
  }

  .order {
    float:right;
    width:10%;
    padding-right:6px;
    text-align:right;
  }
}

@media (min-width: 1204.5px) and (max-width: 3864.5px) {

  .top_ad {
    width:60%;
    display:block;
    margin:8px auto;
    text-align:center;
    overflow:hidden;
  }

  .logo {
    width:60%;
    display:block;
    margin:4px auto;
    text-align:center;
  }

  .ad_box {
    display:block;
    float:left;
    width:10%;
    margin-left:6px;
    overflow:hidden;
  }

  .user-area-inner {
    width:49%;
    display:inline-block;
    float:left;
    margin:0px 0px 0px 4px;
    padding:6px 0px 8px 0px; 
  }

  .user-search {
    width:49%;
    display:inline-block;
    float:right;
    margin:4px 0px 0px 0px;
  }

  .searchbut {
    display:inline-block;
    float:right;
    margin:1px 4px 0px 0px;
  }

  .searchcont {
    display:inline-block;
    float:right;
    margin-right:1px;
  }

  .searchstr {
    display:inline-block;
    float:right;
  }

  .thumb_box {
    width:16.25%;
    float:left;
    margin:4px 0px 8px 4px;
    border:1px solid black;
    border-radius:0.4em;
  }

  .thumb_title { 
    width:100%;
    float:left;
    text-align:center;
    font-size:1.0em;
    color:black;
  }

  .paper_box {
    display:block;
    float:left;
    width:78.5%;
    margin-left:6px;
    text-align:center;
  }    

  .ttlink {
    display:block;
    float:left;
    margin:4px 0px 4px 5px;
    width:12.125%;
    border-radius:0.4em;
  }

  .order {
    float:right;
    width:6%;
    padding-right:6px;
    text-align:right;
  }
}

/* ============================= MAIN CSS ========================================= */

html { 
  width:100%;
  background-color:#ffffff; 
  background: url(/banner/bground2.png);
}

body {
  width:96%;
  background: #ffffff;
  color:#000;
  border:4px solid #0bb1d4;
  border-radius:0.6em;
  overflow:auto;
}

  .logo img, .top_ad img {
    width:80%;
    border-radius:0.6em;
  }

.thumb { width:100%;float:left; }
.thumb img { width:100%; border-radius: 0.4em; }

.page_counts {
	width:100%;
	clear:both;
	text-align:center;
}

.ad_box img { width:100%; border-radius:0.4em;}

.header-extra {
  display:none;
}

.links:hover, .opac:hover {
  opacity: 0.5;
  filter: alpha(opacity=50); /* For IE8 and earlier */
}

a, a:visited, a:active {
  text-decoration:none;
	color: #660000;
}
  
a:hover {
	text-decoration:none;
	color: #ff1493;
}

ul {
  list-style-type: none;
}

.nav_main {
  width:100%;
  float:left;
  padding:0.5em 0;
  text-align:center;
  background:#fff;
}

.nav_main li, .nav_use li {
  display:inline-block;
  margin-right:10px;
}

.sub-menu-item {
  width:100%;
}

.header .user-area {
    text-align: right; 
}

.header .user-area {
      margin-top: 15px;
      background-color: white;
      padding: 4px 10px;
      display: inline-block;
      border: 1px solid white;
      border-radius: 4px; 
}

footer {
  margin-top: 10px; 
}

.footer-menu {
  text-align: center;
  margin-bottom: 10px; 
}

select[name=author] {
  width: 500px; 
}

.avcms-main {
  margin-top: 10px; 
}

.main-menu {
  margin-bottom: 0px; 
}

.search-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 120px !important;
  border-left: 0px;
  border-radius: 0px;
  float: none !important;
  vertical-align: middle !important;
  display: inline !important; 
}

.loader {
  position: fixed;
  top: 0;
  right: 0;
  background-color: white;
  border-radius: 5px;
  padding: 0px 6px 2px 6px;
  margin: 10px 10px 0px 0px;
  box-shadow: #595959 0px 0px 1px;
  display: none; 
}

.box_main {
  display:block;
  margin:4px auto;
  border:2px solid #ddd;
  border-radius:0.6em;
  overflow:hidden;
}

.box_head {
  width:100%;
  padding:2px 8px;
  background-color:#eee;
  color:#000;
  font-size:1.1em;
  font-weight:bold;
  text-align:left;
  border-bottom:1px solid #ddd;
}

.box_bottom {
  width:100%;
}

.blank_box {
  max-width:100%;
  margin:8px 0px 8px 0px;
  padding:4px;
  text-align:center;
}

.blank_box img {
  max-width:100%;
  height:auto;
}

.copyright {
  text-align: center;
  margin-bottom: 8px; 
  font-size:0.9em;
}

/* BackToTop button css */
#scroll {
    position:fixed;
    right:45px;
    bottom:20px;
    z-index:1;
    cursor:pointer;
    width:35px;
    height:35px;
    background-color:#3498db;
    text-indent:-9999px;
    display:none;
    -webkit-border-radius:60px;
    -moz-border-radius:60px;
    border-radius:60px;
}

#scroll span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
    border:8px solid transparent;
    border-bottom-color:#ffffff
}
#scroll:hover {
    background-color:#e74c3c;
    opacity:1;filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}

.mobile {
    display:block;
    width:33%;
    float:right;
    margin-right:8px;
    text-align:right;
}