/* ===================== LAYOUT ===================== */ /* ==================================== General ==================================== */ html, body { margin:0; padding:0; border:0; font-size:12px; line-height:1.2em; color:#fff; font-family: Arial,'Noto Sans SC','Noto Sans TC', 'Microsoft JhengHei',sans-serif; vertical-align:baseline; } body { height:auto; overflow-y:scroll; -webkit-text-size-adjust: none; background-color:#fff; 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: underline;*/ /*color:#fff;*/ } a img { border:none; } 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; } .clear { float:none;} .inline { display: inline-block;} .clearfix { zoom:1; } .clearfix:after { content:"."; display:block; clear:both; width:0px; height:0px; visibility:hidden; font-size:0; } ::-webkit-input-placeholder { color: #fff; font-size:16px; } :-moz-placeholder { color: #fff; font-size:16px; } ::-moz-placeholder { color: #fff; font-size:16px; } :-ms-input-placeholder { color: #fff; font-size:16px; } .grey { color:#999999; } .mobile { display: none; } .only-desktop { display:block!important; } .only-mobile { display:none!important; } /* ==================================== Structure ==================================== */ #wrap { /*padding: 80px 0 0 0;*/padding:0; position:relative; } #mobile-plane { position:absolute; top:0; left:0; width:100%; height:100%; cursor:pointer; background:url('../img/bg-black-50.png') 0 0 repeat; z-index:999; display:none; } /* header */ #wrapper-header { width:100%; height:auto; position:fixed; top:0; z-index:1004; /*background: rgba(255,255,255,1);*/ background: #fff; } #header { position:relative; margin:0 auto; max-width:1920px; height:80px; -webkit-box-shadow: inset 0px -4px 10px #9F9F9F; -moz-box-shadow: inset 0px -4px 10px #9F9F9F; box-shadow: inset 0px -4px 10px #9F9F9F; /*overflow: hidden;*/} #wrapper-subheader { width:100%; height:auto; position:fixed; top:80px; z-index:1003; /*background: rgba(255,255,255,1);*/ background: #195d85; } #subheader { position:relative; margin:0 auto; max-width:1920px; height:80px; /*overflow: hidden;*/} /* logo */ #logo { width:299px; position:absolute; top:18px; left: 30px; } #logo a { display:block; } #logo img { width:100%; } /* language */ #language-desktop { display:none; float:right; width: auto; margin: 20px 0 0 0; padding: 0 10px; background-color:#000; } #language-desktop>li { display:block; float:left; margin: 0 0 0 0; } #language-desktop>li:first-child { margin:0; } #language-desktop>li>a { display:block; color:#fff; font-size:12px; padding: 12px 10px; } #language-desktop>li>a:hover { color:#25b0d9; } /* dropdown */ .dropbtn { border: none; cursor: pointer; font-size:18px; /*padding: 4px 0 4px;*/ color:#7b868a; font-weight:bold; } .dropbtn a, .dropbtn a:active, .dropbtn a:visited { text-decoration:none; color:#7b868a;} .dropbtn a:hover { color: #71cff2;} .dropdown { position: relative; display: inline-block;} .dropdown-content { display: none; position: absolute; min-width: 274px; z-index: 1005; top: 110px; left: -110px; /*background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/} .dropdown-content a { color: #97a3a7; padding: 12px 16px; text-decoration: none; display: block; background:url('../img/hoverb.png') center center no-repeat; background-size:70%; margin: 8px 16px; } .dropdown-content a:hover { color: #71cff2; padding: 12px 16px; text-decoration: none; display: block; background:url('../img/hoverc.png') center center no-repeat; background-size:70%; margin: 8px 16px; } .dropdown:hover .dropdown-content { display: block;} .dropdown:hover .dropbtn { color: #71cff2; text-decoration:none; background:none; text-decoration:none; background:url('../img/hover.png') center center no-repeat; max-width:184px; background-size:184px 99px; padding: 40px 60px 30px; margin:30px -60px -80px -60px; z-index: 1;} .dropdown:hover .dropbtn a { color: #71cff2;} /* main menu */ #menu { position:absolute; bottom:26px; right:100px; z-index:1000; } #menu>ul { display:block; text-align:center; } #menu>ul>li { display:inline-block; color:#7b868a; margin:0 0 0 45px; font-size:18px; } #menu>ul>li:first-child { margin:0; } #menu>ul>li>a { display:inline-block; font-size:18px; /*padding: 4px 0 4px;*/ color:#7b868a; font-weight:bold; text-decoration:none; } #menu>ul>li>a:hover, #menu>ul>li>a.active { color:#71b1cd; text-decoration:none; background:url('../img/hover.png') center center no-repeat; max-width:184px; background-size:184px 99px; padding: 40px 60px; margin:40px -60px -80px -60px;} #menu>ul>li.lang a:hover, #menu>ul>li.lang a.active { color:#71b1cd; text-decoration:none; background:none;} /* #menu>ul>li>ul { position: absolute; top: 40px; display: block; margin-left: -78px; display:none; } #menu>ul>li>ul>li { float:left; } #menu>ul>li>ul>li>a { display:block; padding: 10px 20px; font-size:16px; background-color:#22a2c8; border-left: solid 1px #fff; } #menu>ul>li>ul>li:first-child>a { border-left:none; } #menu>ul>li>ul>li>a:hover { color:#ff6600; } */ #menu>ul>li>ul { position: absolute; top: 130px; 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;*/ z-index: 10000; } #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:#25b0d9; top:100%; z-index:999; display:none; } /* sub menu */ #submenu { position:absolute; bottom:26px; right:100px; z-index:1000; } #submenu>ul { display:block; text-align:center; } #submenu>ul>li { display:inline-block; color:#fff; margin:0 0 0 45px; } #submenu>ul>li:first-child { margin:0; } #submenu>ul>li>a { display:inline-block; font-size:16px; padding: 4px 0 4px; color:#64b1cd; font-weight:bold; text-decoration:none; } #submenu>ul>li>a:hover, #submenu>ul>li>a.active { color:#e3ca0e; text-decoration:none; } #submenu>ul>li>ul { position: absolute; top: 40px; display: block; margin-left: -78px; display:none; } #submenu>ul>li>ul>li { float:left; } #submenu>ul>li>ul>li>a { display:block; padding: 10px 20px; font-size:16px; background-color:#22a2c8; border-left: solid 1px #fff; } #submenu>ul>li>ul>li:first-child>a { border-left:none; } #submenu>ul>li>ul>li>a:hover { color:#ff6600; } #menu-bg { position:absolute; width:100%; height:34px; background-color:#25b0d9; top:100%; z-index:999; display:none; } /* slide menu */ .mobile-menu-btn { position: absolute; top: 11px; right:30px; width: 20px; height: 30px; display: none; background:url('../img/mobile-menu-btn.png') center center no-repeat; cursor: pointer; } .mobile-menu-btn.active { background:url('../img/mobile-menu-btn.png') center center no-repeat; } .wrapper-slide-menu { position: fixed; top: 50px; width: 100%; overflow: auto; } .slide-menu { width: 100%; height:auto; position:relative; display:none; } .slide-menu>li { display:block; position:relative; border-top: #fff solid 1px; } .slide-menu>li:first-child { border-top:none; } .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.png') center center no-repeat; text-align:center; } .slide-menu>li>span.active { background:url('../img/mobile-menu-arrow-up.png') center center no-repeat; } .slide-menu>li>a { display:block; color:#fff; background:url('../img/bg-black-50.png') 0 0 repeat; padding: 15px 0; font-size:15px; text-align:center; text-decoration: none;} .slide-menu>li>a:hover { color:#fff; text-decoration:none; } .slide-menu>li>ul { display:none; } .slide-menu>li>ul>li { display:block; border-top: #fff solid 1px; } .slide-menu>li>ul>li>a { display:block; padding: 15px 0; font-size:14px; text-align:center; text-decoration:none; color:#fff;} .slide-menu>li>ul>li>a:hover { background:#fff; color:#009ce3;} #prev { position:absolute; top:50%; margin-top:-22px; left:20px; z-index:101; width:20px; height:45px; text-indent:-9999px; cursor:pointer; background: url('../img/slider_prev.png') center center no-repeat; } #prev:hover { opacity:0.5; } #next { position:absolute; top:50%; margin-top:-22px; right:20px; z-index:101; width:20px; height:45px; text-indent:-9999px; cursor:pointer; background: url('../img/slider_next.png') center center no-repeat; } #next:hover { opacity:0.5; } /* mobile language */ #language-mobile { padding: 15px 0; text-align:center; font-size:15px; color:#fff; background:url('../img/bg-black-50.png') 0 0 repeat; } #language-mobile span { display:inline-block; margin: 0 10px; } #language-mobile span a, #language-mobile span a:hover { color:#fff; text-decoration:none; } /* footer */ #wrapper-footer { position:relative; margin:0 auto; max-width:1920px; } #footer { position:absolute; text-align:center; padding: 35px 0px; font-size:16px; font-face: Arial; font-weight: bold; color: #797979; width:100%; -webkit-box-shadow: inset 0px 2px 2px #ccc; -moz-box-shadow: inset 0px 2px 2px #ccc; box-shadow: inset 0px 2px 2px #ccc;} .footicon { position:absolute; right:100px; padding: 35px 0px; font-size:14px; } .footicon { float:right; margin: 0 20px 0 0; padding: 25px 0 0;} .footicon>ul { display:inline-block; vertical-align: middle;} .footicon>ul>li { display:block; float:left; margin: 0 0 0 30px; } .footicon>ul>li>a { display:block; height: 40px; } .footicon>ul>li>a.eglobal { width:38px; background:url('../img/top/top_global_v.png') center center no-repeat; } .footicon>ul>li>a.mail { width:25px; background:url('../img/top/top_mail_V.png') center center no-repeat; } .footicon>ul>li>a.utube { width:50px; background:url('../img/top/top_utube_v.png') center center no-repeat; } .footicon>ul>li>a.facebook { width:24px; background:url('../img/top/top_facebook_v.png') center center no-repeat; } .footicon>ul>li>a.sina { width:29px; background:url('../img/top/top_sina_v.png') center center no-repeat; } .footicon>ul>li>a.youku { width:33px; background:url('../img/top/top_youku_v.png') center center no-repeat; } .footicon>ul>li>a.agtop { width:43px; background:url('../img/top/top_ag_v.png') center center no-repeat; } .footicon span {} .wrapper { max-width: 1920px; margin: 0 auto} /* ===================== SHARING ===================== */ /* grid */ .full { width:100%; } .half { width:50%; } .one_third { width:33.33%; } .one_fourth { width:25%;} .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:#cf0000;*/ display:block; } p { font-size:14px; line-height: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:15px 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; color:#fff; font-size:16px; box-sizing: border-box; width:100%; background:url('../img/bg-white-30.png') 0 0 repeat; border:none; font-weight: bold; } textarea { height:130px; } input[type=text].error, textarea.error { border: yellow solid 1px; } .error-msg { color: yellow; font-size:16px; text-align:left; margin:4px 0 0 0; } .message_box { color:yellow; font-size:16px; margin: 20px 0 0 0; } /* 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-30.png') 0 0 repeat; border:1px solid #c2bfa4; padding-top:1px;} .pager a:hover, .pager a.active { background:url('../img/bg-purple-80.png') 0 0 repeat; color:#fff;} .pager a.first, .pager a.prev, .pager a.next, .pager a.last { background:url('../img/pager.png') no-repeat; text-indent:-9999px;} .pager a.first { background:url('../img/pager.png') no-repeat left top;} .pager li:hover a.first { background-position:left bottom;} .pager a.prev { background:url('../img/pager.png') no-repeat -20px top;} .pager li:hover a.prev { background-position:-20px bottom;} .pager a.next { background:url('../img/pager.png') no-repeat -40px top;} .pager li:hover a.next { background-position:-40px bottom;} .pager a.last { background:url('../img/pager.png') 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; } /* ===================== MODULES ===================== */ /* ==================================== Homepage ==================================== */ /* ==================================== Banner ==================================== */ #wrapper-banner { position:relative; margin:0 auto; max-width:1920px; margin-top: 160px; /*hide header*/} .homeSlideShow { /*background:url('../img/yo80s.png') #db4806 top no-repeat fixed;*/ background: #87b1bf;} .homeSlideShow>div { width:100%; } .homeSlideShow>div img { width:100%; } .homeSlidePagerWrapper { position:absolute; left:50%; bottom:5%; display:inline-block; z-index:101; } .homeSlidePager { position:relative; display: inline-block; } .homeSlidePager span { background:url('../img/icon_dot2.png') center center no-repeat; width:12px; height:12px; margin:0 0 0 20px; display:block; float:left; cursor:pointer; } .homeSlidePager span:first-child { margin:0; } .homeSlidePager span.cycle-pager-active, .homeSlidePager span:hover { background:url('../img/icon_dot.png') center center no-repeat; } .homeSlideShow .desktop { display:block; } .homeSlideShow .mobile { display:none; } .banner-text { position:absolute; top:50%; left:50%; display:inline-block; z-index:9999; } .banner-text .wrap { text-align:center; } .banner-text .wrap .title { display:inline-block; font-size:27px; padding:15px 30px; color:#fff; line-height:1.2em; } .banner-text .wrap .content { display:inline-block; font-size:20px; color:#fff; line-height:1.2em; text-shadow:1px 1px 1px #000; } /* ==================================== Global Sections ==================================== */ .sections { padding: 0 50px!important; overflow: hidden;} .sections .inner h2 { font-size: 30px;} .sections .inner p { font-size: 22px;} .sections .inner li { font-size: 22px;} .sections .qex .title { font-size: 30px;} .sections .qex .content { font-size: 22px;} .sections .half img { width: 100%;} /* ==================================== Section1 ==================================== */ #wrapper-section1 { position:relative; margin:0 auto; max-width:1920px; background: #87b1bf;} .section1 { margin: 0 0 0 0; padding: 0; position:relative; text-align:left; /*background: url(../img/multiplay.png) center bottom no-repeat; min-height: 890px;*/ height:100%; background-size: contain; } .section1 .inner { position:relative; z-index:101; padding: 160px 50px 30px; max-width:960px; margin:0 auto; } .section1 .inner h2 { color:#fff; font-weight:bold; text-align:center; /*text-shadow: none;*/} .section1 .inner p { color:#fff; line-height:2.4em; text-align:left; /*text-shadow: none;*/} /* ==================================== Section2 ==================================== */ #wrapper-section2 { position:relative; margin:0 auto; max-width:1920px; background: #145073;} .section2 { margin: 0 0 0 0; padding: 0; position:relative; text-align:left; /*background: url(../img/multiplay.png) center bottom no-repeat*/; min-height: 1450px; height:100%; background-size: contain; } .section2 .inner { position:relative; z-index:101; padding: 200px 50px 30px; max-width:960px; margin:0 auto; min-height:700px; } .section2 .inner h2 { color:#b5dde2; font-weight:bold; text-align:center; text-shadow: none;} .section2 .inner p { color:#b5dde2; line-height:2.4em; text-align:left; text-shadow: none;} .section2 .half img { position:relative;} .section2 .content { text-align: center;} /* .section2 .qex1, .qex2, .qex3{width:546px; height:376px; float:left; margin:15px;} .section2 .qex1:before, .qex2:before{width:78px; height:134px; background:url('../img/arrow.png') no-repeat; content:""; position:relative; float:right; right:-58px; top:125px; color:#000;} .section2 .qex {width:100%; max-width: 546px; min-height: 500px;} .section2 .qex1{background:url('../img/s2a.png') top center no-repeat;} .section2 .qex2{background:url('../img/s2b.png') top center no-repeat;} .section2 .qex3{background:url('../img/s2c.png') top center no-repeat;} .section2 .qex .title { text-align: center; position: relative; font-size: 40px; margin-top: -20px; color:#b5dde2;} .section2 .qex .content { margin-top: 340px; padding: 0; font-size: 30px; line-height: 60px; color: #b5dde2;} .section2 .qex img {margin-top: -50px;} */ .section2 .qex1, .qex2, .qex3{float:left;} .section2 .qex1:before, .qex2:before{width:78px; height:134px; background:url('../img/arrow.png') no-repeat; content:""; position:relative; float:right; top:220px; color:#000; margin-top: -134px; left: -33px;} /*.section2 .one_third {width: 28%;}*/ .section2 .one_third img{max-width:100%; } .section2 .qex .title { text-align: center; position: relative; color:#b5dde2; top:-60px;} .section2 .qex .content { padding: 0; line-height: 60px; color: #b5dde2; margin:0 50px;} .section2 .qex .border { text-align:center;} .section2 .qex img { margin-top: -50px; } /* ==================================== Section4 ==================================== */ #wrapper-section4 { position:relative; margin:0 auto; max-width:1920px; z-index:10; background: #6ca0b0; } .section4 { margin: 0 0 0 0; padding: 0; position:relative; text-align:left;overflow: visible!important; /*background: url(../img/multiplay.png) center bottom no-repeat*/; min-height: 500px; height:100%; background-size: contain; } .section4 .inner { position:relative; z-index:101; padding: 130px 50px 30px; max-width:960px; margin:0 auto; min-height:260px; } .section4 .inner h2 { color:#fff; font-weight:bold; text-align:center; /*text-shadow: none;*/ } .section4 .inner p { color:#fff; line-height:2.4em; text-align:left; /*text-shadow: none;*/ } .section4 .half img { margin-top: -100px;} /* ==================================== Section3 ==================================== */ #wrapper-section3 { position:relative; margin:0 auto; max-width:1920px; background: #87b1bf; } .section3 { margin: 0 0 0 0; padding: 0; position:relative; text-align:left; /*background: url(../img/multiplay.png) center bottom no-repeat*/ min-height: 690px; height:100%; background-size: contain; } .section3 .inner { position:relative; z-index:101; padding: 160px 50px 30px; max-width:800px; margin:0 auto; } .section3 .inner h2 { color:#fff; font-weight:bold; text-align:center; text-shadow: none;} .section3 .inner p { color:#fff; line-height:2.4em; text-align: left; text-shadow: none;} .section3 .inner li { color:#fff; line-height:2.4em; text-align:left; text-shadow: none; text-align:left;} /* ==================================== SectionX ==================================== */ #wrapper-sectionX { position:relative; margin:0 auto; max-width:1920px; z-index:10; background: #6ca0b0; } .sectionX { margin: 0 0 0 0; padding: 0; position:relative; text-align:left;overflow: visible!important; /*background: url(../img/multiplay.png) center bottom no-repeat*/; min-height: 350px; height:100%; background-size: contain; } .sectionX .inner { position:relative; z-index:101; padding: 80px 50px 30px; max-width:960px; margin:0 auto; min-height:260px; } .sectionX .inner h2 { color:#fff; font-weight:bold; text-align:center; /*text-shadow: none;*/ } .sectionX .inner p { color:#fff; line-height:2.4em; text-align:left; /*text-shadow: none;*/ } .sectionX .half img { margin-top: -100px;} .sectionX .inner li { color:#fff; line-height:2.4em; text-align:left; text-shadow: none; text-align:left;} /* ==================================== Section5 ==================================== */ #wrapper-section5 { position:relative; margin:0 auto; max-width:1920px; z-index: 9; background: #87b1bf;} .section5 { margin: 0 0 0 0; padding: 0; position:relative; text-align:left;overflow: visible!important; min-height: 250px; /*background: url(../img/multiplay.png) center bottom no-repeat*/; height:100%; background-size: contain; } .section5 .inner { position:relative; z-index:101; padding: 110px 50px 30px; max-width:1550px; margin:0 auto; } .section5 .inner h2 { color:#fff; font-weight:bold; text-align:center; text-shadow: none;} .section5 .inner p { color:#fff; line-height:2.4em; text-align:center; text-shadow: none;} /* ==================================== Section6 ==================================== */ #wrapper-section6 { position:relative; margin:0 auto; max-width:1920px; background: #6ca0b0;} .section6 { margin: 0 0 0 0; padding: 0; position:relative; text-align:left;min-height: 550px; /*background: url(../img/multiplay.png) center bottom no-repeat*/; height:100%; background-size: contain; } .section6 .inner { position:relative; z-index:101; padding: 110px 50px 30px; max-width:1550px; margin:0 auto; } .section6 .inner h2 { color:#fff; font-weight:bold; text-align:center; text-shadow: none;} .section6 .inner p { color:#fff; line-height:2.4em; text-align:center; text-shadow: none;} .section6 .inner .border { padding: 15px; } .section6 .inner img { width: 100%; } /* ==================================== Section7 ==================================== */ #wrapper-section7 { position:relative; margin:0 auto; max-width:1920px; background: #87b1bf;} .section7 { margin: 0 0 0 0; padding: 0; position:relative; min-height: 350px; /*background: url(../img/multiplay.png) center bottom no-repeat*/; height:100%; background-size: contain; } .section7 .inner { position:relative; z-index:101; padding: 110px 50px 30px; max-width:1460px; margin:0 auto; } .section7 .inner h2 { color:#fff; font-weight:bold; text-shadow: none; text-align: center;} .section7 .inner li { color:#fff; line-height:2.4em; text-align:left; text-shadow: none; text-align:left;} /* ==================================== Section8 ==================================== */ #wrapper-section8 { position:relative; margin:0 auto; max-width:1920px; background: #6ca0b0;} .section8 { margin: 0 0 0 0; padding: 0; position:relative; min-height: 450px; /*background: url(../img/multiplay.png) center bottom no-repeat*/; height:100%; background-size: contain; } .section8 .inner { position:relative; z-index:101; padding: 90px 50px 60px; max-width:1550px; margin:0 auto; } .section8 .inner h2 { color:#fff; font-weight:bold; text-shadow: none; text-align: center;} .section8 .inner p { color:#fff; line-height:2.4em; text-align:left; text-shadow: none; text-align: left;} .section8 .inner .app {text-align:center; margin-top:40px;} /* ==================================== Multi Play ==================================== */ #wrapper-multi-play { position:relative; margin:0 auto; max-width:1920px; background: -moz-linear-gradient(right, #7b49aa, #913fde); background: -webkit-linear-gradient(left, #7b49aa, #913fde); background: -o-linear-gradient(right, #7b49aa, #913fde); background: linear-gradient(to right, #7b49aa, #913fde);} .multi-play { margin: 0 0 0 0; padding: 0; position:relative; text-align:center; /*background: url(../img/multiplay.png) center bottom no-repeat*/; min-height: 420px; background-size: contain; } .multi-play .inner { position:relative; z-index:101; padding: 60px 50px 30px; max-width:640px; margin:0 auto; } .multi-play .inner h2 { color:#fff; font-size:36px; font-weight:bold; text-shadow: none;} .multi-play .inner p { color:#fff; font-size:15px; line-height:2.4em; text-align: left; text-shadow: none;} .multi-play .background-1 { position:absolute; top:0; left:0; height:100px; width:100%; max-width:1920px; margin:0 auto; background: url(../img/bg-multi-play-1.png) 50% 0 no-repeat fixed; z-index:101; } .multi-play .background-2 { position:absolute; top:0; left:0; height:100px; width:100%; max-width:1920px; margin:0 auto; background: url(../img/bg-multi-play-2.png) 50% 0 no-repeat fixed; z-index:100; } /* ==================================== About Us ==================================== */ #wrapper-about-us { position:relative; margin:0 auto; max-width:1920px; background: -moz-linear-gradient(right, #db5800, #d21327); background: -webkit-linear-gradient(left, #db5800, #d21327); background: -o-linear-gradient(right, #db5800, #d21327); background: linear-gradient(to right, #db5800, #d21327);} .about-us { margin: 0 0 0 0; padding: 0; position:relative; text-align:center; } .about-us .inner { position:relative; z-index:101; padding: 60px 50px 90px; max-width:640px; margin:0 auto; } .about-us .inner h2 { color:#fff; font-size:36px; font-weight:bold; text-shadow: none;} .about-us .inner p { color:#fff; font-size:15px; line-height:2.4em; text-align:left;} .about-us .inner img { padding: 20px;} .about-us .background-1 { position:absolute; top:0; left:0; height:100px; width:100%; max-width:1920px; margin:0 auto; background: url(../img/bg-about-us-1.png) 50% 0 no-repeat fixed; z-index:101; } .about-us .background-2 { position:absolute; top:0; left:0; height:100px; width:100%; max-width:1920px; margin:0 auto; background: url(../img/bg-about-us-2.png) 50% 0 no-repeat fixed; z-index:100; } /* ==================================== Service ==================================== */ #wrapper-service { position:relative; margin:0 auto; max-width:1920px; background: #80c269;} .service { margin: 0 auto; padding: 0; position:relative; text-align:center; } .service .inner { position:relative; z-index:101; padding: 60px 50px 90px; max-width:1440px; margin:0 auto; } .service .inner h2 { color:#fff; font-size:36px; font-weight:bold; text-shadow: 3px 2px 8px rgba(0,0,0, 0.3); padding-bottom: 60px;} .service .inner p { color:#fff; font-size:15px; line-height:2.4em; } .service .inner .intro h3 { color:#fff; font-size:28px; font-weight:bold; text-shadow: 3px 2px 8px rgba(0,0,0, 0.2); margin: 30px 0;} .service .inner .intro p { color:#fff; font-size:17.96px; line-height: 22px; font-weight:regular;text-shadow: 3px 2px 8px rgba(0,0,0, 0.3); max-width: 330px; min-height: 220px; margin: 35px;} /* ==================================== Product ==================================== */ #wrapper-product { position:relative; margin:0 auto; max-width:1920px; z-index:1002;} .product { margin:0; padding:0; position:relative; } .product .inner { margin:0 auto; padding: 55px 50px; max-width:1440px; } .product .inner .image { text-align: center; margin: 20px; } .product .inner .image img { width:100%; /*max-width:488px;*/ display:inline-block; border: 6px solid #fff; margin-left: -5px;} .product .inner .image .playnow { display:inline-block; font-size:30.4px; line-height: 85px; font-weight: bold; color:#fff; font-family: 'Microsoft Jhenghei'; width:302px; height:94px; background:url('../img/playnow.png') left center no-repeat; cursor:pointer; text-shadow: 0px 0px 6px #000; margin-top: 60px;} .product .inner .text { line-height:2em; padding: 0 20px; max-width:580px; font-family: 'Microsoft JhengHei'} .product .inner .text h2 { color: #4f4dac; font-weight:bold; text-shadow: 0px 0px 1px #def; } .product .inner .text h3 { font-size:18px; color: #4f4dac; font-weight:bold; /*text-shadow: 0px 0px 5px #000;*/ } .product .inner .text h4 { font-size:18px; color: #4f4dac; text-shadow: 0px 0px 3px #def; } .product .inner .text .multilogo { margin: 0 10px; vertical-align:bottom;} .product .inner .text p { font-size:14px; color:#4f4dac; font-weight:bold;/*text-shadow: 0px 0px 5px #000;*/ line-height:2em; } .product .inner .text .pc { font-weight:bold; color: #4f4dac;} .product .inner .text .h5 { font-weight:bold; color: #4f4dac;} .product .inner .text table { width:80%; } .product .inner .text table tr td { font-size:14px; color:#fff; } .product .inner .text table tr td:first-child { color:#32c4ff; width: 80px; text-shadow: 0px 0px 5px #000; } .product .inner .text .wrap { margin: 0 0 0 -20px; } .product .inner .text .wrap .thumb { margin: 0 0 20px 20px; } .product .inner .text .wrap .thumb a { display:block; } .product .inner .text .wrap .thumb a img { width:100%; } .modalDialog2 .product .inner .text { line-height:2em; padding: 0 20px; max-width:580px; font-family: 'Microsoft JhengHei'} .modalDialog2 .product .inner .text h2 { font-weight:bold; color: #e8cb06; text-shadow: 0px 0px 1px #000; } .modalDialog2 .product .inner .text h3 { font-size:18px; color:#fff; text-shadow: 0px 0px 5px #000; } .modalDialog2 .product .inner .text h4 { font-size:18px; color: #e8cb06; text-shadow: 0px 0px 3px #000; } .modalDialog2 .product .inner .text p { font-size:14px; color:#fff; text-shadow: 0px 0px 5px #000; line-height:2em; } .modalDialog2 .product .inner .text .pc { font-weight:bold; color: #e8cb06;} .modalDialog2 .product .inner .text .h5 { font-weight:bold; color: #e8cb06;} #wrapper-product.product-list { background:url('../img/yo80s-bg.png') #d19704 repeat fixed; background-size:cover;} #wrapper-product .product-title { padding: 60px 0 0 0; text-align:center; font-family: 'Microsoft JhengHei'; font-weight:bold; font-size: 50px; text-shadow: 3px 2px 8px rgba(0,0,0, 0.2); vertical-align: middle; margin-left: 10px;} #wrapper-product .product-select { padding: 60px 0 150px 0; text-align:center; /*margin-left: 100px;*/} #wrapper-product .product-select div { display: inline-block; text-align:center; margin: 0 auto} #wrapper-product .product-select img { padding: 2% 3%; margin: 20px; cursor: pointer; } #wrapper-product .product-select a { text-decoration: none;} #wrapper-product .product-select a span, #wrapper-product .product-select span span { font-size: 24px; position: relative; width:240px; /*left:-180px;*/ line-height: 30px; display:table-caption; text-align:center; font-weight: bold; color: #000; text-shadow: 1px 0px 4px #fff; text-decoration: none;} #wrapper-product .product-select .multi { /*margin-left: -40px;*/} #wrapper-product .product-select .multi img { position: relative; margin-left:-100px;} #wrapper-product .product-select .multiimg { background: url('../img/yo80s/multi.png') left top; width:40px; height:40px; background-size:40px 40px; position:relative; /*left:-170px; top:15px;*/ display:inline-block; left:100px; top:-120px;} #wrapper-product .product-select .multi div { display: inline-block; text-align:center; margin: 0 auto} #wrapper-product.product2-list { background: -moz-linear-gradient(right, #7b49aa, #913fde); background: -webkit-linear-gradient(left, #7b49aa, #913fde); background: -o-linear-gradient(right, #7b49aa, #913fde); background: linear-gradient(to right, #7b49aa, #913fde);} #wrapper-product.product2-list .product-select { padding: 0px 0 150px 0; text-align:center; /*margin-left: 100px;*/} #wrapper-product.product2-list .product-select a span, #wrapper-product .product-select span span { color: #fff;} #wrapper-product.product2-list .product-select a span, #wrapper-product.product2-list .product-select span span { text-shadow: 0px 1px 4px #333;} .tab a:not(.active), .disabled { -webkit-filter: brightness(0.8); filter:brightness(0.8);} .tab a:hover { -webkit-filter: brightness(1); filter:brightness(1);} .tab a:focus, .active { -webkit-filter: brightness(1); filter:brightness(1);} /*.tabcontent:not(.active) { display: none; }*/ /* .tablinks img { width: 200px; margin: 0 20px;} .tab a:focus img, a:active img { width: 220px;} .tabcontent { background:url('../img/yo80s-bg.png') repeat fixed; background-size:cover;} /* #wrapper-product { position:relative; margin:0 auto; max-width:1920px; background:url('../img/bg-product.png') center top no-repeat; background-size:cover; } .products { margin:0; padding:0; position:relative; } .products .prev { width:58px; height: 70px; position:absolute; left:90px; top:50%; margin-top:-35px; background:url('../img/slick-arrow-left.png') center center no-repeat; cursor:pointer; z-index: 997; text-indent:-9999px; opacity:0.5; } .products .next { width:58px; height: 70px; position:absolute; right:90px; top:50%; margin-top:-35px; background:url('../img/slick-arrow-right.png') center center no-repeat; cursor:pointer; z-index: 997; text-indent:-9999px; opacity:0.5; } .products .prev:hover, .products .next:hover { opacity:1; } .products>.inner { padding: 0; margin:0 auto; max-width: 840px; padding: 40px 50px 90px; text-align:center; } .products>.inner h2 { font-size: 28px; color:#fff; margin: 0 0 30px 0; } .products>.inner h3 { font-size: 18px; color:#fff; margin: 0 0 15px 0; } .products>.inner p { font-size: 14px; color:#fff; line-height:2em; } .products>.inner .slick-slide img { display:inline-block !important; padding: 90px 0; } .products>.inner ul { text-align:left; font-size:14px; line-height:2em; display:inline-block; list-style:inside; } */ /* ==================================== Contact Us ==================================== */ #wrapper-contact-us { position:relative; margin:0 auto; max-width:1920px; background:#000 url('../img/bg-contact-us.png') center top no-repeat; background-size:cover; } .contact-us { margin: 0 30px 0 30px; padding: 50px 0; } .contact-us .inner { max-width:1920px; margin:0 auto; text-align: center; position:relative; z-index:102; } .contact-us .inner h3 { font-size:36px; color:#fff; } .contact-us .inner p { font-size:14px; color:#fff; } .contact-us .inner table { font-size:14px; display:inline-block; width:auto; text-align:left; line-height:2em; } .contact-us .background-1 { position:absolute; top:0; left:0; height:100px; width:100%; max-width:1920px; margin:0 auto; background: url(../img/bg-contact-us-1.png) 50% 0 no-repeat fixed; z-index:101; } .contact-us .background-2 { position:absolute; top:0; left:0; height:100px; width:100%; max-width:1920px; margin:0 auto; background: url(../img/bg-contact-us-2.png) 50% 0 no-repeat fixed; z-index:100; } /* ==================================== Contact Form ==================================== */ #wrapper-contact-form { position:relative; margin:0 auto; max-width:1920px; background: -moz-linear-gradient(bottom left, #0096d5, #0066ff); background: -webkit-linear-gradient(right top, #0096d5, #0066ff); background: -o-linear-gradient(bottom left, #0096d5, #0066ff); background: linear-gradient(to bottom left, #0096d5, #0066ff);} .contact-form { margin: 0 30px 0 30px; padding: 50px 0; } .contact-form .inner { max-width:640px; margin:0 auto; position:relative; z-index:102; } .contact-form .inner h3 { color:#fff; font-size:36px; font-weight:bold; text-align: center; text-shadow: 3px 2px 8px rgba(0,0,0, 0.2); } .contact-form .inner p { font-size:14px; color:#fff!important; font-weight:regular; text-align: left;} .contact-form .inner a { color:#fff!important} .contact-form .submit { display:inline-block; font-size:16px; color:#fff; width:175px; height:66px; background:url('../img/submit.png') left center no-repeat; cursor:pointer; text-shadow: 0px 0px 3px #333; line-height: 60px; text-indent: -5px; font-weight: bold;} .contact-form .submit:hover { text-decoration:none; } .contact-form .background-1 { position:absolute; top:0; left:0; height:100px; width:100%; max-width:1920px; margin:0 auto; background: url(../img/bg-contact-form-1.png) 50% 0 no-repeat fixed; z-index:101; } .contact-form .background-2 { position:absolute; top:0; left:0; height:100px; width:100%; max-width:1920px; margin:0 auto; background: url(../img/bg-contact-form-2.png) 50% 0 no-repeat fixed; z-index:100; } /* ==================================== News ==================================== */ #wrapper-news.news-list {background: #fff; max-width: 1920px; margin: 0 auto;} #wrapper-news .news-title { background:url('../img/yo80s-bg.png') #d19704 repeat fixed; background-size:cover; font-family: 'Microsoft JhengHei'; font-weight:bold; font-size: 50px; text-align:left; vertical-align: middle; text-shadow: 3px 2px 8px rgba(0,0,0, 0.8); padding: 80px 0; text-indent: 160px;} #wrapper-news .news-select { padding: 60px 0 150px 0; text-align:center;} #wrapper-news .news-select img { cursor: pointer; max-width:400px; width:100%;} #wrapper-news .news-select .inner { position:relative; z-index:101; max-width:1440px; margin:0 auto; padding-left: 0px; padding-right: 0px;padding-bottom: 90px;} #wrapper-news .news-select .inner div { height: 50px; display: inline-table; text-align:left;} #wrapper-news .news-select .inner img { display: inline-table;} #wrapper-news .news-select .inner h1 { color:#f15f23; font-size:24px; font-weight:bold; font-family: 'Microsoft JhengHei'; } #wrapper-news .news-select .inner h2 { color:#585858; font-size:18px; font-weight:bold; font-family: 'Microsoft JhengHei'; text-indent:15px;} #wrapper-news .news-select .inner p { color:#fff; font-size:15px; line-height:2.4em; } #wrapper-news .news-select .inner .imargin { padding: 0 15px;} #wrapper-news .news-select .inner .text { /*padding: 30px 50px;*/ background: #434343; max-width:400px; min-height: 320px; width:100%;} #wrapper-news .news-select .inner .intro h3 { color:#ffae00; font-size:28px; line-height: 42px; font-weight:bold; text-shadow: 3px 2px 8px rgba(0,0,0, 0.2); margin: 30px 50px 0;} #wrapper-news .news-select .inner .intro h4 { color:#fff; font-size:17.96px; line-height: 22px; font-weight:regular;text-shadow: 3px 2px 8px rgba(0,0,0, 0.3); max-width: 330px; min-height: 100px; margin: 30px 50px 30px;} #wrapper-news .news-detail .inner { position:relative; z-index:101; max-width:1440px; margin:0 auto; padding-left: 0px; padding-right: 0px;padding-bottom: 90px;} #wrapper-news .news-detail .inner .imargin { padding: 0 15px;} #wrapper-news .news-detail .inner .text { width:100%;} #wrapper-news .news-detail .inner .intro h3 { color:#ffae00; font-size:48px; line-height: 49px; font-weight:bold; padding-top: 60px;} #wrapper-news .news-detail .inner .intro h4 { color:#535353; font-size:38px; line-height: 49px; font-weight:regular;} #wrapper-news .news-detail .inner .intro h5 { color:#ffae00; font-size:28px; line-height: 35px; font-weight:bold;} #wrapper-news .news-detail .inner .intro img{ max-width:100%;} #wrapper-news .news-detail .inner .intro p { color:#535353; font-size:17.96px; line-height: 30px; font-weight:regular;text-shadow: 0px rgba(0,0,0, 0.3); margin: 0; } #wrapper-news .news-detail .inner .detail p { color:#535353; font-size:17.96px; line-height: 30px; font-weight:regular;text-shadow: 0px rgba(0,0,0, 0.3); margin: 20px 0; } /* ==================================== Others ==================================== */ .album .thumb { padding: 10px;} .emenu { } .emenu>ul { display:block; text-align:center; } .emenu>ul>li { display:inline-block; color:#545454; margin:35px 0 0px 45px; } .emenu>ul>li:first-child { margin:0; } .emenu>ul>li>a { display:inline-block; font-size:24px; font-family: 'Microsoft JhengHei'; padding: 4px 0 4px; color:#545454; text-decoration:none; } .emenu>ul>li>a:hover,a:active { color:#7607df; text-decoration:none; font-weight:bold;} .emenu>ul>li>a:visited { font-weight: bold;} .emenu>ul>li>ul { position: absolute; top: 40px; display: block; margin-left: -78px; display:none; } .emenu>ul>li>ul>li { float:left; } .emenu>ul>li>ul>li>a { display:block; padding: 10px 20px; font-size:16px; background-color:#22a2c8; border-left: solid 1px #fff; color:#545454; } .emenu>ul>li>ul>li:first-child>a { border-left:none; } .emenu>ul>li>ul>li>a:hover { color:#7607df; } .esep { border-top: 1px solid #c9c9c9; width:100%; height: 1px;} .etitle { color:#7607df!important; text-decoration:none; font-weight:bold; padding: 30px 0;} .jul17 .banner img { width:100%;} .jul17 .t0 { width:100%; padding: 125px 0 70px; border-bottom: solid 1px #63d4ec; display: inline-block;} .jul17 .t0t { max-width:100%; padding-bottom: 30px;} .jul17 .t2b { padding-right: 30px;} .jul17 .tt { margin-left:-100px;} .jul17 .t3t { width:100%; padding-bottom: 100px;} .jul17 .t6m { width: 180px!important;} .jul17 .t6m img { max-width:100%; padding-bottom: 30px;} .jul17 .t6m .two_third { width: 100%!important;} /* ==================================== Firefox only ==================================== */ @-moz-document url-prefix() { #wrapper-product .product-select a span, #wrapper-product .product-select span span{ display:table!important; margin-left: 30px; } #wrapper-product .product-select a .multi span{ margin-left: 0px; } }