@charset 'utf-8'; .boxlist{ width: 20%; display: inline-flex } @media only screen and (max-width: 1300px) { .newppd{ padding:20px 0;color:#0c2f55 } .boxlist{ display: none; } } .index_product{} .index_product .list{width: 100%;overflow: hidden;font-size: 0;} .index_product .list .item {width: 20%;position: relative;overflow: hidden;float: left;} .index_product .list .item .img {position: relative;} .index_product .list .item .img::after{position:absolute;content:'';left:0;top:0;width:100%;height:100%;background:rgb(0 0 0 / 50%);transition:.36s;opacity:1} .index_product .list .item:hover .img::after{transition:.36s;opacity: 0;} .index_product .list .item .txt{position:absolute;left:0;top:0;width:100%;height:100%;text-align:center;transition:.36s;opacity:1} .index_product .list .item .txt .pd{padding:0 3rem;} .index_product .list .item .txt h2{font-size: 24rem;color:#fff;display: block;margin-bottom: 2rem;} .index_product .list .item .txt a{font-size: 14rem;color:#fff;display: inline-block;border: 1px solid #fff;border-radius: 3rem;padding: .5rem 5rem;} .index_product .list .item.on .txt{transition:.36s;opacity:0} .index_product .list .item .show{transition:.8s;padding:100% 4rem 0;position: absolute;left: 0%;top: 0;height: 100%;width: 100%;overflow: hidden;opacity: 0;visibility: hidden;z-index: 999;} .index_product .list .item:hover .show {transition:.8s;padding:200% 4rem 0;opacity: 1;visibility:visible;left: 0;} .index_product .list .item .show h2{font-size:3rem;color:#fff} .index_product .list .item .show p{font-size:2rem;color:#fff;line-height:1.8;display:block;margin:0.5rem 0 3rem} .index_product .list .item .show a{font-size:2rem;color:#fff;text-decoration:underline} .index_product .list .item .showaa{padding:100% 4rem 0;position: absolute;top: 0;height: 100%;width: 100%;overflow: hidden;opacity: 1;z-index: 999;} .index_product .list .item:hover .showaa {padding:200% 4rem 0;opacity: 0;visibility:visible;left: 0;} .index_product .list .item .showaa h2{font-size:3rem;color:#fff} .index_product .list .item .showaa p{font-size:2rem;color:#fff;line-height:1.8;display:block;margin:0.5rem 0 3rem} .index_product .list .item .showaa a{font-size:2rem;color:#fff;text-decoration:underline} @media only screen and (max-width: 1360px) { .index_product .list .item .show h2{font-size:2rem;color:#fff} .index_product .list .item .show p{font-size:1.2rem;color:#fff;line-height:1.8;display:block;margin:0.5rem 0 3rem} .index_product .list .item .show a{font-size:1.2rem;color:#fff;text-decoration:underline} .index_product .list .item .showaa{padding:100% 1.5rem 0;position: absolute;top: 0;height: 100%;width: 100%;overflow: hidden;opacity: 1;z-index: 999;} .index_product .list .item .showaa h2{font-size:2rem;color:#fff} .index_product .list .item .showaa p{font-size:1.2rem;color:#fff;line-height:1.8;display:block;margin:0.5rem 0 3rem} .index_product .list .item .showaa a{font-size:1.2rem;color:#fff;text-decoration:underline} } .row.no-gutter { margin-left: 0; margin-right: 0; } .row.no-gutter > [class*='col-'] { padding-right: 0; padding-left: 0; } .btmor{ width: 192px; height: 54px; background: #008cd7; color: #fff; font-size: 26px; text-align: center; line-height: 48px; border-radius: 60px; margin: 10px auto; } .btmor2{ width: 192px; height: 54px; background: transparent; color: #0c2f55; font-size: 26px; text-align: center; line-height: 48px; border-radius: 60px; margin: 10px auto; border: 2px solid #008cd7; } .btmor2:hover{ background: #008cd7; color: #fff; } .btmor3{ width: 136px; height: 38px; background: transparent; color: #535353; font-size: 16px; text-align: center; line-height: 36px; border-radius: 60px; border: 1px solid #535353; } .btmor3:hover{ background: #008cd7; color: #fff; border: 1px solid #008cd7; } .oneline{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .showitem::before { content: ''; position: absolute; right: 0; top: 50%; width: 1px; height: 50px; background-color: #fff; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); } .showitem:last-child::before { display: none; } .home_titl{ line-height: 6rem;color:#0c2f55;font-size:48px } .home_sub{ text-transform:Uppercase;line-height: 6rem;color:#0c2f55 } .home_pp{ color:#6c6c6c;font-size:24px;line-height: 4rem; } .home_num{ font-size:60px;line-height: 80px; font-weight: 900; } .home_num_p{ font-size:42px;line-height:80px } .freeboxv{ color:#fff;margin-top: -30PX; } .home_vpp{ color:#6c6c6c;font-size:22px;line-height: 7rem; } .home_gy{ color:#fff;padding: 6rem 0;font-size:48px;line-height: 80px; } .home_gyy{ color:#fff;font-size:48px;line-height: 90px; } .home_gypp{ color:#fff;font-size:24px;line-height:4rem;width: 90%; } .home_gyvc{ color:#fff;font-size:20px;line-height:4rem; } .home_gynnum{ font-size:60px;line-height: 80px;font-weight:800 } .home_gypnmmm{ font-size:24px } .home_pkfg{ font-size:20px } .home_ppd{ padding: 6rem 0 28rem 0; } .home_mpd{ padding: 3rem 0 0 0 } .home_mpdv{ padding: 6rem 0; } .vtmppd{ margin-top: 8rem; } .vpsdsdg{ padding: 8rem 0; } .phspic{ padding: 18rem 0; } .home_search{ padding: 5rem 0; } .home_newp1{ font-size:40px } .home_newp2{ font-size:20px } .home_newp3{ font-size:24px; } .home_newp4{ font-size:16px; } @media only screen and (max-width: 768px) { .home_newp1{ font-size:20px } .home_newp2{ font-size:16px } .home_newp3{ font-size:18px; } .home_newp4{ font-size:14px; } .pppptopp{ margin-top: 60px; } .container { padding-right: 25px; padding-left: 25px; margin-right: auto; margin-left: auto; } .ppaaaa{ color: #fff; font-size: 16px; line-height: 3rem; } .newppd{ padding: 20px 0 0 0;color:#0c2f55 } .btmor { width: 122px; height: 32px; background: #008cd7; color: #fff; font-size: 16px; text-align: center; line-height: 32px; border-radius: 60px; margin: 10px auto; } .btmor2 { width: 122px; height: 32px; background: transparent; color: #0c2f55; font-size: 16px; text-align: center; line-height: 30px; border-radius: 60px; margin: 10px auto; border: 2px solid #008cd7; } .index_product .list .item .showaa,.index_product .list .item .show { padding: 100% 0.2rem 0; position: absolute; top: 0; height: 100%; width: 100%; overflow: hidden; opacity: 1; z-index: 180; } .index_product .list .item:hover .show {transition:.8s;padding:150% .2rem 0;opacity: 1;visibility:visible;left: 0;} .index_product .list .item .showaa h2{font-size:12.5px;color:#fff} .index_product .list .item .showaa p{display:none;font-size:12px;color:#fff;line-height:1;margin:0.5rem 0 3rem} .index_product .list .item .showaa a{font-size:0.8rem;color:#fff;text-decoration:underline} .index_product .list .item .show h2{font-size:12.5px;color:#fff} .index_product .list .item .show p{display:none;font-size:12px;color:#fff;line-height:1;margin:0.5rem 0 3rem} .index_product .list .item .show a{font-size:0.8rem;color:#fff;text-decoration:underline} .home_search{ padding: 0rem 0; } .showitem{ padding: 2rem 0; } .showitem::before { content: ''; position: absolute; right: 0; top: 50%; width: 0px; } .phspic{ padding: 8rem 0; } .vpsdsdg{ padding: 3rem 0; } .vtmppd{ margin-top: 0rem; } .home_mpdv{ padding: 2rem 0; } .home_mpd{ padding: 2rem 0 0 0; } .home_ppd{ padding: 3rem 0 8rem 0; } .home_pkfg{ font-size:16px } .home_gypnmmm{ font-size:16px } .home_gynnum{ font-size:30px;line-height: 40px;font-weight:800 } .home_gyvc{ color:#fff;font-size:14px;line-height:30px; } .home_gypp{ color:#fff;font-size:14px;line-height:28px;width: 90%; } .home_gy{ color:#fff;padding: 6rem 0;font-size:24px } .home_gyy{ color:#fff;font-size:24px; line-height: 3rem; } .home_vpp{ color:#6c6c6c; font-size: 14px; line-height: 3rem; } .freeboxv{ color:#fff;margin-top: 0PX; } .home_titl{ line-height: 3rem;color:#0c2f55;font-size:24px } .home_sub{ text-transform:Uppercase;line-height: 3rem;color:#0c2f55;font-size: 16px; } .home_pp{ color:#6c6c6c;font-size:14px;line-height: 2.5rem; } .home_num{ font-size:24px;line-height: 40px; font-weight: 700; } .home_num_p{ font-size:16px;line-height:40px } }