@charset "utf-8"; /*--#Container--*/ #Container{ height: 100%; max-width: 1200px; /*容器最大宽度*/ margin: 0 auto; /*容器居中*/ } /*--#main--*/ #main{ margin: 0 0 0 180px; padding: 0 0 2em; /*background: #F8F8F8; background: rgba(248,248,248,.8) url('images/bg_pattern.png'); border-left: 1px solid #F8F8F8; border-right: 1px solid #F8F8F8;*/ position: relative; height: auto !important; height: 100%; min-height: 100%; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; transition: all .2s; } #main > article{ padding: 16px 32px; position: relative; } #main nav{ margin: 0 32px; } #main .logo{ display: none; } /* #dmdb_top #main{ background: none; border: none; } #dmdb_top #main .logo{ display: none; } #dmdb_top #main > article{ background: #F8F8F8; background: rgba(248,248,248,.8); border-radius:4px; margin-top: 16px; } */ /*--关键词导航--*/ #main .keynav{ margin: 0 2em; } .keynav ul{ margin: 0; padding: 1em 0; width: 100%; } .keynav li{ margin: 0 0 4px; padding: 2px; display: inline-block; *display: inline; *zoom: 1; width: 48%; font-size: 14px; background: #FFF; border: 1px solid #C0C0C0; border-radius: 1px; } .keynav a{ display: block; padding: .5em; border-left: 4px solid #C0C0C0; -webkit-transition: all .1s; -moz-transition: all .1s; -ms-transition: all .1s; -o-transition: all .1s; transition: all .1s; } .keynav a:link{ } .keynav a:visited{ color: #D90000; } .keynav a:hover{ color: #D90000; border-left: 8px solid #D90000; text-decoration: none; font-weight:bold; } .footnote{ font-size: 3em; color: #E9E9E9; text-shadow: -1px -1px 0 #D8D8D8, 1px 1px 0 #F8F8F8; } .kana{ font-family:'Hiragino Kaku Gothic ProN',Meiryo,sans-serif; } .digimoji{ font-family:'digimon'; text-align:center; font-size:22px; } @media screen and (max-width : 864px){ .keynav li{ display: block; width: 100%; } .digimoji{ font-size:14px; } } @media screen and (max-width : 768px){ .digimoji{ font-size:12px; } } /*#glossary p + h2{ margin-top: 2em; }*/ /*--BOX导航--*/ .boxlink{ margin: 32px 0 16px; padding: 0; /*text-align: center;*/ } .boxlink + .boxlink { margin: -16px 0 16px; } .boxlink li{ display: inline-block; *display: inline; *zoom: 1; margin: 0 .2em .4em 0; padding: 0; } .boxlink a{ display: block; min-width: 3em; padding: 0 .6em; background: #F8F8F8; background: rgba(248,248,248,.5); color: #C0C0C0; border: 1px solid #C0C0C0; /*border-radius: 2px; -moz-border-radius : 2px; -webkit-border-radius : 2px;*/ box-shadow: rgba(255,255,255,.8) 0 0 4px inset; -moz-box-shadow: rgba(255,255,255,.8) 0 0 4px inset; -webkit-box-shadow: rgba(255,255,255,.8) 0 0 4px inset; font-size: 1.2em; font-weight: bold; line-height: 2em; text-align: center; -webkit-transition: all .2s; transition: all .2s; } .boxlink span{ display: block; min-width: 3em; background: #BABABA; background: rgba(0,0,0,.5); color: #C0C0C0; /*border-radius: 2px; -moz-border-radius : 2px; -webkit-border-radius : 2px;*/ font-size: 1.2em; font-weight: bold; line-height: 2em; text-align: center; opacity: .2; } .boxlink a:hover, .boxlink .active a{ background: #393939; color: #F8F8F8; border: 1px solid #393939; text-decoration: none; box-shadow: rgba(255,255,255,0) 0 0 0 inset; -moz-box-shadow: rgba(255,255,255,0) 0 0 0 inset; -webkit-box-shadow: rgba(255,255,255,0) 0 0 0 inset; } /*--底部--*/ .end{ line-height:1.6; clear: left; padding: 8px 8px 16px; text-align: center; font-size: .8em } /* .bnr{ display: inline-block; *display: inline; *zoom: 1; padding: 0 4px; font-size: .8em; } .bnr a{ } */ /*底部超链接样式 .otonalink{ font-weight: bold; } .otonalink a{ display: inline-block; *display: inline; *zoom: 1; margin: 0 0 0 8px; padding: 0 4px; font-size: .9em; font-weight: bold; border-radius: 4px; } .otonalink a:link, .otonalink a:visited{ color: #FF5820; } .otonalink a:hover, .otonalink a:active{ background: #D90000; color: #F8F8F8; text-decoration: none; } */ /*--普通表格--*/ .group{ margin: 1em 0; border: 1px solid #C0C0C0; /*border-radius: 8px;*/ overflow: hidden; } .group table{ width: 100%; border-collapse: collapse; overflow: hidden; } .group table th, .group table td{ padding: .4em .8em; margin-top: -1px; } .group table th{ background: #F0F0F0; border-bottom: 1px dotted #C0C0C0; } .group table td{ background: #FFF; } .group table tr{ border-top: 1px solid #C0C0C0; } .group table tr:first-child{ border: none; } /*--右部表格--*/ .right{ margin: 2em 1em; border: 1px solid #C0C0C0; overflow: hidden; float: right; width: 300px; } .right table{ width: 100%; border-collapse: collapse; overflow: hidden; } .right img{ width: 100%; } .right table th, .right table td{ padding: .4em .8em; margin-top: -1px; } .right table th{ background: #F0F0F0; border-bottom: 1px dotted #C0C0C0; } .right table td{ background: #FFF; } .right table tr{ border-top: 1px solid #C0C0C0; } .right table tr:first-child{ border: none; } /*--h1--*/ h1.page{ margin: 0; padding: 72px 132px 0 0; background: transparent url('images/line_page.png') no-repeat bottom right; color: #333; font-size: .8em; font-weight: normal; text-align: right; line-height: 1.2; } h1.page em{ display: block; color: #D90000; font-size: 2.4em; font-weight: bold; } /*--h2--*/ h2.title{ min-height: 44px; margin: 1em 0; position: relative; padding: 0 0 .3em; /*background: transparent url('images/line_h2.png') no-repeat bottom right; text-shadow: 1px 0px 2px rgba(56, 56, 56, 0.6);*/ font-size: 1.4em; z-index: -1; } h2.title span{ color: #D90000; font-size: .8em; text-shadow: none; } h2.title::before, h2.title::after { content: ""; position: absolute; right: 0; left: 0; height: 2px; } h2.title::before { bottom: 3px; background: #000; } h2.title::after { bottom: 0; background: #D90000; } /*--h3--*/ h3.title{ margin: 1em 0; padding: .1em 0 0.2em .4em; font-size: 1.2em; line-height: 1; border-left: 0.3em solid #D90000; } h3.note{ font-size: 3em; color: #E9E9E9; text-shadow: -1px -1px 0 #D8D8D8, 1px 1px 0 #F8F8F8; } h3.line{ margin: 1em 0; background: #C0C0C0; background: rgba(0,0,0,.1); color: #F8F8F8; height: 2em; line-height: 2em; /*border-radius: 2px;*/ } h3.line span{ padding: 0 16px; display: inline-block; background: #393939; color: #F8F8F8; /*border-radius: 2px;*/ } /*--h4--*/ h4.title{ margin: 1em; color: #D90000; } h4.title span{ font-weight: normal; } h4.line{ margin: 1em; background: #C0C0C0; background: rgba(0,0,0,.1); color: #F8F8F8; height: 2em; line-height: 2em; /*border-radius: 2px;*/ } h4.line span{ padding: 0 16px; display: inline-block; background: #393939; color: #F8F8F8; /*border-radius: 2px;*/ } /*--h5--*/ h5.title{ margin: 1em 2em; } h5.title span{ font-weight: normal; } h5.q{ margin: 1em 2em; color: #D90000; font-weight: normal; } /*--最后编辑时间--*/ .editor{ line-height:1.6; margin: 4em 0; text-align: center; font-size: .9em; } /*--居中--*/ .just{ text-align: center; } /*--照片--*/ .photo{ margin: 16px; padding: 8px; background: #FFF; box-shadow: rgba(0, 0, 0, .3) 1px 2px 6px; -moz-box-shadow: rgba(0, 0, 0, .3) 1px 2px 6px; -webkit-box-shadow: rgba(0, 0, 0, .3) 1px 2px 6px; } /*--uedbet官网注册登录提示--*/ .new{ display: inline-block; *display: inline; *zoom: 1; position: relative; margin: auto 8px; padding: 0px 4px; height: 18px !important; line-height: 18px; background: #D90000; color: #FFFFFF; font-size: 12px !important; font-style: normal; font-weight: bold; font-family: 'Open Sans','Lucida Grande',sans-serif !important; border-radius: 2px; } .new:after{ content: ''; position: absolute; top: 5px; left: -6px; display: block; width: 0; height: 0; border-right: 6px solid #D90000; border-top: 4px solid transparent; border-bottom: 4px solid transparent; } /*--返回顶端--*/ .gototop{ display: block; position: fixed; z-index: 393; right: 0; bottom: 0; width: 224px; height: 128px; background: transparent url('images/pagetop.png') left top; text-indent: 120%; white-space: nowrap; overflow: hidden; } .gototop:hover{ background-position: right top; } /*--普通列表ul--*/ .caution{ margin: 1em 0 1em; padding: 0 0 0 3em; line-height: 1.5; } .caution li{ margin: 0 0 .4em; padding: 0; position: relative; } .caution li:before{ content: ' '; display: block; position: absolute; top: .5em; left: -1em; width: 6px; height: 6px; border: 1px solid #D90000; border-radius: 50%; } /*图片列表五列ul*/ .tp5 { display: flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; margin: 0 0 0 -15px; } .tp5>li { width: calc( 100% / 2 - 30px); margin: 0 15px 15px 0px; } @media screen and (min-width: 600px){ .tp5>li { width: calc(100% / 3 - 30px); margin: 0 30px 15px 0; } } @media screen and (min-width: 900px){ .tp5>li { width: calc(25% - 45px); margin: 0 45px 15px 0; } } @media screen and (min-width: 1300px){ .tp5>li { width: calc(20% - 45px); } } .tp5 .ph{ margin: 0 0 10px; } .tp5 .border img { border: 1px solid #d2d2d2; } .tp5 p{ margin: 0; font-size: .9em; } .tp5 .title{ text-align: center; } .tp5 .border img { border: 1px solid #d2d2d2; } /*.tp5 p:first-child{ font-weight: bold; }*/ .tp5 a{ -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .tp5 a:hover{ opacity:0.6; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; } /*--图片列表四列ul--*/ .tp4 { display: flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; margin: 0 0 0 -15px; } .tp4>li { width: calc( 100% / 2 - 30px); margin: 0 15px 15px 0px; } @media screen and (min-width: 600px){ .tp4>li { width: calc(100% / 3 - 30px); margin: 0 30px 15px 0; } } @media screen and (min-width: 900px){ .tp4>li { width: calc(25% - 45px); margin: 0 45px 15px 0; } } .tp4 .ph{ margin: 0 0 10px; } .tp4 .border img { border: 1px solid #d2d2d2; } .tp4 p{ margin: 0; font-size: .9em; } .tp4 .title{ text-align: center; } /*.tp4 p:first-child{ font-weight: bold; }*/ .tp4 a{ -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .tp4 a:hover{ opacity:0.6; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; } /*--图片列表三列ul--*/ .tp3 { display: flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; margin: 0 0 0 -15px; } .tp3>li { width: calc( 100% / 2 - 30px); margin: 0 15px 15px 0px; } @media screen and (min-width: 600px){ .tp3>li { width: calc(100% / 3 - 30px); margin: 0 30px 15px 0; } } .tp3 .ph{ margin: 0 0 10px; } /*.tp3 .ph img { border: 1px solid #d2d2d2; }*/ .tp3 p{ margin: 0; font-size: .9em; } .tp3 .title{ text-align: center; } .tp3 .border img { border: 1px solid #d2d2d2; } .tp3 a{ -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .tp3 a:hover{ opacity:0.6; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; } /*.tp3 p:first-child{ font-weight: bold; }*/ /*--图片列表两列ul--*/ .tp2 { display: flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; margin: 0 0 0 -15px; } .tp2>li { width: 100%; margin: 0 15px 15px 0px; } @media screen and (min-width: 768px){ .tp2>li { width: calc( 100% / 2 - 30px); margin: 0 15px 15px 0px; } } .tp2 .ph{ margin: 0 0 10px; } .tp2 .border img { border: 1px solid #d2d2d2; } .tp2 .title{ text-align: center; } /* p:first-child{ font-weight: bold; } */ .tp2 p{ margin: 0; font-size: .9em; } .tp2 a{ -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .tp2 a:hover{ opacity:0.6; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; } /*--项目卡两列ul--*/ .xm2 { display: flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; margin: 0 0 0 -15px; } .xm2>li { width: 100%; margin: 0 15px 15px 0px; border: 1px solid #d2d2d2; } @media screen and (min-width: 768px){ .xm2>li { width: calc( 100% / 2 - 30px); margin: 0 15px 15px 0px; } } .xm2 .title{ text-align: center; background: #F0F0F0; font-weight: bold; /*border-bottom:1px solid #C0C0C0;*/ padding: .2em; margin: .5em; } .xm2 .game_logo{ margin: 1em .5em; text-align: center; } /*.xm2 .game_logo img { height: 70px; } p:first-child{ font-weight: bold; } */ .xm2 p{ margin: .5em; } .xm2 a{ -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .xm2 a:hover{ opacity:0.6; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .xm_info{ margin: .5em; overflow: hidden; line-height: 1.6; border-top: 1px solid #C0C0C0; border-bottom: 1px solid #C0C0C0; font-size: 14px; /*border: 1px solid #C0C0C0;*/ } .xm_info table{ width: 100%; border-collapse: collapse; overflow: hidden; /*border-radius: 4px;*/ } .xm_info table th, .xm_info table td{ padding: .6em .8em; margin-top: -1px; } .xm_info table th{ background: #F9F9F9; border-right: 1px dotted #C0C0C0; text-align: left; /*color: #D90000;*/ } .xm_info table td{ background: #FFF; } .xm_info table tr{ border-top: 1px solid #C0C0C0; } .xm_info table tr:first-child{ border: none; } .xm_info2{ margin: 0 .5em; overflow: hidden; line-height: 1.6; border-top: 1px solid #C0C0C0; padding: .5em 0; /*border: 1px solid #C0C0C0;*/ } /*--话数ul--*/ .eplink{ margin: 32px 0 16px; padding: 0; text-align: center; } .eplink + .eplink { margin: -16px 0 16px; } .eplink li{ display: inline-block; *display: inline; *zoom: 1; margin: 0 .2em .4em 0; padding: 0; } .eplink a{ display: block; min-width: 3em; padding: 0 .6em; background: #F8F8F8; background: rgba(248,248,248,.5); color: #C0C0C0; border: 1px solid #C0C0C0; border-radius: 2px; -moz-border-radius : 2px; -webkit-border-radius : 2px; box-shadow: rgba(255,255,255,.8) 0 0 4px inset; -moz-box-shadow: rgba(255,255,255,.8) 0 0 4px inset; -webkit-box-shadow: rgba(255,255,255,.8) 0 0 4px inset; font-size: 1.2em; font-weight: bold; line-height: 2em; text-align: center; -webkit-transition: all .2s; transition: all .2s; } .eplink span{ display: block; min-width: 3em; background: #BABABA; background: rgba(0,0,0,.5); color: #C0C0C0; border-radius: 2px; -moz-border-radius : 2px; -webkit-border-radius : 2px; font-size: 1.2em; font-weight: bold; line-height: 2em; text-align: center; opacity: .2; } .eplink a:hover, .eplink .active a{ background: #393939; color: #F8F8F8; border: 1px solid #393939; text-decoration: none; box-shadow: rgba(255,255,255,0) 0 0 0 inset; -moz-box-shadow: rgba(255,255,255,0) 0 0 0 inset; -webkit-box-shadow: rgba(255,255,255,0) 0 0 0 inset; } /*--标签栏--*/ .tabnavs{ position: relative; margin: 1em 0; padding: 0; } .tabnav{ display: inline-block; *display: inline; *zoom: 1; margin: 0 .2em .4em 0; padding: 0; } .tabnavs a{ display: block; min-width: 3em; padding: 0 .6em; background: #F8F8F8; background: rgba(248,248,248,.5); color: #C0C0C0; border: 1px solid #C0C0C0; /*border-radius: 2px; -moz-border-radius : 2px; -webkit-border-radius : 2px;*/ box-shadow: rgba(255,255,255,.8) 0 0 4px inset; -moz-box-shadow: rgba(255,255,255,.8) 0 0 4px inset; -webkit-box-shadow: rgba(255,255,255,.8) 0 0 4px inset; font-size: 1em; font-weight: bold; line-height: 2em; text-align: center; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; transition: all .2s; } .tabnavs a:hover, .tabnavs .active a{ background: #393939; color: #F8F8F8; border: 1px solid #393939; text-decoration: none; box-shadow: rgba(255,255,255,0) 0 0 0 inset; -moz-box-shadow: rgba(255,255,255,0) 0 0 0 inset; -webkit-box-shadow: rgba(255,255,255,0) 0 0 0 inset; } .tabs .tabbox{ display: none; } .tabs .active{ display: block; } /*a按钮*/ .buttons{ position: relative; width: auto; padding: .4em 0; } .button{ display: inline-block; margin: .2em; padding: 0 .6em; min-width: 40%; font-size: 1.6em; font-weight: bold; line-height: 2em; border-color: #901800; border-style: solid; border-width: 1px 1px 4px; border-radius: 6px; } .button:link, .button:visited{ background: #D90000; color: #FFF; } .button:hover{ background: #FFF; color: #D90000; text-decoration: none; } .button:active{ border-width: 4px 1px 1px; text-decoration: none; box-shadow: 0 0 4px #D90000; -moz-box-shadow: 0 0 4px #D90000; -webkit-box-shadow: 0 0 4px #D90000; } /*小说*/ .novel p{ text-indent: 2em; margin: .5em 1em; font-size: 1.2em; font-family: 'Noto Serif SC', 'Noto Sans SC', serif; } .novel hr{ height: 1em; background: none; color: transparent; margin: 0; } .novel p.just{ text-indent: 0em; text-align: center; } .novel .button{ font-size: 1.2em; } /*音乐*/ ol.song_list li{ margin: 0; } .tracklist{ margin: 1em 1em 2em 2em; overflow: hidden; font-size: 14px; line-height: 1.6; /*border-top: 1px solid #C0C0C0;*/ border-bottom: 1px dashed #C0C0C0; /*border: 1px solid #C0C0C0;*/ } .tracklist table{ width: 100%; border-collapse: collapse; overflow: hidden; /*border-radius: 4px;*/ } .tracklist table th, .tracklist table td{ padding: .4em .8em; /*margin-top: -1px;*/ } .tracklist table th{ /*background: #F9F9F9; border-right: 1px dotted #C0C0C0;*/ text-align: left; color: #D90000; font-weight: normal; } .tracklist table td{ background: #FFF; } .tracklist table tr{ border-top: 1px dashed #C0C0C0; } .tracklist table tr:first-child{ border: none; } .tracklist tr:hover td,.tracklist tr:hover th{ color:#D90000; background-color:#EEE} /*--768px↓-------------------------------*/ @media screen and (max-width : 768px){ body,h1,h2,h3,h4,h5,h6,li{ font-size: 12px; } #main{ margin: 0; } h1.page{ padding-top: 64px; } #main.open{ -webkit-transform: translate3d(180px, 0, 0); transform: translate3d(180px, 0, 0); overflow: hidden; } #main .logo, #dmdb_top #main .logo{ display: block; text-align: center; overflow: hidden; height: 128px; line-height: 128px; background: #FFFFFF; color: #F8F8F8; border-bottom: 4px solid #D90000; } #main .logo a img{ height: 128px; } #main > article{ padding: 4px 8px; } #main nav{ margin: 0 8px; } #nav .logo{ display: none; } .group, .right, .xm_info{ font-size:12px; } .right{ float:none; width: auto; } .right img{ width:100%; } .end{ color: #F8F8F8; background: #252525; border-top: 4px solid #D90000; } } /*--1024px↑--*/ @media screen and (min-width : 1024px){ /*body{ background: #F8F8F8 url('bg@2x.png') left top fixed; }*/ .group{ font-size:14px; } .right{ font-size:12px; } } /*--1280px↑--*/ @media screen and (min-width : 1280px){ body,h1,h2,h3,h4,h5,h6{ font-size: 16px; } /*#main{ max-width: 960px; }*/ #main > article{ padding: 16px 48px; } #main nav{ margin: 0 48px; } .group, .right{ font-size:14px; } } /*--@2x--*/ @media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width : 768px), only screen and (-o-min-device-pixel-ratio: 3/2)and (max-width : 768px), only screen and (min--moz-device-pixel-ratio: 1.5) and (max-width : 768px), only screen and (min-device-pixel-ratio: 1.5) and (max-width : 768px) { /*body{ background: #F8F8F8 url('bg@2x.png') left top fixed; background-size: 886px 512px; }*/ #nav{ padding-top: 60px; } #KEY{ border-bottom-width: 2px; } #main .logo, #dmdb_top #main .logo{ height: 64px; line-height: 64px; border-bottom-width: 2px; } #main .logo a img{ max-height: 64px; } .end{ border-top-width: 2px; } hr{ height: 10px; background-size: 16px 10px; } h1.page{ background-size: 64px 44px; padding: 32px 66px 0 0; } .menuopen, .gototop{ width: 112px; height: 64px; background-size: 224px 64px; } /*--img--*/ .photo{ padding: 4px; box-shadow: rgba(0, 0, 0, .3) 1px 2px 3px; -moz-box-shadow: rgba(0, 0, 0, .3) 1px 2px 3px; -webkit-box-shadow: rgba(0, 0, 0, .3) 1px 2px 3px; } }