:root{--bg-theme: #0f1929;--title-color: #344767;--des-color: #374151;--btn-color: #344767}body{background-color:#f8faff}.product{display:flex;max-width:1430px;padding:72px 0;align-items:center;margin:0 auto}.product img{width:752px}.product .des{width:638px;padding-left:40px}.product .des h3{font-size:40px;color:var(--title-color);font-weight:700}.product .des p{font-size:18px;color:var(--des-color);margin-top:10px}.product .des a{margin-top:32px;display:block;font-size:22px;border:1px solid var(--bg-theme);border-radius:36px;padding:12px 40px;width:-moz-fit-content;width:fit-content;cursor:pointer;transition-property:background-color,border-color,color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;color:var(--btn-color);background-color:#fff;border-color:var(--bg-theme)}.product .des a:hover{background-color:var(--bg-theme);color:#fff}@media (min-width: 0px) and (max-width: 640px){.product .des a{font-size:14px;padding:6px 21px}}@media (min-width: 641px) and (max-width: 1024px){.product .des a{font-size:14px;padding:6px 21px}}@media (min-width: 641px) and (max-width: 1024px){.product{max-width:761px;padding:38px 0}.product img{width:400px}.product .des{width:340px;padding-left:21px}.product .des h3{font-size:24px}.product .des p{font-size:14px}.product .des a{margin-top:32px;font-size:22px;border:1px solid var(--bg-theme);border-radius:36px;padding:12px 40px;width:-moz-fit-content;width:fit-content;cursor:pointer;transition-property:background-color,border-color,color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;color:var(--btn-color);background-color:#fff;border-color:var(--bg-theme)}.product .des a:hover{background-color:var(--bg-theme);color:#fff}}@media (min-width: 641px) and (max-width: 1024px) and (min-width: 0px) and (max-width: 640px){.product .des a{font-size:14px;padding:6px 21px}}@media (min-width: 641px) and (max-width: 1024px) and (min-width: 641px) and (max-width: 1024px){.product .des a{font-size:14px;padding:6px 21px}}@media (min-width: 0px) and (max-width: 640px){.product{max-width:343px;flex-direction:column;padding:20px 0;gap:12px}.product img{width:380px}.product .des{width:340px;padding-left:0}.product .des h3{font-size:24px}.product .des p{font-size:14px;margin-top:5px!important}.product .des a{margin-top:17px;font-size:22px;border:1px solid var(--bg-theme);border-radius:36px;padding:12px 40px;width:-moz-fit-content;width:fit-content;cursor:pointer;transition-property:background-color,border-color,color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;color:var(--btn-color);background-color:#fff;border-color:var(--bg-theme)}.product .des a:hover{background-color:var(--bg-theme);color:#fff}}@media (min-width: 0px) and (max-width: 640px) and (min-width: 0px) and (max-width: 640px){.product .des a{font-size:14px;padding:6px 21px}}@media (min-width: 0px) and (max-width: 640px) and (min-width: 641px) and (max-width: 1024px){.product .des a{font-size:14px;padding:6px 21px}}.con3 .des p{margin-top:40px}.con2{display:flex}.con2 .left{background-color:var(--bg-theme);color:#fff;display:flex;justify-content:center;flex-direction:column;flex:0 0 40%;align-items:end;padding-right:54px}.con2 .left>div h3{font-size:40px;font-weight:700}.con2 .left>div p{font-size:18px;margin-top:40px}.con2 .left>div a{margin-top:32px;display:block;font-size:22px;color:var(--btn-color);border:1px solid var(--bg-theme);border-radius:36px;padding:12px 40px;width:-moz-fit-content;width:fit-content;cursor:pointer;transition-property:background-color,border-color,color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;color:#fff;background-color:var(--bg-theme);border-color:#fff}.con2 .left>div a:hover{background-color:#fff;color:var(--bg-theme)}@media (min-width: 0px) and (max-width: 640px){.con2 .left>div a{font-size:14px;padding:6px 21px}}@media (min-width: 641px) and (max-width: 1024px){.con2 .left>div a{font-size:14px;padding:6px 21px}}.con2 .right{height:524px;flex:0 0 60%;background-size:cover;background-position:center}@media (min-width: 641px) and (max-width: 1024px){.con2 .left{padding:20px}.con2 .left>div h3{font-size:20px}.con2 .left>div p{font-size:14px;margin-top:21px}.con2 .left>div a{margin-top:17px;font-size:22px;color:var(--btn-color);border:1px solid var(--bg-theme);border-radius:36px;padding:12px 40px;width:-moz-fit-content;width:fit-content;cursor:pointer;transition-property:background-color,border-color,color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;color:#fff;background-color:var(--bg-theme);border-color:#fff}.con2 .left>div a:hover{background-color:#fff;color:var(--bg-theme)}}@media (min-width: 641px) and (max-width: 1024px) and (min-width: 0px) and (max-width: 640px){.con2 .left>div a{font-size:14px;padding:6px 21px}}@media (min-width: 641px) and (max-width: 1024px) and (min-width: 641px) and (max-width: 1024px){.con2 .left>div a{font-size:14px;padding:6px 21px}}@media (min-width: 641px) and (max-width: 1024px){.con2 .right{height:280px;flex:0 0 60%;background-size:cover;background-position:center}}@media (min-width: 0px) and (max-width: 640px){.con2{display:block}.con2 .left{align-items:start;padding:20px}.con2 .left>div h3{font-size:20px}.con2 .left>div p{font-size:14px;margin-top:21px}.con2 .left>div a{margin-top:17px;font-size:22px;color:var(--btn-color);border:1px solid var(--bg-theme);border-radius:36px;padding:12px 40px;width:-moz-fit-content;width:fit-content;cursor:pointer;transition-property:background-color,border-color,color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;color:#fff;background-color:var(--bg-theme);border-color:#fff}.con2 .left>div a:hover{background-color:#fff;color:var(--bg-theme)}}@media (min-width: 0px) and (max-width: 640px) and (min-width: 0px) and (max-width: 640px){.con2 .left>div a{font-size:14px;padding:6px 21px}}@media (min-width: 0px) and (max-width: 640px) and (min-width: 641px) and (max-width: 1024px){.con2 .left>div a{font-size:14px;padding:6px 21px}}@media (min-width: 0px) and (max-width: 640px){.con2 .right{height:203px;flex:0 0 60%;background-size:cover;background-position:center}}