:root{--hd1:#3d9bf7;--hd2:#0f6ae6;--strip:#1a6fe0;--pink1:#ff4187;--pink2:#ff0253;--sel:#ff236d;--title:#0093ff;--text:#595959;--page:#edeae3;--box-line:#c9c6bf;--panel:#daf2ff;--foot1:#009dfe;--foot2:#006cff;--foot3:#0133af}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--text);font:15px/1.7 "Open Sans","Microsoft JhengHei","PingFang HK",Arial,Helvetica,sans-serif}
a{color:var(--title)}img{max-width:100%;height:auto}
.w{max-width:1000px;margin:0 auto;padding:0 16px}
/* header: same blue bar, logo and menu as the original */
header{background:#1d6fe6;color:#fff}
.strip{background:#1d6fe6;font-size:12.5px}
.strip .w{display:flex;align-items:center;gap:18px;height:28px}
.strip a{color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.strip img{width:16px;height:16px}.strip .sp{flex:1}
.strip .lang a{opacity:.85;padding:0 4px}.strip .lang a.on{opacity:1;font-weight:600;text-decoration:underline}
.hbar{background:#0469ff url(/images/header/header_background.jpg) repeat-x}
.hbar .w{display:flex;align-items:flex-end;gap:20px;height:97px;padding-bottom:10px;position:relative}
.logo{display:block;line-height:0;align-self:flex-start}.logo img{width:214px;height:97px;display:block}
nav.main{display:flex;align-items:center;margin-left:auto;gap:2px}
nav.main>div{position:relative}
nav.main>div>a{display:block;color:#fff;text-decoration:none;font-size:18px;font-weight:400;padding:6px 14px;border-radius:6px}
nav.main>div>a:hover,nav.main>div>a.on{background:rgba(255,255,255,.16)}
nav.main>div>a.on{text-decoration:underline;text-underline-offset:5px}
nav.main .home img{width:20px;height:20px;vertical-align:-3px}
.dd{display:none;position:absolute;right:0;top:100%;z-index:30;min-width:250px;background:#fff;border-radius:8px;box-shadow:0 10px 28px rgba(0,0,0,.18);padding:6px;margin-top:4px}
nav.main>div:hover .dd,nav.main>div:focus-within .dd{display:block}
.dd a{display:block;padding:7px 12px;border-radius:5px;color:#444;text-decoration:none;font-size:14px}
.dd a:hover{background:var(--panel);color:var(--title)}
.login{position:absolute;right:16px;top:8px;background:linear-gradient(180deg,#57cbf2,#34a4df);color:#fff;text-decoration:none;font-size:14px;padding:5px 14px;border-radius:5px;border:1px solid rgba(255,255,255,.35)}
.login:hover{background:#29bffc}
#mt{display:none;background:none;border:0;color:#fff;font-size:28px;cursor:pointer;margin-left:auto}
/* white content box on the beige page */
.box{max-width:1000px;margin:0 auto;background:#fff;border:1px solid var(--box-line);border-bottom:0;border-radius:7px 7px 0 0}
.inner{display:grid;grid-template-columns:240px 1fr;gap:28px;padding:22px 20px 40px}
.inner.full{grid-template-columns:1fr}
/* left menu (grey card, pink selected item) */
.lm{background:#f4f4f4;border-radius:7px;padding:10px 0 14px;align-self:start}
.lm .t{color:#888;font-size:17px;font-weight:300;text-transform:uppercase;padding:2px 14px 8px;border-bottom:1px solid #ddd;margin:0 10px 6px}
.lm a{display:block;text-decoration:none;color:#555;font-size:15px;font-weight:300;padding:8px 20px}
.lm a:hover{color:var(--sel)}
.lm a.sel{background:var(--sel);color:#fff;position:relative;margin-right:-14px;border-radius:0 3px 3px 0}
.lm a.sel:after{content:"";position:absolute;right:-14px;top:0;border:20px solid transparent;border-left:14px solid var(--sel);border-right:0;height:0;top:50%;transform:translateY(-50%)}
.lm a.sub{font-size:13px;padding:5px 20px 5px 30px;color:#666}
.lm a.sub.on{color:#222;border-left:3px solid var(--sel);padding-left:27px;margin-left:0}
/* content */
.content{min-width:0;color:var(--text)}
.content h1,.content h2{font-weight:300;color:var(--title)}
.content h1{font-size:28px;line-height:1.25;margin:0 0 14px}
.content h2{font-size:23px;margin:26px 0 10px}.content h3{font-size:17px;color:#333;margin:20px 0 6px;font-weight:600}
.content img{border:1px solid #ccc;border-radius:4px;margin:8px 0;display:block}
.content ul,.content ol{padding-left:22px}
.row2{display:flex;gap:16px 22px;align-items:flex-start;margin:6px 0}.row2>*{flex:1 1 0;min-width:0}.row2>div:has(>img:only-child){flex:0 0 auto}.row2 img{margin:0}
.panel{background:var(--panel);border-radius:6px;padding:14px 18px;margin:14px 0}
.note{background:#fff7e0;border:1px solid #ffe2a0;border-radius:6px;padding:12px 16px}
.table-wrap{overflow-x:auto;margin:14px 0}
table.data{border-collapse:collapse;width:100%;font-size:14px}
table.data td,table.data th{padding:8px 12px;border-bottom:1px solid #e3e3e3;text-align:right;white-space:nowrap}
table.data td:first-child,table.data th:first-child{text-align:left}
table.data tr:first-child td,table.data tr:first-child th{background:var(--title);color:#fff;font-weight:600}
table.data tr:nth-child(even) td{background:#f5fbff}
.btn{display:inline-block;background:linear-gradient(180deg,#57cbf2,#34a4df);color:#fff;text-decoration:none;font-weight:600;border-radius:6px;padding:9px 20px;box-shadow:0 2px 5px rgba(0,0,0,.18)}
.btn:hover{background:#29bffc}
.btn.big{font-size:20px;padding:13px 18px;text-transform:uppercase}
/* home */
.hero{background:linear-gradient(180deg,var(--pink1),var(--pink2));color:#fff}
.hero .w{position:relative;min-height:350px;background:url(/images/index-banner/index-banner-2.jpg) right top/auto 350px no-repeat;padding-top:14px;padding-bottom:60px}
.hero h1{font-weight:400;font-size:36px;margin:0 0 4px;line-height:1.25}
.hero .tick{margin:0;font-size:18px;font-weight:300}.hero .tick:before{content:"\2714";color:#9be15d;margin-right:8px}
.hero .use{font-size:22px;font-weight:300;margin:26px 0 8px}
.hero small{display:block;margin-top:10px;font-size:13px}
.home .box{margin-top:-40px;position:relative;padding:18px 18px 10px}
.sec{padding:10px 0 26px;border-bottom:1px solid #ddd;margin-bottom:22px}.sec:last-child{border:0}
.kicker{color:#666;font-size:15px;text-transform:uppercase;margin:0 0 6px}
.offer{display:grid;grid-template-columns:1fr 1fr;gap:26px 40px}
.offer h3{display:flex;align-items:center;gap:10px;margin:0;color:var(--title);font-weight:300;font-size:36px;text-transform:uppercase;line-height:1.2}
.offer h3 img{width:36px;height:36px}
.offer .sub{color:var(--title);font-size:16px;font-weight:300;margin:2px 0 6px}
.offer ul{margin:0 0 6px;padding-left:18px;font-size:13.5px;color:#555}
.offer .links a{margin-right:16px;text-decoration:none;font-size:15px;font-weight:300}
.h2i{display:flex;align-items:center;gap:8px;color:var(--title);font-weight:300;font-size:26px;margin:0 0 14px}
.h2i img{width:36px;height:36px;object-fit:contain}
.two{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.bubble{position:relative;background:#fff;border:1px solid #ddd;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.12);padding:16px 18px;margin:0 0 34px;font-size:13.5px}
.bubble:after{content:"";position:absolute;left:28px;bottom:-22px;border-width:22px 20px 0 0;border-style:solid;border-color:#fff transparent transparent transparent;filter:drop-shadow(0 2px 1px rgba(0,0,0,.1))}
.bubble p{margin:0 0 8px}.bubble .who{text-align:right;color:#555}
.more{text-align:center;margin:6px 0 0}.more a{font-size:26px;font-weight:300;text-decoration:none}
.feats{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}
.feat{display:grid;grid-template-columns:150px 1fr;gap:12px;font-size:13px;line-height:1.5}
.feat img{border-radius:4px;border:1px solid #ddd;width:150px}
.feat b{display:block;color:var(--title);font-weight:300;font-size:16px;margin-bottom:2px}
.social a{display:inline-block;margin-right:8px}.social img{width:36px;height:36px}
.badges{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
/* footer: blue band like the original */
footer.site{max-width:1000px;margin:0 auto;background:linear-gradient(180deg,var(--foot1),var(--foot2));color:#fff;font-size:13px;border-radius:0}
footer.site .cols{display:grid;grid-template-columns:repeat(4,1fr) 200px;gap:18px;padding:22px 20px 10px}
footer.site b{display:block;margin-bottom:4px}footer.site a{color:#fff;text-decoration:none;display:block;line-height:1.75}
footer.site a:hover{text-decoration:underline}
footer.site .copy{padding:8px 20px 14px;font-size:12px;opacity:.9}
footer.site .bot{height:14px;background:var(--foot3)}
.pagebottom{height:30px}
@media (max-width:900px){
 #mt{display:block;align-self:center;order:3;margin-left:8px}.login{position:static;order:2;margin-left:auto;align-self:center}
 nav.main{display:none;position:absolute;left:0;right:0;top:100%;z-index:40;flex-direction:column;align-items:stretch;background:var(--hd2);padding:8px 16px 14px}
 body.nav-open nav.main{display:flex}.dd{position:static;display:block;box-shadow:none;background:transparent;padding:0 0 4px 14px;margin:0}
 .dd a{color:#e6f0ff;padding:4px 8px}.dd a:hover{background:rgba(255,255,255,.12);color:#fff}
 .inner{grid-template-columns:1fr}.lm a.sel{margin-right:0}.lm a.sel:after{display:none}
 .hero .w{background-size:auto 230px;background-position:right bottom;padding-bottom:230px}
 .offer,.two,.feats{grid-template-columns:1fr}.row2{flex-wrap:wrap}.row2>*{flex-basis:100%}.row2>div:has(>img:only-child){flex-basis:auto}
 .strip .t{display:none}footer.site .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){.offer h3{font-size:28px}.feat{grid-template-columns:110px 1fr}.feat img{width:110px}.hero h1{font-size:28px}.logo img{width:150px;height:auto}.hbar .w{height:auto;min-height:72px}}