#footer{ width: 100%; background: #2e2f33; font-size: 1.4rem; font-family: SourceHanSansCN, SourceHanSansCN-Regular; font-weight: 400; text-align: left; color: #96989b; line-height: 1.4; } #footer>.container{ box-sizing: border-box; padding: 0 8.75rem; margin: auto; /* width: 1200px; */ width: 100%; } #footer .top{ position: relative; padding-top: 5rem; } #footer .brand{ margin: 0 auto 4rem; width: 11rem; height: 7rem; } #footer .brand>img{ display: block; width: 100%; height: 100%; } #footer .bottom-nav{ margin-right: 1rem; margin-bottom: 5rem; } #footer .bottom-nav>.title{ margin-bottom: 2rem; font-size: 1.8rem; color: #c3c6ca; } #footer .bottom-nav>ul>li+li{ margin-top: 1rem; } #footer .underline{ text-decoration: underline; } #footer .icon-box>li{ width: 3rem; height: 3rem; background-repeat: no-repeat; background-position: center; background-size: cover; } #footer .icon-box>li:nth-child(1){ background-image: url(/ayaneo/img/footer/weixin.png); } #footer .icon-box>li:nth-child(1):hover{ position: relative; background-image: url(/ayaneo/img/footer/weixin2.png); } #footer .icon-box>li:nth-child(2){ background-image: url(/ayaneo/img/footer/weibo.png); } #footer .icon-box>li:nth-child(2):hover{ background-image: url(/ayaneo/img/footer/weibo2.png); } #footer .icon-box>li:nth-child(3){ background-image: url(/ayaneo/img/footer/bilibili.png); } #footer .icon-box>li:nth-child(3):hover{ background-image: url(/ayaneo/img/footer/bilibili2.png); } #footer .icon-box .icon>a{ display: block; width: 100%; height: 100%; } #footer .icon>.more{ display: none; position: absolute; top: -13rem; left: -1rem; padding: 1rem; border-radius: 0.5rem; background: #fff; text-align: center; flex-wrap: nowrap; } #footer .icon>.more::before{ content: ""; position: absolute; left: 1rem; bottom: -1.8rem; border: 1rem solid; border-color: #fff transparent transparent transparent; } #footer .icon>.more img{ display: block; width: 10rem; height: 10rem; max-width: unset; } #footer .icon:hover>.more{ display: block; } #footer .bottom{ padding: 3rem 0; border-top: 1px solid #404147; } #footer .bottom p+p{ margin-top: 1rem; } #footer img{ object-fit: contain; } #footer .bottom-nav li:hover{ color: #c3c6ca; } #footer .icon .more{ font-size: 1.2rem; white-space: nowrap; } #footer .bottom-nav .title .operate, #footer .top .icon .text { display: none; } /* 订阅 */ .subscription{ position: relative; } .subscription .subscribe{ margin-bottom: 10px; font-size: 20px; } .subscription .icon-notice{ /* margin-right: .5rem; */ /* position: absolute; left: -1.6rem; */ display: block; /* width: 1.2rem; height: 1.7rem; */ margin-right: 10px; width: 17px; height: 22px; background:url(/load/view.php?a=aHR0cHM6Ly93d3cuYXlhbmVvLmNvbS9heWFuZW8vaW1nL2hvbWUvaWNvbi1ub3RpY2UucG5n) no-repeat center/cover; } .subscription .popup{ /* display: none; position: absolute; bottom: 0; left: 0; margin: 0 auto; transform: translateX(-30%); overflow: hidden; */ } .subscription .popup .main{ /* margin-bottom: 30px; */ position: relative; box-sizing: border-box; padding: 15px; width: 280px; background-color: #505155; border-radius: 1rem; color: #B9BCBF; } /* .subscription .popup .main:after{ content: ""; display: block; position: absolute; bottom: -24px; left: 0; right: 0; width: 0; margin: auto; border-width: 12px 10px; border-style: solid; border-color: #505155 transparent transparent; } */ .subscription .popup .email-box{ margin: 15px 0 10px; height: 28px; border-radius: 8px; overflow: hidden; background: #6C6E75; border: 2px solid #717171; } .subscription .popup .email-box input{ padding: 5px 10px; background: #3D3E42; color: #B9BCBF; } .subscription .popup .icon-email{ display: block; width: 42px; height: 100%; background:url(/load/view.php?a=aHR0cHM6Ly93d3cuYXlhbmVvLmNvbS9heWFuZW8vaW1nL2hvbWUvaWNvbi1lbWFpbC5wbmc) no-repeat center/16px; } .subscription .popup .sub-btn{ padding: 8px 0; width: 130px; text-align: center; background: #DD9A4F; border-radius: 10px; color: #fff; } /* .subscription:hover .popup{ display: block; } */ /* @media screen and (max-width: 980px) { .subscription .popup{ transform: translateX(-60%); } .subscription .popup .main:after{ margin-left: auto; margin-right: 9rem; } } */ @media screen and (max-width: 750px) { #footer .bottom-nav.subscription-nav>ul{ display: block; padding: 0; } .subscription .popup .main{ width: 100%; } #footer .bottom-nav{ margin-bottom: 0; } /* .subscription .popup{ transform: none; } .subscription .popup .main{ margin-bottom: 3rem; } .subscription .popup .main:after{ margin-left: 2rem; } */ }