/*header*/ nav { width: 100%; height: 94px; position: fixed; z-index: 100; background:rgba(255,255,255, 0.9); z-index:2; } .logoarea { width: 90px; height: 76px; margin:10px; float:left; } .menu_btn { width: 140px; float: left; margin-left: 30px; margin-right:30px; margin-top:16px; font-weight:bold; font-size:15px; } .menu_btn a:hover { width: 140px; height: 50px; color: #ffcb04; } .menu_btn01 .menu_btn02 .menu_btn03 .menu_btn04 .menu_btn05 { text-decoration: none; background:#ffffff\9;/*ie8*/ } header { z-index: 100; } header.top { position: fixed; left: 0; z-index: 10; width: 100%; background: #fff; opacity: 0; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s } .impactline { border-top: 6px solid #ffcb04; } header.top nav ul {height:24px;} header.top nav ul:before, header.top nav ul:after { content: " "; display: table; } header.top nav ul:after { clear: both; } header.top nav ul li { -webkit-transition: margin-right 0.5s; -moz-transition: margin-right 0.5s; transition: margin-right 0.5s; } header.top nav ul li a { position: relative; display: block; text-decoration: none; line-height: 1; padding-top: 10px; -webkit-transition: padding-top 0.5s, width 0.5s; -moz-transition: padding-top 0.5s, width 0.5s; transition: padding-top 0.5s, width 0.5s; } header.top nav ul li a:before { content: ' '; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #607890; -webkit-transition: height 0.5s, width 0.3s, opacity 0.5s; -moz-transition: height 0.5s, width 0.3s, opacity 0.5s; transition: height 0.5s, width 0.3s, opacity 0.5s; } header.top nav ul li a:after { content: ' '; display: block; position: absolute; top: 0; left: 0; height: 1px; width: 0; background: #ffcb04; -webkit-transition: width 0.3s, opacity 0.5s; -moz-transition: width 0.3s, opacity 0.5s; transition: width 0.3s, opacity 0.5s; } header.top nav ul li a.active:after { width: 100%; } header.top nav ul li a:hover:after { width: 100% } header.top.active { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .sub_nav {font-size:11px; letter-spacing:11px; float: inherit; display: block; margin-bottom:20px; width: 100%;} .sub_nav ul {width:100%; display:flex; letter-spacing: 0.1em;} .sub_nav ul li { float: left; text-align: left; margin: 20 50 20 0px; background-color: #fbf9f5; padding: 4px 8px; border-radius: 8px; } .sub_nav ul li:hover {background-color: #f7cb32; } .sub_nav ul li a {text-decoration:none; color:#666;} .sub_nav ul li a:hover { color:#333; border-radius: 8px; } @media all and (max-width:1023px) { nav {background:rgba(130, 130, 130, .0);} } @media all and (max-width:639px) { .logoarea { width: 60px; height: 51px; margin:10px; position:relative; } .sub_nav {display:none;} header.top.active { background:rgba(255, 255, 255, 0.5);} } @media screen and (-webkit-min-device-pixel-ratio:0) { /* Safari and Chrome, if Chrome rule needed */ .sidebar { font-size:11px !important; } /* Safari 5+ ONLY */ ::i-block-chrome, .sidebar { font-size:11px !important; } }