﻿.common-main{margin-bottom:0}
.accessory-table{display:flex;justify-content:center;border-bottom:1px solid var(--color)}
.accessory-kind{display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0 20px;position:relative;padding:0 15px}
.accessory-img{width:155px;height:155px;border-radius:15px;overflow:hidden;cursor:pointer;position:relative}
.accessory-img img{width:100%;display:block}
.accessory-text p{font-size:18px;color:#555;padding:20px 0;line-height:1.52}
.accessory-img img:nth-of-type(2){position:absolute;left:0;top:0;transition:all .3s ease-in-out;opacity:0}
.accessory-table .active .accessory-img img:nth-of-type(2){opacity:1}
.accessory-kind:hover .accessory-img img{transform:scale(1.05)}
.accessory-table .active .accessory-text p{color:var(--color)}
.accessory-table .active::after{position:absolute;content:'';width:100%;height:4px;background:var(--color);bottom:-4px}
.box3-com{display:flex;flex-wrap:wrap}
.box3-it{width:31.5%;background:#fff;border-radius:8px;overflow:hidden;margin-bottom:3%;margin-right:2.7%}
.box3-it:nth-of-type(3n){margin-right:0}
.box-tit{margin-bottom:40px}
.box-tit h4{font-size:32px;text-align:center;color:#00204a;line-height:1;font-weight:500;position:relative;padding-bottom:20px}
.box-tit h4::after{content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:36px;height:3px;background-color:var(--color);border-radius:2px}
.accessory-bottom{background-color:#f2f3f6;margin-top:50px;padding-bottom:4%}
.box3-img img{width:100%;display:block}
.box3-text{padding:30px;text-align:center}
.box3-text p{font-size:24px;color:#333;font-weight:var(--fontbold4);line-height:1}
.box3-btn{margin-top:30px}
.box3-btn a{text-decoration:none!important;padding:15px 40px;line-height:1;border:1px solid var(--color);border-radius:5px;overflow:hidden;position:relative;z-index:1}
.box3-btn a::after{position:absolute;content:'';width:100%;height:100%;background:var(--color);top:0;left:-100%;transition:all .3s ease-in-out;z-index:-1}
.box3-btn a em{font-style:normal;margin-left:15px}
.accessory-box{padding-top:80px}
.box3-btn a:hover::after{left:0}
.box3-btn a:hover{color:#fff;z-index:2}
.box3-img{min-height:334px;display:flex;align-items:center;justify-content:center;overflow:hidden;background-color:#e2e3e3}
.box3-it:hover img{transform:scale(1.07)}
.box2-it:hover img{transform:scale(1.07)}
.accessory-page{display:none}
.box2-it{width:49%;background:#fff;margin-bottom:2%;border-radius:5px;overflow:hidden}
.box2-com{display:flex;justify-content:space-between;flex-wrap:wrap}
@media (max-width:1600px){.accessory-box{padding-top:50px}
.box-tit h4{font-size:32px}
.box3-text{padding:30px 25px}
.box3-btn{margin-top:30px}
}
@media (max-width:1024px){.accessory-img{width:120px;height:120px}
.box-tit h4{font-size:26px}
.box-tit{margin-bottom:25px}
.box3-text{padding:20px 15px}
.box3-btn a{padding:10px 20px}
.accessory-box{padding-top:20px}
}
@media (max-width:768px){.accessory-img{width:100px;height:100px}
.box-tit h4{font-size:22px}
.box3-it{width:49%;margin-right:0}
.box3-com{justify-content:space-between}
.box3-text p{font-size:16px}
.accessory-kind{margin:0 10px;padding:0 10px}
}
@media (max-width:500px){.accessory-img{width:80px;height:80px}
.accessory-text p{font-size:14px;padding:10px 0;text-align:center}
.accessory-kind{margin:0 10px;padding:0 12px}
.box-tit h4{font-size:20px}
.box3-btn{margin-top:15px}
.box3-btn a{padding:8px 15px;font-size:12px}
.accessory-kind{width:50%;margin:0;margin-top:15px}
.accessory-table{flex-wrap:wrap}
.accessory-table .active::after{bottom:5px}
.accessory-text p{padding:10px 0}
}
@media (max-width:400px){.accessory-text p{font-size:12px}
.box3-img{min-height:240px}
.box3-it{width:100%;margin-bottom:15px}
.box2-it{width:100%;margin-bottom:15px}
}
