/* Clear out these styles to start fresh or use this as a base! */

@import url(css.css);

.rainbow-text .char {
  color: hsl(
    calc(360deg * var(--char-percent)
    ), 
    90%, 
    65%
  );
}

* { margin:0; padding:0; }
.server  { margin: auto; background: #black;color: #FFF;font: normal 600 2.5vw/1.5 Kanit, sans-serif;text-align: center;user-select: none;}
.rainbow-text.animated .char {animation: rainbow-colors 2s linear infinite;animation-delay: calc(-2s * var(--char-percent));}
/* Unfortunately, browsers try to take the shortest distance between transition/animation properties, so a simple `0turn` to `1turn` doesn't get the proper effect. */
@keyframes rainbow-colors {0% { color: hsl(197, 97%, 66%, 1); }25% { color: hsl(0, 100%, 100%, 1); }50% { color: hsl(348, 83%, 81%, 1); }75% { color: hsl(.75turn, 90%, 65%); }100% { color: hsl(1turn, 90%, 65%); }}
.toper_1 { background:url("../image/topbg.jpg") repeat-x;width:100%;margin-bottom:3%;}
.toper_2 { margin:0 auto; width:1200px; height:100px; position:relative;}
.toper_3 { width:200px; height:100px; position:absolute; top:0px; left:-100px; z-index:7;}
.toper_3 img { width:200px; height:100px;}
.toper_4 { width:342px; height:73px; position:absolute; top:14px; left:100px; z-index:7;}
.toper_5 { width:68px; height:102px; position:absolute; top:10px; right:60px; z-index:7;}
.toper_6 { position:absolute; top:30px; left:670px; z-index:7; text-align:center;}
.toper_6 a { display:block; font-size:18px; font-weight:200; letter-spacing:1.2pt; color:#FFF; transition:0.5s;}
.toper_6 a span { display:block; font-size:12px; letter-spacing:0.5pt;}
.toper_6 a:hover { color:#F00; margin-top:-5px;}
.toper_7 { position:absolute; top:30px; left:790px; z-index:7; text-align:center;}
.toper_7 a { display:block; font-size:18px; font-weight:200; letter-spacing:1.2pt; color:#FFF; transition:0.5s;}
.toper_7 a span { display:block; font-size:12px; letter-spacing:0.5pt;}
.toper_7 a:hover { color:#F00; margin-top:-5px;}
.toper_8 { position:absolute; top:30px; left:910px; z-index:7; text-align:center;}
.toper_8 a { display:block; font-size:18px; font-weight:200; letter-spacing:1.2pt; color:#FFF; transition:0.5s;}
.toper_8 a span { display:block; font-size:12px; letter-spacing:0.5pt;}
.toper_8 a:hover { color:#F00; margin-top:-5px;}
.toper_9 { position:absolute; top:30px; left:1030px; z-index:7; text-align:center;}
.toper_9 a { display:block; font-size:18px; font-weight:200; letter-spacing:1.2pt; color:#FFF; transition:0.5s;}
.toper_9 a span { display:block; font-size:12px; letter-spacing:0.5pt;}
.toper_9 a:hover { color:#F00; margin-top:-5px;}
.toper_10 { position:absolute; width:54px; height:54px; position:absolute; top:25px; right:0px; z-index:7; transition:0.5s;}
.toper_10 img { width:54px; height:54px; opacity:0.3; transition:0.7s;}
.toper_10:hover { margin-top:-10px;}
.toper_10 img:hover { opacity:1;}
.saoma{position:absolute;width:238px; height:250px;top:155px; left:20px;float:left;}
a{text-decoration: none;}
a:hover {text-decoration:underline;}

#list-box{position: fixed;/* left: 50%;margin-left: 510px; */top: 205px;z-index: 2;transition: margin-left 0.1s ease-out;}





/* @media screen and (max-width:1020px){#contentDiv>div{width: 100%;}}
@media screen and (min-width:1170px){#contentDiv>div{width: 999px;}}
@media screen and (max-width:1170px){#list-box{display: none;}}
@media screen and (min-width:1254px){
	#contentDiv>div{width: 1100px;}
	#list-box{margin-left: 560px;}
}
@media screen and (min-width:1354px){
	#contentDiv>div{width: 1200px;}
	#list-box{margin-left: 610px;}
}
@media screen and (min-width:1490px){
	#contentDiv>div{width: 1300px;}
	#list-box{margin-left: 660px;}
}
@media screen and (min-width:1575px){
	#contentDiv>div{width: 1400px;}
	#list-box{margin-left: 710px;}
} */