/*---------------------------------------------------------------------------------------------------*/ /*common */ /*---------------------------------------------------------------------------------------------------*/ * {box-sizing: border-box;padding:0;margin:0;} *:hover, *:focus, *:active {outline:0;} /*img*/ img {max-width:100%;vertical-align: middle;} /*font*/ * {font-family: "文泉驛正黑","WenQuanYi Zen Hei","Heiti TC",Meiryo,"微軟正黑體","Microsoft JhengHei",sans-serif;} * {line-height: 1.8em;letter-spacing: 0.05em;font-weight: normal;} body,a,p{color:#333;} body {font-size:13px;} h4 {font-size:1.3846em;} /* 13px / 18px */ h3 {font-size:1.8462em;} /* 13px / 24px */ h2 {font-size:3.0769em;} /* 13px / 40px */ h1 {font-size:4.6154em;} /* 13px / 60px */ @media(max-width: 1200px) { body {font-size:12px;} h4 {font-size:1.3em;} h3 {font-size:1.5em;} h2 {font-size:2em;} h1 {font-size:3em;} } a {text-decoration:none;} .text-center {text-align: center} .text-left {text-align: left} .text-right {text-align: right} .flex-middle { align-items: center;justify-content: center;} .flex-top { align-items: flex-start;} .flex-right { justify-content:flex-end;} .flex-center { justify-content:center;} .flex-around { align-items: center;justify-content: space-around;} .flex-between { justify-content: space-between;align-items: center;} .flex-middle { -webkit-align-items: center; -webkit-justify-content: center; } .flex-top { -webkit-align-items: flex-start; } .flex-right { -webkit-justify-content:flex-end; } .flex-center { -webkit-justify-content:center; } .flex-around { -webkit-align-items: center; -webkit-justify-content: space-around; } .flex-between { -webkit-justify-content: space-between; -webkit-align-items: center; } .spIcon {position: absolute;top:0;right: 0;} .spIcon img{height: 1em} .cartNum {position: relative;display:inline-block;font-style: normal;line-height: 1.5em;width: 1.5em;text-align: center;} .cartNum span{position: relative;z-index: 10;line-height: 100%;} .cartNum:before {content: '';position: absolute;top:0;left:0;right:0;bottom:0;background: #ccc;border-radius: 100%;z-index: 0} /* slick element*/ .slick-next, .slick-prev {border:0;background:none;top:50%;transform: translateY(-50%);-webkit-transform: translateY(-50%);position: absolute;cursor: pointer;} .slick-next {right:30px;} .slick-prev {left:30px;} .slick-dots {position: absolute;bottom:0;width: 100%;text-align: center;} .slick-dots li {display: inline-block;text-align: center;} .slick-dots button {width: 10px;height: 10px;line-height: 10px;overflow: hidden;border-radius: 100%;} .slick-dots button {color:rgba(255,255,255,0);margin:10px 5px;background: rgba(255,255,255,.2);border:0;box-shadow: 1px 1px 1px rgba(0,0,0,.5);padding: 0} .slick-dots .slick-active button {background: rgba(255,255,255,.5);} /*---------------------------------------------------------------------------------------------------*/ /* iconList */ /*---------------------------------------------------------------------------------------------------*/ .iconList {padding:0;margin:0;display:flex;display:-webkit-flex;} .iconList li {display: inline-block;vertical-align: middle;} .iconList * {vertical-align: middle;} /* typeA (img+circle box) */ .iconList.typeA li a {display: inline-block;position: relative;width: 100%;height: 100%;} .iconList.typeA li img {position: absolute;transform: translateY(-50%);top:50%; width: 100%} /* typeA-style */ .iconList.typeA li {width: 30px;height:30px;margin-right: 5px} .iconList.typeA li a {background: #fff;border:1px solid #000;border-radius: 100%;overflow: hidden;} .iconList.typeA li a:hover {background: #aaa;} /* typeB (icon+txt+info) */ .iconList.typeB li a {position:relative;display: inline-block; } .iconList.typeB .info {position:absolute; top:-150%;left:50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);} .iconList.typeB span {display: inline-block;vertical-align: middle;} .iconList.typeB .info {opacity: 0} .iconList.typeB li a:hover .info, .iconList.typeB li a:focus .info {opacity: 1;} /* typeB-style */ .iconList.typeB .info {min-width: 100px;text-align: center;} .iconList.typeB img {width: 30px} .iconList.typeB .icon {width: 30px;text-align: center;} .iconList.typeB li:after{content:'';display: inline-block;vertical-align: middle;} .iconList.typeB li:after{width:1px;height:30px;margin:0 10px;background:#eee;} .iconList.typeB li:last-child:after{display: none} .iconList.typeB .info {background: #aaa;padding:0 20px;border-radius: 3px} .iconList.typeB .info:after {content:'';display:block;width:0;height:0;position: absolute;left:50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);} .iconList.typeB .info:after {border-color:#aaa transparent transparent transparent;border-width: 7px ;border-style: solid} /* --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- */ /*---------------------------------------------------------------------------------------------------*/ /* layout (GRID )*/ /*---------------------------------------------------------------------------------------------------*/ .Bbox {display:table;width:100%;padding:0;margin:0 auto;} .Bbox .Bbox {padding:0;} .Bbox.w95 {width:95%;} .Bbox.w90 {width:90%;} .Bbox.w85 {width:85%;} .Bbox.w80 {width:80%;} .Bbox.w75 {width:75%;} .Bbox.w70 {width:70%;} .Bbox.w65 {width:65%;} .Bbox.w60 {width:60%;} .Bbox.w55 {width:55%;} .Bbox.w50 {width:50%;} .Bbox.w1600 {max-width: 1600px} .Bbox.w1500 {max-width: 1500px} .Bbox.w1400 {max-width: 1400px} .Bbox.w1300 {max-width: 1300px} .Bbox.w1200 {max-width: 1200px} .Bbox.w1100 {max-width: 1100px} .Bbox.w1000 {max-width: 1000px} .Bbox.w900 {max-width: 900px} .Bbox.w800 {max-width: 800px} .Bbox.w700 {max-width: 700px} .Bbox.w600 {max-width: 600px} .Bbox.w500 {max-width: 500px} .Bbox.w400 {max-width: 400px} .Bbox.w300 {max-width: 300px} .Bbox.w200 {max-width: 200px} .Bbox.w100 {max-width: 100px} /*mode:flex*/ /*
1
2
3
*/ .Bbox.flex {display: flex;flex-wrap:wrap;} .Bbox.flex {display: -webkit-flex;-webkit-flex-wrap:wrap;} .Bbox.flex>.Bbox_c0 {-webkit-flex: none; flex: none;} .Bbox.flex>.Bbox_c1 {-webkit-flex: 1; flex: 1; } .Bbox.flex>.Bbox_c2 {-webkit-flex: 2; flex: 2; } .Bbox.flex>.Bbox_c3 {-webkit-flex: 3; flex: 3; } .Bbox.flex>.Bbox_c4 {-webkit-flex: 4; flex: 4; } .Bbox.flex>.Bbox_c5 {-webkit-flex: 5; flex: 5; } .Bbox.flex>.Bbox_c6 {-webkit-flex: 6; flex: 6; } .Bbox.flex>.Bbox_c7 {-webkit-flex: 7; flex: 7; } .Bbox.flex>.Bbox_c8 {-webkit-flex: 8; flex: 8; } .Bbox.flex>.Bbox_c9 {-webkit-flex: 9; flex: 9; } @media (max-width: 992px) { /* .Bbox.flex>.Bbox_c0 {min-width:100%;} .Bbox.flex>.Bbox_c1 {min-width:100%;} .Bbox.flex>.Bbox_c2 {min-width:100%;} .Bbox.flex>.Bbox_c3 {min-width:100%;} .Bbox.flex>.Bbox_c4 {min-width:100%;} .Bbox.flex>.Bbox_c5 {min-width:100%;} .Bbox.flex>.Bbox_c6 {min-width:100%;} .Bbox.flex>.Bbox_c7 {min-width:100%;} .Bbox.flex>.Bbox_c8 {min-width:100%;} .Bbox.flex>.Bbox_c9 {min-width:100%;} */ } /*mode:float:left*/ /*
1
2
3
4
*/ [class*="Bbox_r"] {display: flex;flex-wrap:wrap;justify-content: flex-start;} [class*="Bbox_r"] {display: -webkit-flex;-webkit-flex-wrap:wrap;-webkit-justify-content: flex-start;} [class*="Bbox"] [class*="Bbox_r"] {margin-left:-2%;margin-right: -2%;} /* about box's spacing */ [class*="Bbox_r"]>[class*="B_item"] {padding:0 2%;margin-bottom:30px;} /* about box's spacing */ .Bbox_r5>[class*="B_item"] {width: 20%;} .Bbox_r4>[class*="B_item"] {width: 25%;} .Bbox_r3>[class*="B_item"] {width: 33.333334%;} .Bbox_r2>[class*="B_item"] {width: 50%;} .Bbox_r1>[class*="B_item"] {width: 100%;} @media (max-width: 1200px){ .Bbox_r5>[class*="B_item"] {width: 33.333334%} .Bbox_r4>[class*="B_item"] {width: 33.333334%} .Bbox_r3>[class*="B_item"] {width: 33.333334%} .Bbox_r2>[class*="B_item"] {width: 50%} .Bbox_r1>[class*="B_item"] {width: 100%;} } @media (max-width: 992px) { .Bbox_r5>[class*="B_item"] {width:50%;} .Bbox_r4>[class*="B_item"] {width:50%;} .Bbox_r3>[class*="B_item"] {width:50%;} .Bbox_r2>[class*="B_item"] {width:50%;} .Bbox_r1>[class*="B_item"] {width:100%;} } @media (max-width: 768px) { [class*="Bbox_r"]>[class*="B_item"] {width: 50%;} [class*="Bbox_r"]>[class*="B_item"] { padding: 0; } } /*mode:center*/ .Bbox_center {text-align: center;} .Bbox_center>[class*="B_item"] {display: inline-block;vertical-align: top;} @media (max-width: 768px) { .Bbox_center [class*="B_item"]{width:100%} } /* --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- */ /*---------------------------------------------------------------------------------------------------*/ /* navmenu */ /*---------------------------------------------------------------------------------------------------*/ .navmenu {position: relative;z-index: 100;width: 100%} .navmenu>ul {position: relative;} .navmenu>ul {display: flex;justify-content:center;align-items:center;flex-wrap: wrap;} .navmenu>ul {display:-webkit-flex;-webkit-justify-content:center;-webkit-align-items:center;-webkit-flex-wrap: wrap;} .navmenu ul {list-style: none;padding:0;} .navmenu li a, .navmenu li span {position: relative;z-index: 100;padding:5px 15px;display: inline-block;} /*--typeA-------------------*/ .navmenu.typeA .subMenu {height: 100%} .navmenu.typeA .subMenu ul{display: flex;display:-webkit-flex;align-items:center;flex-wrap:wrap;justify-content: center;-webkit-align-items:center;-webkit-flex-wrap:wrap;-webkit-justify-content: center; height: 100%} .navmenu.typeA .subMenu li{;vertical-align: middle;} .navmenu.typeA .subMenu li a{} .navmenu.typeA li span {width: 100%} /* effect (hover)*/ .navmenu.typeA * {transition: all .3s ease-in;-webkit-transition: all .3s ease-in;} .navmenu.typeA>ul:after {content:'';display: inline-block;width:100%;height: 100%;position: absolute;top:0;left:0;z-index:1;} .navmenu.typeA>ul>li {} /*normal*/ .navmenu.typeA li .subMenu {position: absolute;} .navmenu.typeA li .subMenu {opacity:0;top:0;left:0;width:100%;height: 0;overflow: hidden;} .navmenu.typeA li:hover .subMenu {opacity:1;top:100%;left:0;width:100%;height: 100%;overflow:visible;} /* style*/ .navmenu.typeA {} .navmenu.typeA>ul {background: #fff} .navmenu.typeA>ul:after {background: #fff} .navmenu.typeA>ul:before {background: #eee;} .navmenu.typeA>ul>li {background: #fff} .navmenu.typeA>ul>li>a {background: #fff;} .navmenu.typeA>ul>li:hover>a {background: #eee} .navmenu.typeA li>a+ul {background: #fff;} .navmenu.typeA li .subMenu {} /*--typeB-------------------*/ .navmenu.typeB {width:auto;position: static;} .navmenu.typeB>ul>li a {width:auto;} .navmenu.typeB>ul>li .EN {display:block} .navmenu.typeB>ul>li .CH {display:block} .navmenu.typeB ul {position: static;} .navmenu.typeB>ul>li a {} .navmenu.typeB>ul>li span {} .navmenu.typeB .subMenu {} .navmenu.typeB .subMenu {display: inline-block;text-align:center;} .navmenu.typeB .subMenu>div {display: inline-flex;justify-content: flex-start;flex-wrap: wrap;} .navmenu.typeB .subMenu>div {display: -webkit-inline-flex;-webkit-justify-content: flex-start;-webkit-flex-wrap: wrap;} .navmenu.typeB .subMenu>div {text-align: left;} .navmenu.typeB .subMenu ul {display:inline-block;} .navmenu.typeB .subMenu ul {position: static;} .navmenu.typeB .subMenu li {vertical-align: middle;} .navmenu.typeB .subMenu li a {} /* effect (hover)*/ .navmenu.typeB * {transition: all .2s ease-out;-webkit-transition: all .2s ease-out;} .navmenu.typeB>ul:after {} .navmenu.typeB>ul>li {} /*normal*/ .navmenu.typeB>ul>li {position: relative; overflow: hidden;} .navmenu.typeB>ul>li .subMenu {position: absolute;} .navmenu.typeB>ul>li .subMenu {opacity:0;left:5vw;overflow: hidden;transform:translateY(-10%);-webkit-transform:translateY(-10%); } .navmenu.typeB>ul>li:hover {overflow:visible;position: static;} .navmenu.typeB>ul>li:hover .subMenu {opacity:1;overflow:visible;transform:translateY(0);-webkit-transform:translateY(0);} /* style*/ .navmenu.typeB {} .navmenu.typeB>ul {background: #fff} .navmenu.typeB>ul:after {background: none} .navmenu.typeB>ul:before {background: none;} .navmenu.typeB>ul>li {background: #fff} .navmenu.typeB>ul>li>a {background: none;} .navmenu.typeB>ul>li:hover>a {background: #eee} .navmenu.typeB li>a+ul {background: #fff;} .navmenu.typeB li .subMenu {} .navmenu>ul>li.open {overflow:visible;position: static;} .navmenu>ul>li.open .subMenu {opacity:1;overflow:visible;transform:translateY(0);-webkit-transform:translateY(0);} .navmenu>ul>li.open>a {background: #eee} /* --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- */ /*---------------------------------------------------------------------------------------------------*/ /* banner (slick)*/ /*---------------------------------------------------------------------------------------------------*/ .banner {position: relative;} /* --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- */ /*---------------------------------------------------------------------------------------------------*/ /*faq type 盒子形式 */ /*---------------------------------------------------------------------------------------------------*/ .B_faq {} .B_faq .B_faqlist{margin:0;padding-left:0;list-style:none;} .B_faq .B_faq_item{margin:20px 0;} .B_faq .B_faq_title, .B_faq .B_faq_content{display:block;padding-left:30px;position: relative;} .B_faq .B_faq_title:before, .B_faq .B_faq_content:before {display: inline-block;text-align:center;width:30px;left:0;position: absolute;} .B_faq .B_faq_title:before {content:'Q';} .B_faq .B_faq_content:before {content:'A';} /*---------------------------------------------------------------------------------------------------*/ /*faq type element 元件樣式 */ /*---------------------------------------------------------------------------------------------------*/ .B_faq .B_faq_title {font-weight: bold;font-size:16px;} .B_faq .B_faq_title:before, .B_faq .B_faq_content:before {font-size:16px;} .B_faq.typeA .B_faq_item .B_faq_content {display: none;} .B_faq.typeA .B_faq_item:first-child .B_faq_content {display: block;} /* --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- */ /*---------------------------------------------------------------------------------------------------*/ /*newslist_item box type 盒子形式 */ /*---------------------------------------------------------------------------------------------------*/ .B_item_newslist {} .B_item_newslist>div {vertical-align: top;text-align: left} /* typeA */ .B_item_newslist.typeA>div {float:left;} .B_item_newslist.typeA>div:nth-child(1) {width:20%;} .B_item_newslist.typeA>div:nth-child(2) {width:80%;padding-left: 20px} @media (max-width: 992px) { .B_item_newslist.typeA>div:nth-child(1), .B_item_newslist.typeA>div:nth-child(2) {width:100%;padding-left:0;} } /* typeB */ .B_item_newslist.typeB>div {float:left;} .B_item_newslist.typeB>div:nth-child(1) {width:20%;} .B_item_newslist.typeB>div:nth-child(2) {width:80%;padding-left: 20px} @media (max-width: 992px) { .B_item_newslist.typeB>div:nth-child(1), .B_item_newslist.typeB>div:nth-child(2) {width:100%;padding-left:0;} } /* typeC */ .B_item_newslist.typeC>div {position: relative;padding:0;width:100%;} .B_item_newslist.typeC>div>div:nth-child(2) {position: absolute;top:0;left:0;width:100%;height: 100%;} .B_item_newslist.typeC>div>div:nth-child(2)>div {position: absolute;top:50%;transform: translateY(-50%);-webkit-transform: translateY(-50%);} /* typeC -style*/ .B_item_newslist.typeC>div>div:nth-child(2)>div {text-align: center;padding:10%;} .B_item_newslist.typeC>div>div:nth-child(2) {background: rgba(0,0,0,.8);border-radius: 5px} .B_item_newslist.typeC>div>div:nth-child(2)>div *{color:#fff;} /* typeC -effect*/ .B_item_newslist.typeC>div {cursor:pointer;transition: all .3s ease-in;-webkit-transition: all .3s ease-in} .B_item_newslist.typeC>div * {transition: all .3s ease-in;-webkit-transition: all .3s ease-in} .B_item_newslist.typeC>div>div:nth-child(2) {opacity: 0} .B_item_newslist.typeC>div:hover>div:nth-child(2) {opacity: 1} /* typeD */ .B_item_newslist.typeD>div:nth-child(1) {width:100%;} .B_item_newslist.typeD>div:nth-child(2) {width:100%;} /* typeE */ .B_item_newslist.typeE>div:nth-child(1) {width:100%;} .B_item_newslist.typeE>div:nth-child(2) {width:100%;} /* typeD */ .B_item_newslist.typeF>div:nth-child(1) {width:100%;} .B_item_newslist.typeF>div:nth-child(2) {width:100%;} /* typeG */ .B_item_newslist.typeG {display: table;} .B_item_newslist.typeG>div {display: table-cell;} .B_item_newslist.typeG>div:nth-child(1) {} .B_item_newslist.typeG>div:nth-child(2) {width:20%;min-width:200px;padding:0 20px;} .B_item_newslist.typeG>div:nth-child(3) {} @media (max-width: 768px) { .B_item_newslist.typeG {text-align: center;} .B_item_newslist.typeG>div {display:inline-block;} .B_item_newslist.typeG>div:nth-child(2) {width:100%;padding:0;} } /*---------------------------------------------------------------------------------------------------*/ /*newslist_item element type 元素形式 */ /*---------------------------------------------------------------------------------------------------*/ .B_item_newslist .B_item_img {position: relative;height: 0;padding-bottom: 100%;display: table;width:100%;} .B_item_newslist .B_item_img img {position: absolute;top:0;left:0;} .B_item_newslist .B_item_title {display: block;width: 100%;max-height: 56px; overflow: hidden; color:#26A65B;} .B_item_newslist.typeA .B_item_date {float: left;} .B_item_newslist.typeA .B_item_class {float: right;} .B_item_newslist.typeB .B_item_date {display: inline-block;} .B_item_newslist.typeB .B_item_class {display: inline-block;} .B_item_newslist.typeC .B_Table {display:table;width: 100%} .B_item_newslist.typeC .B_item_date {display:table-cell;text-align: left} .B_item_newslist.typeC .B_item_link {display:table-cell;text-align: right} .B_item_newslist.typeC .B_item_content{max-height: 5.4em;overflow: hidden;} .B_item_newslist.typeD .B_Table {display:table;width: 100%} .B_item_newslist.typeD .B_item_date {display:table-cell;text-align: left} .B_item_newslist.typeD .B_item_class {display:table;text-align: right;width:100%;} .B_item_newslist.typeE .B_item_date {float: left;} .B_item_newslist.typeE .B_item_class {float: right;} .B_item_newslist.typeE .B_item_img {} .B_item_newslist.typeF .B_Table {display:table;width: 100%} .B_item_newslist.typeF .B_item_date {display:table-cell;text-align: left} .B_item_newslist.typeF .B_item_class {display:table;text-align: right;width:100%;} .B_item_newslist.typeG .B_item_date {position: relative;min-width:150px;display:inline-block;padding-bottom:100%;height:0;} .B_item_newslist.typeG .B_item_date>div {position: absolute;top:50%;left:50%; transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);display: inline-block;} .B_item_newslist.typeG .B_item_date .dateYM {display:table;width:100%;text-align: center;} .B_item_newslist.typeG .B_item_date .dateD {display:table;width:100%;text-align: center;} .B_item_newslist.typeG .B_item_class {text-align: center;display: table;width: 100%;padding:10% 0;} @media (max-width: 768px) { .B_item_newslist.typeG>div {display:table;width:100%;} .B_item_newslist.typeG>div:first-child {margin-bottom: -25px; position: relative; z-index: 1;} .B_item_newslist.typeG .B_item_date {display:table-cell;width:80px;min-width:80px;padding-bottom:80px;vertical-align: middle;} .B_item_newslist.typeG .B_item_class {display:table-cell;width:auto;vertical-align: middle;text-align:right;padding:0;} } /*---------------------------------------------------------------------------------------------------*/ /* newslist_item element style 元素樣式 */ /*---------------------------------------------------------------------------------------------------*/ .B_item_newslist .B_item_img {border-radius:5px;border:0;overflow: hidden;} .B_item_newslist.typeG .B_item_date {background: #eee;border-radius: 100%;} .B_item_newslist.typeG .B_item_date .dateD {font-size:4em;line-height: 1em} @media (max-width: 768px) { .B_item_newslist.typeG .B_item_date {} .B_item_newslist.typeG .B_item_date .dateD {font-size:2em;line-height: 1em} } /* --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- */ /*---------------------------------------------------------------------------------------------------*/ /*productlist_item box type 盒子形式 */ /*---------------------------------------------------------------------------------------------------*/ .B_item_productlist {display: inline-block;} .B_item_productlist>div {display: inline-block;vertical-align: top;text-align: left} /* typeA */ .B_item_productlist.typeA>div {width:100%;} /* typeB */ .B_item_productlist.typeB>div {width:100%;} /* typeC */ .B_item_productlist.typeC>div {width:100%;} /* typeD */ .B_item_productlist.typeD>div {float:left;} .B_item_productlist.typeD>div:nth-child(1) {width:20%;} .B_item_productlist.typeD>div:nth-child(2) {width:80%;padding-left: 20px} @media (max-width: 768px) { .B_item_productlist.typeD>div:nth-child(1) {width:30%;} .B_item_productlist.typeD>div:nth-child(2) {width:70%;padding-left: 20px} } @media (max-width: 440px) { .B_item_productlist.typeD>div:nth-child(1) {width:100%;padding-left:0;} .B_item_productlist.typeD>div:nth-child(2) {width:100%;padding-left:0;} } /* typeE */ .B_item_productlist.typeE>div {float:left;} .B_item_productlist.typeE>div:nth-child(1) {width:20%;} .B_item_productlist.typeE>div:nth-child(2) {width:80%;padding-left: 20px} @media (max-width: 768px) { .B_item_productlist.typeE>div:nth-child(1) {width:30%;} .B_item_productlist.typeE>div:nth-child(2) {width:70%;padding-left: 20px} } @media (max-width: 440px) { .B_item_productlist.typeE>div:nth-child(1), .B_item_productlist.typeE>div:nth-child(2) {width:100%;padding-left:0;} } /*---------------------------------------------------------------------------------------------------*/ /*productlist_item element type 元素形式 */ /*---------------------------------------------------------------------------------------------------*/ .B_item_productlist .B_item_img {position: relative;height: 0;padding-bottom: 100%;display:inline-block;width:100%;} .B_item_productlist .B_item_img img {position: absolute;top:0;left:0;} .B_item_productlist .B_item_icon {display:table;padding:0;list-style:none;margin:10px 0;} .B_item_productlist .B_item_icon .item {display:inline-block;} .B_item_productlist .B_item_icon .item:not(:first-child) {margin-left:5px;} .B_item_productlist .B_item_icon .item a {display:inline-block;width:45px;height:0;padding-bottom:100%;position: relative;} .B_item_productlist .B_item_icon .item a>div {position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%)} .B_item_productlist .B_item_img_icon {position: absolute;left:0;top:0;margin:0;z-index: 10} .B_item_productlist .B_item_img_icon img {position: relative;} .B_item_productlist .B_item_img_icon svg {display: block} .B_item_productlist .B_item_hoverInfo {position: absolute;top:0;left:0;right:0;bottom:0;} .B_item_productlist .B_item_hoverInfo {display: flex;display: -webkit-flex;flex-wrap:wrap ; justify-content: center;-webkit-flex-wrap:wrap ; -webkit-justify-content: center;overflow: hidden;} .B_item_productlist .B_item_hoverInfo>* {margin:auto;} .B_item_productlist.typeC>div {display:table;width: 100%} .B_item_productlist.typeC .B_item_title {display:inline-block;width:100%;} .B_item_productlist.typeC .B_item_info {display:table-cell;text-align:left;vertical-align: middle;} .B_item_productlist.typeC .B_item_icon {display:table-cell;text-align:right;width:100px;margin:0;} .B_item_productlist.typeD>div {display:table;width: 100%} .B_item_productlist.typeD>div>div {display:table;width: 100%} .B_item_productlist.typeD .B_item_title {display:inline-block;width:100%;} .B_item_productlist.typeD .B_item_price {display:table-cell;text-align:left;vertical-align: middle;} .B_item_productlist.typeD .B_item_icon {display:table-cell;text-align:right;width:100px;margin:0;} .B_item_productlist.typeD .B_item_info {margin:10px 0;} .B_item_productlist.typeE>div {display:table;width: 100%} .B_item_productlist.typeE>div>div {display:table;width: 100%} /*---------------------------------------------------------------------------------------------------*/ /* productlist_item element style 元素樣式 */ /*---------------------------------------------------------------------------------------------------*/ .B_item_productlist .B_item_icon a {border-radius: 100%;background:#eee;} .B_item_productlist .B_item_icon a span {color:#aaa;} .B_item_productlist .B_item_title {font-size:1.2em;} .B_item_productlist .B_item_hoverInfo {background: rgba(0,0,0,.8);color:#fff;} .B_item_productlist .B_item_hoverInfo a {color:#fff;} /* --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- */ /*---------------------------------------------------------------------------------------------------*/ /*contact box type 盒子形式 */ /*---------------------------------------------------------------------------------------------------*/ .B_contact.typeA {display: table;margin:0 auto;width:100%;} .B_contact.typeA form>div:not(.B_r2) {padding:10px;} .B_contact.typeA form .B_r2 {display: table;width: 100%} .B_contact.typeA form .B_r2>div {width:50%;display:table-cell;padding:10px;} @media (max-width: 768px){ .B_contact.typeA form .B_r2>div{width:100%;display: block} } /*---------------------------------------------------------------------------------------------------*/ /*contact element type 元素形式 */ /*---------------------------------------------------------------------------------------------------*/ .B_contact.typeA form * {vertical-align: top;} .B_contact.typeA .select.full, .B_contact.typeA .select.full select, .B_contact.typeA textarea, .B_contact.typeA input[type="text"] {width:100%;} .B_contact.typeA input[type="text"].short {width:200px;max-width: 100%;} .B_contact.typeA input[type="password"] {width:100%;} .B_contact.typeA input[type="password"].short {width:200px;max-width: 100%;} .B_contact.typeA label {display: block;font-size:15px;} .B_contact.typeA input[type="radio"] {vertical-align: middle;line-height: 1em} .B_contact.typeA input[type="radio"]+span {vertical-align: middle;line-height: 1em;padding-left:3px;padding-right:10px;} .B_contact.typeA .captcha {background: #aaa} .B_contact.typeA .captcha+input {width:80px;} .B_contact.typeA input[name="zipcode"]{width: 100px} .B_contact.typeA #twzipcode select{border:1px solid #CFD0D0;height: 30px;padding-left:1em;padding-right:1em;margin-right:1em;border-radius: 5px} /*---------------------------------------------------------------------------------------------------*/ /* contact element style 元素樣式 */ /*---------------------------------------------------------------------------------------------------*/ .B_contact button {} /* --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- */ /*---------------------------------------------------------------------------------------------------*/ /*adBlock box type 盒子形式 */ /*---------------------------------------------------------------------------------------------------*/ /*--typeA-----------------*/ .adBlock.typeA .blockContent {display: flex;display: -webkit-flex} .adBlock.typeA .blockContent>.adBanner {width: 33%;padding:0 15px;} .adBlock.typeA .blockContent>.adSlidShow {width: 67%;} @media (max-width: 992px) { .adBlock.typeA .blockContent {flex-direction: column;justify-content: center;align-items: center;} .adBlock.typeA .blockContent {-webkit-flex-direction: column;-webkit-justify-content: center;-webkit-align-items: center;} .adBlock.typeA .blockContent>.adBanner {width: 100%;order:1;} .adBlock.typeA .blockContent>.adSlidShow {width: 100%;order:2;} } /*--typeB-----------------*/ .adBlock.typeB {display: flex;justify-content: center;align-items: center;} .adBlock.typeB {display: -webkit-flex;-webkit-justify-content: center;-webkit-align-items: center;} .adBlock.typeB {position: relative;} .adBlock.typeB:after {content:'';position: absolute;top:0;left:0;right:0;bottom:0;z-index: 0} .adBlock.typeB .item img{max-width: 100%;position: relative;z-index: 1} /*--typeC-----------------*/ .adBlock.typeC .blockContent {display: flex;display: -webkit-flex} .adBlock.typeC .blockContent>.adSlidShow {width: 100%;} @media (max-width: 992px) { .adBlock.typeC .blockContent {flex-direction: column;justify-content: center;align-items: center;} .adBlock.typeC .blockContent {-webkit-flex-direction: column;-webkit-justify-content: center;-webkit-align-items: center;} .adBlock.typeC .blockContent>.adBanner {width: 100%;order:1;} .adBlock.typeC .blockContent>.adSlidShow {width: 100%;order:2;} } /*---------------------------------------------------------------------------------------------------*/ /*adBlock element type 元素形式 */ /*---------------------------------------------------------------------------------------------------*/ /*--typeA-----------------*/ .adBlock.typeA .adSlidShow {position: relative;} .adBlock.typeA .adSlidShow [class*="B_item"] {margin:0;} .adBlock.typeA .adSlidShow .slick-prev {left:-15px;} .adBlock.typeA .adSlidShow .slick-next {right: -15px;} .B_item_adBlock.typeA .item {position:relative;width:100%;padding-bottom:75.676%;} .B_item_adBlock.typeA .item .info {position:absolute;top:0;left:0;bottom:0;right:0;z-index: 1} .B_item_adBlock.typeA .item .info {display: flex;align-items: center;justify-content:center;flex-direction:column;} .B_item_adBlock.typeA .item .info {display:-webkit-flex;-webkit-align-items: center;-webkit-justify-content:center;-webkit-flex-direction:column;} .B_item_adBlock.typeA .item .adImg {position: absolute;top:0;left:0;bottom:0;right:0;z-index: 0} .B_item_adBlock.typeA .item .adImg img {max-height: 100%;max-width: 100%;width:auto;height:auto;} /*--typeC-----------------*/ .adBlock.typeC .adSlidShow {position: relative;} .adBlock.typeC .adSlidShow [class*="B_item"] {margin:0;} .adBlock.typeC .adSlidShow .slick-prev {left:-15px;} .adBlock.typeC .adSlidShow .slick-next {right: -15px;} .B_item_adBlock.typeC .item {position:relative;width:100%;padding-bottom:75.676%;} .B_item_adBlock.typeC .item .info {position:absolute;top:0;left:0;bottom:0;right:0;z-index: 1} .B_item_adBlock.typeC .item .info {display: flex;align-items: center;justify-content:center;flex-direction:column;} .B_item_adBlock.typeC .item .info {display:-webkit-flex;-webkit-align-items: center;-webkit-justify-content:center;-webkit-flex-direction:column;} .B_item_adBlock.typeC .item .adImg {position: absolute;top:0;left:0;bottom:0;right:0;z-index: 0} .B_item_adBlock.typeC .item .adImg img {max-height: 100%;max-width: 100%;width:auto;height:auto;} /*---------------------------------------------------------------------------------------------------*/ /* adBlock element style 元素樣式 */ /*---------------------------------------------------------------------------------------------------*/ /*--typeA-----------------*/ .B_item_adBlock.typeA .item {background: #ccc;} .B_item_adBlock.typeA .item:hover .info {background: #000} /*--typeB-----------------*/ .adBlock.typeB {background: #aaa;min-height:100px;} .adBlock.typeB:after {background: rgba(0,0,0,.55);} /*--typeC-----------------*/ .B_item_adBlock.typeC .item {background: #ccc;} .B_item_adBlock.typeC .item:hover .info {background: #000}