@media only screen and (max-width: 1280px) { /*1280px*/ body { font-size: 12px; } } @media only screen and (max-width: 1024px) { /*1024px*/ #topinfo { position: relative; } #topinfo .inner { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; padding-top: 1em; padding-bottom: 1em; } /*1024px*/ #logo { display: block; } /*1024px*/ #button { display: block; width: auto; } /*1024px*/ #search .input { margin-top: 1.73em; } /*1024*/ #navbtn { position: relative; cursor: pointer; width: 1.33333333em; height: 1.16666667em; transition: all 0.3s; display: block; z-index: 10; margin-left: 2em; } #navbtn:before, #navbtn:after, #navbtn i { width: 100%; height: 2px; background-color: #333; display: block; position: absolute; left: 50%; margin-left: -0.57142857em; border-radius: 1px; transition: all 0.3s; content: ''; } #navbtn:before { top: 0; } #navbtn:after { bottom: 0; } #navbtn i { top: 50%; transform: translateY(-50%); } #navbtn.active:before { transform: rotate(45deg); top: 50%; } #navbtn.active:after { transform: rotate(-45deg); bottom: auto; top: 50%; } #navbtn.active i { opacity: 0; } /*1024px*/ #navi { position: fixed; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.9); z-index: 9; left: 0; top: 0; display: none; } #navi .menu { position: fixed; right: 0; top: 7.86108333em; width: 80%; max-width: 25em; background-color: #fff; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; height: calc(100% - 7.861083334em); display: block; padding: 2.5em; transform: translateX(100%); transition: transform 0.2s; box-shadow: 0px 0.05em 1.05em rgba(0, 0, 0, 0.1); border-top-left-radius: 5px; } #navi.active .menu { transform: translateX(0); } #navi .parent { padding: 0.25em 0; } #navi .parent > a { padding: 0.5em 0; } #navi .parent > a:after { display: none; } #navi em { display: block; position: absolute; right: -1.25em; width: 3.5em; height: 3.5em; z-index: 2; top: 0; cursor: pointer; } #navi em:after { width: 0.41666667em; height: 0.41666667em; border-right: 0.16666667em solid #333; border-bottom: 0.16666667em solid #333; content: ''; display: block; position: absolute; top: 50%; left: 50%; transform: rotate(-45deg); background-color: transparent; margin: -0.375em 0 0 -0.41666667em; transition: all 0.3s; } #navi .on > em:after { border-right-color: #094194; border-bottom-color: #094194; transform: rotate(45deg); } #navi .sub { position: static; background-color: transparent; min-width: 0; transform: none; } #navi .sub li { text-align: left; } #navi .sub a { padding: 0.5em 0 0.5em 2em; } /*1024px*/ .gnews { width: 100%; margin-bottom: 1.111em; } .gnews .istop { width: 35.83333333em; } .gnews .list { width: calc(100% - 37em); } /*1024px*/ .anews { width: 100%; } /*1024px*/ .tabnews { margin-bottom: 1.111em; } .tabnews:nth-child(n+1) { width: 100%; } .tabnews:last-child { margin-bottom: 0; } /*1024px*/ .entrance { width: 100%; } .entrance ul { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .entrance li { width: 32%; margin-bottom: 0; } /*1024px*/ .ovideo { width: 100%; margin-bottom: 1.111em; } /*1024px*/ .qhonor { width: 100%; } /*1024px*/ } @media only screen and (max-width: 768px) { /*768px*/ #footer .inner { display: block; } /*768px*/ #follow { margin: 0 auto 2em; } /*768px*/ #information { padding-bottom: 1.35em; margin-bottom: 1.35em; } #information ul { justify-content: center; } /*768px*/ #bottom { width: auto; } /*768px*/ #copyright { text-align: center; line-height: 1.75em; } /*768px*/ .gnews .istop { width: 100%; margin-bottom: 1.11em; } .gnews .list { width: 100%; } } @media only screen and (max-width: 750px) { /*750px*/ body { font-size: 3.2vw; } #button { position: static; } #search .input { right: 0; margin-top: 1px; transform: none; width: 100%; } /*750px*/ #logo { width: 18.5em; } /*750px*/ #navi .menu { top: 7.160416em; height: calc(100% - 7.160416em); } /*750px*/ #slides .pc { display: none; } #slides .wap { padding-bottom: 50%; display: block; } /*750px*/ .tabnews:nth-child(n+1) { width: 100%; } /*750px*/ .entrance li .title { font-size: 1em;padding: 0; } /*750px*/ .qhonor { width: 100%; } /*750px*/ }