/* ===================== LAYOUT ===================== */ /* ==================================== General ==================================== */ html, body { margin:0; padding:0; border:0; font-size:12px; line-height:1.2em; color:#fff; font-family: Arial, sans-serif; vertical-align:baseline; } :lang(cn) {font-family: 'Noto Sans SC','Microsoft Jhenghei';} :lang(tw) {font-family: 'Noto Sans TC','Microsoft Jhenghei';} header { font-family: Arial,'Microsoft Jhenghei','Noto Sans SC','Noto Sans TC',sans-serif; vertical-align:baseline; } body { height:auto; overflow-y:scroll; -webkit-text-size-adjust: none; background-color:#313131; width:100%; } body * { outline:none; } table { border-collapse:collapse; border-spacing:0; width:100%; } td { vertical-align:top; } ol, ul { list-style:none; margin:0; padding:0; } dl, dt, dd { margin:0; padding:0; } a { margin:0; padding:0; border:0; text-decoration:none; color:#fff; word-wrap: break-word;} a:hover { text-decoration: none; color:#ff6600; } a:focus { text-decoration: none; color:#0ea1ce; } a img { border:none; } .anchor { margin-top: -153px!important; padding-top: 153px!important; z-index:1;} h1,h2,h3,h4,h5,h6 { font-weight:normal; margin:0; padding:0; } strong { font-weight:bold; } em { font-style:italic; } .hide { display: none; } .left { float:left;} .right { float:right; } .clearfix { zoom:1; } .clearfix:after { content:"."; display:block; clear:both; width:0px; height:0px; visibility:hidden; font-size:0; } .grey { color:#999999; } .mobile { display: none; } .only-desktop { display:block!important; } .only-mobile { display:none!important; } /* ==================================== Structure ==================================== */ #wrap { padding: 0; position:relative; padding-top:153px; } #mobile-plane { position:absolute; top:0; left:0; width:100%; height:100%; cursor:pointer; background:url('../img/bg-black-50.html') 0 0 repeat; z-index:999; display:none; } /* header */ #wrapper-header { width:100%; height:auto; position:fixed; top:50px; background-color:#ff6600;} #header { position:relative; margin:0 auto; max-width:1130px; height:100px; } /* logo */ #logo { width:162px; height:53px; position:absolute; top:24px; left: 60px; background:url('../img/ag_logo.html') center center no-repeat;} #logo a { display:block; } #logo img { width:100%; } /* language */ #language-desktop { display:none; float:none; position:absolute; width: 85px; margin:0; padding-top: 5px; background-color:#08617c; z-index: 1001;} #language-desktop>li { display:block; float:none; margin: 0 auto; } #language-desktop>li:first-child { margin:0; } #language-desktop>li>a { display:block; color:#76e0ff; font-size:12px; border-top: 1px solid #064a5f; padding: 14px 8px; /*padding: 12px 10px;*/ margin: 0 auto; text-align:center } #language-desktop>li>a:hover { color:#fff; } /* main menu */ #menu { position:absolute; bottom:8px; right:30px; z-index:1000; } #menu>ul { display:block; } #menu>ul>li { display:block; color:#fff; float:left; margin:0 0 0 64px; /*margin:0 0 0 84px;*/} #menu>ul>li:first-child { margin:0; } #menu>ul>li>a { display:block; font-size:16px; box-sizing:border-box; color:#fff; padding: 0px 0 14px; } #menu>ul>li>a:hover { color: #fff; border-bottom: solid 2px #fff; padding: 0px 0 18px; display:inline; list-style-type:none; list-style-position: inside; text-decoration:none;} #menu>ul>li>a:active { color: #fff; border-bottom: solid 2px #fff; padding: 0px 0 18px; display:inline; list-style-type:none; list-style-position: inside; text-decoration:none;} #menu>ul>li>ul { position: absolute; top: 39px; display:none; /*margin-left: -20px;text-align:center;*/} #menu>ul>li>ul>li { float:none; } #menu>ul>li>ul>li>a { display:block; padding: 12px 20px; font-size:16px; color:#76e0ff; background-color:#08617c; border-top: 1px solid #064a5f;/*border-left: solid 1px #fff;*/ } #menu>ul>li>ul>li:first-child>a { border-left:none;} #menu>ul>li>ul>li>a:hover { color:#fff; /*border-bottom: solid 2px #fff;*/ } #menu-bg { position:absolute; width:100%; height:34px; background-color:transparent; top:100%; z-index:999; display:none; } /* select lang */ .popup-plane { position:absolute; top:0; left:0; width:100%; height:100%; cursor:pointer; background:url('../img/bg-black-50.html') 0 0 repeat; z-index:1099; display:none; overflow: hidden;} .wrapper-selectlang-menu { position: fixed; top: 15%; width: 100%; overflow: auto; z-index: 1100;} .selectlang-plane { width: 100%; height:auto; position:relative; } .selectlang-menu { position:relative;margin: 0 auto; max-width: 934px; min-height: 312px; overflow: auto; background-color:#08617c; color:#76e0ff; text-align:center; font-size:14px;background-image:url('../global/map.html');background-position:90% center;background-repeat:no-repeat;background-size:39%;text-align:left;padding:0 20px 0 40px;} .selectlang-menu .langblock.first:after{ content:""; display:block; height:200%; position:absolute; right:20px; top:10%; border-right:1px solid; } .selectlang-menu span { display:inline-block;} .selectlang-menu span: .selectlang-menu span a, .selectlang-menu span a:hover { color:#fff; } .selectlang-menu .langblock { position:relative; text-align: left; display:inline-block; vertical-align: top;padding:0 10px;} .selectlang-menu .langblock.first {padding-right:50px;} .selectlang-menu .langblock span.langselect {display:block;margin-bottom:20px;} .selectlang-menu .langselect:hover a, .selectlang-menu .lang-selected.selected{/*text-shadow:-1px 0 2px rgb(179,237,247), 0 1px 2px rgb(179,237,247), 1px 0 2px rgb(179,237,247), 0 -1px 2px rgb(179,237,247);*/color:#44e7ff;} /*.selectlang-menu .langblock {padding-right:20px;}*/ .selectlang-menu .langblock div { padding: 5px;} .selectlang-menu .langenter { display:block;margin-top: 0px;margin-left:15px;} .selectlang-menu .lang-selected { font-size: 18px;} .selectlang-menu .title { font-weight: normal; margin-bottom: 30px; } .selectlang-menu .others { margin: 0 40px 0 0; } .selectlang-menu .sep-line { background-color:#1d738d; margin: 30px 70px;} .selectlang-menu .closed { text-align: right; padding: 18px 0px 18px 18px; font-size: 18px; cursor: pointer; color: #76e0ff;} .selectlang-menu .readmorex { margin-bottom: 25px; padding:10px 37px 10px 20px;} /* slide menu */ .mobile-menu-btn { position: absolute; top: 11px; right:30px; width: 20px; height: 30px; display: none; background:url('../img/mobile-menu-btn.html') center center no-repeat; cursor: pointer; } .mobile-menu-btn.active { background:url('../img/mobile-menu-btn.html') center center no-repeat; } .wrapper-slide-menu { position: fixed; top: 50px; width: 100%; overflow: auto; z-index: 1010;} .slide-menu { width: 100%; height:auto; position:relative; display:none; } .slide-menu>li { display:block; position:relative; border-top: #8cc8d9 solid 1px; } .slide-menu>li>span { display:block; position:absolute; right:0; top:0; width:79px; height:44px; cursor:pointer; background:url('../img/mobile-menu-arrow-down.html') center center no-repeat; text-align:center; } .slide-menu>li>span.active { background:url('../img/mobile-menu-arrow-up.html') center center no-repeat; } .slide-menu>li>a { display:block; color:#ff6600; background-color:#fff; padding: 15px 0; font-size:15px; text-align:center; } .slide-menu>li>a:hover { color:#25b0d9; } .slide-menu>li>ul { display:none; } .slide-menu>li>ul>li { display:block; border-top: #8cc8d9 solid 1px; } .slide-menu>li>ul>li>a { display:block; background-color:#08617c; color: #76e0ff; padding: 15px 0; font-size:14px; text-align:center; } .slide-menu>li>ul>li>a:hover { color:#fff; } /* mobile language */ #language-mobile { padding: 15px 0; text-align:center; font-size:14px; background-color:#08617c; color:#76e0ff!important;} #language-mobile a { color:#76e0ff!important;} #language-mobile span { display:inline-block; margin: 0 10px; vertical-align:top;} #language-mobile span a:hover { color:#fff!important;} #language-mobile>ul>li { display:block; border-top: #8cc8d9 solid 1px; margin-top:15px; padding-top: 15px; vertical-align:bottom;} #language-mobile>ul>li a { color:#76e0ff!important;} #language-mobile>ul>li a:hover { color:#fff!important;} #language-mobile .mail { width:25px; height: 16px; margin: 0; background:url('../img/top/top_mail.html') center center no-repeat; } #language-mobile .mail:hover { width:25px; background:url('../img/top/top_mail_v.html') center center no-repeat; } /* bottom */ #wrapper-bottom { position:relative; margin:0 auto; max-width:1130px; } #bottom { text-align:center; margin: 0 10px; padding: 25px 0 25px; } #bottom h3 { text-transform:uppercase; margin: 0 0 20px 0; } #bottom ul { display:inline-block; } #bottom ul>li { display:block; float:left; margin: 0 0 0 15px; } #bottom ul>li:first-child { margin:0; } #bottom ul>li>a { display:block; width:40px; height:40px; } #bottom ul>li>a.facebook { background:url('../img/icon-facebook.html') center top no-repeat; } #bottom ul>li>a.utube { background:url('../img/icon-utube.html') center top no-repeat; } #bottom ul>li>a:hover { background-position:bottom; } /* ===================== SHARING ===================== */ /* grid */ .full { width:100%; } .half { width:50%; } .one_third { width:33.33%; } .two_third { width:66.66%; } .forty { width:40%; } .sixty { width:60%; } /* sep */ .sep-10 { height: 0px; clear:both; padding: 5px 0; } .sep-15 { height: 0px; clear:both; padding: 8px 0 7px; } .sep-0 { height: 0px; clear:both; padding: 0 0; } .sep-for-4 { height: 0px; clear:both; padding: 0 0; } .sep-for-3 { height: 0px; clear:both; padding: 0 0; } .sep-for-2 { height: 0px; clear:both; padding: 0 0; } .sep-line { height: 1px; clear:both; padding: 0 0; margin: 0 10px 0 0; background-color:#fff; } /* heading */ h1 { font-size: 48px; } h2 { font-size: 36px; } h3 { font-size: 16px; } h4 { font-size: 12px; } h1,h2,h3,h4 { line-height:1.2em; margin:0; color:#333; display:block; } /*p { font-size:14px; line-height:1.2em; margin:0; color:#333; }*/ hr { padding:0; height:1px; border:0; width: 100px; margin: 1em 0; background-color: #fff; text-align:left; } /* form */ dl { padding:0; } dl dt { width:20%; float:left; padding:2px 0; text-transform:uppercase; } dl dd { width:80%; float:left; } select { border:none; /*background:#606 url('../img/bg-purple-80.png') 0 0 repeat; */ color:#606; padding:2px 10px; -webkit-appearance: menulist; } input[type=text], textarea { padding:2px 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width:100%; border:#cccccc solid 1px; color:#333; background:#e3e3e3; } textarea { height:130px;} input[type=text].error, textarea.error { border: #65b280 solid 1px; } .error-msg { color:#65b280; font-size:14px; } /* pager */ .pager { margin:0 0 0 0 !important; padding:0; } .pager li { float:left; margin:0 0 0 5px; padding:0; list-style:none; } .pager li:first-child { margin:0; } .pager a { display:block; width:22px; text-align:center; font-size:11px; color:#606; background:url('../img/bg-white-50.html') 0 0 repeat; border:1px solid #c2bfa4; padding-top:1px;} .pager a:hover, .pager a.active { background:url('../img/bg-purple-80.html') 0 0 repeat; color:#fff;} .pager a.first, .pager a.prev, .pager a.next, .pager a.last { background:url('../img/pager.html') no-repeat; text-indent:-9999px;} .pager a.first { background:url('../img/pager.html') no-repeat left top;} .pager li:hover a.first { background-position:left bottom;} .pager a.prev { background:url('../img/pager.html') no-repeat -20px top;} .pager li:hover a.prev { background-position:-20px bottom;} .pager a.next { background:url('../img/pager.html') no-repeat -40px top;} .pager li:hover a.next { background-position:-40px bottom;} .pager a.last { background:url('../img/pager.html') no-repeat right top;} .pager li:hover a.last { background-position:right bottom;} /* buttons */ .button-warp { padding: 0; position: relative; text-align:left; } .button { display:inline-block; padding: 2px 26px; color:#333; border:solid 1px #333; text-transform:uppercase; } .button:hover { border:solid 1px #fff; color:#fff; background-color:#333; } /* misc */ .mailto { color: #25b0d9!important;} .readmore, .readmorex { background:url(../img/home_arrow_bk.html) right 15px center no-repeat #fff; color: #14476e; font-size: 14px; font-family: Microsoft JhengHei, Arial; padding: 16px 50px; border:1px solid #fff; display: inline-block; position:relative; z-index: 2;} a.readmore, a.readmorex { color: #14476e; text-decoration: none;} a.readmore:hover { color: #666;} blockquote { border: 0;} /* ===================== MODULES ===================== */ /* ==================================== Homepage ==================================== */ /* media */ #wrapper-media { position:relative; } #wrapper-media .more-contents { height: 6px; background-color:#ff6600; position:relative; overflow:visible; z-index:998; text-align: center; } #wrapper-media .more-contents>span { display:inline-block; width:120px; height:50px; position:absolute; background:url('../img/home-more-btn.html') center bottom repeat-x; padding: 10px 10px 20px 10px; cursor:pointer; bottom:6px; left:50%; margin-left:-60px; box-shadow: 0px 0px 3px #000; font-size:14px; letter-spacing:1px; } /* video */ #wrapper-video { position:relative; background-color:#eee; } #video { position:relative; max-width:1130px; margin:0 auto; } #video img { width:100%; } #video iframe { position:absolute; top:0; left:0; } /* banner */ #wrapper-banner { position:relative; background-color:#313131; display:block; /*margin-top: 153px;*/} #myCarousel { /*max-width:1130px;*/ max-width: 100%; margin:0 auto;} #myCarousel .carousel-inner>.item img { /*width: 100%; max-height: 450px;*/ margin: 0 auto;} #myCarousel .carousel-indicators { background: #fff; left:45%; width: 15%; padding: 8px 20px; margin: 0 auto; border: 1px solid #d8d8d8; opacity: 0.8;} #myCarousel .carousel-indicators li { margin: 0 5px; border:1px solid #a1a09f; width:9px; height:9px;} #myCarousel .carousel-indicators .active { background-color:#f15e21; } .carousel-control { width:5%; z-index:15;} .carousel-control.left, .carousel-control.right { background:none; } .carousel-control.left { left:10px; } .carousel-control.right { right:10px; } /* item */ .item .text { position:absolute; text-align: center; text-shadow: 1px 1px 2px #666; } .item .text img { /*width: 100%;*/ } /* new banner set */ .item .contain {position:relative; margin:0 auto; max-width:1130px; /*min-height:450px;*/} /* banner 1 */ .item.slide1 { background: url(../img/home/home1.html) no-repeat center center #a6d6ed; /*background-color: #0f143e;*/} .item.slide1 .text { top:15%; right:5%; margin-right: -35%; -webkit-animation-delay: 0.4s; } .item.slide1 .bgtext { left:-395px; -webkit-animation-delay: 0.4s;} /* banner 1 end*/ .item.slide1end { background: url(../img/home/home1-end.html) no-repeat center center #7dd5fa; /*background-color: #0f143e;*/} .item.slide1end .text { top:15%; right:5%; margin-right: -45%; -webkit-animation-delay: 0.4s; } .item.slide1end .bgtext { left:-395px; -webkit-animation-delay: 0.4s;} /* banner 2 */ .item.slide2 { background: url(../img/home/home2.html) no-repeat center center #484848; /*background-color: #0f143e;*/} .item.slide2 .text { top:12%; margin-left: 480px; -webkit-animation-delay: 0.4s; } .item.slide2 .bgtext { left:-395px; -webkit-animation-delay: 0.4s;} /* banner 3 */ .item.slide3 { background: url(../img/home/home3-bg.html) no-repeat center center #182b35; /*background-color: #0f143e;*/} .item.slide3 .text { top:9%; margin-left: 340px; -webkit-animation-delay: 0.4s; } .item.slide3 .bgtext { left:-395px; -webkit-animation-delay: 0.4s;} /* banner 4 */ .item.slide4 { background: url(../img/home/home4-bg.html) no-repeat center center #171835; /*background-color: #0f143e;*/} .item.slide4 .text { top:15%; right:5%; margin-right: -30%; -webkit-animation-delay: 0.4s; } .item.slide4 .bgtext { left:-395px; -webkit-animation-delay: 0.4s;} /* banner pocket */ .item.s-pocket { background: url(../events/e20170118/e20170118.html) no-repeat center center #851f1f; /*background-color: #851f1f;*/} .item.s-pocket .text { top:8%; margin-left: 460px; -webkit-animation-delay: 0.4s; } .item.s-pocket .bgtext { left:-395px; -webkit-animation-delay: 0.4s;} /* banner blackjack */ .item.s-bj { background: url(../img/home/bj.html) no-repeat center center #1b081c; /*background-color: #0f143e;*/} .item.s-bj .text { top:15%; margin-left: 480px; -webkit-animation-delay: 0.4s; } .item.s-bj .bgtext { left:-395px; -webkit-animation-delay: 0.4s;} /* banner live */ .item.s-live { background: url(../img/home/live.html) no-repeat center center #1e0106; /*background-color: #0f143e;*/} .item.s-live .text { top:15%; right:5%; margin-right: -30%; -webkit-animation-delay: 0.4s; } .item.s-live .bgtext { left:-395px; -webkit-animation-delay: 0.4s;} /* banner s-g2e2017 */ .item.s-g2e2017 { background: url(../img/home/s-g2e2017.html) no-repeat center center #bbc7cc; /*background-color: #0f143e;*/} .item.s-g2e2017 .text { top:15%; right:5%; margin-right: -38%; -webkit-animation-delay: 0.4s; } .item.s-g2e2017 .bgtext { left:-395px; -webkit-animation-delay: 0.4s;} /* banner s-g2e2017 end */ .item.s-g2e2017end { background: url(../img/home/redpocket2017_8_en.html) no-repeat center center #bbc7cc; /*background-color: #0f143e;*/} .item.s-g2e2017end .text { top:12%; margin-left: 400px; -webkit-animation-delay: 0.4s; } .item.s-g2e2017end .bgtext { left:-395px; -webkit-animation-delay: 0.4s;} /* banner s-redpocket2017_8 end */ .item.s-redpocket2017_8 { background: url(../img/home/s-g2e2017end.html) no-repeat center center #bbc7cc; /*background-color: #0f143e;*/} .item.s-redpocket2017_8 .text { top:12%; margin-left: 400px; -webkit-animation-delay: 0.4s; } .item.s-redpocket2017_8 .bgtext { left:-395px; -webkit-animation-delay: 0.4s;} /* banner s-ulive */ .item.s-ulive { background: url(../img/home/redpocket2017_8_en.html) no-repeat center center #263d4a; /*background-color: #0f143e;*/} .item.s-ulive .text { top:12%; margin-left: 400px; -webkit-animation-delay: 0.4s; } .item.s-ulive .bgtext { left:-395px; -webkit-animation-delay: 0.4s;} /* banner s-yoplay */ .item.s-yoplay { background: url(../img/home/yoplay.html) no-repeat center center #1166d0; /*background-color: #0f143e;*/} .item.s-yoplay .text { top:12%; margin-left: 400px; -webkit-animation-delay: 0.4s; } .item.s-yoplay .bgtext { left:-395px; -webkit-animation-delay: 0.4s;} /* banner s-livechat201709 */ .item.s-livechat201709 { background: url(../img/home/livechat201709.html) no-repeat center center #cdc5f8; /*background-color: #0f143e;*/} .item.s-livechat201709 .text { top:8%; margin-left: 750px; -webkit-animation-delay: 0.4s; } .item.s-livechat201709 .bgtext { left:-395px; -webkit-animation-delay: 0.4s;} /* banner s-mastertour */ .item.s-mastertour { background: url(../img/home/mastertour.html) no-repeat center center #2b3372; /*background-color: #0f143e;*/} .item.s-mastertour .text { top:12%; margin-left: 400px; -webkit-animation-delay: 0.4s; } .item.s-mastertour .bgtext { left:-395px; -webkit-animation-delay: 0.4s;} /* banner s-aghero */ .item.s-aghero { background: url(../img/home/aghero.html) no-repeat center center #2c006f; /*background-color: #0f143e;*/} .item.s-aghero .text { top:12%; margin-left: 500px; -webkit-animation-delay: 0.4s; } .item.s-aghero .bgtext { left:-395px; -webkit-animation-delay: 0.4s;} /* banner s-g2e2018 */ .item.s-g2e2018 { background: url(../img/home/s-g2e2018.html) no-repeat center center #bbc7cc; /*background-color: #0f143e;*/} .item.s-g2e2018 .text { top:15%; right:5%; margin-right: -38%; -webkit-animation-delay: 0.4s; } .item.s-g2e2018 .bgtext { left:-395px; -webkit-animation-delay: 0.4s;} /* banner s-g2e2018end */ .item.s-g2e2018end { background: url(../img/home/g2e2018end.html) no-repeat center center #d3eef9; /*background-color: #0f143e;*/} .item.s-g2e2018end .text { top:15%; right:5%; margin-right: -38%; -webkit-animation-delay: 0.4s; } .item.s-g2e2018end .bgtext { left:-395px; -webkit-animation-delay: 0.4s;} /* banner s-s2 */ .item.s-s2 { background: url(../img/home/s2_1920.html) no-repeat center center #25277c; /*background-color: #0f143e;*/} .item.s-s2 .text { top:15%; right:5%; margin-right: -28%; -webkit-animation-delay: 0.4s; } .item.s-s2 .bgtext { left:-395px; -webkit-animation-delay: 0.4s;} /* banner s-s2aug */ .item.s-s2aug { background: url(../img/home/s2aug_1920.html) no-repeat center center #25277c; /*background-color: #0f143e;*/} .item.s-s2aug .text { top:15%; right:5%; margin-right: -28%; -webkit-animation-delay: 0.4s; } .item.s-s2aug .bgtext { left:-395px; -webkit-animation-delay: 0.4s;} /* banner s-euhall */ .item.s-euhall { background: url(../img/home/euhall.html) no-repeat center center #fff; /*background-color: #0f143e;*/} .item.s-euhall .text { top:15%; right:5%; margin-right: -52%; -webkit-animation-delay: 0.4s; } .item.s-euhall .bgtext { left:-395px; -webkit-animation-delay: 0.4s;} /* banner s-s2sep */ .item.s-s2sep { background: url(../img/home/s2sep_1920.html) no-repeat center center #25277c; /*background-color: #0f143e;*/} .item.s-s2sep .text { top:15%; right:5%; margin-right: -28%; -webkit-animation-delay: 0.4s; } .item.s-s2sep .bgtext { left:-395px; -webkit-animation-delay: 0.4s;} /* banner s-livechat201810 */ .item.s-livechat201810 { background: url(../img/home/livechat201810.html) no-repeat center center #e7e7fd; /*background-color: #0f143e;*/} .item.s-livechat201810 .text { top:12%; margin-left: 480px; -webkit-animation-delay: 0.4s; } .item.s-livechat201810 .bgtext { left:-395px; -webkit-animation-delay: 0.4s;} /* banner s-s2nov */ .item.s-s2nov { background: url(../events/mastertour_s2/images/201811/201811_1920.html) no-repeat center center #150529; /*background-color: #0f143e;*/} .item.s-s2nov .text { top:15%; right:5%; margin-right: -28%; -webkit-animation-delay: 0.4s; } .item.s-s2nov .bgtext { left:-395px; -webkit-animation-delay: 0.4s;} /* banner s-agnw */ .item.s-agnw { background: url(../features/agnw/images/home/agnwt.html) no-repeat center center #0e0a18; /*background-color: #0f143e;*/} .item.s-agnw .text { top:15%; right:15%; margin-right: -15%; -webkit-animation-delay: 0.4s; } .item.s-agnw .bgtext { left:-395px; -webkit-animation-delay: 0.4s;} /* banner s-s2final */ .item.s-s2final { background: url(../events/mastertour_s2/images/201812/201812_1920.html) no-repeat center center #000; /*background-color: #0f143e;*/} .item.s-s2final .text { top:15%; right:5%; margin-right: -28%; -webkit-animation-delay: 0.4s; } .item.s-s2final .bgtext { left:-395px; -webkit-animation-delay: 0.4s;} /* banner s-cny2019 */ .item.s-cny2019 { background: url(../events/cny2019/images/png/banner/banner_1920.html) no-repeat center center #ff7d4a; /*background-color: #0f143e;*/} .item.s-cny2019 .text { top:0%; right:5%; margin-right: -28%; -webkit-animation-delay: 0.4s; } .item.s-cny2019 .bgtext { left:-395px; -webkit-animation-delay: 0.4s;} /* banner s-mt2019 */ .item.s-mt2019 { background: url(../events/mastertour_s2/images/201904/home/201904_bg.html) no-repeat center center #000; /*background-color: #0f143e;*/} .item.s-mt2019 .text { top:15%; right:5%; margin-right: -28%; -webkit-animation-delay: 0.4s; } .item.s-mt2019 .bgtext { left:-395px; -webkit-animation-delay: 0.4s;} /* banner s-rp201907 */ .item.s-rp201907 { background: url(../img/home/redpocket201907-1920.html) no-repeat center center #13a0cd; /*background-color: #0f143e;*/} .item.s-rp201907 .text { top:12%; right:15%; margin-right: -18%; -webkit-animation-delay: 0.4s; } .item.s-rp201907 .bgtext { left:-395px; -webkit-animation-delay: 0.4s;} /* banner s-ag2019 */ .item.s-ag2019 { background: url(../img/home/web_banner_bg.html) no-repeat center center #640E0D; /*background-color: #0f143e;*/} .item.s-ag2019 .text { top:15%; right:5%; margin-right: -28%; -webkit-animation-delay: 0.4s; } .item.s-ag2019 .bgtext { left:-395px; -webkit-animation-delay: 0.4s;} /* slide content */ .item.content .text { bottom: 60px; text-align:left; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; text-shadow: 0;} .item.content .text h1 { font-size: 48px; font-weight:bold;} .item.content .text h2 { font-size: 30px; font-weight:normal;} /* home */ #wrapper-home { width:100%; height:auto; position:relative; background-color:#313131; } #home { position:relative; margin:0 auto; max-width:1130px; padding: 20px 0px 5px; min-height:600px; overflow:hidden; } #home .wrap { margin: 0 0 0 -30px; } #home .wrap .sep-0 { height: 0px; clear:both; padding: 0 0; display:block; } #home .wrap .home { /*padding:1px;*/ margin: 0 0 30px 30px; /*padding:8px;*/ position:relative; } #home .wrap .home>h3 { display:block; position:absolute; top:0px; left:16px; font-style:italic; font-size:14px; padding: 10px 15px; } #home .wrap .home .image { text-align: center;} #home .wrap .home .image>img { /*max-width:100%;*/} #home .wrap .home h1 { float:right; color:#6d6d6d; font-size:12px; margin: 0 0 10px 0; } #home .wrap .home h2 { color:#fff; font-size:14px; font-style:italic; margin: 0 0 10px 0; letter-spacing: 2px;} #home .wrap .home h3 { font-size:20px; font-weight:bold; margin: 0 0 4px 0; } #home .wrap .home h4 { color:#fff; font-size:15px; margin:0; /*margin: 0 0 15px 0;*/} #home .wrap .home h5 { font-size:18px; font-weight:bold; margin: 0 0 4px 0; } #home .wrap .home .desc>p { color:#fff; font-size:13px; line-height:1.4em; } #home .wrap .home .desc>.home-arrow { display:inline-block; height:20px; width:20px; background:url('../img/home_arrow.html') right bottom no-repeat; margin: 10px 0 0 0; } #home .wrap .featured, #home .wrap .featured>h3, #home .wrap .featured>.desc { background-color:transparent; /*background-color:#ff6600;*/ } #home .wrap .featured .desc h3 { color:#eeab02; } #home .wrap .featured .image>img { border-bottom: 1px solid #eeab02;} #home .wrap .platform, #home .wrap .platform>h3, #home .wrap .platform>.desc { background-color:transparent; /*background-color:#25b0d9;*/ } #home .wrap .platform .desc h3 { color:#eeab02; } #home .wrap .platform .image>img { border-bottom: 1px solid #eeab02;} #home .wrap .column, #home .wrap .column>h3, #home .wrap .column>.desc { background-color:transparent; /*background-color:#11688e;*/ } #home .wrap .column .desc h3 { color:#25b0d9; } #home .wrap .column .image>img { border-bottom: 1px solid #25b0d9;} #home .wrap .events, #home .wrap .events>h3, #home .wrap .events>.desc { background-color:transparent; /*background-color:#eeab02;*/ } #home .wrap .events .desc h3 { color:#ff6600; } #home .wrap .events .image>img { border-bottom: 1px solid #ff6600;} #home .wrap .one_third .home .desc { position:relative; padding:30px 30px 20px 30px;} #home .wrap .two_third .home .desc { position:relative; bottom:0; left:0; padding:30px 30px 20px 30px; max-width:100%; } /* about */ .item.about { background: url(../img/about/about.html) no-repeat center center #000; } .item.about .text h1, .item.about .text h2 { color: #fff!important; } /* #about .timeline { position: relative; width: 100%; } #about .timeline div { } #about .timeline .year .month { position: absoulte; } #about .timeline .year .month.t2014a { position: relative; left:45%;} #about .timeline .year .month.t2014feb { position: relative; right:45%;} */ #about .timeline.container{ /* width:200px; height:200px; border:1px solid black; */ width:100%; height:100%; min-height: 1000px; position:relative; } .box{ position:absolute; /*width:20px; height:20px; */ } .box img {} .box img:hover {} .box.top{top:0} .box.middle{top:50%;margin-top:-5%;/*half of the .box height*/} .box.bottom{bottom:0} .box.middleleft{top:50%;margin-top:-5%;/*half of the .box height*/} .box.middleright{top:50%;margin-top:-5%;/*half of the .box height*/} .box.left{left:0;} .box.center{left:50%;margin-left:-5%;/*half of the .box width*/} .box.right{right:0;} .enlarge {width: 120%;} .year .box img {width: 50%;} /*.year:hover .box img {width: 100%;}*/ /*.t2014 .box{width: 90%!important; transition: all 1s ease-in 50ms;} .t2014 .box:hover {width: 100%!important;} */ .t2014 .box.t2014a{left:50%;margin-left:-135px; /*background: url('../img/about/timeline/2014.png'); background-size: cover;*/} .t2014 .box.t2014feb{left:50%;margin-left:0; /*background: url('../img/about/timeline/2014.png'); background-size: cover;*/} .t2014 .box.line{left:50%;margin-left:-18px; margin-top: 30px;} /* t2014 animation */ /* .t2014:hover .box.t2014a {margin-left:-135px; animation: fright 2s ease-out;} .t2014:hover .box.t2014feb { animation: fleft 2s ease-out; } .t2014 img {width:100%; transition: all 0.25s ease-in 1ms;} .t2014:hover .box.t2014a img {width: 110%;} .t2014:hover .box.t2014feb img {width: 110%;} */ /*.t2015 {display:none}*/ .t2015 .box.t2015feb{left:50%;margin-top: 115px; margin-left:-230px;} .t2015 .box.t2015may{left:50%;margin-top: 200px; margin-left: 5px;} .t2015 .box.t2015oct{left:50%;margin-top: 280px; margin-left:-150px;} .t2015 .box.line{left:50%;margin-left:-28px; margin-top: 310px;} /* t2015 animation */ .t2015:hover .box.t2015feb {animation: fright 1s ease-in-out;} .t2015:hover .box.t2015may {animation: fleft 1s ease-in-out;} .t2015:hover .box.t2015oct {animation: float 1s ease-in-out;} .t2015 img {width:100%; transition: all 0.25s ease-in 5ms;} @keyframes float { 0% {transform: translatey(0px);} 50% {transform: translatey(-20px);} 100% {transform: translatey(0px);}} @keyframes float2 { 0% {transform: translatey(0px);} 50% {transform: translatey(-10px);} 100% {transform: translatey(0px);}} @keyframes fleft { 0% {transform: translatex(0px);} 50% {transform: translatex(-10px);} 100% {transform: translatex(0px);}} @keyframes fright { 0% {transform: translatex(0px);} 50% {transform: translatex(10px);} 100% {transform: translatex(0px);}} @keyframes appear { 0% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 0;}} /* join */ .item.join { background: url(../img/join/join.html) no-repeat center center #d3d3d3; } .item.join .text h1, .item.join .text h2 { color: #000!important; } .item.join .vacancy { line-height: 22pt; color: #ccc; font-size: 14px; font-family: Arial, sans-serif; } #join .vacancy strong{ font-size: 16px; font-weight: bold; color: #fff; } #join .vacancy .key{ padding: 20px 0 10px 0; } #join .vacancy ul>li { margin-left: 40px; } #join .vacancy ul { list-style: none; padding:20px 0; margin:0; } #join .vacancy li { color: #dcdcdc; text-indent: -1.7em; } #join .vacancy li:before { content: "• "; font-weight: bold; padding-right: 1em; color: #dcdcdc; /* or whatever color you prefer */ } /* service */ .item.service { background: url(../img/service/service.html) no-repeat center center #0a7da0; } /*,url(../img/service/service-bg2.jpg); background-repeat: no-repeat, repeat-x; background-position: center center; background-color: #0a7da0;*/ .item.service .text h1, .item.service .text h2 { color: #fff!important; } /* mobile */ .item.mobile { background: url(../img/mobile/mobile.html) no-repeat center center #090907; } .item.mobile .text h1, .item.mobile .text h2 { color: #fff!important; } #mobile .games { padding: 30px 20px;} /* egame */ .item.egame { background: url(../img/egame/xin.jpg) no-repeat center center #300000; } .item.egame .text h1, .item.egame .text h2 { color: #fff!important; } /* live */ .item.live { background: url(../img/live/live.html) no-repeat center center #d6ae4e; } .item.live .text h1, .item.live .text h2 { color: #fff!important; } #live .gamelist h2 { font-family: 'Microsoft Jhenghei', Arial; font-weight: bold; font-size:22px; color:#fff; padding: 20px 0;} #live .gamelist span { font-family: 'Microsoft Jhenghei', Arial; font-weight: normal; font-size:16px; color:#fff; margin-left: 5px;} #live .gamelist .ico { display:inline-block; margin: 10px 5% 0 0;} #live .gamelist .logo { display:inline-block; margin: 10px 0 0 0; vertical-align:bottom;} #live .games { padding: 30px 20px;} /* inpage */ .inpage { /*padding-top: 60px; margin-left: 5%;*/} /* inpage menu */ .inpage .inmenu { /*margin:0 30px;*/ } .inpage .inmenu>ul { display:block; float:left; margin: 0 0 22px 0; } .inpage .inmenu>ul>li { display:block; margin-right: 55px} .inpage .inmenu>ul>li>a { display:inline-block; padding: 0 0 30px 0; font-size:16px; line-height:1.2em; color:#fff; position:relative; z-index:2;} /*.inpage .inmenu>ul>li:first-child>a { font-size:16px; font-weight:bold; padding: 0 0 16px 0; }*/ .inpage .inmenu>ul>li>a:hover { color: #ff6600; } .inpage .psep { height: 100%; margin: 0 70px 0 60px!important} .inpage .passage { font-face: Arial; font-size: 16px; line-height: 22px;} .inpage .passage.sep { border-left:1px solid #eeab02; padding-left: 95px;} .inpage .passage h1 { color: #eeab02; font-size:36px; margin: 0 0 35px 0; } .inpage .passage h2 { color: #ff6600; font-size:30px; margin: 0 0 20px 0; } .inpage .passage h3 { color: #25b0d9; font-size:24px; margin: 0 0 10px 0; } .inpage .passage .pt ul { margin: 15px 0 0 15px!important; /*list-style:circle!important;*/} .inpage .passage .pt ul li { text-indent: -1.7em; margin-left: 15px; } .inpage .passage .pt ul li:before { content: "• "; font-weight: bold; padding-right: 1em; color: #fff; /* or whatever color you prefer */ } .inpage .passage .licenses { width: 100%; margin: 50px 0; text-align:center;} .inpage .one_third { width: 28%;} .inpage .two_third { width: 72%;} /* .passage a { color: #25b0d9!important; text-decoration:underline!important; } .passage a:hover { color: #ff6600!important; text-decoration:underline!important;} */ /* content */ .content-padding { padding: 60px 5%; } /* hot */ .hot { padding: 0 12px; /*position: fixed;*/ margin-top: 0px; background: #313131;} .hot header { color: #fff; font-size: 14px; letter-spacing: 2px; text-align:center; padding: 15px 0;} .hot img { margin-right: 20px; } .hot .home img { width: 147px; height: 147px; } .hot .home { padding:1px; margin: 0!important;} .hot .sep { border-top:1px solid #4c4c4c; padding: 5px 0;} .hot .desc { padding:0px 0px 20px 20px!important; /*margin-left: 20px; float:left;*/} .hot .image { float: left;} .elite { position: fixed; top: 15%; display:none;} /* ==================================== Contact Us ==================================== */ #map-canvas { height:500px; margin: 0px; padding: 0px; } #wrapper-contact { position:relative; margin:0 auto; max-width:1130px; background-color:#e3e3e3; } #contact { margin: 0 10px 0 10px; padding: 50px 0 30px; } #contact .inner { max-width:1000px; margin:0 auto; } .wrapper-enquiry { height:auto; margin: 0; } .wrapper-enquiry .info-box { padding:121px 0px 10px 0px; } .wrapper-enquiry .info-box h2 { text-transform:uppercase; font-size:20px; color:#65b280; font-style:italic; font-weight:bold; } .wrapper-enquiry .info-box a { color:#65b280; } .wrapper-enquiry .info-box a:hover { text-decoration:underline; } .wrapper-enquiry .form-box { padding: 60px 75px 35px; background-color:#fff; font-size:14px; } .wrapper-enquiry .form-box h3 { display:block; text-align:center; font-size:14px; } .wrapper-enquiry .form-box table tr td:first-child { width:2px; } .wrapper-enquiry .form-box .have-read { margin: 5px 5px 0 0; } .wrapper-enquiry .form-box .message_box { margin: 10px 0 0 0; color:#65b280; } /* ===================== ADDITIONAL MODULES ===================== */ /* preheader */ #wrapper-preheader { width:100%; height:50px; position:fixed; top:0; background-color:#08617c; z-index:1001; box-shadow: 0px 0px 3px #000; } #preheader { position:relative; margin:0 auto; max-width:1130px; height:50px; } #preheader>.social { float:right; margin: 0 20px 0 0; padding: 5px 0 0; } #preheader>.social>ul { display:block; } #preheader>.social>ul>li { display:block; float:left; margin: 0 0 0 30px; } #preheader>.social>ul>li>a, #preheader>.social>ul>li>div { display:block; height: 40px; } #preheader>.social>ul>li>a.eglobal { margin: 0 15px 0 30px;} #preheader>.social>ul>li>a.mail { margin: 0 0 0 15px;} #preheader>.social>ul>li>a.eglobal:hover ~ #language-desktop {display: block;} #preheader>.social>ul>li>a.eglobal:focus ~ #language-desktop {display: block;} #language-desktop:hover { display: block;} #preheader>.social>ul>li>a.eglobal { width:38px; background:url('../img/top/top_global.html') center center no-repeat; } #preheader>.social>ul>li>a.mail { width:25px; background:url('../img/top/top_mail.html') center center no-repeat; } #preheader>.social>ul>li>a.utube { width:50px; background:url('../img/top/top_utube.html') center center no-repeat; } #preheader>.social>ul>li>a.facebook { width:24px; background:url('../img/top/top_facebook.html') center center no-repeat; } #preheader>.social>ul>li>a.sina { width:29px; background:url('../img/top/top_sina.html') center center no-repeat; } #preheader>.social>ul>li>a.youku { width:33px; background:url('../img/top/top_youku.html') center center no-repeat; } #preheader>.social>ul>li>a.agtop { width:43px; background:url('../img/top/top_ag.html') center center no-repeat; } #preheader>.social>ul>li>a.phone { background-image:url('../img/top/top_phone_blue.html'); } #preheader>.social>ul>li>a.telegram { background-image:url('../img/top/top_telegram_blue.html'); } #preheader>.social>ul>li>a.eglobal:hover { width:38px; background:url('../img/top/top_global_v.html') center center no-repeat; } #preheader>.social>ul>li>a.mail:hover { width:25px; background:url('../img/top/top_mail_v.html') center center no-repeat; } #preheader>.social>ul>li>a.utube:hover { width:50px; background:url('../img/top/top_utube_v.html') center center no-repeat; } #preheader>.social>ul>li>a.facebook:hover { width:24px; background:url('../img/top/top_facebook_v.html') center center no-repeat; } #preheader>.social>ul>li>a.sina:hover { width:29px; background:url('../img/top/top_sina_v.html') center center no-repeat; } #preheader>.social>ul>li>a.youku:hover { width:33px; background:url('../img/top/top_youku_v.html') center center no-repeat; } #preheader>.social>ul>li>a.agtop:hover { width:43px; background:url('../img/top/top_ag_v.html') center center no-repeat; } #preheader>.social>ul>li>span { display:block; width:1px; height:30px; margin-top: 5px;} #preheader>.global { float:left;} #preheader>.global>ul>li { display:block; float:left; margin: 0; } #preheader>.global .email, #preheader>.global .telegramText { font-size:14px; font-weight:normal; font-family: Arial; color:#76e0ff; margin: 12px 10px 0 5px;} #preheader>.global .email:hover { color: #fff} /* postheader */ #wrapper-postheader { width:100%; height:4px; position:fixed; top:149px; background-color:#0ea1ce; z-index:500 ;} /* email */ #email { width:172px; position:absolute; top:19px; left: 100px; } #email a { display:block; } #email img { width:100%; } .mail { width:25px; height: 16px; margin: 0; background:url('../img/top/top_mail_v.html') center center no-repeat; } .mail:hover { width:25px; background:url('../img/top/top_mail.html') center center no-repeat; } .contact { width:20px; height: 20px; margin: 0; } .contact.phone { background:url('../img/top/top_phone.html') center center no-repeat; background-size: contain; } .contact.telegram { background:url('../img/top/top_telegram.html') center center no-repeat; background-size: contain; } /* menu with seperator */ .psep { width:1px; border-left:1px solid #064a5f;} .split3 { width:100% } .split3>ul { display:block; } .split3>ul>li { display:block; float:left; margin: 0; } .split3 .ptitle { width: 180px;} .split3 .psep { width:1px; height:50px; border-left:1px solid; margin: 0 30px 0;} .split3 .pdesc { display: inline; width: 440px; word-wrap: break-word; word-break: normal; } /* colors */ .cdeepblue {color: #08617c;} .cblue {color: #25b0d9;} .corange {color: #e75c00;} .cyellow {color: #eeab02;} .ccyan {color: #76e0ff;} /* slider */ .glyphicon-chevron-left-new {top: 50%; background:url(../img/nav-left.html)} /* header hide */ .page-header { position: fixed; left: 0; top: 0; width: 100%; box-sizing: border-box; -webkit-transition: top 0.6s; -moz-transition: top 0.6s; transition: top 0.6s; z-index: 1004; border: 0; } .page-header.off-canvas {top: -89px; } .page-header.fixed {top: 0; z-index: 9999;} .wrapper-up {margin-top: -50px; z-index: 1005;} .wrapper-down {z-index: 1000;} .slide-container { width: 1130px; height: 450px; margin: 0 auto;} .content-container { width: 1130px; margin: 0 auto;} .collapse_item {padding: 0 0 38px 5px; } .collapse_item .collapse_link {font-weight:bold;} .collapse_item .collapse_expand {padding: 16px 20px 20px 20px; border-bottom: 1px solid #424242;} .collapse_item .collapse_link>.arrowdn {background:url('../img/collapse_dn.html') right no-repeat; padding-right: 25px;} .collapse_item .collapse_link>.arrowup {background:url('../img/collapse_up.html') right no-repeat; padding-right: 25px;} /* share */ .share>ul>span { display:block; float: left; margin: 15px 0; font-size:12px; color: #7d7d7d;} .share>ul { display:block; } .share>ul>li { display:block; float:left; margin: 0 0 0 3%; } .share>ul>li>a { display:block; height: 40px; } .share>ul>li>a.email { width:23px; background:url('../img/share/email.html') center center no-repeat; } .share>ul>li>a.facebook { width:22px; background:url('../img/share/facebook.html') center center no-repeat; } .share>ul>li>a.twitter { width:24px; background:url('../img/share/twitter.html') center center no-repeat; } .share>ul>li>a.wechat { width:27px; background:url('../img/share/wechat.html') center center no-repeat; } .share>ul>li>a.weibo { width:27px; background:url('../img/share/weibo.html') center center no-repeat; } .share .a2a_kit a { display:block; float:left; margin: 10px 0 0 3%; height:22px!important;} .share .a2a_kit span { display: none;} .share .a2a_kit a.a2a_button_email { width:23px; height:14px; background:url('../img/share/email.html') center center no-repeat; } .share .a2a_kit a.a2a_button_facebook { width:22px; height:21px; background:url('../img/share/facebook.html') center center no-repeat; } .share .a2a_kit a.a2a_button_twitter { width:24px; height:19px; background:url('../img/share/twitter.html') center center no-repeat; } .share .a2a_kit a.a2a_button_wechat { width:27px; height:22px; background:url('../img/share/wechat.html') center center no-repeat; } .share .a2a_kit a.a2a_button_sina_weibo { width:27px; height:21px; background:url('../img/share/weibo.html') center center no-repeat; } /* article = column,events */ .article { padding: 0!important;} .article img { max-width:100%;} .article .passage { padding: 23px 0;} .article .passage p { font-size: 16px; line-height: 22px; padding: 12px 0; white-space:pre-line;} .article .passage .detail { display: none;} .article .passage .question { font-style: italic; color: #dcdcdc!important ;} .article .passage h4 { font-style: italic; text-align: right; color: #dcdcdc!important ;} .article .passage table, th, td { border: 1px solid #fff; padding: 5px;} /* article list view */ .article .list.wrap { margin: 0!important;} .article .list.wrap .home { margin: 0!important;} .article .list.wrap .one_third { min-height: 550px;} .article .list.wrap .one_third .home .desc { padding: 15px 30px 0px 30px!important;} /* events */ .events .link { width: 100%; text-align:center; background: #f15f22; padding-bottom: 10px;} .events .link span img { margin: 0 2%;}