html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
/*resets*/
html { font-size: 12px; }
h1, h2, h3, h4, h5, h6, p, a, button, table, div, ul, li, textarea, input { font-family: 'Open Sans', '微軟正黑體', Arial, Helvetica, sans-serif, 'STHeiti Light', '儷黑 Pro', 'LiHei Pro', 'Microsoft Yahei', 'Microsoft JhengHei', '新細明體'; }
a { text-decoration: none; outline: none; /* for Firefox Google Chrome  */  behavior:expression(this.onFocus=this.blur()); /* for IE */}
input[type=submit],input[type=reset],input[type=button],input[type=text],input[type=password],textarea{-webkit-appearance:none;}
iframe[name=google_conversion_frame]{ display: none;}
:focus {outline: none;}
/*end resets*/

/*header*/
.header{height: 65px; background:#fff; padding-top: 20px; width: 100%; z-index: 99; position: fixed; top: 0px; box-shadow: 0 3px 6px rgba(0,0,0,.1);}
.container{width: 1100px; margin: 0 auto; position: relative;}
.container:after{content: ''; width: 100%; height: 0; clear: both; display: block;} 
.logo{float: left; margin-left: 20px;}
.logo a img{-webkit-transition: all .3s ease; transition: all .3s ease;}
.hd-right{float: right;}
.hd-right > ul > li{display: inline-block;}
.hd-right > ul > li > a{color: #333; font-size: 15px;}
.hd-right .lang{text-align: right;}
.hd-right ul.lang li a{font-size: 13px; margin-left: 10px;}
.hd-right ul.lang li a.active{text-decoration: underline;}
.hd-right ul.lang li a:hover{color: #999;}
.hd-right ul.nav{margin-top: 20px;}
.hd-right ul.nav > li{margin-left: 30px; position: relative; font-weight: bold; padding-bottom: 22px;}
.hd-right ul.nav > li > a:hover{color: #111076;}
.hd-right ul.nav ul.sub-nav{position: absolute; left: 0; top: 30px; background: #f2efef; border-top:3px solid #00b4b3; display: none;}
.sub-nav li{min-width: 150px; height: 36px; line-height: 36px; border-top:1px solid #dcdadb;}
.sub-nav li a{display: block; padding: 0 20px; white-space: nowrap;}
.sub-nav li:first-child{border-top:none;}
.sub-nav li a{color: #333; font-size: 14px; font-weight: normal;}
.sub-nav li a:hover{background: #fff; color: #00b4b3;}

/*main banner*/
.main-bn{width: 100%; height: 500px; background: url(http://wbc2017.pbplus.me/img/main_bn2.jpg) no-repeat top center; overflow-x: hidden; margin-top: 100px;}
.main-bn img{display: block; margin: 0 auto;}

/*content*/
.main-content{margin-top: 50px;}
.content-left{width: 780px; float: left;}
.content-right{width: 300px; float: right;}
.content1{margin: 0 auto; width: 1100px;}
.content2{width: 550px;padding:2px 0px 0px 0px;}
.menu-grid{margin-bottom: 20px; overflow: hidden;}
.menu-grid > a[class^=mg]{width: 180px; display: block; margin-left: 20px; padding: 40px 0; text-align: center; box-sizing: border-box; border:1px solid #d1d2d3; float: left; color: #333; -webkit-transition: all .3s ease; transition: all .3s ease;}
.menu-grid > a[class^=mg]:first-child{margin-left: 0;}
.menu-grid > a[class^=mg]:hover{opacity: .6;}
.menu-grid > a[class^=mg] i{width: 72px; height: 72px; display: inline-block; background: url(http://wbc2017.pbplus.me/img/icon_sprite.png) no-repeat;}
.menu-grid > a[class^=mg]:hover i{-webkit-transform:rotateY(360deg); -ms-transform:rotateY(360deg); transform:rotateY(360deg); -webkit-transition: all .4s ease; transition: all .4s ease;}
.menu-grid > a[class^=mg].mg-rules i{background-position: -82px 0;}
.menu-grid > a[class^=mg].mg-traffic i{background-position: -164px 0;}
.menu-grid > a[class^=mg].mg-result i{background-position: -246px 0;}
.menu-grid > a h2{font-size: 15px; margin: 5px 0;}
.menu-grid > a b{color: #888;}
.four-grid{overflow: hidden;}
.four-grid > div{width: 385px; float: left; margin-bottom: 25px;}
.four-grid > div:nth-child(2n+1){margin-right: 10px;}
.four-grid > div > a{-webkit-transition:all .3s ease; transition:all .3s ease;}
.four-grid > div > a:hover{opacity: .75;}
.main-title{font-size: 20px; color: #222; font-weight: bold; margin-bottom: 8px;}
.main-title i{width: 25px; height: 26px; display: inline-block; background: url(http://wbc2017.pbplus.me/img/title_icon.png) no-repeat; vertical-align: -4px; margin-right: 10px;}
.news-grid li{border-bottom: 1px solid #ccc; padding-bottom: 10px; margin: 19px 0 10px;}
.news-grid a{color: #333; font-size: 16px;}
.news-grid a:hover span{color: #2c6c93;}
.news-grid a:hover i{-webkit-transform:translateX(10px); -ms-transform:translateX(10px); transform:translateX(10px); opacity: .7;}
.news-grid a span{display: inline-block; margin-right: 15px; width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.news-grid a i{width: 21px; height: 21px; display: inline-block; background: url(http://wbc2017.pbplus.me/img/more_icon.png) no-repeat; vertical-align: 1px; -webkit-transition:all ease .4s; transition:all ease .4s;}
.ad_300x210 a img, .fb-fans a img{display: block; -webkit-transition: all .3s ease; transition: all .3s ease;}
.ad_300x210 a:hover img, .fb-fans a:hover img{opacity: .7;}
.side-slider{width: 300px; height: 455px; margin: 20px 0;}
.sponsor{clear: both;}
.sponsor ul li{float: left; margin: 0 22px;}
.sponsor ul li a:hover img{opacity: .6;}
.footer{height: 200px; margin-top: 80px; position: relative; background: #111076; background: -webkit-linear-gradient(left, #00b4b3 20%, #ebcb9c); background: -o-linear-gradient(right, #00b4b3 20%, #ebcb9c);  background: -moz-linear-gradient(right, #00b4b3 100%, #ebcb9c); background: linear-gradient(to right, #00b4b3 20%, #ebcb9c);}
.f-logo{position: absolute; right: 60px; top: 40px;}
.ft-text{float: left; color: #fff; font-size: 14px; width: 390px; margin-top: 40px;}
.ft-text p{line-height: 22px;}
.copyrights{background: #222; color: #fff;}
.copyrights .container{text-align: center; font-size: 13px; line-height: 32px; height: 32px;}

/*news*/
.news-content{min-height: 600px; margin-top: 130px; padding: 0 30px; box-sizing: border-box;}
h3.topic{font-size: 24px; color: #111076; font-weight: bold; border-bottom: 1px solid #ddd; padding-bottom: 15px; margin-bottom: 20px;}
h3.topic span{font-size: 16px; color: #111076; margin-left: 10px; font-weight: normal;}
.news-list{overflow: hidden; box-sizing: border-box; padding: 0 30px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #ddd;}
.news-list .nl-pic{float: left; width: 250px; margin-right: 30px;}
.news-list .nl-pic a:hover img{opacity: .6;}
.news-list img{width: 250px; height: auto; -webkit-transition: all ease .3s; -moz-transition: all ease .3s; transition: all ease .3s;}
.news-list .nl-info{float: left; width: 700px;}
.news-list .nl-info h4 a{font-size: 20px; color: #333;}
.news-list .nl-info h4 a:hover{color: #999;}
.news-list .nl-info b{font-size:16px; color: #555; margin: 5px 0; display: inline-block;}
.news-list .nl-info p{color: #888; font-size: 15px; line-height: 22px; max-height: 110px; overflow: hidden;}
.pagination{text-align: center; margin-top: 35px;}
.pagination ul li{display: inline-block; margin: 0 2px;}
.pagination ul li a{display: block; box-sizing: border-box; border:1px solid #e3e3e3; padding: 6px 10px; color: #333;}
.pagination a.active, .pagination a:hover{color: #fff; background: #00b4b3; border-color:#00b4b3;}
.news-detail-col, .games-detail-col{text-align: center;}
.news-detail-col img, .games-detail-col img{display: block; margin: 0 auto;}
.news-detail-col h4, .games-detail-col h4{font-size:24px; line-height: 22px; color: #333;}
.news-detail-col > b{font-size: 18px; background: #eaf5f4; border-radius: 3px; color: #0eb4b3; display: inline-block; padding: 5px 15px; margin: 15px 0;}
.news-detail-col > p{width: 750px; margin: 0 auto; font-size: 15px; color: #666; line-height: 28px; margin-top: 20px; text-align: left;}
.games-detail-col > p{font-size: 15px; color: #666; line-height: 28px; margin-top: 20px; text-align: left;}
.btn-green{font-size: 17px; background: #fff; border:1px solid #19b4b3; color: #19b4b3; border-radius: 5px; margin-top: 35px; display: inline-block; padding: 10px 80px; -webkit-transition: all ease .3s; transition: all ease .3s;}
.btn-green:hover{background: #19b4b3; color: #fff; box-shadow: 0 0 15px rgba(235, 203, 156, .75);}
.table-style{width: 750px; margin: 0 auto; margin-top: 35px;}
.table-style table{border-collapse: collapse; width: 100%;}
.table-style h5{text-align: left; font-size: 20px; color: #0eb4b3; margin-bottom: 6px; font-weight: bold;}
.table-style th, .table-style td{font-size: 16px; text-align: center; vertical-align: middle; padding: 12px 15px; border:2px solid #fff;}
.table-style th{background: #0eb4b3; color: #fff; min-width: 100px;}
.table-style td{color: #555; background: #f4f4f4;}
.table-style em, .table-style b{display: block;}
.table-style p{font-size: 15px;}
.games-detail-col img.fux{display: inline-block; vertical-align: -24px; width: 100px; margin:10px 10px;}
.games-detail-col .dmx{text-align: left; list-style: decimal inside; margin: 0 0 30px 30px;}
.games-detail-col .dmx li{font-size: 15px; color: #888; margin: 10px 0; color: #07a6a5;}
.games-detail-col .dmx li p{margin: 5px 0;}
.games-detail-col .table-style{width: 100%; margin-top: 10px;}
.alignLeft{text-align: left !important;}
.warning-text{color: #e22525 !important;}
.links{color: #16a0f8;}
.trump-wins{color: #222; font-size: 16px; font-weight: bold;}
.bg-light{background: #eaf5f4; padding: 15px; border-radius: 3px; margin: 15px 0;}
.games-detail-col .dmx li p.marginB{margin-top: 15px;}
.maps{width: 100%; height: auto; margin-bottom: 35px !important; display: block;}
.clips{margin-bottom: 60px;}
.clips h3{font-size: 24px; color: #444; margin-bottom: 15px;}
.games-detail-col .albums ul li{width: 32%; float: left; margin-left: 2%; margin-bottom: 2%;}
.games-detail-col .albums ul li:nth-child(3n+1){margin-left: 0;}
.games-detail-col .albums ul:after{content: ''; display: block; clear: both; height: 0;}
.games-detail-col .albums li a{display: block; background: #000;}
.games-detail-col .albums li a img{margin: inherit; width: 100%; height: auto; opacity: .5; -webkit-transition: opacity ease .3s; transition: opacity ease .3s;}
.games-detail-col .albums li a:hover img{opacity: 1;}
.tobe{width: 443px; height: 187px; margin: 0 auto; padding-top: 220px;}
.bnEn{width: 100%; height: auto;}
.qa-col h4{margin-top: 45px; padding-top: 45px; border-top:1px solid #ddd;}
.qa-col h4:first-child{margin-top: 0px; border-top:none;}
.btnArea{text-align: center;}
.btnArea a{margin: 35px 10px;}
.btn-enter{font-size: 18px; position: absolute; right: 175px; top: 255px; background: rgba(255,255,255,.75); border:1px solid #19b4b3; color: #19b4b3; border-radius: 5px; margin-top: 35px; display: inline-block; padding: 14px 75px; -webkit-transition: all ease .3s; transition: all ease .3s;}
.btn-enter:hover{background: #19b4b3; color: #fff; border-color: #19b4b3; box-shadow: 0 0 10px rgba(255,255,255,.75);}
.fyi{text-align: center; margin-top: 15px; color: #19b4b3; font-size: 16px;}
.btn-enter i{display: inline-block; width: 8px; height: 14px; background:url(http://wbc2017.pbplus.me/img/arrow.png) no-repeat left top; margin-right: 8px;}
.btn-enter:hover i{background-position: right top;}
.arrow-link{width: 28px; height: 20px; background: url(http://wbc2017.pbplus.me/img/arrow_url.png) no-repeat; display: inline-block; opacity: .5; -webkit-transition: all ease .3s; transition: all ease .3s;}
.arrow-link:hover{opacity: 1;}
.table-hotel{border:1px solid #e8e8e8;}
.table-hotel.table-style th{border:none;}
.table-hotel.table-style td{border:none; border-right:1px solid #e8e8e8;}
.table-hotel tr:nth-child(even) td{background: #fff;}
.lazy-title{font-size: 20px; color: #444; margin: 60px 0 10px; text-align: left; background: #ffefdc; color: #ffab44;}
.lazy-title span{color: #fff; background: #ffab44; border-radius: 3px 0 0 3px; padding: 10px 15px; margin-right: 15px; display: inline-block;}
.lazy-title:first-child{margin-top: 20px;}
.result-col{margin-top: 30px;}
.result-col ul li{display: inline-block;}
.result-col ul li a{display: block; box-sizing: border-box; border-bottom: 4px solid #068982; background: #111076; color: #fff; font-size: 17px; text-align: center; width: 160px; line-height: 40px; height: 40px; margin: 0 10px;}
.result-col ul li a:hover, .result-col ul li a.active{background: #111076;}
.result-content{box-sizing: border-box; background: #fff; border:20px solid #e7f9f7; margin-top: 30px;}
.result-content .btn-green{margin: 30px 0 45px;}
.result-content > div{display: none;}
.text-focus{color: #f71010;}

/*en ver*/
.container.en-contnet{width: 1250px; margin-top: 100px;}

/*count down*/
div.countdown-timer {display: inline-block; position: absolute; right: 75px; top: 160px; width: 460px; height: 80px; background-color: rgba(255, 255, 255, 0);}
div.countdown-timer img.countdown-timer-background {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
div.countdown-timer canvas.countdown-timer-numbers {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

/*mobile*/
@media screen and (min-width: 200px) and (max-width: 1100px) {
.header, .main-bn, .container, .footer, .copyrights{width: 1100px;}
}