Difference between revisions of "Template:BNU-China/CSS/background"

 
(120 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 +
* {padding:0;margin:0;}
 
body{
 
body{
−
  margin:0px;
+
margin:0px;
−
  overflow-y: scroll;
+
overflow-y: scroll;
 
}
 
}
 
.w_a{
 
.w_a{
−
  text-decoration:none;
+
text-decoration:none;
−
  color: rgb(247,237,183);
+
color: rgb(247,237,183)!important;
 
}
 
}
−
 
 
#w_nav{
 
#w_nav{
−
  margin: 0px;
+
margin: 0px;
−
  padding: 0px;
+
padding: 0px;
−
  top:-2px;
+
top:15px;
−
  position:fixed;
+
position:fixed;
−
  z-index: 500;
+
z-index: 500;
 
}
 
}
  
 
#w_nav>img{
 
#w_nav>img{
−
  display:inline-block;
+
display:inline-block;
−
  margin: 0px;
+
margin: 0px;
−
  padding: 0px;
+
padding: 0px;
−
  width:100%;
+
width:100%;
 
}
 
}
  
 
#w_nav>ul{
 
#w_nav>ul{
−
  margin: 0px;
+
margin: 0px;
−
  padding: 0px;
+
padding: 0px;
−
  position: relative;
+
position: relative;
−
  text-align: center;
+
text-align: center;
 
}
 
}
  
 
#w_nav>ul>li{
 
#w_nav>ul>li{
−
  margin:0px;
+
margin:0px;
−
  padding: 0px;
+
padding: 0px;
−
  display:inline;
+
display:inline;
 
}
 
}
  
 
#w_nav>ul>li>a{
 
#w_nav>ul>li>a{
−
  text-align: center;
+
text-align: center;
−
  margin: 0px;
+
margin: 0px;
−
  padding: 0px;
+
padding: 0px;
−
  display:inline-block;
+
display:inline-block;
−
  color: rgb(247,237,183);
+
color: rgb(247,237,183);
 +
top:0px;
 +
position:relative;
 +
z-index:500;
 
}
 
}
  
 
#w_nav>div{
 
#w_nav>div{
−
  position: relative;
+
text-align:right;
−
  top:-42px;
+
position: relative;
−
  color:rgb(247,237,183);
+
top:-30px;
−
  font-size: 16px;
+
color:rgb(247,237,183);
 +
font-size: 16px;
 
}
 
}
  
 
#w_nav>div>p{
 
#w_nav>div>p{
−
  cursor:pointer;
+
cursor:pointer;
 
}
 
}
  
 
#w_nav>div>ul{
 
#w_nav>div>ul{
−
  position: relative;
+
position: relative;
−
  text-align: center;
+
text-align: center;
−
  background-color: rgb(158,43,32);
+
margin:0px!important;
 +
background-color: rgb(158,43,32);
 
}
 
}
  
 
#w_nav>div>ul>li{
 
#w_nav>div>ul>li{
−
  text-align: center;
+
text-align: center;
−
  list-style: none;
+
list-style: none;
 
}
 
}
  
 
#w_nav>div>ul>li>a{
 
#w_nav>div>ul>li>a{
−
  color:rgb(247,237,183);
+
color:rgb(247,237,183);
−
  position: relative;
+
position: relative;
−
  left:-20px;
+
 
}
 
}
  
 
p{
 
p{
−
  opacity: 1;
+
opacity: 1;
 
}
 
}
  
 
#w_Panel{
 
#w_Panel{
−
  padding-top: 100px;
+
padding-top: 115px;
−
  text-align:left;
+
text-align:left;
−
  width:17%;
+
width:17%;
−
  height:505px;
+
background-color:rgb(39,47,48);
−
  background-color:rgb(39,47,48);
+
color:rgb(247,237,183);
−
  color:rgb(247,237,183);
+
position: fixed;
−
  position: fixed;
+
}
 +
 
 +
#w_Panel>ul{
 +
top:20px;
 +
padding-left: 30px;
 
}
 
}
  
 
#w_Panel>ul>li{
 
#w_Panel>ul>li{
−
  list-style: none;
+
list-style: none;
−
  position:relative;
+
font-size: 20px;
−
  left: -20px;
+
font-weight: bold;
−
  font-size: 20px;
+
margin-bottom: 15px;
−
  font-weight: bold;
+
padding: 0px;
−
  margin-bottom: 15px;
+
−
  padding: 0px;
+
 
}
 
}
  
 
#w_Panel>ul>li>ul>li>p:hover{
 
#w_Panel>ul>li>ul>li>p:hover{
−
  background-color: rgb(158,43,32);
+
color: rgb(224,64,28);
 
}
 
}
  
 
#w_Panel>ul>li>ul{
 
#w_Panel>ul>li>ul{
−
  position: relative;
+
list-style:none;
−
  left: -20px;
+
padding-left: 15px;
−
  margin-top: 10px;
+
left: 0px;
 +
padding-top: 10px;
 
}
 
}
  
 
#w_Panel>ul>li>ul>li>p{
 
#w_Panel>ul>li>ul>li>p{
−
  font-size: 15px;
+
font-size: 15px;
−
  font-weight:lighter;
+
font-weight:lighter;
−
  color:rgb(247,237,183);
+
color:rgb(247,237,183);
−
  cursor: pointer;
+
cursor: pointer;
−
  margin: 0px;
+
margin: 0px;
−
  padding: 0px;
+
padding: 0px;
 
}
 
}
 +
 +
#w_Panel .w_a{line-height:1.5;}
  
 
#w_text{
 
#w_text{
−
  position: relative;
+
position: relative;
−
  left: 17%;
+
left: 17%;
−
  width: 83%;
+
width: 83%;
−
  top:100px;
+
padding-top:100px;
−
  margin-bottom: 30px;
+
padding-bottom: 35px;
 +
background-color:rgb(247,237,183);
 +
}
 +
#w_text>table,td{
 +
border: 2px solid rgb(39,47,48);
 +
}
 +
#w_text>table{
 +
border-collapse:collapse;
 +
position: relative;
 +
left: 15%;
 +
width: 70%;
 +
font-size: 12px;
 +
margin-bottom: 10px;
 
}
 
}
  
 
#w_text>p{
 
#w_text>p{
−
  margin: 0px;
+
margin: 0px;
−
  position: relative;
+
margin-top:1em;
−
  color:rgb(39,47,48);
+
position: relative;
−
  left: 15%;
+
color:rgb(39,47,48);
−
  width: 70%;
+
left: 15%;
−
  font-size: 14px;
+
width: 70%;
−
  text-indent:14px;
+
font-size: 16.58px;
 +
text-align:justify;
 +
}
 +
#w_text>ul>li{
 +
margin: 0px;
 +
margin-bottom:1em;
 +
position: relative;
 +
color:rgb(39,47,48);
 +
left: 15%;
 +
width: 70%;
 +
font-size: 14px;
 +
text-align:justify;
 +
}
 +
#w_text>ol>li{
 +
margin: 0px;
 +
margin-bottom:1em;
 +
position: relative;
 +
color:rgb(39,47,48);
 +
left: 15%;
 +
width: 70%;
 +
font-size: 16.58px;
 +
text-align:justify;
 
}
 
}
  
−
#w_text>h1{
+
#safe-operation>li>p{
−
  color:rgb(39,47,48);
+
margin: 0px;
−
  font-size: 60px;
+
color:rgb(39,47,48);
−
  position: relative;
+
left: 15%;
−
  left: 14.4%;
+
width: 70%;
−
  width: 70%;
+
font-size: 16.58px;
−
  font-weight: bold;
+
text-align:justify;
 
}
 
}
  
 +
#w_text>h1{
 +
color:rgb(39,47,48);
 +
font-size: 60px !important;
 +
position: relative;
 +
left: 14.4%;
 +
width: 70%;
 +
font-weight: bold;
 +
text-align:center !important;
 +
}
 
#w_text>h2{
 
#w_text>h2{
−
  color:rgb(39,47,48);
+
color:rgb(39,47,48);
−
  position: relative;
+
position: relative;
−
  font-size:30px;
+
font-size:2.85em;
−
  left: 14.8%;
+
left: 14.8%;
−
  width: 70%;
+
width: 70%;
−
  margin: 20px 0px 0px 0px;
+
margin: 1.7em 0px 0.5em 0px;
−
  padding: 0px;
+
padding: 0px;
−
  text-decoration: underline;
+
font-weight: bold;
−
  font-weight: bold;
+
font-size:32px;
 
}
 
}
  
 
#w_text>h3{
 
#w_text>h3{
−
  margin: 15px 0px 5px 0px;
+
margin: 1em 0px 0px 0px;
−
  padding: 0px;
+
padding: 0px;
−
  color:rgb(39,47,48);
+
color:rgb(39,47,48);
−
  position: relative;
+
position: relative;
−
  left: 15%;
+
left: 15%;
−
  width: 70%;
+
width: 70%;
−
  font-size: 14px;
+
font-size: 18.58px;
−
  font-style: italic;
+
font-style: italic;
−
  font-weight: bold;
+
font-weight: bold;
 
}
 
}
  
 
#w_text>h4{
 
#w_text>h4{
−
  text-align: center;
+
text-align: center;
−
  margin:0px 0px 10px 0px;
+
margin:10px 0px 1em 0px;
−
  padding: 0px;
+
padding: 0px;
−
  color:rgb(39,47,48);
+
color:rgb(39,47,48);
−
  opacity: 0.5;
+
opacity: 0.5;
−
  position: relative;
+
position: relative;
−
  left: 15%;
+
left: 15%;
−
  width: 70%;
+
width: 70%;
−
  font-size: 12px;
+
font-size: 12px;
 
}
 
}
  
−
#w_text>img{
+
#w_text>img,#w_text>a>img{
−
  position: relative;
+
position: relative;
−
  width: 70%;
+
width: 50%;
−
  left: 15%;
+
left: 25%;
−
  margin:5px 0px 0px 0px;
+
margin:1em 0px 0px 0px;
−
  padding: 0px;
+
padding: 0px;
 
}
 
}
  
 +
.w_textLogo{
 +
position: relative;
 +
  text-align: center;
 +
width: 70%;
 +
left: 15%;
 +
margin:5px 0px 0px 0px;
 +
padding: 0px;
 +
}
 +
.w_textLogo>a>img{
 +
display: inline-block;
 +
  width:20%;
 +
}
 
@media screen and (max-width:911px){
 
@media screen and (max-width:911px){
−
  #w_Panel>ul>li{
+
#w_Panel>ul>li{
−
    font-size: 15px;
+
font-size: 15px;
−
  }
+
}
−
  #w_Panel>ul>li>ul>li>p{
+
#w_Panel>ul>li>ul>li>p{
−
    font-size: 10px;
+
font-size: 10px;
−
  }
+
}
 +
#w_text>p,#safe-operation>li>p{
 +
left: 10%;
 +
width: 80%;
 +
font-size: 14px;
 +
}
 +
#w_text>h1{
 +
left:10%;
 +
width:80%;
 +
font-size: 30px;
 +
}
 +
#w_text>h3{
 +
left:10%;
 +
width:80%;
 +
font-size: 14px;
 +
}
 +
#w_text>h2{
 +
left:10%;
 +
width:80%;
 +
}
 +
#w_text{
 +
position: relative;
 +
left: 25%;
 +
width: 75%;
 +
padding-top:75px;
 +
}
 
}
 
}
−
 
 
@media screen and (max-width:767px){
 
@media screen and (max-width:767px){
−
  #w_text{
+
#w_text{
−
    position: relative;
+
position: relative;
−
    left: 25%;
+
left: 25%;
−
    width: 75%;
+
width: 75%;
−
    top:100px;
+
padding-top:75px;
−
  }
+
}
−
  #w_Panel{
+
#w_Panel{
−
    padding-top: 100px;
+
padding-top: 100px;
−
    width:25%;
+
width:25%;
−
    height:505px;
+
}
−
  }
+
#w_text>p,#safe-operation>li>p{
−
  #w_text>p{
+
left: 10%;
−
    left: 10%;
+
width: 80%;
−
    width: 80%;
+
font-size: 14px;
−
    font-size: 14px;
+
}
−
  }
+
#w_text>h1{
−
  #w_text>h1{
+
left:10%;
−
    left:10%;
+
width:80%;
−
    width:80%;
+
font-size: 30px;
−
    font-size: 30px;
+
}
−
  }
+
#w_text>h3{
−
  #w_text>h3{
+
left:10%;
−
    font-size: 22px;
+
width:80%;
−
  }
+
}
−
 
+
#w_text>h2{
−
  #w_text>h2{
+
left:10%;
−
    font-size: 50px;
+
width:80%;
−
  }
+
font-size: 1.75em;
−
}
+
}
 +
    #w_text>.w_textLogo{
 +
    position: relative;
 +
    width: 80%;
 +
    left: 10%;
 +
    }
 +
#w_text>table{
 +
left: 10%;
 +
width: 80%;
 +
}
 +
}
  
 
@media screen and (max-width:480px){
 
@media screen and (max-width:480px){
−
  #w_text{
+
#w_text{
−
    position: relative;
+
position: relative;
−
    left: 30%;
+
left: 30%;
−
    width: 70%;
+
width: 70%;
−
    top:100px;
+
padding-top:50px;
−
  }
+
}
−
  #w_Panel{
+
#w_Panel{
−
    padding-top: 100px;
+
padding-top: 100px;
−
    width:30%;
+
width:30%;
−
    height:505px;
+
}
−
  }
+
#w_Panel>ul{
−
  #w_Panel>ul>li{
+
padding-left:0px;
−
    left: -30px;
+
}
−
  }
+
#w_Panel>ul>li{
−
  #w_text>p{
+
left: -30px;
 +
}
 +
#w_text>p,#safe-operation>li>p{
 +
left: 5%;
 +
width: 90%;
 +
}
 +
#w_text>h1{
 +
left:5%;
 +
width:90%;
 +
}
 +
  #w_text>.w_textLogo{
 +
    width: 90%;
 
     left: 5%;
 
     left: 5%;
−
    width: 90%;
 
−
  }
 
−
  #w_text>h1{
 
−
    left:5%;
 
−
    width:90%;
 
 
   }
 
   }
 +
#w_text>table{
 +
left: 5%;
 +
width: 90%;
 +
}
 +
}
 +
@media screen and (min-width:1367px) {
 +
#w_Panel>ul>li{
 +
font-size: 24px;
 +
}
 +
#w_Panel>ul>li>ul>li>p{
 +
font-size: 16px;
 +
}
 +
#w_Panel{
 +
padding-top: 180px;
 +
}
 +
#w_text{
 +
padding-top:175px;
 +
}
 +
#w_text>p,#safe-operation>li>p{
 +
font-size: 20px;
 +
}
 +
#w_text>h1{
 +
font-size: 70px;
 +
}
 +
#w_text>h4{
 +
font-size:16px;
 +
}
 +
}
 +
 +
@media screen and (min-width:1556px) {
 +
#w_Panel>ul>li{
 +
font-size: 25px;
 +
}
 +
#w_Panel>ul>li>ul>li>p{
 +
font-size: 20px;
 +
}
 +
#w_Panel{
 +
padding-top: 220px;
 +
}
 +
#w_text{
 +
padding-top:175px;
 +
}
 +
#w_text>p,#safe-operation>li>p{
 +
font-size: 20px;
 +
}
 +
#w_text>h1{
 +
font-size: 70px;
 +
}
 +
#w_text>h4{
 +
font-size:16px;
 +
}
 
}
 
}
  
 
.w_indexPhoto{
 
.w_indexPhoto{
−
  text-align: center;
+
text-align: center;
−
  position:absolute;
+
position:absolute;
−
  width: 100%;
+
width: 100%;
−
  margin: 0px;
+
margin: 14px 0px 0px 0px!important;
−
  padding: 0px;
+
padding: 14px 0px 0px 0px;
 
}
 
}
  
 
.w_indexPhoto>img{
 
.w_indexPhoto>img{
−
  width: 100%;
+
width: 100%;
 
}
 
}
  
−
#storyArrow{
+
#storyArrow,#upArrow{
−
  cursor: pointer;
+
cursor: pointer;
−
  top: 88%;
+
top: 88%;
−
  position: fixed;
+
position: fixed;
−
  width: 4%;
+
width: 4%;
−
  left: 48%;
+
left: 48%;
−
  opacity: 0.6;
+
opacity: 0.6;
 
}
 
}
  
 
#abstract{
 
#abstract{
−
  background-color: rgb(39,47,48);
+
background-color: rgb(39,47,48);
−
  color: rgb(247,237,183);
+
color: rgb(247,237,183);
−
  width: 100%;
+
width: 100%;
−
  height:100%;
+
height:100%;
−
  text-align: center;
+
text-align: center;
 
}
 
}
  
 
#abstract>h1{
 
#abstract>h1{
−
  font-size: 100px;
+
font-size: 100px;
−
  color: rgb(247,237,183);
+
        color: rgb(247,237,183);
−
  margin: 0px;
+
margin: 0px;
−
  padding: 0px;
+
padding: 0px;
−
  font-weight: bold;
+
font-weight: bold;
 +
        line-height:normal;
 +
        margin-top:10px;
 
}
 
}
  
 
#abstract>p{
 
#abstract>p{
−
  position: relative;
+
position: relative;
−
  color: rgb(247,237,183);
+
width: 80%;
−
  width: 80%;
+
left: 10%;
−
  left: 10%;
+
font-size: 22px;
−
  font-size: 22px;
+
margin: 0px 0px 5.9% 0px;
−
  margin: 0px 0px 5.9% 0px;
+
 
}
 
}
  
 
@media screen and (min-width:767px) {
 
@media screen and (min-width:767px) {
−
  .w_indexPhoto{
+
.w_indexPhoto{
−
    position:absolute;
+
position:absolute;
−
    top:70px;
+
top: 55px;
−
    width: 100%;
+
width: 100%;
−
  }
+
}
 +
}
 +
 
 +
@media screen and (max-width:1150px){
 +
.w_indexPhoto{
 +
top:45px;
 +
}
 
}
 
}
  
 
@media screen and (max-width:1050px){
 
@media screen and (max-width:1050px){
−
  .w_indexPhoto{
+
.w_indexPhoto{
−
    top:45px;
+
top:30px;
−
  }
+
}
 
}
 
}
  
 
@media screen and (max-width:767px){
 
@media screen and (max-width:767px){
−
  #abstract>h1{
+
#abstract>h1{
−
    font-size: 80px;
+
font-size: 80px;
−
  }
+
}
−
  #abstract>p{
+
#abstract>p{
−
    font-size: 14px;
+
font-size: 14px;
−
    margin-bottom: 0%;
+
margin-bottom: 0%;
−
  }
+
}
−
  .w_indexPhoto{
+
.w_indexPhoto{
−
    margin-top: 30px;
+
padding-top: 40px;
−
    position:static;
+
width: 100%;
−
    width: 100%;
+
position:static;
−
  }
+
}
 +
}
 +
 
 +
@media screen and (max-width:600px){
 +
.w_indexPhoto{
 +
padding-top: 30px;
 +
width: 100%;
 +
}
 
}
 
}
  
 
@media screen and (max-width:480px){
 
@media screen and (max-width:480px){
−
  #abstract>h1{
+
#abstract>h1{
−
    font-size: 60px;
+
font-size: 60px;
−
  }
+
}
−
  #abstract>p{
+
#abstract>p{
−
    font-size: 12px;
+
font-size: 12px;
−
  }
+
}
−
  .w_indexPhoto{
+
.w_indexPhoto{
−
    margin-top: 15px;
+
padding-top: 15px;
−
   }
+
top:3px;
 +
}
 +
}
 +
 
 +
@media screen and (min-width:1367px){
 +
#abstract{
 +
padding-top: 160px;
 +
}
 +
#abstract>h1{
 +
font-size: 120px;
 +
}
 +
#abstract>p{
 +
text-align:justify;
 +
width:60%;
 +
font-size: 30px;
 +
left:20%;
 +
}
 +
.w_indexPhoto{
 +
top:3px;
 +
}
 +
}
 +
#w_Panel a{
 +
   position: relative;
 +
  left: 0px;
 +
  top:0px;
 +
}
 +
 
 +
#w_Panel a::after {
 +
border-radius: 1px;
 +
position: absolute;
 +
top: 100%;
 +
left: 0;
 +
overflow: hidden;
 +
width: 0%;
 +
  height:2px;
 +
color: #fff;
 +
content: "";
 +
  border-bottom: 2px solid #fff;
 +
-webkit-transition: width 0.5s;
 +
-moz-transition: width 0.5s;
 +
transition: width 0.5s;
 +
}
 +
#w_Panel a:hover::after,
 +
#w_Panel a:focus::after {
 +
  width: 100%;
 +
}
 +
 
 +
#w_nav>ul>li{
 +
margin:0px;
 +
padding: 0px;
 +
position: relative;
 +
left: 0px;
 +
display:inline-block;
 +
}
 +
#w_nav>ul>li>div{
 +
z-index:499;
 +
}
 +
#w_nav>ul>li>div>ul{
 +
list-style: none;
 +
line-height:2em;
 +
padding-bottom:5px;
 +
}
 +
#w_nav>ul>li>div>ul>li:hover{
 +
background-color:rgba(224,64,28,1);
 
}
 
}

Latest revision as of 21:44, 1 November 2017

  • {padding:0;margin:0;}

body{ margin:0px; overflow-y: scroll; } .w_a{ text-decoration:none; color: rgb(247,237,183)!important; }

  1. w_nav{

margin: 0px; padding: 0px; top:15px; position:fixed; z-index: 500; }

  1. w_nav>img{

display:inline-block; margin: 0px; padding: 0px; width:100%; }

  1. w_nav>ul{

margin: 0px; padding: 0px; position: relative; text-align: center; }

  1. w_nav>ul>li{

margin:0px; padding: 0px; display:inline; }

  1. w_nav>ul>li>a{

text-align: center; margin: 0px; padding: 0px; display:inline-block; color: rgb(247,237,183); top:0px; position:relative; z-index:500; }

  1. w_nav>div{

text-align:right; position: relative; top:-30px; color:rgb(247,237,183); font-size: 16px; }

  1. w_nav>div>p{

cursor:pointer; }

  1. w_nav>div>ul{

position: relative; text-align: center; margin:0px!important; background-color: rgb(158,43,32); }

  1. w_nav>div>ul>li{

text-align: center; list-style: none; }

  1. w_nav>div>ul>li>a{

color:rgb(247,237,183); position: relative; }

p{ opacity: 1; }

  1. w_Panel{

padding-top: 115px; text-align:left; width:17%; background-color:rgb(39,47,48); color:rgb(247,237,183); position: fixed; }

  1. w_Panel>ul{

top:20px; padding-left: 30px; }

  1. w_Panel>ul>li{

list-style: none; font-size: 20px; font-weight: bold; margin-bottom: 15px; padding: 0px; }

  1. w_Panel>ul>li>ul>li>p:hover{

color: rgb(224,64,28); }

  1. w_Panel>ul>li>ul{

list-style:none; padding-left: 15px; left: 0px; padding-top: 10px; }

  1. w_Panel>ul>li>ul>li>p{

font-size: 15px; font-weight:lighter; color:rgb(247,237,183); cursor: pointer; margin: 0px; padding: 0px; }

  1. w_Panel .w_a{line-height:1.5;}
  1. w_text{

position: relative; left: 17%; width: 83%; padding-top:100px; padding-bottom: 35px; background-color:rgb(247,237,183); }

  1. w_text>table,td{

border: 2px solid rgb(39,47,48); }

  1. w_text>table{

border-collapse:collapse; position: relative; left: 15%; width: 70%; font-size: 12px; margin-bottom: 10px; }

  1. w_text>p{

margin: 0px; margin-top:1em; position: relative; color:rgb(39,47,48); left: 15%; width: 70%; font-size: 16.58px; text-align:justify; }

  1. w_text>ul>li{

margin: 0px; margin-bottom:1em; position: relative; color:rgb(39,47,48); left: 15%; width: 70%; font-size: 14px; text-align:justify; }

  1. w_text>ol>li{

margin: 0px; margin-bottom:1em; position: relative; color:rgb(39,47,48); left: 15%; width: 70%; font-size: 16.58px; text-align:justify; }

  1. safe-operation>li>p{

margin: 0px; color:rgb(39,47,48); left: 15%; width: 70%; font-size: 16.58px; text-align:justify; }

  1. w_text>h1{

color:rgb(39,47,48); font-size: 60px !important; position: relative; left: 14.4%; width: 70%; font-weight: bold; text-align:center !important; }

  1. w_text>h2{

color:rgb(39,47,48); position: relative; font-size:2.85em; left: 14.8%; width: 70%; margin: 1.7em 0px 0.5em 0px; padding: 0px; font-weight: bold; font-size:32px; }

  1. w_text>h3{

margin: 1em 0px 0px 0px; padding: 0px; color:rgb(39,47,48); position: relative; left: 15%; width: 70%; font-size: 18.58px; font-style: italic; font-weight: bold; }

  1. w_text>h4{

text-align: center; margin:10px 0px 1em 0px; padding: 0px; color:rgb(39,47,48); opacity: 0.5; position: relative; left: 15%; width: 70%; font-size: 12px; }

  1. w_text>img,#w_text>a>img{

position: relative; width: 50%; left: 25%; margin:1em 0px 0px 0px; padding: 0px; }

.w_textLogo{ position: relative; 

 text-align: center;

width: 70%; left: 15%; margin:5px 0px 0px 0px; padding: 0px; } .w_textLogo>a>img{ display: inline-block; 

 width:20%;

} @media screen and (max-width:911px){ #w_Panel>ul>li{ font-size: 15px; } #w_Panel>ul>li>ul>li>p{ font-size: 10px; } #w_text>p,#safe-operation>li>p{ left: 10%; width: 80%; font-size: 14px; } #w_text>h1{ left:10%; width:80%; font-size: 30px; } #w_text>h3{ left:10%; width:80%; font-size: 14px; } #w_text>h2{ left:10%; width:80%; } #w_text{ position: relative; left: 25%; width: 75%; padding-top:75px; } } @media screen and (max-width:767px){ #w_text{ position: relative; left: 25%; width: 75%; padding-top:75px; } #w_Panel{ padding-top: 100px; width:25%; } #w_text>p,#safe-operation>li>p{ left: 10%; width: 80%; font-size: 14px; } #w_text>h1{ left:10%; width:80%; font-size: 30px; } #w_text>h3{ left:10%; width:80%; } #w_text>h2{ left:10%; width:80%; font-size: 1.75em; } 

   #w_text>.w_textLogo{
   	position: relative;
   	width: 80%;
   	left: 10%;
   }

#w_text>table{ left: 10%; width: 80%; } }

@media screen and (max-width:480px){ #w_text{ position: relative; left: 30%; width: 70%; padding-top:50px; } #w_Panel{ padding-top: 100px; width:30%; } #w_Panel>ul{ padding-left:0px; } #w_Panel>ul>li{ left: -30px; } #w_text>p,#safe-operation>li>p{ left: 5%; width: 90%; } #w_text>h1{ left:5%; width:90%; } 

 #w_text>.w_textLogo{
   width: 90%;
   left: 5%;
 }

#w_text>table{ left: 5%; width: 90%; } } @media screen and (min-width:1367px) { #w_Panel>ul>li{ font-size: 24px; } #w_Panel>ul>li>ul>li>p{ font-size: 16px; } #w_Panel{ padding-top: 180px; } #w_text{ padding-top:175px; } #w_text>p,#safe-operation>li>p{ font-size: 20px; } #w_text>h1{ font-size: 70px; } #w_text>h4{ font-size:16px; } }

@media screen and (min-width:1556px) { #w_Panel>ul>li{ font-size: 25px; } #w_Panel>ul>li>ul>li>p{ font-size: 20px; } #w_Panel{ padding-top: 220px; } #w_text{ padding-top:175px; } #w_text>p,#safe-operation>li>p{ font-size: 20px; } #w_text>h1{ font-size: 70px; } #w_text>h4{ font-size:16px; } }

.w_indexPhoto{ text-align: center; position:absolute; width: 100%; margin: 14px 0px 0px 0px!important; padding: 14px 0px 0px 0px; }

.w_indexPhoto>img{ width: 100%; }

  1. storyArrow,#upArrow{

cursor: pointer; top: 88%; position: fixed; width: 4%; left: 48%; opacity: 0.6; }

  1. abstract{

background-color: rgb(39,47,48); color: rgb(247,237,183); width: 100%; height:100%; text-align: center; }

  1. abstract>h1{

font-size: 100px; 

       color: rgb(247,237,183);

margin: 0px; padding: 0px; font-weight: bold; 

       line-height:normal;
       margin-top:10px;

}

  1. abstract>p{

position: relative; width: 80%; left: 10%; font-size: 22px; margin: 0px 0px 5.9% 0px; }

@media screen and (min-width:767px) { .w_indexPhoto{ position:absolute; top: 55px; width: 100%; } }

@media screen and (max-width:1150px){ .w_indexPhoto{ top:45px; } }

@media screen and (max-width:1050px){ .w_indexPhoto{ top:30px; } }

@media screen and (max-width:767px){ #abstract>h1{ font-size: 80px; } #abstract>p{ font-size: 14px; margin-bottom: 0%; } .w_indexPhoto{ padding-top: 40px; width: 100%; position:static; } }

@media screen and (max-width:600px){ .w_indexPhoto{ padding-top: 30px; width: 100%; } }

@media screen and (max-width:480px){ #abstract>h1{ font-size: 60px; } #abstract>p{ font-size: 12px; } .w_indexPhoto{ padding-top: 15px; top:3px; } }

@media screen and (min-width:1367px){ #abstract{ padding-top: 160px; } #abstract>h1{ font-size: 120px; } #abstract>p{ text-align:justify; width:60%; font-size: 30px; left:20%; } .w_indexPhoto{ top:3px; } }

  1. w_Panel a{
 position: relative;
 left: 0px;
 top:0px;

}

  1. w_Panel a::after {

border-radius: 1px; position: absolute; top: 100%; left: 0; overflow: hidden; width: 0%; 

 height:2px;

color: #fff; content: ""; 

 border-bottom: 2px solid #fff;

-webkit-transition: width 0.5s; -moz-transition: width 0.5s; transition: width 0.5s; }

  1. w_Panel a:hover::after,
  2. w_Panel a:focus::after {
 width: 100%;

}

  1. w_nav>ul>li{

margin:0px; padding: 0px; position: relative; left: 0px; display:inline-block; }

  1. w_nav>ul>li>div{

z-index:499; }

  1. w_nav>ul>li>div>ul{

list-style: none; line-height:2em; padding-bottom:5px; }

  1. w_nav>ul>li>div>ul>li:hover{

background-color:rgba(224,64,28,1); }