#title {
  
  position: relative;
  background-color: aliceblue;
}
#title div.titlenav {
  
  background-color: transparent;
  position: absolute;
  right: 0;
  z-index: 1;
}
#title div.titlenav div.wrap {
  
  width: 100%;
}
#title div.titlenav div.wrap nav {
  
}
#title div.titlenav div.wrap nav div.list {
  
  display: flex;
  padding: 30px;
  justify-content: end;
}
#title div.titlenav div.wrap nav div.list ul {
  
  display: flex;
  gap: 7px;
}
#title div.titlenav div.wrap nav div.list ul li {
  
}
#title div.titlenav div.wrap nav div.list ul li a {
  
  width: 40px;
  height: 40px;
  display: block;
  font-size: 0;
  background-color: transparent;
  background-size: 20px 20px;
  background-position: center;
  background-repeat: no-repeat;
}
#title div.titlenav div.wrap nav div.list ul li:nth-of-type(1) a{
  background-image: url(../img/tt.icon1.png)
}
#title div.titlenav div.wrap nav div.list ul li:nth-of-type(2) a{
  background-image: url(../img/tt.icon2.png)  
}
#title div.titlenav div.wrap nav div.list ul li:nth-of-type(3) a{
  background-image: url(../img/tt.icon3.png);  
  position: relative;
}
#title div.titlenav div.wrap nav div.list ul li:nth-of-type(3) a span{
  content: '';
  width: 20px;
  height: 20px;
  display: block;
  background-color: red;
  position: absolute;
  right: 0;
  color: white;
  font-size: 14px;
  text-align: center;
  border-radius: 50%;
}
#title div.titlenav div.wrap nav div.list ul li:nth-of-type(4) a{
  background-image: url(../img/tt.icon4.png)  
}
#title div.titlenav div.wrap nav div.list ul li:nth-of-type(5) a{
  background-image: url(../img/tt.icon5.png)  
}
#title div.title {
  
}
#title div.title div.wrap {
  
  width: 100%;
  height: 800px;
  overflow: hidden;
  display: flex;
}
#title div.title div.wrap .img{
  
  width: 1920px;
  height: 800px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
#title div.title div.wrap .img div.text{

  width: 951px;
  position: absolute;
  height: 100%;
  right: -135px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#title div.title div.wrap .img div.text h2{
  
  font-size: 60px;
}
#title div.title div.wrap .img div.text  ul{
  
  margin-top: 30px;
  margin-bottom: 50px;
}
#title div.title div.wrap .img div.text  ul li{
  
  font-size: 20px;
  margin-top: 10px;
}
#title div.title div.wrap .img div.text a{
  
  width: 90px;
  height: 50px;
  background-image: url(../img/tt.icon6.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  font-size: 0;
}
#title div.title div.wrap .img div.text a:hover{
  background-image: url(../img/tt.icon6.hover.png);
}
#title div.title div.wrap .img:nth-of-type(1){
  
  background-image: url(../img/title1.htm);
}
#title div.title div.wrap .img:nth-of-type(2){
    background-image: url(../img/title2.htm);
}
#title div.title div.wrap .img:nth-of-type(3){
    background-image: url(../img/title3.htm);
}
#title div.title div.wrap .img:nth-of-type(4){
    background-image: url(../img/title4.htm);
}