@import url("theme.css");

/*reset*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, button, textarea, p, blockquote { margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
li { list-style: none; }
img { border: 0; }
a{ outline:none; color:var(--color-text-strong); text-decoration:none;}
.cl:after{ content:'\20'; display:block; height:0; clear:both; }
.cl{ *zoom:1;} 
/*content*/
#menu,.header .search,.gamelist li .btn_down,.footer a,.back_nav .back,.readlist li,.star,.star i,.game_search .text,.game_search .btn{ background:url(../images/sprite.png) no-repeat 0 0; background-size:60px 174px;}
body{min-width:320px;background:var(--color-bg-page);font:12px/1.5 "Microsoft Yahei","Arial"; color:var(--color-text);-webkit-text-size-adjust:none}
.main{width:100%;max-width:768px; min-height:176px;margin:0 auto; position:relative; overflow:hidden;}
.header{ padding:13px 0; text-align:center; border-bottom:1px solid var(--color-border-strong); position:relative;}
.header .logo{ display:block; margin:0 auto; height:19px;}
.header #menu{ float:left; margin-left:4%;}
#menu{ width:21px; height:19px; font:0/0 a; background-position:-39px 2px; cursor:pointer;}
#guide{ position:absolute; left:0; top:45px; z-index:999; background:var(--color-bg-page); width:100%; overflow:hidden; display:none;box-shadow: 0px 2px 2px var(--color-shadow-menu);}
#guide ul{ overflow:hidden; margin-left:-1px; border-bottom:1px solid var(--color-surface); border-bottom:1px solid var(--color-border-strong);}
#guide li{ float:left; width:25%; text-align:center; border-left:1px solid var(--color-border-strong); border-top:1px solid var(--color-border-strong); margin-left:-1px;}
#guide li a{ color:var(--color-primary); display:block; border-left:1px solid var(--color-surface); border-top:1px solid var(--color-surface); line-height:63px; font-size:16px;}
#overlay{ width:100%; height:100%; position:absolute; left:0; top:45px; background:var(--color-overlay); z-index:200; display:none;}
#overlay.show{ display:block;}
.header .search{ float:right; width:18px; height:19px; font:0/0 a; background-position:-42px -17px; margin-right:4%;}
.index-banner{position:relative;overflow:hidden;-webkit-backface-visibility:hidden;z-index:1;width:100%}
.index-banner .swiper-wrapper li{float:left}
.index-banner .swiper-wrapper li img{width:100%;height:100%; display:none;}
.index-banner .index-pagination{position:absolute;right:0px;bottom:0;width:100%;background:var(--color-banner-scrim);height:20%}
.index-banner .index-pagination span{width:2.8%;height:34%;margin-top:2.6%;margin-right:2%;border-radius:50%;background:var(--color-pagination-dot);float:right;display:inline-block;}
.index-banner .index-pagination span.swiper-active-switch{background:var(--color-surface);}
.index-banner .banner-title{position:absolute;left:3%;bottom:3.6%;color:var(--color-on-primary);font-size:1.6em;z-index:100;}
.nav{overflow:hidden; margin:17px 10px 10px;}
.nav li{float:left; width:20%;}
.nav li a{ display:block; padding-top:50px; line-height:28px; text-align:center; width:50px; margin:0 auto; background:url(../images/nav.png) no-repeat 0 0; background-size:250px 50px;}
.nav .yyzx a{ background-position:-50px 0;}
.nav .gldq a{ background-position:-100px 0;}
.nav .xwzx a{ background-position:-150px 0;}
.nav .jptj a{ background-position:-200px 0;}
.box{ overflow:hidden;}
.box .hd{ overflow:hidden; position:relative;}
.box .hd ins{ float:left; width:8px; height:27px; background:var(--color-primary); border-top:2px solid var(--color-primary-dark); border-bottom:3px solid var(--color-primary-dark); margin-right:8px;}
.box .hd .over{ border-top:1px solid var(--color-border); border-bottom:2px solid var(--color-border); height:29px; line-height:29px; background:var(--color-bg-elevated);}
.box .hd .over h3{ font-weight:normal; color:var(--color-primary-dark); border-top:1px solid var(--color-surface); line-height:27px; font-size:16px;}
.box .hd .over .more{ float:right; color:var(--color-text); margin-right:10px; font-size:14px;}
.gamelist{ overflow:hidden; margin:-1px 10px;}
.gamelist li{ float:left; width:33.33%; text-align:center; padding:16px 0; border-bottom:1px solid var(--color-border); border-top:1px solid var(--color-surface);}
.gamelist li img{ display:block; margin:0 auto; border-radius:10px; width:75px; height:75px;}
.gamelist li h3{ font-weight:normal; height:24px; line-height:24px; font-size:14px; margin-top:3px; overflow:hidden;}
.gamelist li p{ line-height:18px; height:18px; overflow:hidden;}
.gamelist li .btn_down{ display:block; width:54px; padding-left:21px; border-radius:3px; height:22px; line-height:22px; color:var(--color-on-primary); margin:6px auto 0; background-color:var(--color-primary); background-position:-44px -38px; text-align:left;}
.newslist{ padding:0 10px; margin-bottom:-1px;}
.newslist dt{ overflow:hidden;}
.newslist dt ul{ margin:-1px 0 0;}
.newslist dt li{ border-bottom:1px solid var(--color-border); border-top:1px solid var(--color-surface); overflow:hidden; padding:14px 4px;}
.newslist dt li img{ float:left; width:120px; height:80px; margin-right:9px;}
.newslist dt li h3{ font-weight:normal; font-size:14px; line-height:20px; max-height:40px; overflow:hidden;}
.newslist dt li p{ max-height:32px; line-height:16px; overflow:hidden; margin-top:6px;}
.newslist dd ul{ padding:10px 4px 12px; border-top:1px solid var(--color-surface);}
.newslist dd li{ line-height:26px; height:26px; overflow:hidden; font-size:14px;}
.newslist dd li span{ margin-right:3px;}
.newslist dd li span,.newslist dd li span a{ color:var(--color-text);}
.footer{ text-align:center; padding:10px 0; line-height:14px; background:var(--color-bg-elevated); border-top:2px solid var(--color-border-strong);}
.footer a{ display:inline-block; padding:0 10px; background-position:right -60px;}
#return{ background:none;}
.loading{ line-height:40px; text-align:center; border-top:1px solid var(--color-surface); margin:1px 10px 0;text-shadow: 0 1px 0 var(--color-surface); font-size:14px;}
.back_nav{ height:29px; line-height:29px; font-size:18px; padding:8px 0; border-bottom:1px solid var(--color-border-strong); position:relative;}
.back_nav .back{ float:left; margin-left:4%; padding-left:25px; background-position:-46px -132px; height:29px;}
.back_nav #menu{ float:right; margin-right:4%; margin-top:5px;}
.newsdetail{ margin:0 10px; border-bottom:1px solid var(--color-surface);}
.newsdetail .title{ line-height:26px; padding:10px 0 8px; border-bottom:1px dashed var(--color-border);}
.newsdetail .title h1{ font-size:16px; line-height:22px; color:var(--color-text-strong);}
.newsdetail .title p span{ margin-right:8px;}
.newsdetail .article{ line-height:22px; padding:5px 0 15px; font-size:14px; border-top:1px dashed var(--color-surface); border-bottom:1px solid var(--color-border); color:var(--color-text-strong);}
.newsdetail .article img{ max-width:300px;}
.newsdetail .article p{ margin-top:10px;}
.container{ margin:10px 10px 0;}
.container .hd{ height:16px; line-height:16px; padding:10px 4px;}
.container .hd h3{ color:var(--color-primary); border-left:5px solid var(--color-primary); padding-left:8px; font-size:16px; font-weight:normal;}
.container .hd .more{ float:right; color:var(--color-text); font-size:14px;}
.readlist{ border-bottom:1px solid var(--color-surface);}
.readlist ul{ padding:0 4px 10px; border-bottom:1px solid var(--color-border);}
.readlist li{ height:26px; line-height:26px; font-size:14px; overflow:hidden; padding-left:13px; background-position:-56px -159px;}
.gamerec .gamelist{ padding-bottom:15px; margin:0;}
.gamerec .gamelist li{ border:none; padding:10px 0 0;}
.game_detail{ margin:5px 10px 0; padding:0 8px 10px; border-bottom:1px dashed var(--color-border);}
.game_detail dt{ float:left; width:75px; margin:11px 15px 0 0;}
.game_detail dt img{ display:block; border-radius:10px; width:75px; height:75px;}
.game_detail dt .btn_down{ display:block; width:75px; height:22px; line-height:22px; text-align:center; color:var(--color-on-primary); font-size:14px; background:var(--color-primary);border-radius:3px; margin-top:11px;}
.game_detail dd{ font-size:14px; line-height:20px; height:20px; overflow:hidden;}
.game_detail .title{ font-size:20px; line-height:30px; height:30px; overflow:hidden;}
.star,.star i{ float:left; margin:4px 4px 0 0; width:60px; height:12px; background-position:0 -80px; font:0/0 a;}
.star i{ margin:0; background-position:0 -92px;}
.game_detail dd .score{ color:var(--color-accent-score); margin-right:3px;}
.game_search{ position:relative; width:223px; margin:0 auto;}
.game_search .text{ width:185px; height:29px; line-height:27px; background-color:var(--color-surface); border-radius:5px; border:none; padding-left:38px; display:block; color:var(--color-text-placeholder); font-size:14px; background-position:-30px -104px;}
.game_search .btn{ border:none; width:14px; height:14px; position:absolute; top:7px; right:7px;}
.searchlist{ overflow:hidden; margin:0 10% 0 0; padding-bottom:20px;}
.searchlist dt,.searchlist dd{ float:left; line-height:32px;}
.searchlist dt{ width:90%; font-size:18px; color:var(--color-primary); margin:10px 0 5px 10%;}
.searchlist dd{ font-size:16px; width:40%; margin-left:10%;}
.profile{ font-size:14px; line-height:22px; margin:0 10px; color:var(--color-text-strong); border-bottom:1px solid var(--color-surface); border-top:1px dashed var(--color-surface);}
.profile a{ color:var(--color-primary);}
.profile h3,#game_img h3{ color:var(--color-primary); font-size:16px; font-weight:normal; padding:12px 0 7px;}
.profile p{ border-bottom:1px solid var(--color-border); padding-bottom:12px;}
#game_img{ border-bottom:1px dashed var(--color-border); border-top:1px dashed var(--color-surface); margin:0 10px;}
#game_img .swiper-container { height:289px; margin:5px auto 20px;position:relative;overflow:hidden;z-index:1;}
#game_img .swiper-slide{ height:289px;float:left;}
#game_img .swiper-slide img { display:block; height:285px; border:1px solid var(--color-surface);box-shadow:2px 2px 2px var(--color-shadow-card); margin:0 7px;}

/* Breeze Games homepage */
.home-page{background:linear-gradient(180deg,#dff7ff 0,#f8fdff 280px,#f5fbfe 100%);font-family:"Trebuchet MS","Arial",sans-serif;color:#244b70}
.home-page .main{max-width:820px;background:rgba(255,255,255,.76);box-shadow:0 0 45px rgba(23,117,157,.12)}
.home-header{height:72px;padding:0;border:0;background:linear-gradient(135deg,#c9f2ff,#effcff 55%,#bceef5);display:flex;align-items:center;justify-content:center;overflow:visible}
.home-header:after{content:"";position:absolute;left:-5%;right:-5%;bottom:-12px;height:30px;background:radial-gradient(65px 15px at 15% 0,#fff 98%,transparent 100%),radial-gradient(100px 18px at 43% 0,#fff 98%,transparent 100%),radial-gradient(80px 16px at 75% 0,#fff 98%,transparent 100%);opacity:.92;pointer-events:none}
.home-header #menu{position:absolute;left:18px;top:24px;float:none;margin:0;width:32px;height:28px;background:none;border:1px solid rgba(20,83,132,.14);border-radius:9px;box-shadow:0 4px 12px rgba(29,106,145,.12)}
.home-header #menu:before,.home-header #menu:after{content:"";position:absolute;left:8px;width:16px;height:2px;background:#163c73;border-radius:2px}
.home-header #menu:before{top:8px;box-shadow:0 5px 0 #163c73}
.home-header #menu:after{top:18px}
.home-header #guide{top:72px;background:#fff;border-radius:0 0 18px 18px;box-shadow:0 12px 24px rgba(18,70,106,.16)}
.home-header #guide li{width:33.33%;border-color:#d7edf7}
.home-header #guide li a{line-height:50px;font-size:14px;color:#143b71;border-color:#fff}
.brand{position:relative;z-index:2;display:flex;align-items:center;gap:9px;color:#123a73;font-size:25px;letter-spacing:-1px;font-style:italic}
.brand-wave{position:relative;width:47px;height:19px;display:inline-block;background:linear-gradient(135deg,transparent 37%,#09b7ca 38% 51%,transparent 52%)}
.brand-wave:after{content:"";position:absolute;left:5px;top:7px;width:39px;height:16px;background:linear-gradient(135deg,transparent 37%,#32d6d1 38% 51%,transparent 52%)}
.ad-shell{position:relative;margin:34px auto 20px;width:calc(100% - 30px);min-height:280px;border-radius:22px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#bfeeff 0,#dff8ff 55%,#48d7df 56%,#0bbad0 72%,#f2d58d 73%,#e9bf6b 100%);box-shadow:0 10px 25px rgba(20,121,160,.15)}
.ad-shell:before,.ad-shell:after{content:"";position:absolute;pointer-events:none}
.ad-shell:before{left:-10%;right:-10%;bottom:50px;height:42px;background:radial-gradient(80px 20px at 12% 100%,rgba(255,255,255,.8) 98%,transparent 100%),radial-gradient(110px 24px at 42% 100%,rgba(255,255,255,.65) 98%,transparent 100%),radial-gradient(95px 22px at 78% 100%,rgba(255,255,255,.75) 98%,transparent 100%)}
.ad-shell:after{right:7%;top:24px;width:40px;height:56px;border-radius:50% 50% 10% 10%;background:linear-gradient(90deg,#fff 0 38%,#18b9c9 39% 52%,#fff 53%);box-shadow:0 0 0 4px rgba(255,255,255,.35)}
.ad-label{position:absolute;z-index:1;top:26px;color:#28598b;font-size:20px;font-weight:bold;letter-spacing:.3px;text-shadow:0 1px #fff}
.ad-unit{position:relative;z-index:2;min-width:300px;min-height:250px;display:flex;align-items:center;justify-content:center}
.ad-unit:empty:after{content:"300 × 250";position:absolute;top:58px;color:#39709c;font-size:15px;font-weight:bold}
.home-nav{margin:16px 12px 24px;display:flex;gap:8px;overflow:visible}
.home-nav li{float:none;flex:1;width:auto}
.home-nav li a{width:auto;height:82px;margin:0;padding:8px 3px 0;background:#fff;border:1px solid #d7edf7;border-radius:15px;box-shadow:0 6px 15px rgba(31,111,148,.1);line-height:20px;font-size:12px;font-weight:bold;color:#173d70;box-sizing:border-box}
.home-nav li a span{display:flex;align-items:center;justify-content:center;width:42px;height:38px;margin:0 auto 4px;border-radius:10px;color:#fff;font-size:21px;background:linear-gradient(135deg,#ff7c88,#e9516c)}
.home-nav .nav-strategy a span{background:linear-gradient(135deg,#aa8cff,#745ee5)}
.home-nav .nav-racing a span{background:linear-gradient(135deg,#27d9e4,#0996c5)}
.home-nav .nav-sports a span{background:linear-gradient(135deg,#55dc79,#17aa61)}
.home-nav .nav-casual a span{background:linear-gradient(135deg,#ffc951,#f39a20)}
.home-section{padding:0 14px 12px;overflow:visible}
.home-section .hd{overflow:visible;margin:6px 0 12px}
.home-section .hd .over{height:42px;line-height:42px;border:0;background:transparent;position:relative}
.home-section .hd .over:after{content:"";position:absolute;left:190px;right:90px;top:20px;height:7px;background:linear-gradient(165deg,transparent 0 25%,#9eeaf1 26% 45%,transparent 46% 60%,#c9f3f6 61% 76%,transparent 77%)}
.home-section .hd .over h2{position:relative;z-index:1;display:inline-block;padding-left:38px;color:#123a73;font-size:25px;line-height:42px;letter-spacing:-.5px}
.home-section .hd .over h2:before{content:"";position:absolute;left:0;top:10px;width:28px;height:23px;border-radius:5px 1px 8px 1px;transform:skew(-18deg);background:linear-gradient(135deg,#17d4da,#0298bd)}
.home-section .hd .over .more{position:relative;z-index:2;float:right;margin:0;color:#00a9c3;font-size:14px;font-weight:bold}
.home-games{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin:0;overflow:visible}
.home-games li{float:none;width:auto;padding:0 0 10px;border:0;border-radius:17px;overflow:hidden;text-align:left;background:#fff;box-shadow:0 7px 18px rgba(22,99,139,.13)}
.home-games li:nth-child(n+7){display:none}
.home-games li>a:first-child{display:block;height:118px;overflow:hidden}
.home-games li img{width:100%;height:100%;margin:0;border-radius:0;object-fit:cover;transform:scale(1.03);transition:transform .25s ease}
.home-games li:hover img{transform:scale(1.08)}
.home-games li h3{height:24px;line-height:24px;margin:8px 10px 0;font-size:15px;font-weight:bold;text-transform:capitalize;white-space:nowrap;text-overflow:ellipsis}
.home-games li h3 a{color:#123a73}
.home-games li p{display:inline-block;height:18px;line-height:18px;margin-left:10px;color:#62839c;font-size:11px}
.home-games li p:nth-of-type(2){display:none}
.home-games li .btn_down{float:right;width:auto;height:22px;line-height:22px;margin:0 10px 0 4px;padding:0 10px;background:#e4f8fb;color:#0499b6;border-radius:12px;text-align:center;font-weight:bold}
.ad-shell-middle{margin-top:13px}
.home-news{padding:0;margin:0}
.home-news dt ul{margin:0}
.home-news dt li{display:flex;gap:14px;margin-bottom:14px;padding:0;border:0;border-radius:17px;overflow:hidden;background:#fff;box-shadow:0 7px 18px rgba(22,99,139,.12)}
.home-news dt li>a{flex:0 0 42%}
.home-news dt li img{float:none;width:100%;height:130px;margin:0;object-fit:cover}
.news-copy{padding:12px 12px 10px 0}
.home-news dt li h3{max-height:44px;font-size:16px;line-height:22px;font-weight:bold}
.home-news dt li h3 a{color:#123a73}
.home-news dt li p{max-height:48px;margin:4px 0 5px;line-height:16px;color:#5d7d95;font-size:12px}
.home-news dt li span{color:#04a4bd;font-size:11px;font-weight:bold}
.footer-breeze{position:relative;margin-top:15px;padding:65px 16px 24px;text-align:center;color:#375f7d;background:linear-gradient(180deg,#dff8ff,#bfeef7);overflow:hidden}
.footer-breeze:before{content:"";position:absolute;left:-5%;right:-5%;top:0;height:58px;background:radial-gradient(100px 26px at 12% 0,#fff 98%,transparent 100%),radial-gradient(130px 30px at 45% 0,#fff 98%,transparent 100%),radial-gradient(110px 27px at 80% 0,#fff 98%,transparent 100%)}
.footer-breeze:after{content:"";position:absolute;left:-10%;right:-10%;bottom:-25px;height:65px;background:radial-gradient(130px 35px at 15% 0,#14c6d4 98%,transparent 100%),radial-gradient(180px 40px at 55% 0,#42d7dd 98%,transparent 100%),radial-gradient(150px 38px at 88% 0,#0aaac3 98%,transparent 100%);opacity:.5}
.footer-links{position:relative;z-index:1;margin-bottom:16px}
.footer-links a{display:inline-block;padding:0 10px;color:#153d70;font-size:12px;font-weight:bold;border-right:1px solid #79b8cd}
.footer-links a:last-child{border:0}
.footer-breeze strong,.footer-breeze p{position:relative;z-index:1;display:block}
.footer-breeze strong{color:#00a6bd;font-size:14px}
.footer-breeze p{margin-top:8px;font-size:11px}

@media (min-width:600px){
  .brand{font-size:29px}.home-nav{gap:13px}.home-nav li a{height:92px;padding-top:10px;font-size:14px}.home-nav li a span{width:54px;height:45px}
  .home-games{grid-template-columns:repeat(3,minmax(0,1fr))}.home-games li>a:first-child{height:135px}.home-news dt li img{height:150px}
}

@media (max-width:390px){
  .brand{font-size:22px}.brand-wave{width:40px}.ad-shell{width:calc(100% - 16px);border-radius:16px}.home-nav{gap:5px;margin-left:7px;margin-right:7px}.home-nav li a{font-size:10px}.home-section{padding-left:8px;padding-right:8px}.home-section .hd .over h2{font-size:22px}.home-games{gap:9px}.home-games li>a:first-child{height:102px}.home-news dt li>a{flex-basis:38%}.home-news dt li img{height:138px}.news-copy{padding-right:8px}
}