@charset "utf-8";
/* CSS Document */

body{ margin:0; padding:0; font-family:Century Gothic,tahoma,arial,Microsoft YaHei; font-size:12px; color:#666; background:#f8f8f8; border:none; overflow:hidden;}

html,div,ul,li,img,b,p,span,dl,dt,dd,iframe,form,input,a,img{ margin:0; padding:0; border:0;}

ul,li,dl,dt,dd{ list-style-type:none;}

html{background-image:url(about:blank);background-attachment:fixed;}

a{ text-decoration:none; }
a:visited{ text-decoration:none;}
a:hover{ text-decoration:none; }

  ::-moz-selection{ /*针对Firefox*/ 
background:#000; 
color:#fff; 
 } 
::selection { 
background:#000; 
color:#fff; 
} 

code::-moz-selection { /*code是标签选择器，可以换成p或span等*/ 
background: #000; 
} 
code::selection { 
background: #000; 
}

html{ scrollbar-arrowcolor:#000; scrollbar-face-color:#000; scrollbar-highlight-color:#000; scrollbar-shadow-color:#000; scrollbar-track-color:#f2f2f2; scrollbar-3dlight-color:#000; scrollbar-darkshadow-color:#000;}


::selection {background:#000; color:white; text-shadow: none;}
::-webkit-scrollbar-track-piece{ width:5px; background-color:#FFF;}
::-webkit-scrollbar{width:5px; height:6px;  -webkit-border-radius:20px;}
::-webkit-scrollbar-thumb{height:50px; background-color:#000; -webkit-border-radius:20px;}


.wrapper { display: flex; justify-items:center; height: calc(100vh); width: 100%; }
.wrapper > div { height: 100%; flex-grow: 1; position: relative; }


.left{ display: block; float: left; width: 50%; height:100%;  z-index: 998;}

.logo{  width:120px; height:49px; margin:80px 0 80px 0; display:block; background:url(../design2022/logo.png) no-repeat;}
#banner{ width:100%;  background-size: cover; display:block; margin:auto; position: relative;}
#banner img{width: 100%;}
#linepic{ width:100%; height:100%; display: block; position: absolute;top:0; left: 0; cursor: grab; background: url("../design2022/line.png") no-repeat center; background-size: 100% 100%;}
#line{ width:42%; height: cover; display: block; top:30%; right:-5%; background: url("../design2022/VIDEOBG.jpg") no-repeat #000000; position:absolute; z-index: 999; cursor: grab;}
#little3{ width:107px; height:109px; display: block;position:absolute;top:54%;  right:-3%; background-image:url("../design2022/03.png"); cursor: grab; z-index: 999;}
#line:active,#little3:active,.abpic img:active,#face:active,#linepic:active{ margin:2px 0 0 0;}
#L1:hover,#L2:hover,#L3:hover{opacity:0.9;}

.inner {width: 84%; display: block; padding:0 8% 0 8%;
    height: 100%;  background: #e8e8e8;
    overflow-y: scroll; overflow-x: visible;
}


#link3{ width:100%; height: 250px; display: block; margin-top:50px;  }
#L1{ float:left; width: 30%; margin-right: 5%;}
#L2{ float:left; width: 30%; margin-right: 5%;}
#L3{ float: right;  width:30%; }
#L1 img,#L2 img,#L3 img{ width: 100%;}
#aboutme{ width: 100%; margin-top: 100px;}
.abtitle{ width:139px; height: 19px; display: block; background-image:url("../design2022/ABOUTME.png");}
.abpic{ width:100%; height: 238px; margin: 100px 0 100px 0 ; display: block; position: relative; }
.abpic img{ width:100%;}
#face{width:109px; height: 120px; display: block; position: absolute; bottom:-40%; right: -8%; background-image: url("../design2022/FACE.png") ; cursor: grab;}
.abtext{ width: 100%; height:338px; display: block; background: url("../design2022/ME.png") no-repeat; }
#copyright{ width: 100%; height: 50px; margin: 60px 0 120px 0;}



#bigright{ background-image: url("../design2022/RIGHTBG.jpg"); display: block; float:right; z-index: 1; width: 40%; overflow-y: scroll; padding:0 5% 0 5%;}
#workst{ width: 30%; display: block;  background-size:100%; float: left; margin-top: 210px;}
#workst img{ pointer-events: none;}
#music{  margin-top: 200px; width:117px; height:117px; display: block; background: url("../design2022/music1.png") no-repeat ; float: right;}
.music{ width:117px; height:117px; display: block;   animation: rotate 10s linear infinite; }

@keyframes rotate{
 0%{
  transform: rotateZ(0deg);/*从0度开始*/
 }
 100%{
  transform: rotateZ(360deg);/*360度结束*/
 }
}


#content{ padding-top:60px; display:block; z-index:999; width:100%;  background:none; overflow:hidden;}
.list1,.list2{ float:left; margin-right:2%; width:32%;}
.list3{ float:left; width:32%;}
.list1 li,.list2 li,.list3 li{ margin-bottom:35px;}
.list1 img,.list2 img,.list3 img{	outline: none;
	border: none;
	display: block;
	width:100%;}

.list1 img:hover,.list2 img:hover,.list3 img:hover{opacity:0.8;}