body{ font-family:"微軟正黑體", 'Noto Sans', sans-serif; font-weight: 400; color:#777777; background-color:#ffffff; margin: 0; padding: 0; text-align: justify;} /*---START display NONE---*/ .spSeeMore{ display: none; } /*---END display NONE---*/ .column01RODUCT{ z-index: 2300; position: absolute; top: 1450px; left: 40; background-color:#336633; width: 300px; height: 20px; color:#ffffff; display: none; } #debugPRODUCT{ z-index: 2000; position: fixed; top: 40px; left: 0; width:auto; background-color:#ccddff; color:#000000; font-size: 11px; display: none; } #debugW{ z-index: 2000; position: fixed; top: 0; left: 0; width:auto; background-color:#ccddff; color:#000000; font-size: 11px; display: none; } #debugWsec{ z-index: 2002; position: fixed; top: 20px; left: 0; width:auto; background-color:#333333; color:#ffffff; font-size: 11px; display: none; } #loadingBoard{ position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%; background-color: #ffffff; background-image: url(../images/loading.gif); background-repeat:no-repeat; background-position: center center; background-size: 64px 64px;} ul, ol, li{ list-style: none; margin: 0; padding: 0; } .no-svg #loadingBoard{background-image: url(../images/loading_s.gif); } /* Links */ a img, :link img, :visited img{ border:0; outline:none; text-decoration:none; } a,a:visited{ text-decoration:none; outline:none;} article.wrapper a,a:visited{color: #8c9bd2;} @media screen and (min-width:980px){ a:hover{text-decoration: underline;} } /* Heading */ h1, h2, h3, h4,strong,p{ margin: 0; padding:0; font-weight:400; } strong{} p{} /*--------header START---------*/ /*------------------------------*/ header{position: fixed; left: 0; top: 0; display: block; width:100%; height:105px; margin: 0 auto 0 auto; z-index: 100; background-color: #ffffff; } header.noFixed{position: absolute; } header h1{display: block; position: absolute; top:18px; left: 20px; width: 203px; height: 72px; } header h2{display: block; position: absolute; top:51px; left: 262px; height: 19px; line-height: 19px; font-size: 18px; background-color: #ffffff; color: #37371e; vertical-align: baseline; } header #menuIcon, header #serachIcon{display: none; } header nav ul li{display: inline-block; float: left; } header nav ul.headBtns{position: absolute; top: 16px; right: 178px; display: block; margin: 0 10px 0 0; padding: 0; height: 26px; width: auto; white-space: nowrap; z-index: 10; background-color: #ffffff; } header nav ul.headBtns li{position: relative; margin: 2px 10px 0 0; background-color: #eeeeee; border-radius: 1em; overflow: hidden; } header nav ul.headBtns li.openBtn{position:relative; height: 26px; /*height:66px; */width: 89px; overflow: visible; } header nav ul.headBtns li a{display: block; padding: 0; height: 26px; width: 104px; font-size: 11px; line-height: 26px; color: #444444; text-indent: 30px; border-radius: 1em; vertical-align: middle; } /*---------刪掉全球貝親---------*/ header nav ul.headBtns li.openBtn a{width: 89px; background-image: url(../images/topHeadBtnIcon02.svg); background-repeat: no-repeat; background-position: 3px center ; } .no-svg header nav ul.headBtns li.openBtn a{width: 89px; background-image: url(../images/nosvg/topHeadBtnIcon02.png); background-repeat: no-repeat; background-position: 3px center ; } @media screen and (min-width:980px){ header nav ul.headBtns li a:hover{text-decoration: underline; } } header nav ul.headBtns li:nth-child(2) {margin: 2px 0 0 0; } /*------globalselecter START---------*/ .no-svg header nav ul.headBtns li ul.globalselector li:nth-child(2) a{background-image:none ;} header nav ul.headBtns li ul.globalselector{ position: absolute; top:30px; left:-229px; width:710px; height: 0; z-index: 1000; padding: 0; background-color: #eeeeee; border-radius: 10px; color: #999999; overflow: hidden; } header nav ul.headBtns li ul.globalselector li.wrap{padding: 10px 0 40px 20px; border: 0px solid #333333; margin: 0 auto 0 auto; } header nav ul.headBtns li ul.globalselector div{clear: both; border-top: 1px solid #cccccc; padding: 20px 0 5px 0; } header nav ul.headBtns li ul.globalselector span.closeBtn{position:absolute; bottom:10px; right:5px; width: 30px; height: 30px; display: block; cursor:pointer; display: none; } header nav ul.headBtns li ul.globalselector ul,header nav ul.headBtns li ul.globalselector ul li,header nav ul.headBtns li ul.globalselector ul li a{background-color: transparent; background-image: none; } header nav ul.headBtns li ul.globalselector ul.lang{width: auto; height: auto; margin: 0; } header nav ul.headBtns li ul.globalselector ul.lang li{line-height: 50px; height:50px; width: auto; margin: 0 0 0 0; padding: 0; border-radius: 0; } header nav ul.headBtns li ul.globalselector ul.lang li:first-child{line-height: 55px;} header nav ul.headBtns li ul.globalselector ul.lang a{display: inline-block; width: auto; position: relative; height: 20px; text-indent: 18px; background-image: url(../images/arrow.svg); background-repeat: no-repeat; background-position: 6px center ; margin: 0 5px 0 10px; padding: 0 5px 0 0; border-radius: 10px; line-height: 20px;} .no-svg header nav ul.headBtns li ul.globalselector ul.lang a{display: inline-block; width: auto; position: relative; text-indent: 18px; background-image: url(../images/nosvg/arrow.png); background-repeat: no-repeat; background-position: 6px center ; margin: 0 0 0 10px; padding: 0 5px 0 0; } @media screen and (min-width:980px){ header nav ul.headBtns li ul.globalselector ul.lang a:hover{text-decoration: none; -webkit-transition-property:background-color,border-radius,color; -webkit-transition-duration:0.3s; -webkit-transition-timing-function: ease-out; transition-property:background-color,border-radius,color; transition-duration:0.3s; border-radius: 1em; transition-timing-function: ease-out; background-color:#cccccc; } } header nav ul.headBtns li ul.globalselector ul.globalGroup{position: relative; display: block; margin: 0 0 10px 0; padding: 0; width: 100%; float: none; } header nav ul.headBtns li ul.globalselector ul.globalGroup li{display: block; height: auto; width: auto; left: 0; border-radius: 0; float: left; } header nav ul.headBtns li ul.globalselector ul.globalGroup li a{display: block; height: 22px; text-indent: 0; line-height: 22px; margin: 0; width: auto; padding: 0 6px 0 6px; } header nav ul.headBtns li ul.globalselector ul.country{ position: relative; display: block; margin:0 10px 0 0; padding: 0; width: auto ; float: left; } header nav ul.headBtns li ul.globalselector ul.country li{display: block; height: auto; width: 160px; left: 0; border-radius: 0; float: none; margin: 6px 0 0 0; padding: 0; font-size: 12px; color: #666666; } header nav ul.headBtns li ul.globalselector ul.country li.areas{font-size: 12px; color: #999999; } header nav ul.headBtns li ul.globalselector ul.country li a{display: block; width: auto; height: 22px; text-indent:0; line-height: 22px; margin: 0; padding: 0 6px 0 6px; background-image:none ;} header nav ul.headBtns li ul.globalselector ul.globalGroup li a img, header nav ul.headBtns li ul.globalselector ul.country li a img{height: 13px; width: auto; vertical-align: top; margin: 5px 4px 0 0; line-height: 13px; } @media screen and (min-width:980px){ header nav ul.headBtns li ul.globalselector ul.globalGroup li a:hover, header nav ul.headBtns li ul.globalselector ul.country li a:hover{text-decoration: none; -webkit-transition-property:background-color,border-radius,color; -webkit-transition-duration:0.3s; -webkit-transition-timing-function: ease-out; transition-property:background-color,border-radius,color; transition-duration:0.3s; transition-timing-function: ease-out; background-color:#cccccc; border-radius: 1em; } } /*------globalselecter END---------*/ header nav ul.headBtns li form input[type='search']{display:block; position: relative; margin: 0; padding: 0; font-size: 16px; line-height: 26px; font-weight: 400; height: 26px; width: 104px; border: 0; background-color: #eeeeee; border-radius: 1em; -webkit-appearance: button; background-image: url(../images/topHeadBtnIcon03.svg); background-repeat: no-repeat; background-position: 3px center ; text-indent: 5px; } header nav ul.headBtns li form input[type='search'].focused{background-image: url(../images/topHeadBtnIcon03w.svg); } .no-svg header nav ul.headBtns li form input[type='search']{display:block; position: relative; margin: 0; padding: 0; height: 26px; width: 104px; border: 0; background-color: #eeeeee; border-radius: 1em; -webkit-appearance: button; background-image: url(../images/nosvg/topHeadBtnIcon03.png); background-repeat: no-repeat; background-position: 3px center ; text-indent: 5px; } .no-svg header nav ul.headBtns li form input[type='search'].focused{background-image: url(../images/nosvg/topHeadBtnIcon03w.png); } header nav ul.headBtns li form input[type='search'].clicked{background-image: none;} header nav ul.headBtns li form input[type='submit']{display:none; } /*--------SNS---------*/ header nav ul.snsBtns{position: absolute; top: 18px; right: 8px; display: block; height: 26px; width: 158px; overflow: hidden; white-space: nowrap; z-index: 9; } header nav ul.snsBtns li a{display: block; width: 26px; height: 26px; margin: 0 4px 0 0; overflow: hidden; text-indent: -9999px; border-radius: 1em; } header nav ul.snsBtns li:nth-child(1) a{background-color: #3b5998; background-image: url(../images/topSnsFacebook.svg); background-repeat: no-repeat; background-position: center center; } header nav ul.snsBtns li:nth-child(2) a{background-color: #cd201f; background-image: url(../images/topSnsYoutube.svg); background-repeat: no-repeat; background-position: center center; } header nav ul.snsBtns li:nth-child(3) a{background-color: #55acee; background-image: url(../images/topSnsTwitter.svg); background-repeat: no-repeat; background-position: center center; } header nav ul.snsBtns li:nth-child(4) a{background-color: #dd4b39; background-image: url(../images/topSnsGoogleplus.svg); background-repeat: no-repeat; background-position: center center; } header nav ul.snsBtns li:nth-child(5) a{background-color: #3a5998; background-image: url(../images/topSnsInstagram.svg); background-repeat: no-repeat; background-position: center center; } .no-svg header nav ul.snsBtns li:nth-child(1) a{background-color: #3b5998; background-image: url(../images/nosvg/topSnsFacebook.png); background-repeat: no-repeat; background-position: center center; } .no-svg header nav ul.snsBtns li:nth-child(2) a{background-color: #cd201f; background-image: url(../images/nosvg/topSnsYoutube.png); background-repeat: no-repeat; background-position: center center; } .no-svg header nav ul.snsBtns li:nth-child(3) a{background-color: #55acee; background-image: url(../images/nosvg/topSnsTwitter.png); background-repeat: no-repeat; background-position: center center; } .no-svg header nav ul.snsBtns li:nth-child(4) a{background-color: #dd4b39; background-image: url(../images/nosvg/topSnsGoogleplus.png); background-repeat: no-repeat; background-position: center center; } .no-svg header nav ul.snsBtns li:nth-child(5) a{background-color: #3a5998; background-image: url(../images/nosvg/topSnsInstagram.png); background-repeat: no-repeat; background-position: center center; } @media screen and (min-width:980px){ header nav ul.snsBtns li:nth-child(1) a:hover, header nav ul.snsBtns li:nth-child(2) a:hover, header nav ul.snsBtns li:nth-child(3) a:hover, header nav ul.snsBtns li:nth-child(4) a:hover, header nav ul.snsBtns li:nth-child(5) a:hover{-webkit-transition-property:background-color,border-radius,color; -webkit-transition-duration:0.3s; -webkit-transition-timing-function: ease-out; transition-property:background-color,border-radius,color; transition-duration:0.3s; transition-timing-function: ease-out; background-color:#333333; border-radius:0.3em; } } header nav ul.snsBtns li:last-child a{margin: 0; } /*--------SNS---------*/ /*--------siteNavi---------*/ header nav ul.siteNavi{display: inline-block; height: 24px; width: auto; float: right; margin: 63px 20px 0 0; overflow: hidden; white-space: nowrap; } header nav ul.siteNavi li { border-left:1px solid #cccccc; padding: 0 8px 0 8px; } header nav ul.siteNavi li a{height: 22px; line-height: 22px; display: block; padding: 0 5px 0 5px; font-size: 13px; color: #444444; } header nav ul.siteNavi li:last-child{border-right:1px solid #cccccc; } @media screen and (min-width:980px){ header nav ul.siteNavi li a:hover{text-decoration: none; -webkit-transition-property:background-color,margin-top,border,border-radius,color; -webkit-transition-duration:0.3s; -webkit-transition-timing-function: ease-out; transition-property:background-color,border,margin-top,border-radius,color; transition-duration:0.3s; transition-timing-function: ease-out; /*background-color:#dd3333; color:#ffffff; border-radius:1em; */border-bottom:2px solid #ff0000; margin-top: -2px; } } /*------------------------------*/ /*--------header END---------*/ /*-------------#top START------------*/ /*---------------------------------------*/ #top article.wrapper{position: relative; display: block; margin: 105px 0 0 0; padding-bottom:400px; /*overflow-y: scroll; z-index: 10; */background-image: url(../images/wrapperBg.png); background-repeat: no-repeat; background-position: center bottom; background-size: 100% auto; } #top article.wrapper section{clear: both; margin: 0 auto 40px auto; max-width:1000px; text-align: center; /*background-color: #eeeeee; */} #top article.wrapper section:after,#top article.wrapper section#customer:after {clear: both; content: ' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0; } #top article.wrapper section div{text-align: left; } #top article.wrapper section h1{ display: block; height:30px; line-height: 30px; width: auto; margin: 0 auto 0 auto; padding: 0; font-size: 16px; color: #cc0000; background-image: url(../images/sectionH1bg.gif); background-position: center center; background-repeat: no-repeat; background-size: 100% 1px; } #top article.wrapper section h1 span{background-color: #ffffff; padding: 0 5px ; } /*--------#topMainVisual START---------*/ #top section#topMainVisual{margin: 0 0 -175px 0; position: relative; max-width:100%; height: 610px; background-color: #eeeeee; overflow: hidden; } #top section#topMainVisual div.visualSelecter{position:absolute; bottom: 170px; left: 0; margin:0; width: 100%; height: auto; z-index: 10; border:1px #333333; } #top section#topMainVisual div.visualSelecter ul{width: 120px; display: block; margin:0 auto 0 auto; } #top section#topMainVisual div.visualSelecter ul li{margin: 0 4px 0 4px; display: inline-block; } #top section#topMainVisual div.visualSelecter ul li a{ float: left; width: 12px; background-color: #ffffff; border:0px solid #ffffff; display: block; height: 14px; width: 14px; border-radius: 1em; text-indent: -9999px; box-shadow: inset 0px 0px 1px 0px rgba(0,0,0,0.3); } #top section#topMainVisual div.visualSelecter ul li.current a{ background-color: #cccccc; border:0px solid #dddddd; } #top section#topMainVisual span.topCopy, #top section#topMainVisual span.topCopy01, #top section#topMainVisual span.topCopy02, #top section#topMainVisual span.topCopy03, #top section#topMainVisual span.topCopy04, #top section#topMainVisual span.topCopy05{display:block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 980px; height: auto; z-index:6; text-align: left; opacity:0; } #top section#topMainVisual span.topCopy img, #top section#topMainVisual span.topCopy01 img, #top section#topMainVisual span.topCopy02 img, #top section#topMainVisual span.topCopy03 img, #top section#topMainVisual span.topCopy04 img, #top section#topMainVisual span.topCopy05 img{position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: auto; z-index: 5; cursor: pointer; width: 400px; height: auto; margin: auto auto auto 0; } #top section#topMainVisual img.main01, #top section#topMainVisual img.main02, #top section#topMainVisual img.main03, #top section#topMainVisual img.main04, #top section#topMainVisual img.main05{ position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 100%; height: auto; cursor: pointer; z-index: 5; opacity: 0; } .no-svg #top section#topMainVisual img.main01{position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: auto; cursor: pointer; z-index: 5; opacity: 0; } .no-svg #top section#topMainVisual img.main02{position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: auto; cursor: pointer; z-index: 4; opacity: 0; } .no-svg #top section#topMainVisual img.main03{position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: auto; cursor: pointer; z-index: 3; opacity: 0; } .no-svg #top section#topMainVisual img.main04{position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: auto; cursor: pointer; z-index: 2; opacity: 0; } .no-svg #top section#topMainVisual img.main05{position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: auto; cursor: pointer; z-index: 1; opacity: 0; } /*--------END #topMainVisual---------*/ /*--------section START---------*/ #top article.wrapper section#contents,#top article.wrapper section#feature{display: block; background-image: none; position: relative; z-index: 10; width: auto; max-width:1000px; } #top article.wrapper section#contents div#news{box-shadow: 0px 0px 0px 1px rgba(51,51,51,0.1) inset; background-image: none; width: 480px; } #top article.wrapper section#contents div#news h2{display: block; background-color: #ff0000; font-size: 14px; line-height: 30px; color: #ffffff; text-indent: 10px; border-radius: 14px 14px 0 0;} #top article.wrapper section#contents div#news ul{margin: 8px 10px 0px 10px ; height: 117px; overflow: auto; } /* Let's get this party started */ #top article.wrapper section#contents div#news ul::-webkit-scrollbar {width: 8px; } /* Track */ #top article.wrapper section#contents div#news ul::-webkit-scrollbar-track {background: #eeeeee; -webkit-border-radius: 0; border-radius: 0; } /* Handle */ #top article.wrapper section#contents div#news ul::-webkit-scrollbar-thumb {-webkit-border-radius: 0; border-radius: 0; background: #555555; /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2); */} #top article.wrapper section#contents div#news ul::-webkit-scrollbar-thumb:window-inactive {background:#555555; } #top article.wrapper section#contents div#news ul li{display: block; font-size: 13px; line-height: 16px; padding: 4px 0 3px 0; margin: 0 6px 0 6px; overflow: hidden; border-bottom: 1px solid #eeeeee; } #top article.wrapper section#contents div#news ul li a{display: block; color: #8c9bd2; } #top article.wrapper section#contents div#news ul li a small{color: #777777; display:inline-block; font-size: 13px; height: 100%; float: left; height: 20px; padding: 0 5px 0 0; line-height: 16px; width: 95px; } #top article.wrapper section#contents div#news ul li a small.news:after{content: 'N'; display: block; width:14px; height: 14px; color: #ffffff; font-size:10px; font-weight: 700; line-height: 14px; border-radius: 1em; text-align: center; background-color: #e673aa; float: right; margin: 0 0 0 3px; } #top article.wrapper section#contents div#news ul li a small.update:after{content: 'U'; display: block; width:14px; height: 14px; color: #ffffff; font-size: 10px; font-weight: 700; line-height: 14px; border-radius: 1em; text-align: center; background-color: #cde641; float: right; margin: 0 0 0 3px; } #top article.wrapper section#contents div#news ul li a small.product:after{content: 'P'; display: block; width:14px; height: 14px; color: #ffffff; font-size: 10px; font-weight: 700; line-height: 14px; border-radius: 1em; text-align: center; background-color: #8c9bd2; float: right; margin: 0 0 0 3px; } #top article.wrapper section#contents div#news ul li a small.event:after{content: 'E'; display: block; width:14px; height: 14px; color: #ffffff; font-size: 10px; font-weight: 700; line-height: 14px; border-radius: 1em; text-align: center; background-color: #ffe62d; float: right; margin: 0 0 0 3px; } #top article.wrapper section#contents div#news ul li a small.ir:after{content: 'I'; display: block; width:14px; height: 14px; color: #ffffff; font-size: 10px; font-weight: 700; line-height: 14px; border-radius: 1em; text-align: center; background-color: #8cc8eb; float: right; margin: 0 0 0 3px; } #top article.wrapper section#contents div#news ul li a small.support:after{content: 'S'; display: block; width:14px; height: 14px; color: #ffffff; font-size: 10px; font-weight: 700; line-height: 14px; border-radius: 1em; text-align: center; background-color: #78d2c3; float: right; margin: 0 0 0 3px; } #top article.wrapper section#contents div#news ul.table{height: 28px; } #top article.wrapper section#contents div#news ul.table li a small{font-size: 11px; width: auto} #top article.wrapper section#contents div#news ul.table li a small:after{float: left; margin: 0 5px 0 0; } #top article.wrapper section#contents div#news ul li a.seeMore{float: right; font-weight: 700; font-size: 12px; line-height: 14px; color: #555555; } #top article.wrapper section#contents div{position: relative; width: 230px; height: 190px; float: left; margin: 20px 10px 0 10px; background-color: #fefefe; border-radius: 14px; overflow: hidden; } #top article.wrapper section#contents div h2 a{position: absolute; top: 0; left: 0; z-index: 3; display: block; width: 230px; height: 190px; font-size: 16px; color: #444444 !important; padding: 10px; } @media screen and (min-width:980px){ #top article.wrapper section#contents div h2 a:hover{text-decoration: none; color: #ff0000; } } #top article.wrapper section#contents div.content01 span.conBg{border-radius: 14px; position: absolute; top: 0; left: 0; width:230px; height: 190px; z-index: 2; background-image: url(../images/topContentArch01.png); background-repeat: no-repeat; background-position: 0 0; background-size: 230px auto; } #top article.wrapper section#contents div.content02 span.conBg{border-radius: 14px; position: absolute; top: 0; left: 0; width:230px; height: 190px; z-index: 2; background-image: url(../images/topContentArch02.png); background-repeat: no-repeat; background-position: 0 0; background-size: 230px auto; } #top article.wrapper section#contents div.content03 span.conBg{border-radius: 14px; position: absolute; top: 0; left: 0; width:230px; height: 190px; z-index: 2; background-image: url(../images/topContentArch03.png); background-repeat: no-repeat; background-position: 0 0; background-size: 230px auto; } #top article.wrapper section#contents div.content04 span.conBg{border-radius: 14px; position: absolute; top: 0; left: 0; width:230px; height: 190px; z-index: 2; background-image: url(../images/topContentArch04.png); background-repeat: no-repeat; background-position: 0 0; background-size: 230px auto; } #top article.wrapper section#contents div.content05 span.conBg{border-radius: 14px; position: absolute; top: 0; left: 0; width:230px; height: 190px; z-index: 2; background-image: url(../images/topContentArch05.png); background-repeat: no-repeat; background-position: 0 0; background-size: 230px auto; } #top article.wrapper section#contents div.content06 span.conBg{border-radius: 14px; position: absolute; top: 0; left: 0; width:230px; height: 190px; z-index: 2; background-image: url(../images/topContentArch06.png); background-repeat: no-repeat; background-position: 0 0; background-size: 230px auto; } #top article.wrapper section#contents div.content01 img, #top article.wrapper section#contents div.content02 img, #top article.wrapper section#contents div.content03 img, #top article.wrapper section#contents div.content04 img, #top article.wrapper section#contents div.content05 img, #top article.wrapper section#contents div.content06 img{border-radius: 14px; position: absolute; top: 0; left: 0; width:230px; height: 190px; z-index: 1; } /*---------#feature--------*/ #top article.wrapper section#feature div{position: relative; width: 480px; height: 190px; float: left; margin: 20px 10px 0 10px; background-color: #fefefe; border-radius: 14px; overflow: hidden; } #top article.wrapper section#feature div.double{width: 980px; } #top article.wrapper section#feature div img{border-radius: 14px; position: absolute; left: 0; top:0; right:0; bottom:0; width:100%; height: auto; margin:auto; z-index: 1; } #top article.wrapper section#feature div a{border-radius:14px; position: absolute; left: 0; top:0; display: block; width: 100%; height:100%; z-index: 3; border: 0px solid #333333; background-image:url(../images/spacer.gif);} #top article.wrapper section#feature div a.movie{background-image:url(../images/playBtn.svg); background-position: center center; background-repeat: no-repeat; } .no-svg #top article.wrapper section#feature div a.movie{background-image:url(../images/nosvg/playBtn.png); background-position: center center; background-repeat: no-repeat; } @media screen and (min-width:980px){ #top article.wrapper section#feature div a:hover{background-color:rgba(230,115,170,0.4);} .no-rgba article.wrapper section#feature div a:hover{background-image:url(../images/nosvg/no-rgbaOver.png); } } #top article.wrapper section#feature div a span{display:block; width:100%; position:absolute; right:0; bottom:0; background-color: rgba(255,255,255,0.6); font-size: 13px; line-height:16px; padding:6px; color: #444444; text-align: right; text-indent: 20px; } .no-rgba #top article.wrapper section#feature div a span{background-image: url(../images/no-rgbaBg.png);} #top article.wrapper section#feature div h2:after{content: ' '; width: 15px; height:20px; float: right; } /*-----------#product-----------*/ #top article.wrapper section#product{position: relative; display: block; background-image: none; position: relative; width: auto; max-width:990px; height: 410px; } #top article.wrapper section#product .pageLoaderL{position: absolute; top: 40px; left: 0; width: 0; z-index:50;height: 100%; background-color:#ffffff; background-image: url(../images/loadingBar.gif); background-repeat:no-repeat; background-position: center center; background-size: 128px auto;} #top article.wrapper section#product .pageLoaderR{position: absolute; top: 40px; right: 0; width: 0; z-index:50;height: 100%; background-color:#ffffff; background-image: url(../images/loadingBar.gif); transform: rotate(180deg); background-repeat:no-repeat; background-position: center center; background-size: 128px auto;} /*-----------商品底色灰修改成白加需線框-----------*/ #top article.wrapper section#product .page{} #top article.wrapper section#product h1{margin-bottom: 10px; } #top article.wrapper section#product div{position: relative; float: left; width: 188px; height: 170px; margin: 10px 5px 0 5px; background-color: #ffffff; border-radius: 14px; background-image: url(../images/topProductBg.png); background-repeat: no-repeat; background-position: center; background-size: 100% auto; overflow: hidden; border: 2px solid #eeeeee;} #top article.wrapper section#product div.double{width: 386px; height: 350px; } #top article.wrapper section#product div a h2{ white-space: normal; } #top article.wrapper section#product div a h2{border-radius:0 0 14px 14px; position: absolute; display: block; width: 100%; left: 0; bottom: 0; text-align: center; font-size: 12px; line-height: 34px; color: #444444; z-index: 20; overflow: hidden; } #top article.wrapper section#product div a h2.double{background-color: #ff0000; font-size: 15px; color: #ffffff; line-height: 18px; background-image: url(../images/navArrowR.svg); background-repeat:no-repeat; background-position: 10px center; padding: 10px 0 10px 0; } .no-svg #top article.wrapper section#product div a h2.double{background-color: #ff0000; font-size: 15px; color: #ffffff; line-height: 18px; background-image: url(../images/nosvg/navArrowR.png); background-repeat:no-repeat; background-position: 10px center; padding: 10px 0 10px 0; } #top article.wrapper section#product div a h2 span{display:block;margin: 0 10px 0 20px;} #top article.wrapper section#product div a{border-radius:14px; text-decoration: none; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; background-image:url(../images/spacer.gif);} #top article.wrapper section#product div img{position: absolute; left: 0; top: 0; width: 100%; height: auto; z-index: 0; } #top article.wrapper section#product div.double a img{width: 100%; height: auto; } #top article.wrapper section#product .page01{} #top article.wrapper section#product .page02{} #top article.wrapper section#product nav{display: block; } #top article.wrapper section#product nav li:nth-child(1){display: block; position: absolute; top: 200px; left: -15px; width: 40px; height: 50px; border-radius: 7px; z-index: 60; overflow: hidden; } #top article.wrapper section#product nav li:nth-child(2){display: block; position: absolute; top: 200px; right: -15px; width: 40px; height: 50px; border-radius: 7px; z-index: 60; overflow: hidden; } #top article.wrapper section#product nav li a{display: block; width: 40px; height: 50px; text-indent: -9999px; background-color: rgba(85,85,85,0.3); cursor: pointer;} #top article.wrapper section#product nav li a:hover{display: block; width: 40px; height: 50px; text-indent: -9999px; background-color: rgba(230,115,170,0.3); cursor: pointer;} #top article.wrapper section#product nav li:nth-child(1) a{background-image: url(../images/navArrowL.svg); background-position: center center; background-repeat: no-repeat; } #top article.wrapper section#product nav li:nth-child(2) a{background-image: url(../images/navArrowR.svg); background-position: center center; background-repeat: no-repeat; } .no-svg #top article.wrapper section#product nav li:nth-child(1) a{background-image: url(../images/nosvg/navArrowL.png); background-position: center center; background-repeat: no-repeat; background-color: #666666;} .no-svg #top article.wrapper section#product nav li:nth-child(2) a{background-image: url(../images/nosvg/navArrowR.png); background-position: center center; background-repeat: no-repeat; background-color: #666666;} /*-----------#customer-----------*/ #top article.wrapper section#customer{display: block; background-image: none; position: relative; width: auto; max-width:990px; } #top article.wrapper section#customer h1{margin-bottom: 10px; } #top article.wrapper section#customer div{position: relative; width: 386px; height: 170px; float: left; margin: 10px 5px 0 5px; background-color: #fefefe; border-radius: 14px; overflow: hidden; } #top article.wrapper section#customer div.double{width: 584px; height: 170px; } #top article.wrapper section#customer div a:hover{text-decoration: none; } #top article.wrapper section#customer div img{width: auto; height: 100%; } #top article.wrapper section#customer div a {border-radius:14px; position: absolute; left: 0; top:0; width: 100%; height: 100%; z-index: 2; background-image:url(../images/spacer.gif);} #top article.wrapper section#customer div a h2{ display: block; width: 100%; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); text-align: center; font-size: 16px; color: #444444; } /*---------------------------------------*/ /*-------------#top END------------*/ /*-------------.column01 START------------*/ /*---------------------------------------*/ .column01{ } #pages article.wrapper{overflow: hidden; } #pages #debugP{ display: block; position: fixed; z-index: 2000; left:0; top:0; width: 200px; height: 20px; background-color: #333333; color: #ffffff; display: none; } #pages div.upper h1{ display: block; position: fixed; top: 105px; left: 0; width: 580px; height: 600px; z-index: 10; font-size: 30px; line-height: 110px; text-indent: 20px; color: #6e6e50; font-weight: 100; padding: 0 0 0 0; background-image: url(../images/pageH1bg.png); background-position: left top; background-repeat: no-repeat; overflow: hidden; } #pages div.upper h1.noPic{ background-size: auto 400px; background-image: url(../images/pageH1noPicBg.png); } #pages div.upper section#pageMainVisual01{ position: fixed; top:105px; left:0; margin: 0; display: block; width: 100% !important; height: 600px; overflow: hidden; z-index: 0; } #pages div.upper section#pageMainVisual01.noPic{ height: 300px; } #pages div.upper section#pageMainVisual01 .up, #pages div.upper section#pageMainVisual01 .dn{ display: block; position: absolute; top:0; left: 0; width:100%; height: 600px; background-color: #eeeeee; overflow: hidden; z-index: 3; } #pages div.upper section#pageMainVisual01 .dn{ z-index: 2; } #pages div.upper section#pageMainVisual01 .up img, #pages div.upper section#pageMainVisual01 .dn img{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; } .column01 article.wrapper{ position: absolute; top: 715px; left: 0; width: 100%; height: auto; z-index: 10; overflow: hidden; border: 0px solid #333333 } /*--------sideNavi Start---------*/ .column01 nav#sideNavi{ position: fixed; /*top: 160px; left: -160px; */ top: 240px; width: 170px; padding: 0 0 0 0; background-color: rgba(245,245,245,0.8); border-radius: 0px 14px 14px 0px; font-size: 15px; line-height: 15px; z-index: 20; overflow: hidden; white-space: nowrap; } .no-svg .column01 nav#sideNavi{ background-image: url(../images/no-rgbaBg.png); } #pages nav#sideNavi ul{ margin:0 10px 20px 0px; height: auto; } .column01 nav#sideNavi span.menuIcon{ display: block; padding: 10px 0 0 10px; cursor: pointer; } .column01 nav#sideNavi span img.closed{ display: none; } .column01 nav#sideNavi span img.opend{ display: inline; opacity:0; } @media screen and (max-width:1200px){ .column01 nav#sideNavi{ width:40px; height: 40px; } .column01 nav#sideNavi span img.closed{ display: inline; } .column01 nav#sideNavi span img.opend{ display: none; opacity:1; } } #pages nav#sideNavi ul li a{ display: block; height: auto; line-height: 16px; padding:10px 0 10px 14px; color: #777777; } #pages nav#sideNavi ul li.current a{ padding:10px 0 10px 14px; color: #444444; font-weight: 600; } #pages nav#sideNavi ul li.current:before{ content: ''; float: left; line-height: 16px; display: block; width:6px; height: 6px; color: #ff0000; border-radius: 3px; background-color: #ff0000; margin: 15px 4px 8px 4px; } /*--------sideNavi End---------*/ .column01 article:after,#top article.wrapper section#customer:after {clear: both; content: ' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0; } .column01 section.content{ display: block; margin: 0; padding: 0; width: 100%; height: auto; min-height: 600px; } .column01 section .inner{ display: block; max-width: 820px; margin: 0 auto 0 auto; padding: 50px 0 50px 0; text-align: left; color:#37371e; font-size:20px; line-height:56px; } .column01 section .inner.center{ text-align: center; } .column01 section .inner:after { clear: both; content: ' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0; } /*------MISC-----****/ .column01 section.content .inner ul.gridMenu{ margin: -50px 0 0 0; padding: 0; } .column01 section.content .inner ul.gridMenu li{ margin: 0 6px 12px 6px; float: left; overflow: hidden; background-color: #ffffff; border-radius: 14px; box-shadow: inset 0px 0px 2px rgba(0,0,0,0.3); text-align: center; } .column01 section.content .inner ul.gridMenu li a{ position: relative; display: block; width: 260px; height: 100px; color: #e673aa; font-size: 18px; line-height: 26px; } .column01 section.content .inner ul.gridMenu li a span{ display: block; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); padding: 0 5px 0 5px; } .no-csstransforms .column01 section.content .inner ul.gridMenu li a span{ display: inline; position: relative; top: 24px; } .column01 section.content .inner ul.listTable{ margin: 0 auto 0 auto; } .column01 section.content .inner ul.listTable li{ position: relative; display: block; text-align: left; line-height: 20px; padding: 8px 0 8px 0; border-bottom: 1px solid #dddddd; } .column01 section.content .inner ul.listTable.style_b li{ border-bottom: 1px solid #ffffff; } .column01 section.content .inner ul.listTable li small, .column01 section.content .inner ul.listTable.style_b small{ position: absolute; left: 0; top: 8px; display: block; width: 200px; padding: 0 0 0 0; height: auto; color: #6e6e50; vertical-align: top; font-size: 13px; line-height: 18px; } .column01 section.content .inner ul.listTable li small.noAbs{ position: relative; width: auto; top: 0; padding: 0 0 10px 0; } .column01 section.content .inner ul.listTable li span{ display: inline-block; width: auto; padding: 0 0 0 260px; font-size:20px; line-height: 32px; color: #777777; } .column01 section.content .inner ul.listTable.style_b span{ color: #ffffff; } .column01 section.content .inner ul.listTable li a{ color: #8c9bd2; } .column01 section.content .inner ul.listTable li ul li{ border-bottom: 0px solid #dddddd !important; padding: 0; line-height: 32px; } /*------MISC END****/ .column01 section.content.bg_a{ background-color: transparent; } .column01 section.content.bg_b{ background-color: #e673aa; background-image: url(../images/column01ContentBg_b.png); background-position: center top; background-size: 100% 100%; background-repeat: repeat; } .column01 section.content.bg_c{ background-color: #ffffff; } .column01 section.content.bg_d{ background-color: rgba(0,0,0,0.15); } .column01 section.content.bg_e{ background-color: #8c9bd2; background-image: url(../images/column01ContentBg_e.png); background-position: center top; background-size: 100% 100%; background-repeat: repeat; } .column01 section .inner h1.titles{ display: block; font-size: 28px; font-weight: 400; color: #6e6e50; text-align: center; height: 110px; background-image:url(../images/column01ContentTitleBg.png); background-position: center 60px; background-repeat: no-repeat; background-size: 400px 1px ; } .column01 section .inner h1.titles.white{ color: #ffffff; } /*---------column02-----------*/ body.column02{ } .column02 article.wrapper{ position: relative; top: 0; left: 0; max-width: 980px; z-index: 10; margin: 0 auto 0 auto; border-radius: 14px 14px 0px 0px ; background-color: #ffffff; } .column02 article.wrapper section.content{ padding: 50px 40px 160px 220px; } .column02 article.wrapper section.content.noSideNavi{ padding: 50px 40px 160px 40px; } .column02 article.wrapper section.content h1{ display: block; font-size:24px; line-height: 32px; color: #6e6e50; } .column02 article.wrapper section.content h1:after { content:""; margin: 20px 0 0 0; display:block; height:1px; width:100%; background:-webkit-gradient(linear, left top, right bottom, from(#999999), to(#eeeeee)); background:-moz-linear-gradient(left, #999999, #eeeeee); background:-o-linear-gradient(left, #999999, #eeeeee); /* 新增 */ background:-ms-linear-gradient(left, #999999, #eeeeee); /* 新增 */ background:linear-gradient(left, #999999, #eeeeee); } .column02 article.wrapper section.content h1.sytle02{ display: block; font-size:22px; line-height: 48px; color: #777777; border-radius:14px 0px 0px 14px; text-indent: 15px; background:-webkit-gradient(linear, left top, right bottom, from(rgba(230,115,170,0.3)), to(#ffffff)); background:-moz-linear-gradient(left, #e673aa, #ffffff); background:linear-gradient(left, #e673aa, #ffffff); } .column02 article.wrapper section.content h1.sytle02:after { content:""; margin: 20px 0 0 0; display:none; height:1px; width:100%; background:-webkit-gradient(linear, left top, right bottom, from(#999999), to(#eeeeee)); background:-moz-linear-gradient(left, #999999, #eeeeee); background:linear-gradient(left, #999999, #eeeeee); } .column02 article.wrapper section.content p{ margin: 40px 0 0 0; font-size: 15px; /*line-height: 38px;*/ line-height: 24px; font-weight: 400; } .column02 article.wrapper section.content em{ display: block; font-weight: 400; } .column02 article.wrapper section.content ul li{ font-size: 18px; line-height: 34px; font-weight: 200; margin: 40px 0 0 0; } .column02 article.wrapper section.content ul li ul{ margin: 10px 0 0 0; } .column02 article.wrapper section.content ul li ul li{ margin: 10px 0 0 0; } /*-----------------*/ .column02 article.wrapper section.content ul li ul{ list-style: none; display: table; } .column02 article.wrapper section.content ul li ul li:after { content: ""; display: block; } .column02 article.wrapper section.content ul li ul li{ display: table-row; } .column02 article.wrapper section.content ul li ul li:before{ content: "•"; display: table-cell; padding-right: 0.4em; font-size: 14px; } /*-----------------*/ .column02 article.wrapper section.content ul li em{ display:block; font-size: 20px; font-style: normal; } .column02 article.wrapper section.content p span.right{ float: right; /* padding: 0 0 20px 20px;*/ padding: 0 0 1em 1em; } /*------新增靠左圖及圖下方文字****/ .column02 article.wrapper section.content p span.left{ float: left; padding: 1em 1em 1em 0; vertical-align:middle; } .column02 article.wrapper section.content p span.left small{ display: block; font-size: 15px; line-height: 22px; color: #444444; text-align: center; } /*新增結束*/ .column02 article.wrapper section.content p span.right small{ display: block; font-size: 15px; line-height: 22px; color: #444444; text-align: center; } .column02 article.wrapper nav#sideNavi{ position: absolute; top: 50px; width: 170px; /*height: 340px; */ padding: 10px 0 0 0; background-color: #f6f6f6; border-radius: 0px 14px 14px 0px; font-size: 15px; line-height: 15px; z-index: 20; overflow: hidden; } /*左側選項固定位置停用 .column02 article.wrapper nav#sideNavi.fixed{ position: fixed; top: 105px; }*/ .column02 article.wrapper nav#sideNavi ul{ border-radius: 0px 14px 14px 0px; } /*-------------sitemap-------------*/ .sitemap .wrapper{} .sitemap .wrapper .content{} .sitemap .wrapper .content .inner{border-left: 1px solid #e5e5e5; border-right: 0px solid #e5e5e5;margin: 0;} .sitemap .wrapper .content .inner ul{padding: 0 20px 20px 100px;width: auto;} .sitemap .wrapper .content .inner ul li{border-bottom: 1px solid #e5e5e5; margin: 20px 0 10px 0; padding: 0 0 20px 0; line-height: 1em;} .sitemap .wrapper .content .inner ul li ul {margin: 20px 0 0px 100px; padding: 0; } .sitemap .wrapper .content .inner ul li ul li{border-top: 1px solid #e5e5e5;border-bottom:0px solid #e5e5e5;float: left;width:310px;font-size: 14px;line-height: 18px;display: inline; margin: 0 0 0 20px;padding: 10px 0 10px 0;} .sitemap .wrapper .content .inner ul li ul li.withThird{width:660px;border-top: 1px solid #e5e5e5;border-bottom:0px solid #e5e5e5;margin: 0 0 25px 20px;} .sitemap .wrapper .content .inner ul li ul li:before{content: "-"; display: inline; padding: 0 0.3em 0 0.3em; float: left;color: #cccccc;} .sitemap .wrapper .content .inner ul li a{display: block; margin: 0 0 0 0; padding: 5px 5px 5px 8px; color: #666666;border-radius: 1em; border: 0px solid #dddddd;} .sitemap .wrapper .content .inner ul li ul li a{margin: 0; padding: 0 0 0 10px;line-height: 24px; } @media screen and (min-width:980px){ .sitemap .wrapper .content .inner ul li a:hover,.sitemap .wrapper .content .inner ul li ul li a:hover{text-decoration: none;color: #444444;background-color: rgba(230,115,170,0.3);} } .sitemap .wrapper .content .inner ul li ul li ul {margin: 10px 0 0 60px;padding: 0;} .sitemap .wrapper .content .inner ul li ul li ul li{border-top: 0px solid #e5e5e5;border-bottom:0px solid #e5e5e5;float:left;width:31%;font-size: 12px;line-height: 16px;display: inline; margin: 0 0 0 0;padding: 5px 0 5px 10px;} .sitemap .wrapper .content .inner ul li ul li ul li a{padding: 0 5px 0 5px;width: auto;line-height: 24px;background-color: #fafafa;} .sitemap .wrapper .content .inner ul li ul li ul li:before{line-height: 24px;} /*------.global SP only------*/ .sitemap.global{display: none;} /*--------#top footer | #pages footer--------*/ #top footer{ position: relative; height: 180px; background-color: #e673aa; color: #ffffff; overflow: hidden; } #pages footer{ position: relative; height: 210px; background-color: #888888; color: #ffffff; overflow: hidden; } #top footer h1,#pages footer h1{ display: block; position: absolute; top: 20px; left:20px; margin: 0; font-size: 22px; font-weight: 200; } #top footer small, #pages footer small{ display: block; position: absolute; top: 60px; left:20px; margin: 0; font-size: 12px; font-weight: 200; } #top footer ul, #pages footer ul{ display: block; float: right; height: auto; width: auto; margin: 20px 20px 0 0; padding: 0; } #top footer ul li, #pages footer ul li{ margin: 0; padding: 0; display: block; } #top footer ul a ,#pages footer ul a{ display: block; text-indent: 0; color: #ffffff; font-size: 14px; font-weight: 300; line-height: 28px; text-decoration: underline; } #top footer ul a:hover, #pages footer ul a:hover{ text-decoration: none; color: #9999ff; } /*--------footer END---------*/ /* ------------------------------------------------------------------------------- */ /* -------------------------Version TB ----------------------------------------- */ /* ------------------------------------------------------------------------------- */ @media screen and (min-width:568px) and (max-width: 980px) { header{position: relative; height: 100px; left:0; top:0; margin: 0 ; padding: 0; } header h1,header h1 img{top:20px; left:20px; height: 46px; width: auto; } header h2{top:38px; left:194px; height: auto; width: auto; } #debugW{background-color: #66ff66; } a:active{ -webkit-tap-highlight-color:rgba(230,115,170,0.5); } header #serachIcon{position: absolute; display: block; top: 20px; right: 40px; margin: 0; width:35px; height: 55px; cursor: pointer; background-image: url(../images/serchIcon.svg); background-repeat: no-repeat; background-position: center center ; text-indent: -9999px; z-index: 10; } header #serachIcon.opend{background-image: url(../images/menuIconOpend.svg); background-repeat: no-repeat; background-position: center center ; } header #menuIcon{position: absolute; display: block; top: 20px; right: 0px; margin: 0; width:40px; height: 55px; cursor: pointer; background-image: url(../images/menuIcon.svg); background-repeat: no-repeat; background-position: center center ; text-indent: -9999px; z-index: 10; background-color: #ffffff; } header #menuIcon.opend{background-image: url(../images/menuIconOpend.svg); background-repeat: no-repeat; background-position: center center ; } .no-svg header #serachIcon{position: absolute; display: block; top: 20px; right: 40px; margin: 0; width:35px; height: 55px; cursor: pointer; background-image: url(../images/nosvg/serchIcon.png); background-repeat: no-repeat; background-position: center center ; text-indent: -9999px; z-index: 10; } .no-svg header #serachIcon.opend{background-image: url(../images/nosvg/menuIconOpend.png); background-repeat: no-repeat; background-position: center center ; } .no-svg header #menuIcon{position: absolute; display: block; top: 20px; right: 0px; margin: 0; width:40px; height: 55px; cursor: pointer; background-image: url(../images/nosvg/menuIcon.png); background-repeat: no-repeat; background-position: center center ; text-indent: -9999px; z-index: 10; background-color: #ffffff; } .no-svg header #menuIcon.opend{background-image: url(../images/nosvg/menuIconOpend.png); background-repeat: no-repeat; background-position: center center ; } header nav {margin: 20px 0 0 0; position: relative; overflow: visible; /*width: 75px; height: 400px; */width: 40px; height:55px; float: right; } header nav .spMenu{border-radius:0 0 0 14px; overflow:hidden; position: absolute; top:60px; right:0px; display: block; width: 240px; margin: 0; height: auto; padding: 20px 0 0 0; background-color: #ffffff; z-index: 4; overflow: visible; border-left: 0px solid #dddddd; border-bottom: 0px solid #dddddd; background-color: #ffffff; } header nav .tbMenu{display: block; overflow: hidden; height: 240px; height: 0; } header nav ul.headBtns{position: absolute; top: -43px; right:70px; z-index: 12; width: 0; height: 22px; white-space: nowrap;} header nav ul.headBtns li{display: block; height:auto; margin: 0 0 0 0; z-index: 8; width: auto; background-color: transparent; border-radius: 0; float: left; } header nav ul.headBtns li:nth-child(1){height:auto; position: absolute; left: -169px; } header nav ul.headBtns li:nth-child(2){height:auto; position: absolute; left: -90px; } header nav ul.headBtns li:nth-child(3){width: auto; height:auto; margin: 0; padding: 0; } header nav ul.headBtns li a{display: block; padding: 0; height: 22px; width: 104px; font-size: 11px; line-height: 22px; color: #444444; font-weight: 300; text-indent: 30px; border-radius: 1em;} /*--header nav ul.headBtns li:nth-child(1) a{width: 89px; background-image: url(../images/topHeadBtnIcon01.svg); background-repeat: no-repeat; background-position: 3px center ; background-color: #ffffff; border-radius: 0;}--*/ header nav ul.headBtns li:nth-child(1) a{width: 89px; background-image: url(../images/topHeadBtnIcon02.svg); background-repeat: no-repeat; background-position: 3px center ; background-color: #ffffff;border-radius: 0;} /*--.no-svg header nav ul.headBtns li:nth-child(1) a{width: 89px; background-image: url(../images/nosvg/topHeadBtnIcon01.png); background-repeat: no-repeat; background-position: 3px center ; }--*/ .no-svg header nav ul.headBtns li:nth-child(1) a{width: 89px; background-image: url(../images/nosvg/topHeadBtnIcon02.png); background-repeat: no-repeat; background-position: 3px center ; } header nav ul.headBtns li form{position: relative; display: block; /*width: 140px; */width: 0px; height: 22px; line-height: 22px; border-radius: 0; overflow: hidden; background-color: #ffffff; z-index: 100; margin: 0; } header nav ul.headBtns li form input[type='search']{border-radius: 1em; width:140px; height: 22px; line-height: 22px; background-image: none; text-indent: 0; margin: 0; padding: 0; } .no-svg header nav ul.headBtns li form input[type='search']{border-radius: 1em; width:140px; height: 22px; line-height: 22px; background-image: none; text-indent: 0; margin: 0; padding: 0; } header nav ul.headBtns li form input[type='submit']{display:none; } /*-------*/ header nav ul.headBtns li ul.globalselector{display: none; } /*-------*/ header nav ul.siteNavi{position: relative; width: auto; float: none; clear: both; text-align: left; margin: 0; padding: 0 0 10px 0; height: auto; width: 210px; white-space:normal; top: 0; left: 10px; border-bottom: 1px solid #dddddd; } header nav ul.siteNavi li, header nav ul.siteNavi li:last-child{display: block; float: none; clear: both; margin: 0 0 0 0px; text-align: left; white-space:normal; border: 0; } header nav ul.siteNavi li a{position: relative; display: block; height:32px; width: auto; float: none; margin: 0; padding: 0; background-color:transparent; text-align: left; line-height: 32px; font-size:15px; border: 0; text-indent: 20px; } header nav ul.siteNavi li a:hover{text-decoration: none; -webkit-transition-property:background-color,border-radius,color; -webkit-transition-duration:0; -webkit-transition-timing-function: ease-out; transition-property:background-color,border-radius,color; transition-duration:0; transition-timing-function: ease-out; background-color:transparent; border-radius:0; } /*--------siteNavi END---------*/ header nav ul.snsBtns{position: relative; left: 0; width: 310px; height:70px; margin: 0 0 0 10px; padding: 0; } header nav ul.snsBtns li{} header nav ul.snsBtns li a, header nav ul.snsBtns li:last-child a{display: block; width: 34px; height: 34px; margin: 0 0 0 6px; } /*--------#topMainVisual START---------*/ #top section#topMainVisual{ margin:0 0 -85px 0; display: block; height: 340px; overflow: hidden; } #top section#topMainVisual div.visualSelecter{position:absolute; bottom: 80px; left: 0; margin:0; width: 100%; height: auto; z-index: 10; border:1px #333333; } #top section#topMainVisual span.topCopy, #top section#topMainVisual span.topCopy01, #top section#topMainVisual span.topCopy02, #top section#topMainVisual span.topCopy03, #top section#topMainVisual span.topCopy04, #top section#topMainVisual span.topCopy05{display:relative; width: 100%; } #top section#topMainVisual span.topCopy img, #top section#topMainVisual span.topCopy01 img, #top section#topMainVisual span.topCopy02 img, #top section#topMainVisual span.topCopy03 img, #top section#topMainVisual span.topCopy04 img, #top section#topMainVisual span.topCopy05 img{width: 45%; height: auto; margin: auto auto auto 10px; } /*--------#topMainVisual END---------*/ #top article.wrapper{margin: 0; } #top article.wrapper section#contents div#news ul{overflow-y:auto; margin: 12px; height: 110px; } #top article.wrapper section#product div.double, #top article.wrapper section#product div{position: relative; text-align: center; } #top article.wrapper section#product div a{display: block; text-align: center; } #top article.wrapper section#product div img{position: relative; width: 80%; height: auto; margin: 0 auto 0 auto; } #top article.wrapper section#feature div a{border-radius:14px; position: absolute; left: 0; top:0; display: block; width: 100%; height:100%; z-index: 3; border: 0px solid #333333; } #top article.wrapper section#feature div a span{font-size: 11px; line-height: 16px; } #top article.wrapper section#feature div img{ width: auto; height: 100%; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } /*----------#pages------------------*/ #pages div.upper h1{ position: absolute; top:100px; height: 440px; width: 100%; background-size: auto 100%; font-size:26px; line-height: 66px; } .column01 article.wrapper{ position: absolute; top: 540px; left: 0; width: 100%; height: auto; z-index: 10; } #pages div.upper section#pageMainVisual01{ position: absolute; top:100px; height: 440px; width: 100%; overflow: hidden; } #pages div.upper section#pageMainVisual01.noPic{ height:90px; overflow: hidden; display: none; } #pages div.upper section#pageMainVisual01 .up, #pages div.upper section#pageMainVisual01 .dn{ height: 440px; } .column01 section .inner h1.titles{ height:80px; background-image:url(../images/column01ContentTitleBg.png); background-position: center 60px; background-repeat: no-repeat; background-size: 400px 1px ; } .column01 nav#sideNavi{display: none; } .column01 section.content{ display: block; margin: 0; padding: 0; width: 100%; min-height:300px; } .column01 section.content.bg_d{ background-color: rgba(0,0,0,0.25); } .column01 section .inner{ text-align:center; color:#37371e; width:90%; margin: 0 auto 0 auto; padding: 30px 0 30px 0; } /*------MISC-----****/ .column01 section.content .inner ul.gridMenu{ width: auto; margin: -50px auto 0 auto; padding: 0; } .column01 section.content .inner ul.gridMenu li{ display: block; width: 47%; height: auto; float: left; overflow: hidden; background-color: #ffffff; border-radius: 14px; box-shadow: inset 0px 0px 3px rgba(0,0,0,0.5); text-align: center; } .column01 section.content .inner ul.gridMenu li a{ display: block; color: #e673aa; width: auto; height: 90px; } .column01 section.content .inner ul.gridMenu li a span{ display: block; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); padding: 0 5px 0 5px; } .column01 section.content .inner ul.listTable{ margin: 0 auto 0 auto; } .column01 section.content .inner ul.listTable.left{ width: 48%; float: left; } .column01 section.content .inner ul.listTable.right{ width: 48%; float: right; } .column01 section.content .inner ul.listTable li{ } .column01 section.content .inner ul.listTable.style_b li{ } .column01 section.content .inner ul.listTable li small{ } .column01 section.content .inner ul.listTable.style_b small{ } .column01 section.content .inner ul.listTable li span{ } .column01 section.content .inner ul.listTable.style_b span{ } .column01 section.content .inner ul.listTable li a{ } .column01 section.content .inner ul.listTable li ul li{ } /*------MISC END****/ /*---------column02-----------*/ .column02 article.wrapper{ border-radius: 0; top: 0; } .column02 article.wrapper section.content{ padding: 50px 40px 160px 200px; } /*--------sitemap--------*/ .sitemap .wrapper .content .inner{border-left: 0px solid #e5e5e5;border-right: 0px solid #e5e5e5;margin: 0;} .sitemap .wrapper .content .inner ul{padding: 0 0 20px 0;width: auto;} .sitemap .wrapper .content .inner ul li{border-bottom: 1px solid #e5e5e5;padding: 0 0 20px 0;} .sitemap .wrapper .content .inner ul li ul li{border-top: 1px solid #e5e5e5;border-bottom:0px solid #e5e5e5;float: left;width:100%;font-size: 14px;line-height: 18px;display: inline; margin: 0 20px 0 0;padding: 10px 0 10px 0;} .sitemap .wrapper .content .inner ul li ul li.withThird{width:100%;border-top: 1px solid #e5e5e5;border-bottom:0px solid #e5e5e5;margin: 0 20px 25px 0;} .sitemap .wrapper .content .inner ul li a,.sitemap .wrapper .content .inner ul li ul li a{display: block;color: #666666;border-radius: 1em;padding: 0 0 0 10px;line-height: 24px;} .sitemap .wrapper .content .inner ul li ul li ul {margin: 10px 0 0 60px;padding: 0;} .sitemap .wrapper .content .inner ul li ul li ul li{border-top: 0px solid #e5e5e5;border-bottom:0px solid #e5e5e5;float:left;width:46%;font-size: 12px;line-height: 16px;display: inline; margin: 0 0 0 0;padding: 5px 0 5px 10px;} /*------.global SP-TB only------*/ .sitemap.global {display: block;} .sitemap.global .closeBtn{display: none;} .sitemap.global .wrapper {margin-top:0; padding-top:0;} .sitemap.global .wrapper .content .inner ul.lang{margin-top:0; width: auto; height: auto; margin: 0;border-bottom: 1px solid #dddddd; width: 100%; } .sitemap.global .wrapper .content .inner ul.lang li{line-height: 50px; height:50px; width: auto; margin: 0 0 0 0; padding: 0; border-radius: 0; border: 0; } .sitemap.global .wrapper .content .inner ul.lang li:before, .sitemap.global .wrapper .content .inner ul.lang li:first-child{display: none;} .sitemap.global .wrapper .content .inner ul.lang a{display: inline-block; width: auto; position: relative; line-height: 20px; font-size: 18px; height: 20px; text-indent: 10px; background-image: url(../images/arrow.svg); background-repeat: no-repeat; background-position: 0 center ; margin: 0 5px 20px 0; padding: 0 5px 0 0; border-radius: 10px; } .sitemap.global .wrapper .content .inner ul{padding:0 0 0 0; border:0px solid #e5e5e5;} .sitemap.global .wrapper .content .inner ul.country li.areas{border-top: 0px ; font-weight: 700; padding-top: 20px;} .sitemap.global .wrapper .content .inner ul.country li.areas.spNone{display: none;} .sitemap.global .wrapper .content .inner ul.country li.areas:nth-child(2){border-top: 0px ; font-weight: 700;} .sitemap.global .wrapper .content .inner ul.country li:before{display: none;} .sitemap.global .wrapper .content .inner ul li ul {width:auto; margin: 0 0 0 20px;} .sitemap.global .wrapper .content .inner ul li ul li{width: 100%; margin: 0;} .sitemap.global .wrapper .content .inner ul li ul li img{margin: 0 5px 0 5px; vertical-align: middle; border: 1px solid #efefef;} .sitemap.global .wrapper .content .inner ul div{margin-top: 30px; font-size: 18px;} .sitemap.global .wrapper .content .inner ul.country li a{line-height: 24px; position: relative;} /*--------#pages footer--------*/ #pages footer{ position: relative; height: 210px; background-color: #888888; color: #ffffff; overflow: hidden; } #pages footer h1{ display: block; position: absolute; top: 30px; left:20px; margin: 0; font-size: 16px; font-weight: 200; } #pages footer small{ display: block; position: absolute; top: 60px; left:20px; margin: 0; font-size: 10px; font-weight: 200; } #pages footer ul{ display: block; float: right; height: auto; width: 140px; margin: 30px 0 0 0; padding: 0; } #pages footer ul li{ margin: 0; padding: 0; display: block; float: left; width: 140px; } #pages footer ul a{ display: block; text-indent: 20px; color: #ffffff; font-size: 12px; font-weight: 200; line-height: 20px; text-decoration: underline; } #pages footer ul a:hover{ text-decoration: none; color: #9999ff; } /*--------footer END---------*/ } /* ------------------------------------------------------------------------------- */ /* -------------------------Version SP ----------------------------------------- */ /* ------------------------------------------------------------------------------- */ @media screen and (max-width:567px){ .spSeeMore{ display: block; border-radius: 0 0 14px 14px;} body{font-size: 0.5em; } a{ -webkit-tap-highlight-color:rgba(230,115,170,0.5); } #loadingBoard{ position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%; background-color: #ffffff; background-image: url(../images/loading.gif); background-repeat:no-repeat; background-position: center center; background-size: 48px 48px;} header{position: static; margin: 0 ; padding: 0; height: 55px; overflow: visible; } header h1,header h1 img{top:10px; left:10px; height: 35px; width: auto; } header h2{top:22px; left:150px; font-size: 14px; height: auto; width: auto; } #debugW{background-color: #66ffff; } header #serachIcon{position: absolute; display: block; top: 0; right: 40px; margin: 0; width:40px; height: 55px; cursor: pointer; background-image: url(../images/serchIcon.svg); background-repeat: no-repeat; background-position: center center ; text-indent: -9999px; z-index: 20; background-color: #ffffff; } header #serachIcon.opend{ background-image: url(../images/menuIconOpend.svg); background-repeat: no-repeat; background-position: center center ; background-color: #ffffff; } header #menuIcon{position: fixed; top: 0; right:0; margin: 0; display: block; border-radius:0 0 0 14px; overflow:hidden; width:40px; height: 55px; cursor: pointer; background-image: url(../images/menuIcon.svg); background-repeat: no-repeat; background-position: center center ; text-indent: -9999px; z-index: 20; background-color: #ffffff; } header #menuIcon.noFixed {position:absolute;} header #menuIcon.opend{background-image: url(../images/menuIconOpend.svg); background-repeat: no-repeat; background-position: center center ; background-color: #ffffff; } .no-svg header #serachIcon{position: absolute; display: block; top: 0; right: 40px; margin: 0; width:40px; height: 55px; cursor: pointer; background-image: url(../images/nosvg/serchIcon.png); background-repeat: no-repeat; background-position: center center ; text-indent: -9999px; z-index: 20; background-color: #ffffff; } .no-svg header #serachIcon.opend{ background-image: url(../images/nosvg/menuIconOpend.png); background-repeat: no-repeat; background-position: center center ; background-color: #ffffff; } .no-svg header #menuIcon{border-radius:0 0 0 14px; overflow:hidden; position: fixed; display: block; top: 0; right:0; margin: 0; width:40px; height: 55px; cursor: pointer; background-image: url(../images/nosvg/menuIcon.png); background-repeat: no-repeat; background-position: center center ; text-indent: -9999px; z-index: 20; background-color: #ffffff; } .no-svg header #menuIcon.opend{background-image: url(../images/nosvg/menuIconOpend.png); background-repeat: no-repeat; background-position: center center ; background-color: #ffffff; } header nav {position: fixed; top: 0; right: 0; z-index: 11; overflow: hidden; width: 0; height:55px; float: right; background-color: #ffffff; border: 0px solid #333333; border-radius:0 0 0 14px; overflow:hidden; } header nav.noFixed {position:absolute;} .tp{background-color: rgba(255,255,255,0.8); } header nav .spMenu{position: absolute; top:0; left:0; display: block; width: 240px; margin: 0; height: auto; padding: 0 0 0 0; z-index: 10; overflow: visible; border-left: 2px solid #dddddd; border-bottom: 3px solid #dddddd; } /*--header nav ul.headBtns修改高度--*/ header nav ul.headBtns{position: relative; display: block; height:110px; width: auto; top:0px; left:0; overflow: visible; background-color:transparent; } header nav ul.headBtns li{position: absolute; top: 0px; float: none; display: block; height:60px; margin: 0 0 0 10px; z-index: 10; width: 210px; background-color: transparent; border-top: 1px solid #dddddd; border-radius: 0; } /*--header nav ul.headBtns li:nth-child(1){position: absolute; top: 55px; z-index: 9; height:46px; width: 210px; }--*/ header nav ul.headBtns li:nth-child(1){position: absolute; top: 60px; z-index: 8; width: 210px; } header nav ul.headBtns li:nth-child(2){position: absolute; top: 0px; line-height: 1em; z-index: 8; width: 210px; position: absolute; top: 0px; left: 10px; height:55px; } header nav ul.headBtns li a{float: none; background-color: transparent; font-size:15px; border-radius: 1em; } /*--header nav ul.headBtns li:nth-child(1) a{position: relative; overflow: hidden; display: block; margin: 13px 0 0 0; width: 210px; height: 22px; line-height:22px; text-indent: 30px; background-image: url(../images/topHeadBtnIcon01.svg); background-repeat: no-repeat; background-position: left center ; }--*/ header nav ul.headBtns li:nth-child(1) a{position: relative; overflow: hidden; display: block; margin: 13px 0px 0px 0px; width: 210px; height: 25px; line-height:22px; text-indent: 30px; background-image: url(../images/topHeadBtnIcon02.svg); background-repeat: no-repeat; background-position: left center ; border-bottom: 1px solid #dddddd; border-radius: 0;} /*--.no-svg header nav ul.headBtns li:nth-child(1) a{background-image: url(../images/nosvg/topHeadBtnIcon01.png); background-repeat: no-repeat; background-position: left center ; }--*/ .no-svg header nav ul.headBtns li:nth-child(1) a{background-image: url(../images/nosvg/topHeadBtnIcon02.png); background-repeat: no-repeat; background-position: left center ; } header nav ul.headBtns li form{position: relative; width: 210px; height: 26px; line-height: 26px; border-radius: 13px; overflow: hidden; background-color: #ffffff; z-index: 100; margin: 12px 0 0 0; } header nav ul.headBtns li form input[type='search']{border-radius:13px 0 0 13px; width:180px; height: 26px; line-height: 26px; background-image: none; text-indent: 10px; } .no-svg header nav ul.headBtns li form input[type='search']{border-radius:13px 0 0 13px; width:300px; height: 26px; line-height: 26px; background-image: none; text-indent: 10px; } header nav ul.headBtns li form input[type='submit']{display:block; position: absolute; right: 0; top: 0; border-radius: 0 13px 13px 0; width:32px; height: 26px; background-color: #333333; border: 0; text-indent: -9999px; background-image: url(../images/topSubmitIcon.svg); background-position: center center; background-repeat: no-repeat; cursor: pointer; } .no-svg header nav ul.headBtns li form input[type='submit']{display:block; position: absolute; right: 0; top: 0; border-radius: 0 13px 13px 0; width:32px; height: 26px; background-color: #333333; border: 0; text-indent: 0; background-position: center center; background-repeat: no-repeat; cursor: pointer; color: #ffffff;} /*-------*/ header nav ul.headBtns li ul.globalselector{display: none; } /*-------*/ header nav ul.siteNavi{position: relative; width: auto; float: none; clear: both; text-align: left; margin: 0; padding: 0 0 10px 0; height: auto; width: 210px; white-space:normal; top: 0; left: 10px; border-bottom: 1px solid #dddddd; } header nav ul.siteNavi li, header nav ul.siteNavi li:last-child{display: block; float: none; clear: both; margin: 0 0 0 0px; text-align: left; white-space:normal; border: 0; } header nav ul.siteNavi li a{position: relative; display: block; height: 22px; line-height:22px; width: auto; float: none; margin: 10px 0 10px 0 ; padding: 0; background-color:transparent; text-align: left; font-size:15px; border: 0; text-indent: 20px; border-radius: 1em;} header nav ul.siteNavi li a:hover{text-decoration: none; -webkit-transition-property:background-color,border-radius,color; -webkit-transition-duration:0; -webkit-transition-timing-function: ease-out; transition-property:background-color,border-radius,color; transition-duration:0; transition-timing-function: ease-out; background-color:transparent; border-radius:0; } header nav ul.snsBtns{position: relative; left: 0; width: 310px; height:70px; margin: 0 0 0 10px; padding: 0; } header nav ul.snsBtns li{} header nav ul.snsBtns li a, header nav ul.snsBtns li:last-child a{display: block; width: 34px; height: 34px; margin: 0 0 0 6px; border-radius: 17px; } #top article.wrapper{margin: 0; padding-bottom:160px; } #top section#topMainVisual{height: 185px; margin: 0 0 10px 0; } #top section#topMainVisual div.visualSelecter{position:absolute; bottom: 10px; left: 0; margin:0; width: 100%; height: auto; z-index: 10; } #top section#topMainVisual span.topCopy, #top section#topMainVisual span.topCopy01, #top section#topMainVisual span.topCopy02, #top section#topMainVisual span.topCopy03, #top section#topMainVisual span.topCopy04, #top section#topMainVisual span.topCopy05{display:relative; width:auto; margin:0; height: 100%; } #top section#topMainVisual span.topCopy img, #top section#topMainVisual span.topCopy01 img, #top section#topMainVisual span.topCopy02 img, #top section#topMainVisual span.topCopy03 img, #top section#topMainVisual span.topCopy04 img, #top section#topMainVisual span.topCopy05 img{width:45%; height: auto; margin: auto auto auto 10px; } #top article.wrapper section#feature, #top article.wrapper section#product, #top article.wrapper section#customer {margin:10px 5px 0 5px; overflow: hidden; } #top article.wrapper section#feature a, #top article.wrapper section#product a, #top article.wrapper section#customer a{overflow: hidden; } #top article.wrapper section#contents{margin: 0px 5px 0 5px; } #top article.wrapper section#contents div{margin: 5px 5px 5px 5px; height: 90px; overflow: hidden; } #top article.wrapper section#feature div, #top article.wrapper section#product div, #top article.wrapper section#customer div{margin: 5px 5px 5px 5px; height: 90px; overflow: hidden; } #top article.wrapper section h1{height:auto; font-size: 12px !important; height:20px !important; margin: 0 0 5px 0 !important; background-image: none; } #top article.wrapper section#contents div#news{box-shadow:none; margin: 0 0 20px 0 !important; padding: 0 !important; display: inline; height: auto !important; width: auto !important; } #top article.wrapper section#contents div#news ul{overflow: hidden; margin: 0 0 16px 0 !important; padding: 0; width: auto !important; } #top article.wrapper section#contents div#news ul.table{display: none; } #top article.wrapper section#contents div#news span.spSeeMore{position: relative; background-color: #ff0000; text-align: center; width: 100%; height: auto; display: block; background-color: #ff0000; } #top article.wrapper section#contents div#news span.spSeeMore a{display: block; line-height: 20px; font-size: 11px; font-weight: 600; color: #ffffff; } #top article.wrapper section#contents div#news h2{display: none; } #top article.wrapper section#contents div#news ul.list{overflow-x:auto; margin: 12px; width: auto; } #top article.wrapper section#contents div#news ul.list li{height: auto; padding: 0 0 10px 0; } #top article.wrapper section#contents div#news ul li{display: block; float: left; } #top article.wrapper section#contents div#news ul li a{} #top article.wrapper section#contents div#news ul li a small{display: block; width: 130px; float: none; } #top article.wrapper section#contents div#news ul li a small.news:after, #top article.wrapper section#contents div#news ul li a small.update:after, #top article.wrapper section#contents div#news ul li a small.product:after, #top article.wrapper section#contents div#news ul li a small.event:after, #top article.wrapper section#contents div#news ul li a small.ir:after, #top article.wrapper section#contents div#news ul li a small.support:after{display: none; } #top article.wrapper section#contents div#news ul li a small:before{display: block; width:auto; height: 14px; color: #ffffff; font-size: 10px; line-height: 14px; border-radius: 1em; text-align: center; float: left; margin: 0 5px 0 0; padding: 0 3px 0 3px; } #top article.wrapper section#contents div#news ul li a small.news:before{content: 'News'; background-color: #78d2c3; } #top article.wrapper section#contents div#news ul li a small.update:before{content: 'Update'; background-color: #cde641; } #top article.wrapper section#contents div#news ul li a small.product:before{content: 'Product'; background-color: #8c9bd2; } #top article.wrapper section#contents div#news ul li a small.event:before{content: 'Product'; background-color: #ffe62d; } #top article.wrapper section#contents div#news ul li a small.ir:before{content: 'IR'; background-color: #8cc8eb; } #top article.wrapper section#contents div#news ul li a small.support:before{content: 'Support'; background-color: #78d2c3; } #top article.wrapper section#contents div#news ul li a small:after{float: none; display: inline; } #top article.wrapper section#contents div h2 a{border-radius:14px; text-indent:8px; position: absolute; top: 0; left: 0; z-index: 3; display: block; width: 100%; height: 100%; font-size: 11px; line-height:26px; padding: 0; } #top article.wrapper section#contents div.content01 span.conBg{border-radius:0px; width: 100%; height: 100%; background-image: url(../images/topContentArch01sp.png); background-repeat: no-repeat; background-position: 0 0; background-size: 100% auto; } #top article.wrapper section#contents div.content02 span.conBg{border-radius:0px; width: 100%; height: 100%; background-image: url(../images/topContentArch02sp.png); background-repeat: no-repeat; background-position: 0 0; background-size: 100% auto; } #top article.wrapper section#contents div.content03 span.conBg{border-radius:0px; width: 100%; height: 100%; background-image: url(../images/topContentArch03sp.png); background-repeat: no-repeat; background-position: 0 0; background-size: 100% auto; } #top article.wrapper section#contents div.content04 span.conBg{border-radius:0px; width: 100%; height: 100%; background-image: url(../images/topContentArch04sp.png); background-repeat: no-repeat; background-position: 0 0; background-size: 100% auto; } #top article.wrapper section#contents div.content05 span.conBg{border-radius:0px; width: 100%; height: 100%; background-image: url(../images/topContentArch05sp.png); background-repeat: no-repeat; background-position: 0 0; background-size: 100% auto; } #top article.wrapper section#contents div.content06 span.conBg{border-radius:0px; width: 100%; height: 100%; background-image: url(../images/topContentArch06sp.png); background-repeat: no-repeat; background-position: 0 0; background-size: 100% auto; } #top article.wrapper section#contents div.content01 img, #top article.wrapper section#contents div.content02 img, #top article.wrapper section#contents div.content03 img, #top article.wrapper section#contents div.content04 img, #top article.wrapper section#contents div.content05 img, #top article.wrapper section#contents div.content06 img{position: absolute; top: -20px; right: 0; width:100%; height: auto; z-index: 1; } #top article.wrapper section#feature div{} #top article.wrapper section#feature div a{} #top article.wrapper section#feature div img{ width:auto; height: 100%; position: relative; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } #top article.wrapper section#feature div a{border-radius:14px; position: absolute; left: 0; top:0; display: block; width: 100%; height:100%; z-index: 3; border: 0px solid #333333; } #top article.wrapper section#feature div a span{display:block; width:100%; position:absolute; right:0; bottom:0; background-color: rgba(255,255,255,0.6); font-size: 10px; line-height:11px; padding:2px 6px 2px 0; color: #444444; text-align: right; text-indent: 20px; } #top article.wrapper section#feature div h2:after{display: none; content: ' '; width: 0; height:0; float: right; } #top article.wrapper section#product div{text-align: left; background-position: -20px center; background-size: 90px auto; } #top article.wrapper section#product div a {height: 100%; display: block; z-index: 3; border-radius:14px; } #top article.wrapper section#product div.double a img,#top article.wrapper section#product div img{z-index: 2; position: absolute; top:5px; left: -10px; width:90px; height: auto; } #top article.wrapper section#product div.double a h2, #top article.wrapper section#product div.double a h2.double, #top article.wrapper section#product div a h2{ top: 50%; left:50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background-image: none; position: relative; width: 46%; display: block; color: #444444; font-size: 11px; line-height: 13px; background-color: transparent; } #top article.wrapper section#product div a h2 sub, #top article.wrapper section#product nav{display: none; } #top article.wrapper section#product div a h2 span{display:block;margin: 0;} #top article.wrapper section#customer div img, #top article.wrapper section#customer div.double img{border-radius:0px; width: auto; height: 90px; margin: auto;} #top article.wrapper section#customer div.double a h2, #top article.wrapper section#customer div a h2{display: block; width: 100%; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); text-align: center; font-size: 11px; color: #444444; } /*-------#pages-------*/ .column01 article.wrapper{ position: relative; } #pages div.upper{ position: relative; overflow: hidden; border: 0px solid #333333; height: 240px; border-bottom: 1px solid #cccccc; } #pages div.upper.noPic{ height: 60px; } #pages div.upper h1{ position: absolute; height: 40px; width: 100%; background-image: none; font-size:22px; line-height: 40px; text-indent: 10px; padding: 0; margin: 0; top:200px; font-weight: 200; } #pages div.upper h1.noPic{ top:20px; } #pages div.upper section#pageMainVisual01{ position: relative; top:0; height: 200px; overflow: hidden; } #pages div.upper section#pageMainVisual01.noPic{ background-color: #ffffff; height: 100px; } #pages div.upper section#pageMainVisual01 .up img, #pages div.upper section#pageMainVisual01 .dn img{ height: auto; width: 100%; position: absolute; } #pages div.upper section#pageMainVisual01 .up, #pages div.upper section#pageMainVisual01 .dn{ height:200px; overflow: hidden; } .column01 article.wrapper nav{display: none; } .column01 section.content{ display: block; margin: 0; padding: 20px 0 30px 0; min-height: 200px; width: 100%; height: auto; } .column01 section#content01 h1 img{ width: 160px; } .column01 nav#sideNavi{display: none; } .column01 section .inner{ margin: 0 20px 0 20px; padding: 10px 0 0 0; } .column01 section#content01 .inner{ color:#37371e; font-size: 16px; line-height:38px; padding: 0 0 20px 0; } .column01 section .inner h1.titles{ height: 60px; font-size: 20px; background-position: center 50px; margin: 0 0 20px 0; } .column01 article.wrapper, .column02 article.wrapper{ position: relative; clear: both; top:0; margin: 0 auto 0 auto; padding: 0; border-radius: 0; } .column02 article.wrapper section.content{ padding: 20px 20px 40px 20px; margin: 0; } .column02 article.wrapper section.content .inner{ margin: 0; padding: 0; } .column02 article.wrapper section.content ul li em{ display: block; font-weight: 400; font-size: 18px; line-height:26px; } .column02 article.wrapper section.content ul{ margin: 20px 0 0 0; padding: 0; } .column02 article.wrapper section.content ul li{ font-size: 14px; line-height:26px; font-weight: 200; margin: 10px 0 0 0; } .column02 article.wrapper section.content ul li{ } .column02 article.wrapper nav#sideNavi{ position: relative; margin: 0; padding:0 0 10px 0; top: 0; left: 0; width: 100%; height: auto; background-color: rgba(245,245,245,0.8); border-radius: 0px; font-size: 14px; line-height: 12px; overflow: hidden; white-space: normal; } .column02 article.wrapper nav#sideNavi ul{ margin:15px 0 5px 0 !important; width: 100%; } .column02 article.wrapper nav#sideNavi ul li { display: inline-block; width: 45%; height: auto; padding: 0 0 0 5px; height: auto; line-height: 12px; } .column02 article.wrapper nav#sideNavi ul li a{ display: inline; padding:0; color: #777777; height: 12px !important; border: 0px solid #333333; } .column01 section.content.bg_d{ background-color: rgba(0,0,0,0.25); } /*------MISC-----****/ .column01 section.content .inner ul.gridMenu li{ display: block; width: 100%; height: auto; float: left; overflow: hidden; background-color: #ffffff; border-radius: 14px; box-shadow: inset 0px 0px 3px rgba(0,0,0,0.5); text-align: center; } .column01 section.content .inner ul.gridMenu li a{ display: block; color: #e673aa; width: auto; height: 90px; } .column01 section.content .inner ul.gridMenu li a span{ display: block; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); padding: 0 5px 0 5px; } .column01 section.content .inner ul.listTable{ margin: 0 10px 0 10px; } .column01 section.content .inner ul.listTable.left{ width: auto; float: none; } .column01 section.content .inner ul.listTable.right{ width: auto; float: none; } .column01 section.content .inner ul.listTable li{ display: block; line-height: 20px; padding: 10px 0 10px 0; border-bottom: 1px solid #dddddd; color: #777777; font-size: 14px; text-align: left; } .column01 section.content .inner ul.listTable.style_b li{ clear:both; border-bottom: 1px solid #ffffff; } .column01 section.content .inner ul.listTable li small, .column01 section.content .inner ul.listTable.style_b small{ margin: 0px 0 10px 0; position: relative; display: block; width: 100%; float: none; height: auto; color: #6e6e50; vertical-align: top; font-size: 10px; line-height: 14px; padding: 0 10px 0 0; } .column01 section.content .inner ul.listTable li small.noAbs{ margin: 0; padding: 0 0 5px 0; } .column01 section.content .inner ul.listTable li span{ display: inline-block; width: auto; padding: 0 0 0 35%; margin: 0; font-size: 16px; line-height: 22px; } .column01 section.content .inner ul.listTable.style_b span{ width: auto; color: #ffffff; } .column01 section.content .inner ul.listTable li a{ color: #8c9bd2; } .column01 section.content .inner ul.listTable li ul li{ color: #ffffff; border-bottom: 0px solid #dddddd !important; font-size: 16px; line-height: 22px; } .column02 article.wrapper section.content h1{ font-size:18px; line-height: 24px; } .column02 article.wrapper section.content h1:after { margin: 10px 0 0 0; } .column02 article.wrapper section.content p{ font-size: 14px; /*line-height: 22px;*/ line-height: 21px; } .column02 article.wrapper section.content span.right{ float: right; padding: 0 0 10px 10px; width: 120px; } .column02 article.wrapper section.content p span.right small{ font-size: 12px; line-height:16px; margin:0px; } .column02 article.wrapper section.content p span.right img{ width: 100%; height: auto; } /*------新增靠左圖及圖下方文字****/ .column02 article.wrapper section.content span.left{ float: left; padding: 0 0 10px 10px; width: 120px; } .column02 article.wrapper section.content p span.left small{ font-size: 12px; line-height:16px; margin:0px; } .column02 article.wrapper section.content p span.left img{ width: 100%; height: auto; } /*------新增結束****/ /*------MISC END****/ .sitemap .wrapper .content .inner{border-left: 0px solid #dddddd;border-right: 0px solid #dddddd;margin: 0;} .sitemap .wrapper .content .inner ul{border:0px solid #333333; padding: 0 0 20px 0;width:100%;margin: 0;} .sitemap .wrapper .content .inner ul li{border-bottom: 1px solid #cccccc; margin:0 0 0 0; padding: 15px 0 15px 0; font-size: 2em; line-height: 1em;} .sitemap .wrapper .content .inner ul li ul {width:auto; margin: 15px 0 0 20px;} .sitemap .wrapper .content .inner ul li ul li{border-top: 1px solid #dddddd;border-bottom:0px solid #dddddd;float: left;width:100%;font-size: 14px;line-height: 18px;display: inline; margin: 0 0 0 0;padding: 10px 0 10px 0;} .sitemap .wrapper .content .inner ul li ul li:before{content: "-"; display: inline; padding: 0 0.3em 0 0.3em; float: left;color: #cccccc; font-size: 14px;line-height: 18px;} .sitemap .wrapper .content .inner ul li ul li.withThird{width:auto;border-top: 1px solid #dddddd;border-bottom:0px solid #dddddd;margin: 0 0 0 0;} .sitemap .wrapper .content .inner ul li a,.sitemap .wrapper .content .inner ul li ul li a{display: block;color: #666666;border-radius: 1em; padding: 0 0 0 0px;line-height: 24px;} .sitemap .wrapper .content .inner ul li a{margin: 0;} .sitemap .wrapper .content .inner ul li ul li ul {margin: 10px 0 0 20px;padding: 0;} .sitemap .wrapper .content .inner ul li ul li ul li{border-top: 0px solid #cccccc;border-bottom:0px solid #cccccc;float:left;width:100%;font-size: 12px;line-height: 16px;display: inline; margin: 0 0 0 0;padding: 5px 0 5px 0;} /*------.global SP-TB only------*/ .sitemap.global {display: block;} .sitemap.global .closeBtn{display: none;} .sitemap.global .wrapper {margin-top:0; padding-top:0;} .sitemap.global .wrapper .content .inner ul.lang{margin-top:0; width: auto; height: auto; margin: 0;border-bottom: 1px solid #dddddd; width: 100%; } .sitemap.global .wrapper .content .inner ul.lang li{line-height: 50px; height:50px; width: auto; margin: 0 0 0 0; padding: 0; border-radius: 0; border: 0; } .sitemap.global .wrapper .content .inner ul.lang li:before, .sitemap.global .wrapper .content .inner ul.lang li:first-child{display: none;} .sitemap.global .wrapper .content .inner ul.lang a{display: inline-block; width: auto; position: relative; line-height: 20px; font-size: 18px; height: 20px; text-indent: 10px; background-image: url(../images/arrow.svg); background-repeat: no-repeat; background-position: 0 center ; margin: 0 5px 20px 0; padding: 0 5px 0 0; border-radius: 10px; } .sitemap.global .wrapper .content .inner ul{padding:0 0 0 0; border:0px solid #e5e5e5;} .sitemap.global .wrapper .content .inner ul.country li.areas{border-top: 0px ; font-weight: 700; padding-top: 20px;} .sitemap.global .wrapper .content .inner ul.country li.areas.spNone{display: none;} .sitemap.global .wrapper .content .inner ul.country li.areas:nth-child(2){border-top: 0px ; font-weight: 700;} .sitemap.global .wrapper .content .inner ul.country li:before{display: none;} .sitemap.global .wrapper .content .inner ul li ul {width:auto; margin: 0 0 0 20px;} .sitemap.global .wrapper .content .inner ul li ul li{width: 100%; margin: 0;} .sitemap.global .wrapper .content .inner ul li ul li img{margin: 0 5px 0 5px; vertical-align: middle; border: 1px solid #efefef;} .sitemap.global .wrapper .content .inner ul div{margin-top: 30px; font-size: 18px;} .sitemap.global .wrapper .content .inner ul.country li a{line-height: 24px; position: relative;} /*--------footer--------*/ #top footer{height: auto; background-color: #e673aa; color: #ffffff; overflow: hidden; padding: 0 0 20px 0; } #pages footer{ height: auto; background-color: #888888; color: #ffffff; overflow: hidden; padding: 0 0 20px 0; } #pages footer h1,#top footer h1{position:relative; top:0; left:0; display: block; margin: 10px 0 0 10px; font-size: 16px; font-weight: 200; } #pages footer small,#top footer small{position:relative; top:0; left:0; display: block; margin: 10px 0 0 10px; font-size: 10px; font-weight: 200; } #pages footer ul,#top footer ul{display: block; float: none; height: auto; width: auto; } #pages footer ul li,#top footer ul li{margin: 0; display: block; float: left; width: auto; } #pages footer ul a,#top footer ul a{display: block; text-indent: 10px; color: #ffffff; font-size: 11px; font-weight: 200; line-height: 24px; text-decoration: underline; } #pages footer ul a:hover,#top footer ul a:hover{text-decoration: none; color: #9999ff; } /* 選項--------- */ #pages nav#sideNavi ul li a{ display: block; height: auto; line-height: 16px; padding:5px 0 25px 14px; color: #777777; } #pages nav#sideNavi ul li.current a{ padding:5px 0 25px 14px; } #pages nav#sideNavi ul li.current:before{ margin: 10px 4px 13px 4px; } } /* ---------------------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------------------- */ /* Clear Floated Elements ----------------------------------------------------------------------------------------------------*/ /* http://sonspring.com/journal/clearing-floats */ .clear{ clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } /* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */ .clearfix:after { clear: both; content: ' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0; } .clearfix { display: inline-block; } * html .clearfix { height: 1%; } .clearfix { display: block; }