Line 14: | Line 14: | ||
.blank_framework{ | .blank_framework{ | ||
− | height: | + | height: 90px; |
} | } | ||
Line 20: | Line 20: | ||
.index-nav{ | .index-nav{ | ||
width: 100%; | width: 100%; | ||
− | border-bottom: | + | border-bottom: 3px solid #eeeeee; |
− | height: | + | height: 83px; |
box-sizing: border-box; | box-sizing: border-box; | ||
background:white; | background:white; | ||
Line 33: | Line 33: | ||
.index-nav-frame{ | .index-nav-frame{ | ||
− | + | margin: 0px 50px; | |
− | margin: 0px | + | |
} | } | ||
Line 40: | Line 39: | ||
color: #333333; | color: #333333; | ||
background: #ffffff00; | background: #ffffff00; | ||
− | float: | + | float: right; |
position: relative; | position: relative; | ||
display: block; | display: block; | ||
Line 50: | Line 49: | ||
font-weight: 700; | font-weight: 700; | ||
font-size: 16px; | font-size: 16px; | ||
+ | } | ||
+ | |||
+ | .index-nav-frame-logo{ | ||
+ | background: #ffffff00; | ||
+ | float: left; | ||
+ | position: relative; | ||
+ | display: block; | ||
+ | outline: none; | ||
+ | width: 400px; | ||
+ | height: 80px; | ||
+ | } | ||
+ | .index-nav-frame-logo img{ | ||
+ | width: 400px; | ||
} | } | ||
Line 139: | Line 151: | ||
@media only screen and (max-width:800px) { | @media only screen and (max-width:800px) { | ||
+ | .index-nav{ | ||
+ | height: inherit; | ||
+ | } | ||
+ | |||
.index-nav-frame-line-li a{ | .index-nav-frame-line-li a{ | ||
display: block; | display: block; | ||
Line 164: | Line 180: | ||
.index-nav-frame{ | .index-nav-frame{ | ||
width: 100%; | width: 100%; | ||
+ | margin: 0px; | ||
+ | } | ||
+ | |||
+ | .index-nav-frame-logo{ | ||
+ | display: none; | ||
} | } | ||
Revision as of 02:27, 25 July 2019
.big_framework { background-color: white; display: block; width: 100%; }
.big_framework .medium_framework { margin: auto; max-width: 1400px; padding: 20px 0px; width: 90%; text-align: center; }
.blank_framework{ height: 90px; }
/*header*/ .index-nav{ width: 100%; border-bottom: 3px solid #eeeeee; height: 83px; box-sizing: border-box; background:white; position: fixed; margin-top: 7px; }
.index-nav a{ color: #333; }
.index-nav-frame{ margin: 0px 50px; }
.index-nav-frame-line{ color: #333333; background: #ffffff00; float: right; position: relative; display: block; outline: none; cursor: pointer; width: 150px; line-height: 80px; text-align: center; font-weight: 700; font-size: 16px; }
.index-nav-frame-logo{ background: #ffffff00; float: left; position: relative; display: block; outline: none; width: 400px; height: 80px; }
.index-nav-frame-logo img{ width: 400px; }
.index-nav-frame-line.active{ color:#b63b4d; }
.index-nav-frame-line.active > a{ color:#b63b4d; }
.index-nav-frame-line-center{ opacity: 0; height: 0; position: absolute; overflow: hidden; width: 100%; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; /* Firefox 4 */ -o-transition: all 0.5s; /* Opera */ }
.index-nav-frame-line-li{ width: 100%; font-weight: 500; text-align: center; background: white; color: #666666; }
.index-nav-frame-line-li:hover{ background: #444359; color: white; }
.index-nav-frame-line-li:hover a{ background: #444359; color: white; }
.index-nav-frame-line-focus:focus{ display: none; }
.index-nav-frame-line:hover .index-nav-frame-line-center{ height:auto; opacity: 1; }
.nav-line{ height: 50px; width: 100%; position: relative; display: none; outline: none; }
.nav-small{ width: 30px; height: 30px; position: absolute; right: 10px; top:10px; cursor: pointer; display: none; outline: none; }
.nav-small img{ width: 100%; height: 100%; object-fit: cover; }
.nav-small-focus{ position: absolute; width: 100%; height: 100%; display: none; }
.nav-small-focus:focus{ display: none; }
@media only screen and (max-width:800px) { .index-nav{ height: inherit; }
.index-nav-frame-line-li a{ display: block; color: white; }
.nav-line{ display: block; border-bottom: 1px solid #eeeeee; }
.nav-small{ display: block; }
.nav-small:focus~.index-nav-frame-line{ height: auto; border-bottom: 1px solid #ccc; }
.nav-small:focus .nav-small-focus{ display: block; }
.index-nav-frame{ width: 100%; margin: 0px; }
.index-nav-frame-logo{ display: none; }
.index-nav-frame-line{ width: 100%; height: 0; overflow: hidden; }
.index-nav-frame-line-center{ position: relative; background: #444359; }
.index-nav-frame-line:hover .index-nav-frame-line-center{ height:0; opacity: 0; }
.index-nav-frame-line-li{ border-bottom: 1px solid #4b4a5e; color: #d9d9d9; background: #444359; }
.index-nav-frame-line-li:hover{ background: #b63b4d; }
.index-nav-frame-line:focus{ height: auto; border-bottom: 1px solid #ccc; }
.index-nav-frame-line:focus>.index-nav-frame-line-center{ height:auto; opacity: 1; }
.index-nav-frame-line:focus .index-nav-frame-line-header{ color: #B63B4D; }
.index-nav-frame-line-focus{ display: none; width: 100%; height: 50px; position: absolute; left: 0; top: 0; }
.index-nav-frame-line:focus .index-nav-frame-line-focus{ display: block; } }