body { background-color: #000; margin: 0; padding: 0; z-index: 0; font-family: Arial, '微軟正黑體', sans-serif; } ol { -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-padding-start: 0; } #container { width: auto; padding-top: 145px; } /* header */ #header { position: fixed; left: 50%; height: 150px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAA3NCSVQICAjb4U/gAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxEAAAsRAX9kX5EAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAAAFnRFWHRDcmVhdGlvbiBUaW1lADA2LzI0LzE14d7TowAAAA1JREFUGFdj+P//fxoACWIDZK59mU4AAAAASUVORK5CYII=); z-index: 1000; width: 100%; width: 1300px; margin-left: -650px; } #header #headerlogo { position: absolute; top: 0; width: 348px; height: 86px; margin-left: 30px; } #header img, #footer img { border: 0; } .headerBlock { height: 80px; } /* Nav ul#nav { position: absolute; min-width: 520px; width: 100%; margin: 48px 0 0 350px; list-style: none; padding: 0; border: 0; } ul#nav li { position: relative; float: left; vertical-align: middle; text-align: center; margin: 0; padding: 0; border: 0; } ul#nav > li > a { display: block; position: relative; font-weight: 700; line-height: 20px; text-align: center; font-size: 14px; color: #fff; letter-spacing: 1px; text-decoration: none; text-transform: uppercase; margin-right: 15px; } ul#nav > li > a span { display: block; min-width: 85px; } ul#nav > li > a span:first-child { opacity: 0; } ul#nav > li > a span:last-child { position: absolute; top: 0; opacity: 1; width: 100%; color: #000; font-style: italic; background: #fff; } ul#nav > li.i > a span:first-child, ul#nav > li > ul li:hover { opacity: 1; } ul#nav > li.i > a span:last-child { opacity: 0; } ul#nav > li > a:hover span, ul#nav li ul li:hover, ul#nav > li > ul li a p { -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2 ease-in-out; } ul#nav > li > ul { display: none; position: fixed; top: 68px; left: 0; width: 100%; list-style: none; padding: 2.105% 2.368% 0; background: rgba(0,0,0,.3); border-top: 15px solid #2d2d2d; } ul#nav > li > ul li > a { position: relative; display: block; color: #fff; } ul#nav > li > ul li > a > p { position: absolute; top: 0; width: 100%; line-height: 180%; padding: 0; background: rgba(0,0,0,.9); margin: 0; } ul#nav > li > ul li:hover { box-shadow: 0 0 10px #000; } ul#nav > li > ul li:hover a p { top: 100%; border-radius: 0 0 10px 10px; } ul#nav li ul li { width: 10.789%; margin: 0 2.1052% 2.105% 0; opacity: .7; } ul#nav li ul li img { display: block; width: 100%; } ul#nav li ul li p { font-size: 90%; text-shadow: 0 0 3px #000; font-weight: 700; } ul#nav > li > a span.s1 { color: #fff; background: #619197; } ul#nav > li > a span.s2 { color: #fff; background: #E95F62; } ul#nav > li > a span.s3 { color: #fff; background: #df743f; } ul#nav > li > a span.s4 { color: #fff; background: #75469c; } ul#nav > li > a span.s5 { color: #fff; background: #787a82; } ul#nav > li:nth-child(2) > ul { background: rgba(255,247,204,.5); } ul#nav > li:nth-child(3) > ul { background: rgba(214,255,222,.5); } ul#nav > li:nth-child(4) > ul { background: rgba(130,235,218,.5); } ul#nav > li:nth-child(5) > ul { background: rgba(252,217,221,.5); } */ @media screen and (max-width:1000px) { ul#nav > li > ul li > a > p { display: none; } } /* Control */ #control { font-size: 12px; color: #fff; float: right; margin: 10px; } #control a { color: #000; text-decoration: none; } ul#ctllisks { position: absolute; top: 0; right: 0; margin: 0 0 0px 0; list-style: none; padding: 0; border: 0; } ul#ctllisks > li { float: right; margin: 4px 0 7.5px 0; width: 70px; height: 25px; text-align: center; padding: 0 5px; } ul#ctllisks > li > a { display: block; position: relative; height: 25px; font-size: 14px; line-height: 27px; } ul#ctllisks > li:hover { } ul#ctllisks > li:hover a { color: #626262; } ul#ctllisks > li.lilogin {} ul#ctllisks > li.lilogin #login { } ul#ctllisks > li.lilogin #logout { } ul#ctllisks > li.liorder { } ul#ctllisks > li.limember { } ul#ctllisks > li.linews { } ul#ctllisks > li.licart { } ul#ctllisks > li.licart > a { } ul#ctllisks > li.licart > a > .cartItemCount , ul#ctllisks > li.litrace > a > .traceItemCount { color: #000; font-size: 14px; } ul#ctllisks > li.licart:hover > a > .cartItemCount , ul#ctllisks > li.litrace:hover > a > .traceItemCount { color: #626262; } ul#ctllisks > li.licart > a > .cartItemCount:before , ul#ctllisks > li.litrace > a > .traceItemCount:before { content: "("; } ul#ctllisks > li.licart > a > .cartItemCount:after , ul#ctllisks > li.litrace > a > .traceItemCount:after { content: ")"; } /*ul#ctllisks > li.licart > a > img { height: 30px; margin-top: -15px; margin-bottom: -8px; }*/ ul#ctllisks > li.litrace { } ul#ctllisks > li.litrace > a { } ul#ctllisks > li.litrace > a > .traceItemCount {} /*ul#ctllisks > li.litrace > a > img { height: 30px; margin-top: -15px; margin-bottom: -8px; }*/ ul#ctlmomo { position: absolute; width: 645px; right: 0; top: 40px; margin: 0; list-style: none; padding: 0; border: 0; } ul#ctlmomo > li { line-height: 25px; height: 25px; float: left; } .dvcpanel { width: 265px; margin-top: 5px; } .dvcpanel div { float: left; cursor: pointer; } .cimg { position: relative; text-indent: -9999px; width: 35px; height: 35px; line-height: 35px; display: inline-block; margin-left: 10px; cursor: pointer; } .c1 { background: url(http://www.yuting.idv.tw/OneBoyInc/06oneboy-act/ICON/18.png) no-repeat center center; } .c1:hover { background: url(http://www.yuting.idv.tw/OneBoyInc/06oneboy-act/ICON/5.png) no-repeat center center; } .c2 { background: url(http://www.yuting.idv.tw/OneBoyInc/06oneboy-act/ICON/20.png) no-repeat center center; } .c2:hover { background: url(http://www.yuting.idv.tw/OneBoyInc/06oneboy-act/ICON/4.png) no-repeat center center; } .c3 { cursor: pointer; background: url(http://www.yuting.idv.tw/OneBoyInc/06oneboy-act/ICON/16.png) no-repeat center center; } .c3:hover { background: url(http://www.yuting.idv.tw/OneBoyInc/06oneboy-act/ICON/3.png) no-repeat center center; } .c4 { cursor: pointer; background: url(http://www.yuting.idv.tw/OneBoyInc/06oneboy-act/ICON/17.png) no-repeat center center; } .c4:hover { background: url(http://www.yuting.idv.tw/OneBoyInc/06oneboy-act/ICON/6.png) no-repeat center center; } .c5 { width: 74px; cursor: pointer; background: url(http://www.yuting.idv.tw/OneBoyInc/06oneboy-act/ICON/21.png) no-repeat center center; } .c5:hover { background: url(http://www.yuting.idv.tw/OneBoyInc/06oneboy-act/ICON/7.png) no-repeat center center; } .c6 { width: 101px; cursor: pointer; background: url(http://www.yuting.idv.tw/OneBoyInc/06oneboy-act/ICON/22.png) no-repeat center center; margin-right: 10px; } .c6:hover { background: url(http://www.yuting.idv.tw/OneBoyInc/06oneboy-act/ICON/8.png) no-repeat center center; } .lilogin { margin-bottom: 0px; } #searchpnl { } #formSearch { display: block!important; } #searchpnl img { vertical-align: middle; cursor: pointer; } #searchpnl a:hover { } #searchpnl input#tbsearch { background-color: #313131; color: #fff; width: 201px; vertical-align: top; border: 0px none; height: 30px; line-height: 30px; margin: 0 7.5px 0 0; padding: 0 2px; outline: none; } input.watermark { color: #fff; text-align: center; background-color: #616161 !important; } #phonepnl, #mailpnl, #linepnl { position: absolute; top: 0; text-align: center; vertical-align: middle; width: 205px; height: 30px; display: none; background-color: #313131; line-height:30px; } #phonepnl span, #mailpnl span, #linepnl span { font-size: 14px; color: #fff; display: block; line-height: 40px; text-indent: -9999px; background-repeat: no-repeat; } #linepnl > span { background-image: url(http://www.yuting.idv.tw/OneBoyInc/06oneboy-act/ICON/10.png); } #phonepnl > span { background-image: url(http://www.yuting.idv.tw/OneBoyInc/06oneboy-act/ICON/11.png); } #mailpnl > span { background-image: url(http://www.yuting.idv.tw/OneBoyInc/06oneboy-act/ICON/12.png); } #ctlmomo li .cimg.c3:after, #ctlmomo li .cimg.c5:after, #ctlmomo li .cimg.c6:after { position: absolute; top: 0; width: 205px; height: 30px; content:""; background-repeat: no-repeat; } #ctlmomo li .cimg.c3:hover:after { display: block; right: -560px; background-image: url(http://www.yuting.idv.tw/OneBoyInc/06oneboy-act/ICON/13.png); } #ctlmomo li .cimg.c5:hover:after { display: block; right: -329px; background-image: url(http://www.yuting.idv.tw/OneBoyInc/06oneboy-act/ICON/14.png); } #ctlmomo li .cimg.c6:hover:after { display: block; right: -215px; background-image: url(http://www.yuting.idv.tw/OneBoyInc/06oneboy-act/ICON/15.png); } #dvHeader>ol { height: 55px; margin-top: 93px; text-align: center; border-top: 1px solid #000; border-bottom: 1px solid #000; } #dvHeader>ol>li { display:inline-block; margin-right: 4.462%; } #dvHeader>ol>li:last-child { margin: 0; } #dvHeader>ol>li>a { display: block; width: 120px; height: 55px; background-repeat: no-repeat; } #dvHeader>ol>li>a.menu1 { background-image: url(http://www.yuting.idv.tw/OneBoyInc/06oneboy-act/ICON/28.png); } #dvHeader>ol>li>a.menu1:hover { background-image: url(http://www.yuting.idv.tw/OneBoyInc/06oneboy-act/ICON/33.png); } #dvHeader>ol>li>a.menu2 { background-image: url(http://www.yuting.idv.tw/OneBoyInc/06oneboy-act/ICON/29.png); } #dvHeader>ol>li>a.menu2:hover { background-image: url(http://www.yuting.idv.tw/OneBoyInc/06oneboy-act/ICON/34.png); } #dvHeader>ol>li>a.menu3 { background-image: url(http://www.yuting.idv.tw/OneBoyInc/06oneboy-act/ICON/30.png); } #dvHeader>ol>li>a.menu3:hover { background-image: url(http://www.yuting.idv.tw/OneBoyInc/06oneboy-act/ICON/35.png); } #dvHeader>ol>li>a.menu4 { background-image: url(http://www.yuting.idv.tw/OneBoyInc/06oneboy-act/ICON/31.png); } #dvHeader>ol>li>a.menu4:hover { background-image: url(http://www.yuting.idv.tw/OneBoyInc/06oneboy-act/ICON/37.png); } #dvHeader>ol>li>a.menu5 { background-image: url(http://www.yuting.idv.tw/OneBoyInc/06oneboy-act/ICON/32.png); } #dvHeader>ol>li>a.menu5:hover { background-image: url(http://www.yuting.idv.tw/OneBoyInc/06oneboy-act/ICON/36.png); } /* Shopping Cart */ li.licart .dvBlock, li.litrace .dvBlock { display: none; position: relative; margin: 2px auto 0; /*width: 8px;*/ height: 12px; margin: -10px 0 -1px 0; z-index: 100005; } #shopcartlist, #shoptracelist { display: none; left: -0px; position: absolute; z-index: 100000; background: #fff; width: 385px; min-height: 140px; border: 1px solid #000; padding: 10px; } #shoptracelist > .traceItemCount { font-size: 16px; } #shopcartlist #shopCartBody tr td img, #shopTraceBody tr td img { width:60px ; height: 60px; } #shopcartlist table, #shoptracelist table { color: #000; border-collapse: collapse; border-spacing: 0; width: 100%; } #shopcartlist table .tbline, #shoptracelist table .tbline { height: 3px; background: url(data:image/Png;base64,iVBORw0KGgoAAAANSUhEUgAAAY0AAAAHCAYAAAD0+xHbAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAADZmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4zLWMwMTEgNjYuMTQ1NjYxLCAyMDEyLzAyLzA2LTE0OjU2OjI3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOkY0OEQzNjA0MDhDNUUzMTE5NjdCRjYxNDM4MjVENEI5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkFCN0EwOUI2QzUxQTExRTM5NjIzRkM4Q0Y2NzcwMzA2IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkFCN0EwOUI1QzUxQTExRTM5NjIzRkM4Q0Y2NzcwMzA2IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NkQ0RkJDNjExQUM1RTMxMTk2N0JGNjE0MzgyNUQ0QjkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RjQ4RDM2MDQwOEM1RTMxMTk2N0JGNjE0MzgyNUQ0QjkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4ReZSSAAAAUElEQVRoQ+3KsQ2AQAwEwW+UhKapgSqMTcoFnyKNpQl82lVVALAljgCQxBEAkjhuuNvc0eY/36/qahrNnEYzp/lHsy2OAJDEEQCSOALAV60He+8sqd4l+CgAAAAASUVORK5CYII=) center center repeat-x; } #shopcartlist td.head, #shoptracelist td.head { text-align: center; padding: 10px 5px; color: #000; border-bottom: 1px solid #000; } #shopcartlist tbody td, #shoptracelist tbody td { text-align: center; padding: 10px 5px; } #shopcartlist td.total { text-align: right; padding: 10px 5px; font-size: 14px; padding-right: 20px; } #shopcartlist #btnGoCart { color: #000; background-color: #fff; text-decoration: none; padding: 3px 0px; text-align: center; width: 120px; display: block; border: 1px solid #000;} #shopcartlist #btnGoCart:hover { color: #fff; background-color: #000; } #shopcartlist table tfoot tr:last-child td { border-top: 1px solid #000 } .contentContainer { height: 60px; } #shoptracelist #btnGoTrace { display: block; width: 20px; height: 16px; text-indent: -9999px; background: url(update/201506/images/btnGoTraceBm.gif) no-repeat; margin: 0 auto; } #shoptracelist #btnGoTrace:hover { color: #ccc; } #shoptracelist > .tracedv { height: auto!important; margin: 0!important; } #shoptracelist > .tracedv > span { display: inline-block; color: #000; font-size: 18px; line-height: 140px; text-align: left; width: 200px; } #shoptracelist > .tracedv > a { float: right; font-size: 14px; display: inline-block; height: 140px; line-height: 140px; width: 165px; background-color: #000; color: #fff!important; } .dvCartNum { position: absolute; top: 18px; left: 65px; color: #fff; font-size: 12px; } .dvCartNum .cartNum { padding: 0 5px; } /* footer */ #footer { position: relative; width: 93%; height: 200px; padding: 10px 3.5% 0; background-color: #2d2d2d; z-index: 100; min-width: 800px; } #footer > table { width: 100%; margin-top: 5px; margin-bottom: 5px; } #footer hr { background-color: #fff; border: 1px solid #fff; } #footer .cpr { position: absolute; bottom: 10px; right: 0; width: 360px; text-align: center; font-size: 12px; font-weight: normal; color: #fff; } .footerBlock { height: 40px; } .righticon { display: none; } #dvInfo a, #dvInfo span, #dvInfo p { color: #fff; font-size: 12px; } #dvInfo > ul { padding: 0px; border: 0; list-style: none; } #dvInfo > ul > li { margin: 0; padding: 0px; border: 0; float: left; width: 150px; } #dvInfo > ul > li > span { display: block; text-align: center; border-right: 1px solid #fff; } #dvInfo > ul > li > div { position: relative; margin: 10px 0 0 0; } #dvInfo .dvInfoLink { margin-bottom: 10px; } #dvInfo:first-child .dvInfoLink { padding-left: 10px; } #dvInfo > ul > li > div > a { display: block; padding: 3px 8px; } #dvInfo > ul > li > div > p { margin: 0; padding: 3px 8px; } /* EVENT */ .event { position: fixed; width: 65px; height: 60px; cursor: pointer; z-index: 5; background: url(http://www.yuting.idv.tw/OneBoyInc/06oneboy-act/ICON/38.png) no-repeat; } .event.close { background: none } .area { position: fixed; width: 205px; height: auto; display: none; z-index: 99999; } .event,.area{display:none!important} /* Clear Fix */ .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } .copyright { display: none; } /* Other #pList .itSub { display: block!important; }#pList .itSubHover { display: none!important; }*/