@charset "utf-8";

.header{
display: flex;
align-items:center;
Height:70px;
}
.header .title{
Margin-left:10px;
}
.header .title a img{
Height:45px;
}
.header .title a:hover img{
opacity: 0.5;
}

.menu-btn {
  width: 50px;
  height: 50px;
Margin:10px 10px 10px auto;
Display:block;
}
 
.menu-conts {
Display:none;
  width: 100%;
  z-index: 1;
position: absolute;
  top: 70px;
  width: 100%;
Text-align:left;
Border-top:1px solid #e8e8e8;
}
 
.menu-conts a {
  background: #f2f2f2;
  display: block;
  color: #787878;
  text-decoration: none;
  padding: 16px 20px;
Font-size:14px;
Border-bottom:1px solid #e8e8e8;
  width: 100%;
font-weight:bold;
}
 
.menu-conts a:hover {
  background: #cc0000;
Color:white;
}


@media screen and (min-width: 728px) {
                                .header{
                                justify-content: space-between;
                                }
                                .header{
                                Height:80px;
                                }
                                .header .title{
                                Margin-left:10px;
                                }
                                .header .title a img{
                                Height:55px;
                                }
                                .menu-btn{
                                Display:none;
                                }
                                .menu-conts{
                                Display:block;
                                Border:none;
                                width: auto;
                                Position:relative;
                                top: 0px;
                                Right:0;
                                }
                                .menu-conts  ul{
                                display: flex;
                                flex-wrap: wrap;
                                Margin-left:10px;
                                Margin-right:10px;
                                }
                                .menu-conts li{
                                padding: 5px 0px 5px 20px;
                                }
                                .menu-conts a{
                                background: none;
                                color: #6d6d6d;
                                padding: 0px;
                                Font-size:14px;
                                Border-bottom:none;
                                padding: 0px;
                                Font-weight:bold;
                                Line-height:1em;
                                }
                                .menu-conts a:hover{
                                color: #999;
                                }
                                .menu-conts a:hover,
                                .menu-conts strong a{
                                Background:none;
                                Color:#ff2a00;
                                }
}


@media screen and (min-width: 1200px) {
                                Header, main{
                                Width:1200px;
                                Margin:0 auto;
                                }
                                .header{
                                Height:90px;
                                }
                                .header .title a img{
                                Height:65px;
                                }
                                .header .title{
                                Margin-left:0px;
                                }
                                .menu-conts  ul{
                                Margin-right:0px;
                                }
}