@charset "utf-8";

.header, .header *, .footer, .footer * { margin: 0px; padding: 0px; box-sizing: border-box; font-family: sans-serif; }

.header img, .footer img { display: block; }

.header ul, .footer ul { list-style: none; }

.header { background: linear-gradient(rgb(245, 245, 245), rgb(227, 228, 228)); padding-top: 20px; position: relative; margin-bottom: 10px; }

.header-bg-gradient { height: 40px; background: linear-gradient(to right, rgb(252, 252, 252), rgb(243, 243, 243)); clip-path: polygon(100% 0px, 0px 0px, 0px 100%, 100% calc(100% - 20px)); position: absolute; top: 0px; width: 100%; }

.header-container { max-width: 1000px; padding: 0px 5px; margin: 0px auto; position: relative; z-index: 1; }

.header-top { display: flex; align-items: center; justify-content: space-between; }

.header-btn { background: rgb(208, 2, 27); border-radius: 3px; padding: 10px 16px; display: inline-block; color: rgb(255, 255, 255); }

.header-menu { display: flex; align-items: center; column-gap: 18px; margin-top: 25px; }

.header-menu li { font-size: 18px; font-weight: 200; line-height: 1; color: rgb(74, 74, 74); padding: 15px 0px 20px; }

.header-menu li.active { position: relative; }

.header-menu li.active::after { content: ""; position: absolute; left: 0px; right: 0px; bottom: 0px; height: 4px; background: rgb(49, 87, 161); margin: 0px auto; }

.header-menu-more { display: flex; align-items: center; margin-left: auto; column-gap: 10px; }

@media (max-width: 1100px) {
  .header .hide-1100 { display: none; }
  .header-container { padding: 0px 10px; }
}

@media (max-width: 700px) {
  .header .header-top .header-btn, .header .header-menu { display: none; }
  .header-container { padding: 0px 10px 15px; }
  .header .header-top img { width: 110px; }
}

.footer { box-shadow: rgba(0, 0, 0, 0.14) 1px 1px 15px 0px; color: rgb(74, 74, 74); margin-top: 20px; }

.footer-container { max-width: 976px; margin: 0px auto; }

.footer-top { padding: 40px 0px; }

.footer-middle { border-top: 1px solid rgb(226, 226, 226); border-bottom: 1px solid rgb(226, 226, 226); display: grid; grid-template-columns: repeat(4, 1fr); padding: 30px 0px; column-gap: 30px; }

.footer-bottom { padding: 30px 0px; }

.footer-bottom ul { display: flex; align-items: center; column-gap: 20px; font-size: 16px; }

.footer-middle-list-title { font-size: 22px; margin-bottom: 20px; }

.footer-middle-list li { font-size: 17px; margin-top: 15px; }

.footer-bottom2 { display: flex; align-items: center; column-gap: 15px; padding-bottom: 30px; }

@media (max-width: 1000px) {
  .footer-container { padding: 0px 10px; }
}

@media (max-width: 800px) {
  .footer-middle { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
  .footer-bottom ul { flex-wrap: wrap; row-gap: 15px; }
}

@media (max-width: 500px) {
  .footer-middle { grid-template-columns: 1fr; row-gap: 0px; border-bottom: 0px; padding: 0px; }
  .footer-middle-list ul { display: none; }
  .footer-middle-list-title { margin-bottom: 0px; padding: 15px 0px; border-bottom: 1px solid rgb(226, 226, 226); font-size: 20px; position: relative; }
  .footer-middle-list-title::after { content: ""; background-image: url("data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KDTwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIFRyYW5zZm9ybWVkIGJ5OiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4KPHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMTcgMTciIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgZmlsbD0iIzAwMDAwMCI+Cg08ZyBpZD0iU1ZHUmVwb19iZ0NhcnJpZXIiIHN0cm9rZS13aWR0aD0iMCIvPgoNPGcgaWQ9IlNWR1JlcG9fdHJhY2VyQ2FycmllciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cg08ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDxwYXRoIGQ9Ik0xNi4zNTQgNS4wNzVsLTcuODU1IDcuODU0LTcuODUzLTcuODU0IDAuNzA3LTAuNzA3IDcuMTQ1IDcuMTQ2IDcuMTQ4LTcuMTQ3IDAuNzA4IDAuNzA4eiIgZmlsbD0iIzQ0NCIvPiA8L2c+Cg08L3N2Zz4="); background-repeat: no-repeat; background-size: contain; width: 16px; height: 16px; position: absolute; right: 5px; top: 50%; transform: translateY(-50%); }
  .footer-top img { max-width: 100%; }
  .footer-bottom2 { padding-bottom: 75px; }
}