@charset 'UTF-8'; body { font-family: Microsoft JhengHei; position: relative; } img[src] { padding-bottom: unset !important; } .pswp { z-index: 4500; } a { color: #0d87a2; transition-duration: .4s; font-weight: bold; transition-property: color; } .btn { word-break: break-all; white-space: normal; } .bscontainer .btn { text-align: left; } a:hover { color: #00b6de; text-decoration: none; transition-duration: .3s; transition-property: color; } .modal-link { color: #0d87a2 !important; } .modal-link:hover { color: #00b6de !important; } .overflow-hidden { overflow: hidden; } article, footer { overflow: hidden; } img { width: 100%; } .empty-hidden:empty { display: none !important; } #pagearea .empty-hidden:empty { display: inherit !important; } .fnmodal, .modal-link { display: inline-block; cursor: pointer; } .img-fluid { max-width: 100%; width: auto; height: auto; } .bg16v10 { padding-bottom: 62.5%; } .boxShadow { box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.5); } #article_content a:link:not(.btn), #article_content a:active:not(.btn), #article_content a:visited:not(.btn) { color: rgb(0, 92, 175); text-decoration: underline; } #article_content a:not(.btn):hover { color: rgb(255, 150, 0); } .know-more-wrapper { display: block; position: relative; } .know-more-wrapper.align-right { text-align: right; } .know-more-wrapper::after { width: calc(100% - 135px); height: 1px; background: #e8e8e8; content: ''; position: absolute; right: 0px; top: 14px; z-index: 1; } .know-more-wrapper.align-right::after { right: auto; left: 0; } a.know-more { display: inline-block; padding-right: 24px; position: relative; z-index: 2; font-size: 14px; font-weight: bold; color: #645847; text-transform: uppercase; } .know-more-wrapper.align-right a.know-more { padding-right: 16px; padding-left: 24px; } a.know-more span { display: inline-block; vertical-align: middle; margin-top: -2px; margin-left: 4px; color: #ff9600; } .icon-more-icon:before { font-family: FontAwesome; content: '\f144'; } a.know-more:hover span { color: #17a43b; } .area-title { margin-top: 6%; text-align: center; } .area-title.backgray { background-color: #f3f5f6; padding-top: 3%; padding-bottom: 3%; } .area-title h4 { font-size: 2rem; font-weight: bold; margin-bottom: 2%; } .area-title h5 { font-size: 1.2rem; font-weight: bold; margin-bottom: 0; } .how-to-know h5 { background-color: #73bcc7; color: #FFF; padding: 2%; } .purchase .card-body { padding: 0; } .purchase.how-to-know .card-text { background-color: transparent; } .how-to-know .card-text { height: 85%; background-color: #e6e6e6; padding: 5%; text-align: left; } .area-title .service-tel { font-size: 50px; color: #73bcc7; font-weight: bolder; line-height: 200%; font-family: Arial Black; } .area-title mark { background-color: #9ccd60; padding: 5px 10px; color: #FFF; } .index-new { background-color: #dadada; } .index-new img.icon-new { position: absolute; top: -21px; left: 5%; } .table-responsive { display: block; width: 100%; overflow-x: auto; } .tdalign-y-middle th, .tdalign-y-middle td { vertical-align: middle; } .slick-carousel .slick-prev::before, .slick-carousel .slick-next::before { font-family: FontAwesome; color: #000; } .slick-carousel .slick-prev::before { content: '\f053'; } .slick-carousel .slick-next::before { content: '\f054'; } .slick-carousel .video-block { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; } .slick-carousel .video-block::before { display: none; } .video-block>iframe { position: absolute; width: 100%; height: 100%; } .video-block>iframe:not([src]) { display: none; } .items-block figure { position: absolute; } *:not(.slick-carousel) .video-block.bsyoutube { padding-bottom: 56.25% !important; } .pagination { display: inline-block; padding-left: 0; margin: 20px 0; border-radius: 4px; list-style: none; } .pagination>li { display: inline-block; } .pagination.blue>li>a, .faq-wrapper .pagination.blue>li>span { background: #e3edf5; } .pagination>li>a, .pagination>li>span { display: inline-block; width: 30px; line-height: 30px; text-align: center; color: #8faabe; margin: 0 4px; border: none; border-radius: 50%; cursor: pointer; } .pagination>li:first-child>a, .pagination>li:first-child>span, .pagination>li:last-child>a, .pagination>li:last-child>span { width: auto; padding: 0 22px; border-radius: 25px; font-size: 12px; text-transform: uppercase; } .pagination.blue>li>a, .faq-wrapper .pagination.blue>li>span { background: #e3edf5; } .pagination>li>a.active { color: #FFF; background-color: #5db9b1; } @media (max-width: 432px) { .pagination>li:first-child>a, .pagination>li:last-child>a { padding: 0 14px; font-size: 16px; } } blockquote { margin: 0; padding: 16px 40px; background-color: #EEE; border-radius: 8px; } blockquote::before { font-family: FontAwesome; position: absolute; left: 8px; top: 8px; font-size: 24px; content: '\f10d'; } blockquote::after { font-family: FontAwesome; position: absolute; right: 8px; bottom: 8px; font-size: 24px; content: '\f10e'; } .indent-0 { text-indent: 0 !important; } .banner { z-index: 20; } .banner-wrap { min-height: 240px; background-color: #707070; color: #FFF; } .banner-service-period { color: #FFF; font-size: 1.7rem; font-weight: bold; text-shadow: rgb(0 0 0) 0px 0px 3px, rgb(0 0 0) 0px 0px 3px; } .banner-service-period>.marquee { position: absolute; } @media (max-width:768px) { .banner-wrap { min-height: 200px; } } .banner-pages { position: absolute; z-index: 99; width: 100%; height: 100%; } .banner-pages h2 { font-size: 2rem; font-weight: bolder; word-break: keep-all; background-color: rgba(0, 0, 0, 0.45); line-height: 100%; border: solid 1px #929292; padding: 10px 4%; margin-left: 30px; margin-bottom: 0; color: #FFF; order: 1; } .banner-pages .row { width: 100%; height: 100%; } .banner>.banner-wrap>img { width: 100%; height: auto; max-width: inherit !important; } .dyn-img-row>.column { padding: 0; } .dyn-img-row .img-layer { position: absolute; right: 0; top: 0; bottom: 0; left: 0; z-index: 10 !important; background-size: cover; background-position: center center; border: 2px solid transparent; background-clip: content-box; } @media (max-width: 576px) { .ns-smartsizer { width: 25%; } .banner-pages h2 { font-size: 1.2rem; } } @media (max-width: 352px) { .ns-smartsizer { width: 50%; } } #gotop { display: none; position: fixed; right: 20px; bottom: 30px; width: 40px; height: 40px; line-height: 32px; text-align: center; font-size: 25px; background: rgba(0, 0, 0, 0.36); color: #FAFCFD; cursor: pointer; z-index: 80; } #gotop>span.fa { top: -5px; } #gotop>.txt { position: absolute; width: 100%; line-height: normal; font-size: 12px; bottom: 5px; text-align: center; } .nav-service-number { font-size: 22px; font-weight: blod; top: 5px; line-height: 50px; color: #000; } @media (max-width:576px) { .nav-service-number { font-size: 16px; } } @media (max-width:464px) { .nav-service-number { font-size: 14px; } } @media (max-width:352px) { .nav-service-number { line-height: normal; padding-top: 6px; } .nav-service-number>.title { font-size: 16px; letter-spacing: 5px; } } .banner-nav { display: block; width: 100%; background-color: #bdc3c6; z-index: 100; } .banner-nav>.row { margin: 0; } .banner-nav .captain-col { background-color: #0d87a2; } .banner-nav>.row>div:nth-child(1) { z-index: 5; } .banner-nav>.row>div:nth-child(2) { z-index: 3; } .banner-nav h5 { color: #FFF; margin-bottom: 0; font-size: 1rem; font-weight: bold; padding: 10px 47px; } .cat-button { color: #0d87a2; background-color: transparent; width: 100%; text-align: left; outline: none !important; transition-duration: .4s; padding-right: 36px; box-shadow: none; } .cat-button:active, .cat-button:focus { outline: none !important; box-shadow: none; } .cat-button:hover { background-color: transparent; transition-duration: .4s; } .cat-button::after { font-family: FontAwesome; content: '\f107'; position: absolute; right: 12px; top: 50%; margin-top: -12px; font-size: 24px; line-height: 1; color: #0d87a2; transition-duration: .3s; transform: rotate(0deg); } .cat-button.trigger::after { transition-duration: .3s; transform: rotate(-180deg); } .cat-wrap { list-style: none; padding: 0; margin: 0; z-index: 2; } .cat-wrap .nav-item { line-height: normal; } .cat-item { text-align: left; border-bottom: 1px solid #CCC; font-weight: bold; } .cat-item a { display: block; padding-left: 30px; text-decoration: none; word-break: keep-all; white-space: nowrap; } .cat-item a.active { color: #0d87a2; font-weight: bold; text-shadow: 0px 0px 1px #0d87a2; } .cat-item a::before { content: ''; font-family: FontAwesome; position: absolute; left: 10px; top: 50%; margin-top: -10px; font-size: 20px; line-height: 1; } .cat-item a.active::before { content: '\f138'; left: -10px; font-size: 20px; margin-top: -11px; } .cat-item:last-child { border-bottom: 0; } .categories-block h2 { display: none; } .categories-block .cat-button { transition-duration: .4s; } .categories-block .cat-button:hover { transition-duration: .4s; } .categories-block .cat-item a { padding: 7px 7px 7px 12px; line-height: 24px; color: #0d87a2; transition-duration: .4s; } .categories-block .cat-item { padding: 0 6px; margin-bottom: 0; border: 0; transition-duration: .3s; } .categories-block .cat-item:hover { transition-duration: .3s; } .categories-block .cat-item:hover a { color: #00b6de !important; } .categories-block .cat-item.active a { color: #00b6de; } .ns-dropdown-xl.cat-wrap { box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3); } .ns-dropdown-xl .cat-item.active { background-color: #0d87a2; } .ns-dropdown-xl .cat-item:not(.active) a:hover { color: #F60 !important; } .home-carousel .items-block>img { width: 100%; } /* .home-carousel .slick-prev { left: 0; width: 10%; height: 100%; z-index: 1; transition-duration: 1s; background: rgba(0,0,0,0); } */ .home-carousel .slick-prev { left: 3vw; width: 5vw; height: 5vw; max-width: 60px; max-height: 60px; z-index: 1; transition-duration: 1s; background: rgba(0, 0, 0, 0); } .home-carousel .slick-prev::after { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); /* background: -moz-linear-gradient(left, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,0,0,0.4)), color-stop(100%, rgba(0,0,0,0))); background: -webkit-linear-gradient(left, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%); background: -o-linear-gradient(left, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%); background: -ms-linear-gradient(left, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%); background: linear-gradient(to right, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=1 ); */ opacity: 0; transition-duration: 1s; z-index: 0; } .home-carousel .slick-next::after { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); /* background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0.4))); background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%); background: -o-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%); background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%); background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=1 ); */ opacity: 0; transition-duration: 1s; z-index: 0; } .home-carousel .slick-prev:hover::after, .home-carousel .slick-next:hover::after { opacity: 1; transition-duration: 1s; } .home-carousel .slick-prev:before { position: absolute; left: 0; right: 0; top: 0; bottom: 0; content: ''; background-image: url(/images/icons/arrow-wl.png); background-size: contain; background-repeat: no-repeat; z-index: 1; } .home-carousel .slick-next { left: auto; right: 3vw; width: 5vw; height: 5vw; max-width: 60px; max-height: 60px; z-index: 1; transition-duration: 1s; } .home-carousel .slick-next:before { position: absolute; left: 0; right: 0; top: 0; bottom: 0; content: ''; background-image: url(/images/icons/arrow-wr.png); background-size: contain; background-repeat: no-repeat; z-index: 1; } .home-carousel .slick-dots li.slick-active button:before { opacity: .75; color: #FFF !important; } .home-carousel .slick-dots li button:before { color: #FFF !important; } .ex-box.index-animation { position: absolute; width: 100%; bottom: 10%; text-align: center; padding-left: 2rem; padding-right: 2rem; } .index-animation .ex-txt { background-color: rgba(0, 0, 0, 0.30); border: 1px solid rgba(255, 255, 255, 0.40); font-size: 3.6vw; font-weight: bold; color: #FFF; line-height: 100%; padding: 2%; display: inline-block; visibility: visible; opacity: 0; } .index-animation .ex-txt:empty { display: none; } #pagearea .index-animation .ex-txt { display: inline-block; } .index-animation.ani-play .ex-txt { opacity: 1; transition-duration: .5s; } .home-pall .rd-parallax-layer[data-type='media'] {} .index-slogan { font-size: 1.5vw; color: #FFF; padding: 2vw 0; text-align: center; line-height: 250%; } .index-title-box { width: 15vw; height: auto; position: absolute; padding: 1vw 0; top: 0; left: 3%; z-index: 99; color: #FFF; text-align: center; } .index-title-box strong { font-size: 2vw; display: block; clear: both; margin-bottom: 0.3vw; } .home-link-block, .home-link-block:link, .home-link-block:visited { color: inherit; transition-duration: .6s; text-decoration: none; } .home-link-block:hover { color: #0188a6; transition-duration: .6s; } .home-link-block .overflow-hidden>img { transform: scale(1); transition-duration: 1s; transform-origin: center center; } .home-link-block:hover .overflow-hidden>img { transform: scale(1.1); transition-duration: 1s; } @media (max-width:768px) { .index-slogan { font-size: 15px; } } .cat-wrap .nav-link.disable { pointer-events: none; opacity: .8; color: #CCC; } .products-box { padding: 7% 0 3% 0; color: #000; margin-top: 0; } .products-box a { text-decoration: none; } .products-box.box1 { background-color: #0188a6; } .products-box.box2 { background-color: #f7b52c; } .products-box.box3 { background-color: #7ebb44; } /*.products-box img { border: solid 1px #FFF; margin-bottom: 4%; width: 80%; }*/ .products-box .products-pic { width: 80%; margin: 0 auto 4% auto; overflow: hidden; border: solid 1px #FFF; } .products-box .products-pic .img-wrap { padding-bottom: 100%; transform: scale(1); transition: 1s; } .products-box .products-pic .img-wrap:hover { transform: scale(1.1); transition: 1s; } .products-box a, .products-box a:hover { color: #000; } .brand-carousel .items-block { transform: scale(0.9); transition-duration: .6s; } .brand-carousel .items-block:hover { transform: scale(1); transition-duration: .6s; } .prod-cat-button::after { font-family: FontAwesome; content: '\f107'; position: absolute; right: 12px; top: 50%; margin-top: -12px; font-size: 24px; line-height: 1; color: #FFF; transition-duration: .3s; transform: rotate(0deg); cursor: pointer; } #prod-cat-wrap { z-index: 0; margin-top: -16px; } #prod-cat-wrap .cat-item { border-bottom: 0; } #prod-cat-wrap .cat-link { word-break: break-all; white-space: pre-wrap; word-wrap: break-word; padding: 7px 7px 7px 20px; } #prod-cat-wrap .cat-link.active::before { left: -5px; } nav#product_info { z-index: 10; width: 100%; } #product_menu { background-color: #707070; color: #FFF; } #product_menu h2, .inquiry h2 { font-size: 2rem; font-weight: bolder; background-color: rgba(0, 0, 0, 0.45); line-height: 100%; border: solid 1px #929292; padding: 10px 4%; margin-left: 30px; margin-bottom: 0; color: #FFF; } #product_menu .banner-pages { position: absolute; z-index: 99; width: 100%; height: 100%; } #product_menu .banner-pages .row { width: 98%; height: 94%; } #product_menu_sub { background-color: #bdc3c6; line-height: 100%; margin: 0; } #product_menu_sub h3 { background-color: #0d87a2; color: #FFF; margin-bottom: 0; font-size: 1rem; font-weight: bold; padding: 10px 47px; } #product_menu_sub, #product_menu_sub h3 { font-size: 1.2rem; } #product_menu_sub ul { margin-bottom: 0; } #product_menu_sub .list-inline-item { padding: 10px 1rem; } .product-banner { position: relative; } .product-name { color: #FFF; background-color: rgba(0, 0, 0, 0.26); font-size: 4.5vw; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 2%; line-height: 100%; border: solid 1px rgba(255, 255, 255, 0.40); } .product-name strong { font-size: 5vw; } @media (max-width:476px) { .product-name { top: auto; left: 30px; bottom: 12px; transform: none; } } .area-title { margin-top: 3rem; text-align: center; } .area-title h4 { font-size: 2rem; font-weight: bold; margin-bottom: 1.5rem; } .area-title h4+p { margin-bottom: 1.5rem; } .area-title .p-style01 { background-color: #c9b5a3; font-size: 0.9rem; text-align: left; } .area-title .p-style01.green { background-color: #b4c9a3; } .area-title .p-style01.gray { background-color: #c8c8c1; } .area-title .p-style01 .col { padding: 0; } .area-title .p-style01 p { padding: 10px 40px !important; } .area-title h5 { font-size: 1.2rem; font-weight: bold; margin-bottom: 0; } .area-title h5.spec { margin-top: 17%; } .area-title .pic-info li { margin-bottom: 2%; margin-left: 2%; } .area-title .pic-info2 li { margin-bottom: 10px; } .area-title .pic-info2 { background-color: #f3f5f6; } .area-title.backgray { background-color: #f3f5f6; padding-top: 3%; padding-bottom: 3%; } .area-title .spec-dl dt { background-color: #73bcc7; margin-bottom: .5rem; padding-top: .2rem; } .area-title .spec-dl dd { background-color: #cfe8ec; } .area-title .p-style01 .spec-dl { width: 50%; background-color: rgba(255, 255, 255, 0.5); } .area-title .p-style01 .spec-dl dt { background-color: rgba(255, 255, 255, 0.2); padding: 10px; margin-bottom: 0; } .area-title .p-style01 .spec-dl dd { background-color: transparent; } .area-title .p-style01 p.font-size-big { font-size: 1.1rem; } .quick_access { cursor: pointer; } .quick_access img { width: 70px; height: auto; margin-bottom: 4px; } .quick_access a .list-txt, .quick_access a:link .list-txt.quick_access a:visited .list-txt { color: #FFF; font-size: 16px; text-shadow: 0 0 3px #000, 0 0 3px #000; } .quick_access .service-no { font-size: 36px !important; line-height: 49px; } @media (max-width:1200px) { .quick_access img { width: 55px; margin-bottom: 2px; } .quick_access a .list-txt, .quick_access a:link .list-txt.quick_access a:visited .list-txt { font-size: 15px; } .quick_access .service-no { line-height: 40px; } } @media (max-width: 768px) { .quick_access img { width: 40px; margin-bottom: 0; } .quick_access a .list-txt, .quick_access a:link .list-txt.quick_access a:visited .list-txt { font-size: 12px; } } .home.quick_access { position: absolute; top: 10px; right: 10px; z-index: 99; } .color-a span, .color-b span, .color-c span, .color-e span, .color-f span, .color-g span { width: 100%; height: 6rem; display: block; clear: both; } .color-d span { width: 50%; height: 6rem; display: inline-block; } h6.color-type { border-bottom: dashed 1px #bdc3c6; padding: 3px 0; line-height: 150% } .color-a .a01 span { background-color: #8b6243; } .color-a .a02 span { background-color: #5d4335; } .color-a .a03 span { background-color: #837471; } .color-a .a04 span { background-color: #ede3c7; } .color-b .b01 span { background-color: #764336; } .color-b .b02 span { background-color: #cebc81; } .color-b .b03 span { background-color: #96493d; } .color-b .b04 span { background-color: #90815e; } .color-c .c01 span { background-color: #963e30; } .color-c .c02 span { background-color: #b09563; } .color-c .c03 span { background-color: #483f37; } .color-d .d01 span:first-child { background-color: #594d3d; } .color-d .d01 span { background-color: #74583f; } .color-d .d02 span:first-child { background-color: #9f9066; } .color-d .d02 span { background-color: #645d50; } .color-d .d03 span:first-child { background-color: #7c705d; } .color-d .d03 span { background-color: #aea178; } .color-d .d04 span:first-child { background-color: #766a5b; } .color-d .d04 span { background-color: #ab9e75; } .color-d .d05 span:first-child { background-color: #564c42; } .color-d .d05 span { background-color: #645d50; } .color-d .d06 span:first-child { background-color: #513e34; } .color-d .d06 span { background-color: #96855d; } .color-e .e01 span { background-color: #efecd6; } .color-e .e02 span { background-color: #752e15; } .color-e .e03 span { background-color: #30353a; } .color-f .f01 span { background-color: #c3ac96; } .color-f .f02 span { background-color: #868b8e; } .color-g .g01 span { background-color: #e0c493; } .color-g .g02 span { background-color: #8d145e; } .color-g .g03 span { background-color: #383d3e; } .color-g .g04 span { background-color: #4160a3; } .color-g .g05 span { background-color: #e6e5e1; } .prod-optional-wrap { width: 100%; overflow: hidden; } .prod-optional { max-width: 920px; overflow: visible; margin: auto; } .cases-slider .prod-optional { max-width: 600px; } .prod-optional.pic-small { max-width: 600px; } .cases-slider .prod-optional.pic-small { max-width: 400px; } .prod-optional .slick-list { overflow: visible; margin: auto; } .prod-optional .slick-slide { padding: 0 2rem; } .prod-optional .slick-next { right: 30px; z-index: 1; width: 36px; height: 46px; background-image: url(/images/sprites/icon-control-next.png); } .prod-optional .slick-prev { left: 30px; z-index: 1; width: 36px; height: 46px; background-image: url(/images/sprites/icon-control-prev.png); } .prod-optional .slick-next::before, .prod-optional .slick-prev::before { content: ''; } .prod-optional .slick-dots { height: auto; position: relative; bottom: 0; } .prod-optional .slick-dots li { width: auto; height: auto; } .prod-optional .slick-dots li>button { margin: 0 3px; } .prod-optional .slick-dots li button::before { content: ''; width: 30px; height: 3px; margin-right: 3px; margin-left: 3px; background-color: #000; opacity: 1; } .prod-optional .slick-dots li.slick-active button::before { background-color: #0188a6; } .prod-optional .slick-slide img { width: 100%; } .prod-optional .slick-slide .carousel-text { visibility: hidden; } .prod-optional .slick-slide.slick-current .carousel-text { visibility: visible; } .prod-optional .slick-slide { opacity: 0.4; transition-duration: .5; } .prod-optional .slick-slide.slick-current { opacity: 1; transition-duration: .5; } .prod-optional .items-block>iframe { width: 100% !important; } @media (max-width:768px) { .area-title h4 { font-size: 1.5rem; } } @media (max-width:576px) { .prod-optional .slick-list { padding: 0 !important; } .prod-optional .slick-slide { padding: 0; } } .standard-slick .slick-list { padding: 0 !important; margin: 0 -1rem; } .standard-slick .items-block { padding: 0 1rem; } .standard-slick .slick-next { top: auto; bottom: -30px; right: 12px; z-index: 1; width: 36px; height: 46px; background-image: url(/images/sprites/icon-control-next.png); } .standard-slick .slick-prev { top: auto; bottom: -30px; left: 12px; z-index: 1; width: 36px; height: 46px; background-image: url(/images/sprites/icon-control-prev.png); } .standard-slick .slick-next::before, .standard-slick .slick-prev::before { content: ''; } .standard-slick .slick-dots { height: auto; position: relative; bottom: 0; } .standard-slick .slick-dots li { width: auto; height: auto; } .standard-slick .slick-dots li>button { margin: 0 3px; } .standard-slick .slick-dots li button::before { content: ''; width: 30px; height: 3px; margin-right: 3px; margin-left: 3px; background-color: #000; opacity: 1; } .standard-slick .slick-dots li.slick-active button::before { background-color: #0188a6; } .faq-item { margin-bottom: 0.25rem; } .faq-list { counter-reset: h5; list-style: none; } .faq-title { padding: 10px 0; line-height: 20px; border-radius: 0.25rem; background-color: rgba(0, 0, 0, 0.03); color: #0d87a2; cursor: pointer; border: 1px solid #DDD; } .faq-title:hover { color: #00b6de; } .faq-title::after { font-family: FontAwesome; content: '\f107'; position: absolute; right: 16px; top: 10px; font-size: 24px; line-height: 1; transition: .2s; transition-duration: .3s; transform: rotate(0deg); } .faq-title.trigger::after { content: '\f107'; transition: .2s; transition-duration: .3s; transform: rotate(-180deg); } .faq-title h5 { max-width: calc(100% - 35px); padding-left: 2.4rem; outline: none; margin: 0; text-align: left; } .faq-title h5::before { content: counter(h5) '. '; counter-increment: h5; position: absolute; left: 0; width: 2rem; text-align: right; } .faq-content { border: 0; } .faq-text { margin: 20px; border: 0; padding-left: 15px; color: #686868; line-height: 1.8; } .faq-text::before { height: 100%; width: 1px; content: ''; left: -6px; border-left: 1px solid #DDD; position: absolute; } .article-img-block { width: 160px; height: 120px; background-position: center center; background-size: cover; margin-right: 16px; } .list-text { position: static; font-size: 1rem; left: 20px; right: 20px; bottom: 56px; margin: 0; padding: 0; color: #666C74; line-height: 27px; height: 54px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; } .how-to-know li { border: none; padding: 0 1%; margin-bottom: 16px; } .how-to-know h5 { background-color: #73bcc7; color: #FFF; padding: 2%; } .how-to-know .card-text { height: 85%; background-color: #e6e6e6; padding: 5%; text-align: left; } .purchase .card-body { padding: 0; } .purchase.how-to-know .card-text { background-color: transparent; } .how-to-know .list-inline-item:not(:last-child) { margin-right: 0; } .area-title .spec-dl.allowance dt { color: #FFF; text-align: center; } .area-title .spec-dl.allowance dd, .area-title .spec-dl.allowance dt { padding: 0.5rem 0; } .area-title .spec-dl.allowance ol { padding-right: 1rem; } .about-icon.contacts-icon img { height: auto; margin-bottom: 1rem; } .contacts-icon li { border: solid 1px #CCC; margin: 1rem; padding: 2rem; } .contacts-icon li:hover { background-color: #e5feff; } .case-img-slider .slick-next { right: 10px; z-index: 10; } .case-img-slider .slick-prev { left: 10px; z-index: 10; } .cases-box .card-deck .card { height: 100%; } .cases-box .card-deck .col-3 { margin-bottom: 2rem !important; } .cases-box .items-nav .slick-slide { padding: 4px; } .cases-box .items-nav .items-block { background-size: cover; background-position: center center; background-repeat: no-repeat; padding-bottom: 60%; transition-duration: .5s; transform-origin: center center; transform: scale(1, 1); opacity: .3; cursor: pointer; } .cases-box .items-nav .slick-current .items-block { opacity: 1; transition-duration: .5s; transform-origin: center center; } .cases-box .items-view .items-block { background-position: center; background-size: cover; } .cases-box .square-block { padding-bottom: 100% !important; } .case-card { background-clip: border-box; border: 1px solid rgba(0, 0, 0, 0.125); border-radius: 0.25rem; max-width: 400px; margin-left: auto; margin-right: auto; } .case-card .card-footer { position: absolute; left: 0; right: 0; bottom: 0; } .case-card .slider-syn { border-right: 1px solid rgba(0, 0, 0, 0.125); } .case-text .ellipsis-cont { line-height: 1.5rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; height: 4.5rem; } .case-text.in .ellipsis-cont { -webkit-line-clamp: unset; height: unset; } .case-text .ellipsis-ext { width: 100px; } .case-text .ellipsis-ext::before { content: '展開'; } .case-text.in .ellipsis-ext::before { content: '收合'; } .btn-quality { padding: 1rem; border: solid 1px #CCC; border-radius: 0.25rem; text-decoration: none; } .btn-quality:hover { background-color: #e5feff; } .card-quality img { max-width: 100%; } .modal-open-btn { background-color: #0d87a2; transition-duration: .4s; font-weight: bold; } .modal-open-btn:hover { background-color: #00b6de; transition-duration: .3s } .filter-item { transform: scale(1); transition-duration: .5s; transition-delay: 1s, } .filter-item.out { transform: scale(0); max-width: 0; height: 0 !important; overflow: hidden; transition-property: transform, max-width, height; transition-duration: .5s, .5s, .5s; transition-delay: 0s, .5s, .5s; } .footer { padding: 30px 0; color: #FFF; background-color: #58585a; } .footer a { color: #FFF !important; } .copyright { font-size: 12px; border-top: solid 1px #767676; padding: 5px 0 0 0; margin-top: 5px; } .copyright .align-self-end { text-align: right; } .copyright i.fa { margin-left: 10px; font-size: 33px; } .footer .social-icon { width: 40px; height: 40px; display: block; margin: 4px; opacity: 0.7; transition-duration: .6s; } .footer .social-icon:hover, .footer .social-icon:focus { opacity: 1; transition-duration: .6s; } .center-child { text-align: center; } .center-child::before { content: ''; width: 0; height: 100%; display: inline-block; position: relative; vertical-align: middle; background: #f00; } .center-child>* { display: inline-block; vertical-align: middle; } .center-child>.fn-edit { min-width: 1rem; } .fw-b { font-weight: bold; } .invalid-feedback { font-size: 14px; color: #FF3F00; position: absolute; right: 14px; bottom: 0; pointer-events: none; } .invalid-feedback .list-unstyled { margin: 0; } .has-error .form-input { box-shadow: 0 0 1px 1px #FF3F00 inset; } .help-block { font-size: 14px; color: #FF3F00; position: absolute; right: 24px; bottom: 0; pointer-events: none } .help-block .list-unstyled { margin: 0 } .form-group.has-error .invalid-feedback { display: block; bottom: 10px; right: 16px; } .sexchk-btn { height: 31px; box-shadow: none !important; border-color: #ced4da; border-left-width: 0; margin: 0; font-size: 12px; word-break: keep-all; white-space: nowrap; } .sexchk-btn.active { background-color: rgb(53, 185, 194) !important; border-color: rgb(53, 185, 194) !important; } .sexchk-btn.active .fa-check { visibility: visible; } .sexchk-btn .fa-check { visibility: hidden; } .sexchk-btn .fa-check { visibility: hidden; } .sexchk-btn.active .fa-check { visibility: visible; }.wdg-contact-wrap { position: fixed; left: auto; right: 20px; top: auto; bottom: 10px; width: 40px; vertical-align: middle; cursor: pointer; z-index: 80; pointer-events: none; transition-duration: .6s; } .wdg-contact-wrap.in { bottom: 70px; transition-duration: .6s; } .wdg-contact-wrap>* { pointer-events: all; } .wdg-contact-wrap.in { pointer-events: all; } .wdg-contact-wrap a.wdg-link { position: relative; display: block; width: 40px; height: 40px; text-decoration: none; font-weight: normal; outline: none; margin-bottom: 10px; transition-duration: .3s; } .wdg-contact-wrap a.wdg-link>img { width: 40px; height: 40px; } .wdg-contact-wrap.in a.wdg-link { opacity: 1; top: 0 !important; transition-duration: .3s; } /* .wdg-contact-wrap.show a.wdg-link:nth-child(7){ top:-350px; } .wdg-contact-wrap.show a.wdg-link:nth-child(6){ top:-300px; } .wdg-contact-wrap.show a.wdg-link:nth-child(5){ top:-250px; } .wdg-contact-wrap.show a.wdg-link:nth-child(4){ top:-200px; } .wdg-contact-wrap.show a.wdg-link:nth-child(3){ top:-150px; } .wdg-contact-wrap.show a.wdg-link:nth-child(2){ top:-100px; } .wdg-contact-wrap.show a.wdg-link:nth-child(1){ top:-50px; } */ .wdg-contact-wrap a.wdg-switch { display: block; pointer-events: all; border-radius: 50%; box-shadow: 0 3px 12px rgba(0, 0, 0, .15); transition: box-shadow 150ms linear; } .wdg-contact-wrap a.wdg-switch:hover { box-shadow: 0 5px 24px rgba(0, 0, 0, .3); } .wdg-contact-wrap a.wdg-switch.jump { animation-name: bounce; -webkit-animation-name: bounce; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } .wdg-contact-wrap a.wdg-switch>img { transform: rotate(0deg); transition-duration: .3s; } .wdg-contact-wrap.in a.wdg-switch>img { transform: rotate(720deg); transition-duration: .3s; animation-name: none; -webkit-animation-name: none; } @media (min-width:769px) { .wdg-contact-wrap { width: 55px; } .wdg-contact-wrap a.wdg-link { width: 55px; height: 55px; } .wdg-contact-wrap a.wdg-link>img { width: 55px; height: 55px; } } @media (min-width:1201px) { .wdg-contact-wrap { width: 70px; } .wdg-contact-wrap a.wdg-link { width: 70px; height: 70px; } .wdg-contact-wrap a.wdg-link>img { width: 70px; height: 70px; } }.topic-cont h3 { font-weight: bold; font-size: 1.5rem; text-align: center; margin-bottom: 1.5rem !important; } .slide-group { counter-reset: my-sub-counter; } .slide-wrap { border: 1px solid #CCC; border-radius: 4px; margin: 0.5rem 1rem; overflow: hidden; } .slide-wrap .slide-head { color: #333; text-align: left; padding: 0.5rem 1rem; background-color: #f7f7f7; font-size: 1.4rem; font-weight: 700; } .slide-wrap .slide-head::after { font-family: FontAwesome; content: '\f107'; position: absolute; right: 16px; top: 10px; font-size: 24px; line-height: 1; transition: .2s; transition-duration: .3s; transform: rotate(0deg); } .slide-wrap.trigger .slide-head::after { content: '\f107'; transition: .2s; transition-duration: .3s; transform: rotate(-180deg); } .slide-wrap .slide-content { display: block !important; } .slide-wrap.in .slide-content { overflow: hidden; height: 0 !important; transition-duration: .6s; } .slide-wrap.trigger .slide-content { display: block; transition-duration: .6s; } .slide-wrap .slide-text { display: block; background-size: 0; padding-left: 3rem; } .slide-wrap .slide-text::before { content: counter(my-sub-counter); counter-increment: my-sub-counter; position: absolute; display: inline-block; font-family: 'Allura', '微軟正黑體'; font-size: 1rem; color: #FFF; font-weight: bold; width: 1.6rem; height: 1.6rem; line-height: 1.6rem; text-align: center; background-color: #0d87a2; border-radius: 50%; top: 50%; transform: translateY(-50%); left: 1rem; } .slide-wrap .slide-text>figure { font-size: 1.2rem; margin-bottom: 0; padding: 0.5rem 0; } .modal-lg { max-width: 1140px; } #dmform .form-row { align-items: center !important; } .custom-control-label { position: static; } .custom-radio .custom-control-input:checked~.custom-control-label::before { background-color: #749fbb; } .custom-control-input:checked~.custom-control-label::before { color: #fff; background-color: #749fbb; } .custom-control-label::after { position: absolute; top: .38rem; left: 0; display: block; width: 1rem; height: 1rem; text-align: center; content: ''; background-repeat: no-repeat; background-position: center center; background-size: 50% 50%; } .custom-radio .custom-control-input:checked~.custom-control-label::after { font: normal normal normal 12px/1 FontAwesome; content: '\f00c'; color: #FFF; } .custom-control-label::before { position: absolute; top: .25rem; left: 0; display: block; width: 1rem; height: 1rem; pointer-events: none; content: ''; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: #dee2e6; } .custom-radio .custom-control-label::before { border-radius: 50%; } .dm-form-cont{ padding: 2rem; background: #fff; box-shadow: -4px -1px 20px 5px rgba(0, 0, 0, 0.07); } .custom-control-label { position: static; } .custom-radio .custom-control-input:checked~.custom-control-label::before { background-color: #749fbb; } .custom-control-input:checked~.custom-control-label::before { color: #fff; background-color: #749fbb; } .custom-control-label::after { position: absolute; top: .38rem; left: 0; display: block; width: 1rem; height: 1rem; text-align: center; content: ''; background-repeat: no-repeat; background-position: center center; background-size: 50% 50%; } .custom-radio .custom-control-input:checked~.custom-control-label::after { font: normal normal normal 12px/1 FontAwesome; content: '\f00c'; color: #FFF; } .custom-control-label::before { position: absolute; top: .25rem; left: 0; display: block; width: 1rem; height: 1rem; pointer-events: none; content: ''; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: #dee2e6; } .custom-radio .custom-control-label::before { border-radius: 50%; } .stair-img { width: 60px; }.prev-next-wrap { background-color: #e2e2e2; } .prev-next-wrap .prev-pg:hover, .prev-next-wrap .next-pg:hover { background-color: #efefef; } .prev-next-wrap .prev-pg { padding: 0 1rem 0 40px; } .prev-next-wrap .next-pg { padding: 0 40px 0 1rem; } .prev-next-wrap .prev-pg, .prev-next-wrap .next-pg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .prev-next-wrap .prev-pg::before { content: '\f104'; font-family: FontAwesome; font-size: 24px; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); } .prev-next-wrap .next-pg::before { content: '\f105'; font-family: FontAwesome; font-size: 24px; position: absolute; left: auto; right: 1rem; top: 50%; transform: translateY(-50%); } .prev-next-divider { position: absolute; top: 10px; bottom: 10px; width: 0; left: 50%; border-left: 1px solid #FFF; z-index: 1; } @media (max-width:464px) { .prev-next-divider { top: 50%; bottom: auto; width: auto; left: 10px; right: 10px; border-top: 1px solid #FFF; } }