/* To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. */ /* Created on : 2023-5-15, 14:03:18 Author : bh_mao */ @import url(//at.alicdn.com/t/c/font_4052567_vkx0haonwv.css); .flex { display: flex; } .flex-c { display: flex; align-items: center; } .flex-cc { display: flex; align-items: center; justify-content: center; } .flex-cb { display: flex; align-items: center; justify-content: space-between; } .flex-ce { display: flex; align-items: center; justify-content: flex-end; } .flex-1 { flex: 1; } .one-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .one-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .clearfix::after, .clearfix::before { clear: both; content: ""; display: block; height: 0; line-height: 0; overflow: hidden; } .header { box-sizing: border-box; padding: 7px 15px; display: flex; align-items: center; position: relative; position: fixed; left: 0px; top: 0; z-index: 101; background: #fff; width: 100%; height: 50px; } .header .logo { width: auto; height: 36px; margin-right: auto; } .header .logo img, .header .logo a { width: 100%; display: block; height: 100%; } .header .btn { font-size: 25px; display: block; } .header .menu img{ height: 18px; } .header .menu img.close{ -webkit-animation: rotate-an .2s linear; animation-delay: 0s; } @keyframes rotate-an{0%{-webkit-transform:rotate(0)}50%{-webkit-transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg)}} @-webkit-keyframes rotate-an{0%{-webkit-transform:rotate(0)}50%{-webkit-transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg)}} .header .search { position: absolute; width: 100%; left: 0; top: 100%; z-index: 99; box-sizing: border-box; padding: 2.5rem 3rem; align-items: center; border-top: 1px solid #ccc; display: none; } .header .search input { flex: 1; height: 6rem; margin-right: 2rem; border-radius: 1rem; box-sizing: border-box; padding: 1rem; width: calc(100% - 18rem); } .header .search button { width: 15rem; height: 6rem; color: #fff; background-color: #fe4614; border-radius: 1rem; } .header .menus { position: absolute; right: 3rem; top: 100%; width: 30%; background-color: #fff; z-index: 99; } .header .menus > .link { display: block; padding: 1rem; } .nav{ background: #5b5758; position: fixed; top: 0px; width: 100%; left: 100%; box-sizing: border-box; padding:50px 15px; z-index: 100; overflow-y: scroll; } .nav ul li>a{ line-height: 48px; border-bottom: 1px solid rgba(246,246,246,0.32); background: url(../images/arrow.png) no-repeat right 15px; background-size: auto 18px; } .nav ul li.homepage{ border-bottom: none; background: url(../images/back.png) no-repeat left center; background-size: auto 18px; padding-left: 25px; } .nav ul li a.hover{ background: url(../images/arrowup.png) no-repeat right 15px; background-size: auto 9px; font-weight: bold; } .nav ul li a{ color: #fff; display: block; font-size: 16px; } .sub-menu{ display: none; } .sub-menu a{ height: 36px; line-height: 36px; color: #fff !important; font-weight: normal !important; font-size: 15px !important; padding-left: 15px; } .home-swiper { position: relative; overflow: hidden; height: 42rem; } .home-swiper a, .home-swiper img { width: 100%; height: 100%; display: block; } .mod-head h4 { font-size: 5rem; font-weight: 500; color: #000000; text-align: center; text-transform: uppercase; } .mod-head h3 { font-size: 3rem; font-weight: 500; color: #000000; text-align: center; margin-top: 2rem; } .product-center { padding: 0 3rem; } .product-ul { display: grid; grid-template-columns: repeat(2, 50%); gap: 2rem; margin: 4rem 0; } .product-ul .product-li { border: 0.1rem solid #e9e9e9; } .product-ul .img { height: 30rem; display: flex; align-items: center; justify-content: center; padding: 0 6rem; } .product-ul .img img { max-width: 100%; max-height: 100%; } .product-ul .desc { padding: 4rem 3rem; } .product-ul .desc .name { font-size: 2.8rem; font-family: PingFang; font-weight: bold; color: #000000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; } .product-ul .desc .p { font-size: 2.2rem; font-family: PingFang; font-weight: 500; color: #777777; line-height: 3.6rem; margin-top: 3rem; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .mod-more { margin: 0 auto; width: 22rem; height: 7rem; border: 0.1rem solid #dbdbdb; border-radius: 3.5rem; display: flex; align-items: center; justify-content: center; } .mod-more span { font-size: 2.4rem; font-weight: 500; color: #888888; } .mod-more .iconfont { margin-left: 1rem; } .area-ol { display: grid; grid-template-columns: repeat(2, 50%); gap: 1rem; margin-top: 5.6rem; } .area-ol .li a { display: block; position: relative; } .area-ol .li a img { width: 100%; } .area-ol .li .name { position: absolute; display: block; bottom: 0; width: 100%; left: 0; height: 8rem; background: linear-gradient(0deg, rgba(3, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%); color: #fff; line-height: 8rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 2.6rem; font-weight: 500; color: #ffffff; } .home-about { padding: 0 3rem; padding-bottom: 11rem; background: url(../images/mobile/img3.png) no-repeat center bottom/100% auto; } .home-about::after, .home-about::before { clear: both; content: ""; display: block; height: 0; line-height: 0; overflow: hidden; } .home-about .desc-p { font-size: 2.8rem; font-weight: 500; color: #666666; line-height: 5rem; margin: 4rem 0; } .data-list { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 5rem; } .data-list .item { margin-bottom: 5rem; display: flex; flex-direction: column; align-items: center; border-right: 0.1rem solid #dcdcdc; } .data-list .item > span { font-size: 2rem; color: #000000; } .data-list .item:nth-child(3n) { border-right: 0; } .data-list .data { margin-bottom: 2rem; } .data-list .data .num { color: #006bcb; font-size: 5rem; font-weight: 800; } .data-list .data .uint { color: #000000; font-size: 1rem; } .advantage { padding: 0 3rem; padding-bottom: 8rem; background: url(../images/mobile/img4.png) no-repeat center center/100% 100%; } .advantage::after, .advantage::before { clear: both; content: ""; display: block; height: 0; line-height: 0; overflow: hidden; } .adbantage-swiper { height: 45rem; padding-bottom: 4rem; overflow: hidden; position: relative; margin-top: 4rem; } .adbantage-swiper .swiper-slide { background: rgba(255, 255, 255, 0.3); filter: blur(0.2); border-radius: 2rem; padding: 0 5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; } .adbantage-swiper .swiper-slide .iconfont { font-size: 10rem; } .adbantage-swiper .swiper-slide .num { font-size: 2.4rem; margin-top: 3rem; } .adbantage-swiper .swiper-slide .title { font-size: 3rem; margin-top: 3rem; } .adbantage-swiper .swiper-slide p { font-size: 2.2rem; font-family: Arial; font-weight: bold; color: #ffffff; line-height: 3rem; opacity: 0.5; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top: 3rem; text-align: center; text-transform: uppercase; } .adbantage-swiper .adbantage-pagination { display: flex; align-items: center; justify-content: center; width: 100%; left: 0; position: absolute; bottom: 0; } .adbantage-swiper .adbantage-pagination .swiper-pagination-bullet { width: 1rem; height: 1rem; background: #ffffff; opacity: 0.5; transition: 500ms; } .adbantage-swiper .adbantage-pagination .swiper-pagination-bullet-active { width: 3rem; opacity: 1; border-radius: 3rem; } .news-list { margin-bottom: 5rem; } .news-list .item { display: block; padding: 4rem 0; border-bottom: 0.1rem dashed #d3d3d3; } .news-list .item h5 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 3rem; font-weight: bold; color: #222222; } .news-list .item p { font-size: 2.2rem; font-weight: 500; color: #777777; line-height: 3.8rem; margin-top: 3rem; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .logos { overflow: hidden; margin-top: 4rem; margin-bottom: 6rem; } .logos .logo-item { height: 10rem; padding: 0 3rem; border: 0.1rem solid #e8e8e8; display: flex; align-items: center; justify-content: center; } .logos .logo-item img { width: 100%; } .home-footer { background-color: #f7f7f7; padding: 4rem 3rem; display: flex; margin-bottom: 10rem; } .home-footer .left-footer { width: 50rem; margin-right: auto; } .home-footer .left-footer .tpl { display: flex; align-items: center; margin-bottom: 3.4rem; } .home-footer .left-footer .tpl .iconfont { color: #006bcb; font-size: 4rem; font-weight: 600; } .home-footer .left-footer .tpl .value { font-weight: 700; font-size: 3.4rem; color: #006bcb; margin-left: 1.7rem; } .home-footer .left-footer .copy { font-size: 2.2rem; font-family: PingFang; font-weight: 500; color: #888888; line-height: 3.4rem; } .footer-btn { display: flex; flex: 1; height: 100%; justify-content: center; align-items: center; color: #fff; } .footer-btn .iconfont { font-size: 3.2rem; margin-right: 1.3rem; } .footer-btn .label { font-size: 3rem; } .footer-btn:nth-child(2) { border-left: 1px solid #fff; border-right: 1px solid #fff; } .sub-nav-bar { padding: 0 3rem; display: flex; align-items: center; justify-content: space-between; height: 9rem; background-color: #1c62ad; color: #fff; } .sub-nav-bar > h3 { font-size: 4rem; } .sub-course { padding: 4rem 3rem; background: #f8fafb; } .sub-course .course { background: #ffffff; padding: 3rem; } .sub-course .course .cur-ps > p { font-size: 2.4rem; font-family: PingFang; font-weight: 500; color: #444444; line-height: 4rem; } .coures-swiper-container { display: flex; align-items: center; margin-top: 4rem; } .coures-swiper-container .btn { width: 5rem; height: 5rem; flex-shrink: 0; border: 0.1rem solid #dedede; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .coures-swiper-container .btn .iconfont { font-size: 1.8rem; color: #808080; } .coures-swiper-container .coures-swiper { flex: 1; overflow: hidden; position: relative; } .coures-swiper-container .coures-swiper .time-item { display: flex; flex-direction: column; align-items: center; padding-top: 4rem; } .coures-swiper-container .coures-swiper .time-item .line { width: 100%; display: flex; align-items: center; margin-bottom: 2rem; } .coures-swiper-container .coures-swiper .time-item .line::after, .coures-swiper-container .coures-swiper .time-item .line::before { content: ""; display: block; flex: 1; height: 0.1rem; background-color: #dddddd; } .coures-swiper-container .coures-swiper .time-item .dot { width: 1.5rem; height: 1.5rem; background: #dddddd; border-radius: 50%; } .coures-swiper-container .coures-swiper .time-item .time { font-size: 2.4rem; font-family: PingFang; font-weight: 500; color: #999999; } .coures-swiper-container .coures-swiper .time-item-active .dot { width: 1.5rem; height: 1.5rem; background: transparent; border: 0.4rem solid #1c62ad; } .coures-swiper-container .coures-swiper .time-item-active .time { color: #1c62ad; } .sub-benner { position: relative; width: 100%; height: 120px; } .sub-benner img { width: 100%; height: 100%; object-fit: cover; } .sub-benner .title { position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; display: flex; align-items: center; flex-direction: column; justify-content: center; } .sub-benner .title h2 { color: #fff; font-size: 22px; text-transform: uppercase; } .sub-benner .title span { font-size: 16px; color: #fff; margin-top: 10px; } .banner-menu { box-sizing: border-box; padding: 2.3rem 3rem; display: flex; align-items: center; background-color: #1c62ad; color: #fff; } .banner-menu .iconfont { font-size: 4rem; } .banner-menu .title { flex: 1; text-align: center; font-size: 3rem; font-family: PingFang; font-weight: 500; color: #ffffff; overflow: hidden; white-space: nowrap; text-overflow:ellipsis; padding: 0 50px; text-transform: capitalize; } .content{ overflow: hidden; font-size: 14px; line-height: 28px; } /* .content *{ white-space: normal !important; max-width: 100% !important; float:unset !important; position: unset !important; height: auto !important; margin: 0 !important; padding: 0 !important; } */ .content iframe{ height: 300px !important; } .inside-type{/*display: none;*/ width:100%; height:auto; overflow:hidden; clear:both; margin:0px auto; background:#f4f4f4; padding:0 5px; box-sizing:border-box; padding-bottom:10px;} .inside-type .type-list{ display:block; width:25%; padding:0 5px; float:left; height:40px; text-align:center; line-height:40px; box-sizing:border-box; margin:10px 0 0 0; overflow:hidden;} .inside-type .type-list a{text-transform: capitalize; display:block; background:#fff; border-radius:5px; color:#666; width:100%; height:40px;overflow:hidden;font-size: 14px;} .inside-type .type-list a:hover,.inside-type .type-list a.hover{ background:#1c62ad; color:#fff;} .dynamic-item { width: 100%; padding: 10px 0px; border-bottom: 1px solid #f2f2f2; } .dynamic-item .dynamic-box { width: 100%; margin: 0 auto; display: flex; } .dynamic-item .dynamic-img { width: 90px; height: 70px; overflow: hidden; flex-shrink: 0; margin-right: 10px; } .dynamic-item .dynamic-img img { width: 100%; height: 100%; display: block; -o-object-fit: contain; object-fit: contain; } .dynamic-item .dynamic-desc { box-sizing: border-box; width: calc(100% - 100px); display: flex; flex-direction: column; } .dynamic-item .dynamic-desc .time { font-size: 14px; color: #999999; line-height: 18px; } .dynamic-item .dynamic-desc .dynamic-h4 { font-size: 16px; font-weight: 400; color: #333333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dynamic-item .dynamic-desc .dynamic-p { font-size: 12px; font-weight: 400; color: #666666; line-height: 28px; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } /* .dynamic-item:hover, .dynamic-item-active { background: #eef2f6; }*/ .dynamic-item:hover .dynamic-h4, .dynamic-item-active .dynamic-h4 { color: #015aa9; } .course-list .course-item { } .course-list .course-item .img { width: 100%; height: auto; } .course-list .course-item .img img { width: 100%; height: 100%; } .course-list .course-item .desc { width: 100%; padding-top:20px; } .course-list .course-item .desc span{ font-size: 32px; color: rgba(35,87,227); } .course-list .course-item .desc .desc-info_box { margin-top: auto; width: 100%; max-height: 160px; overflow: auto; font-size: 16px; font-family: Microsoft YaHei UI; font-weight: 400; color: #444444; line-height: 34px; } .course-list .course-item .desc .desc-info_box::-webkit-scrollbar { width: 4px; } .course-list .course-item .desc .desc-info_box::-webkit-scrollbar-thumb { background-color: #006bcb; } .course-list .course-item .desc .desc-info_box::-webkit-scrollbar-track { background-color: #f5f5f5; } .course-swiper_container { display: flex; align-items: center; margin-top: 20px; } .course-swiper_container .course-btn { height: 32px; width: 32px; background: #ffffff; border: 2px solid #dedede; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; } .course-swiper_container .course-btn .iconfont { font-size: 18px; color: #808080; } .course-swiper_container .swiper-button-disabled { opacity: 0.4; } .course-swiper_container .course-swiper { overflow: hidden; flex: 1; position: relative; } .course-swiper_container .course-time { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 35px; cursor: pointer; } .course-swiper_container .course-time .line { width: 100%; display: flex; align-items: center; justify-content: center; } .course-swiper_container .course-time .line::after, .course-swiper_container .course-time .line::before { content: ""; display: block; flex: 1; height: 1px; background-color: #dddddd; } .course-swiper_container .course-time .dot { display: block; width: 12px; height: 12px; background: #dddddd; border-radius: 50%; } .course-swiper_container .course-time .value { font-size: 16px; font-family: Microsoft YaHei UI; font-weight: bold; color: #999999; margin-top: 16px; } .course-swiper_container .course-time-active .dot { border: 3px solid #2357e3; background-color: transparent; } .course-swiper_container .course-time-active .value { color: #2357e3; } .sub-honor { width: 100%; overflow: hidden; display: grid; grid-template-columns: repeat(2, 50%); box-sizing: border-box; padding: 4rem 0; gap: 2.2rem; } .sub-honor .honor-link { box-sizing: border-box; padding: 3rem; background-color: #f7f7f7; } .sub-honor .honor-link .img { width: 100%; height: 20rem; } .sub-honor .honor-link .img img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .sub-honor .honor-link .text { margin-top: 3.2rem; font-size: 2.6rem; font-family: PingFang; font-weight: 500; color: #222222; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 27rem; } .sideMenu{margin-top: 10px;background: #fff;padding:0px 0px 10px;} .sideMenu h3{ height:42px; line-height:42px; cursor:pointer;font-size: 15px;border-bottom: 1px solid #f7f7f7;overflow: hidden;text-overflow:ellipsis;white-space: nowrap; } .sideMenu h3 em{ float:right; display:block; width:18px; height:42px; background:url(../images/icoAdd.png) 0px -56px no-repeat ; cursor:pointer; } .sideMenu h3.on em{ background-position:0px 4px; } .sideMenu h3.on{color:#fe4614;} .sideMenu ul{background: #f7f7f7; padding:10px 10px; color:#999; display:none; font-size: 14px;line-height: 24px;} .index-title{ text-align: center; margin-bottom: 20px; } .index-title h1{ font-size: 28px; line-height: 36px; } .index-title p{ font-size: 18px; color: #666666; line-height: 28px; text-transform: uppercase; } .lfBox .topic { width: 95%; margin: 30px auto 0px auto; height: auto; line-height: 30px; text-align: center; font-size: 20px; font-weight: bold; text-transform: capitalize; } .art-note { width: 100%; height: 35px; line-height: 35px; color: #666; border-bottom: solid 1px #ddd; margin: 10px auto 20px auto; height: 35px; overflow: hidden; text-align: center; font-size: 14px; } .art-note span{ color: #999; } .art-note li { display: inline-block; margin: 0 10px; } .art-note li a { color: #888; } .art-note li a:hover { color: #004089; } .content_div { width: 100%; height: auto; margin: 30px auto; line-height: 28px; font-size: 14px; color: #222; overflow-x: scroll; } .content_div video{ text-align: center; margin: 40px auto 0; display: block; } .content_div img{ max-width: 100%; height: auto !important; } .article-pager { width: 100%; height: auto; margin: 0px auto; overflow: hidden; clear: both; text-align: center; padding: 10px 0; } .article-pager li { width: calc(33.333% - 6px); height: 40px; text-align: center; display: block; line-height: 38px; box-sizing: border-box; margin:20px 3px 0; float: left; } .article-pager li a { width: 100%; background: #fff; height: 38px; display: block; color: #666; border: solid 1px #ddd; border-radius: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); box-sizing: border-box; } .article-pager li img { position: relative; top: 1px; display: inline; } .article-pager li:hover a { background: #015aa9; border: solid 1px #015aa9; color: #fff; } /* 投资者关系 */ .investor{padding:140px 0;} .investor .list{display:flex;justify-content:space-between;flex-wrap:wrap;} .investor .list .lt{width:49%;background-color:#e7eff9;padding:60px;} .investor .list .lt .content{display:flex;flex-direction:column;justify-content:center;height:100%;} .investor .list .lt .t01{font-size:30px;color:#001f2b;margin-bottom:20px;} .investor .list .lt .num{line-height:0.8;} .investor .list .lt .t02{color:#e21007;font-size:18px;display:flex;align-items:flex-end;flex-wrap:wrap;} .investor .list .lt .t02 .price{font-size:66px;position:relative;line-height:1;width:auto;display:flex;align-items:flex-end;} .investor .list .lt .t02 .price i{font-size:20px;font-style:inherit;} .investor .list .lt .t02 .tbo.up{background-image:url(../images/up_icon01.png);} .investor .list .lt .t02 .tbo{position:relative;background-position:center left;background-repeat:no-repeat;padding-left:15px;line-height:1;margin-left:15px;} .investor .list .lt .t02 .tbo.down{position:relative;background-image:url(../images/down_icon01.png);background-position:center left;background-repeat:no-repeat;padding-left:15px;line-height:1;margin-left:15px;color:#29b54e;} .investor .list .desc01{font-size:14px;color:#70858c;margin-top:30px;} .investor .list .ulist{display:flex;justify-content:space-between;margin-top:70px;flex-wrap:wrap;} .investor .list .ulist .uitem{padding-left:25px;border-left:1px solid #b9c5d0;margin-bottom:2%;} .investor .list .ulist .u_t01{font-size:14px;color:#001f2b;} .investor .list .ulist .u_t02{font-size:30px;color:#e21007;margin-top:15px;} .investor .list .lr{width:49%;position:relative;} .investor .list .lr .imgbox{height:100%;} .investor .list .lr img{height:100%;width:100%;object-fit:cover;} .investor .list .text{position:absolute;left:0;right:0;top:35%;text-align:center;} .investor .list .text .title{font-size:56px;color:#fff;} .investor .list .text .desc{font-size:16px;color:#fff;margin-top:30px;} @media (max-width:1459px){.investor{padding:100px 0;} .investor .list .text .title{font-size:45px;} } @media (max-width:1024px){.investor{padding:50px 0;} .investor .list .lt .t02 .price{font-size:36px;} .investor .list .lt{padding:30px;} .investor .list .lt .t01{font-size:24px;} .investor .list .desc01{margin-top:20px;} .investor .list .ulist{margin-top:40px;} .investor .list .ulist .uitem{padding-left:10px;} .investor .list .ulist .u_t02{font-size:16px;margin-top:5px;} .investor .list .ulist .u_t01{font-size:16px;} .investor .list .lt .t02 .tbo{margin-top:20px;margin-left:0;} .investor .list .text .title{font-size:24px;} } @media (max-width:768px){.investor .list .lt{width:100%;} .investor .list .lr{width:100%;} .investor{padding:40px 0 20px;} } .contact01 .item .imgbox{min-width:0;width:40px;flex:0 0 auto;} .contact01 .item{width:24%;} .contact01 .item .t01{font-size:18px;} .contact01 .item .t02{font-size:22px;} .contact01 .item .t03{font-size:18px;} .invBox{margin-top:20px;padding:60px;font-size:18px;background:#e7eff9;} .invBox .it{display:inline-block;vertical-align:middle;margin-right:40px;} .invBox .it .c{color:#1a479b;font-size:24px;padding-left:5px;} .invBox .it span{display:inline-block;vertical-align:middle;} @media(max-width:600px){.contact01 .item{width:49%;text-align:left;margin-bottom:20px;justify-content:flex-start;} .contact01 .item .t01{font-size:14px;} .contact01 .item .t02{font-size:16px;} .contact01 .item .t03{font-size:14px;} .invBox{padding:30px;font-size:16px;} .invBox .it{display:block;margin-bottom:10px;} .invBox .it .c{font-size:20px;} } .outLink{text-align:right;margin-top:26px;} .outLink a{color:#333;} .outLink a:hover{color:#1a479b;text-decoration:underline;} .invBox .it span i{display:block;width:40px;height:40px;background-size:contain;background-repeat:no-repeat;background-position:center;} .icon-tel{background-image:url(../images/tel.png);} .icon-email{background-image:url(../images/email.png);} .mypage{ width:auto; height:40px; overflow:hidden; clear:both; text-align:center; margin:15px auto 0 auto;} .mypage li{ min-width:32px; height:32px;text-align:center; display:inline-block; line-height:32px; margin-right:4px;} .mypage li:first-child a,.mypage li:last-child a{box-sizing: border-box;padding: 0 10px;} .mypage li a{ width:100%; height:32px; text-align:center; line-height:32px; display:block; font-size:14px; color:#666; border:solid 1px #d9d9d9; border-radius:2px;box-sizing: border-box; } .mypage li a:hover,.mypage li.active a{ background:#fe4614; color:#fff; border:solid 1px #fe4614; }