/* CSS Document */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: auto; } /*#cms-main a{ text-decoration: none; transition-property: background-color, opacity; transition-duration: 0.4s; transition-timing-function: ease;} */#cms-main a:hover, #cms-main a:active, #cms-main a:visited, #cms-main a:focus {text-decoration: none; } /** font-family:=================================*/ .f-s{ font-size: 0.9rem;} .f-400{font-weight: 400!important;} .vText { -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; } .color-bold{color: #f39800;} .color-white{color: #fff!important; } .color-gray{color:#5a5a5a; } .cms-txt-stork { -webkit-text-stroke: 1px #333; -webkit-text-fill-color: transparent;} .txt-just{text-align: justify!important; } .wrapper { display: block; margin:0px auto; padding: 0px 30px; width: 100%; max-width: calc((100% - 40px)/12*12 + 40px); } @media (max-width:320px) { .wrapper { padding: 0px 20px; } } @media (min-width: 980px) { .wrapper { width: 96%;} .wrapper > .row{ justify-content: center;} } @media (min-width: 1300px) { .wrapper { width:92%;} } @media (min-width: 1600px) { .wrapper { width:100%;max-width: 1400px;} } .ul_27 {padding-left: 27px;} /* banner area*/ .banner { width:100%; height: 100%; padding: 0; margin:0px auto; display: flex; flex-wrap: wrap;justify-content: center; align-items: center; align-content: center; position: relative; overflow: hidden; background-image: linear-gradient(to bottom, #f1f4f4 0%, rgba(255,152,0,.3) 100%);} .banner:before{ content: ""; width: 100%; height: 375px; position: absolute; z-index: 9; left: 0px; bottom: -10px; background:url("/images/theme-b67/index/wave.png") no-repeat left bottom; background-size: 100% auto; pointer-events: none } .banner-txt { display: flex; flex-wrap: wrap; width:54%; height: auto; padding: 0px;margin: 0px; position: absolute; z-index: 1; background-image: linear-gradient(to right, rgba(215, 215, 215, 0.7) 0%, rgba(215, 215, 215, .4) 50%,rgba(215, 215, 215, 0) 100%);} .banner-img{ display: flex; width:100%;background-repeat: no-repeat; background-position: center top; background-size: cover; position: relative; z-index: 0; } .banner-img figure{ width: 100%;} .banner-img img { width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: all 0.3s; position: relative; z-index: 0; } .banner-txt h1 { width: 100%; font-weight: bold; font-size:1.75rem; margin-bottom: 10px; color: #000; position: relative; mix-blend-mode: multiply; text-shadow: 4px 2px 9px rgba(255,255,255,.5), 2px -2px 5px rgba(0,0,0,.5); letter-spacing: 4.5px;} .banner-txt p { flex: 0 0 100%; font-size:1rem; line-height: 1.5rem; position: relative; min-height: 52px; overflow: hidden; word-break: normal; word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:4; -webkit-box-orient: vertical;} .banner-txt h1:first-letter{ color:#f39700;} .spotlight { position: absolute; height: 100%; width: 100%; background-image: radial-gradient( circle, transparent 160px, rgba(0, 0, 0, 0.35) 200px );} @media (max-width:1024px) { .banner { margin-top: 70px; } .banner:before{width:100%; height: 375px; left: 0px; bottom: -20px; } .banner-txt { width:80%; height: auto; } } @media (max-width:768px) { .banner { background-image:none;} .banner:before{display: none } .banner-img:before{ content: ""; width: 100%; height: 375px; position: absolute; z-index: 9; left: 0px; bottom: -10px; background:url("/images/theme-b67/index/wave.png") no-repeat left bottom; background-size: 100% auto; pointer-events: none } .banner-img{ width: 100%; position: relative; order: 1; } .banner-txt {width: 100%; position: relative; top:auto; order:2; background-image:none;} .banner-txt h1 { font-size:1.875rem; margin-bottom: 5px; } .banner-txt p { font-size:.9rem; margin-bottom: 0px; text-align: left; } .spotlight {display: none;} } @media (min-width: 1100px) { .banner-txt h1 { font-size:2.5rem; line-height: 2rem; margin-bottom: 15px; } .banner-txt p { font-size:1.125rem; line-height: 1.35rem; } } @media (min-width: 1600px) { .banner-txt h1 { font-size:3rem; line-height: 2.75rem; margin-bottom: 20px; } .banner-txt p { font-size:1.125rem; line-height: 1.5rem; } } .text-content { display: flex; flex-wrap: wrap; flex-direction: column; width: 100%; min-width:420px; max-width: 100%;padding: 0px 30px 10px 30px; position: relative; z-index: 1; /* -webkit-backdrop-filter: blur(2px);backdrop-filter: blur(2px);*/ } @media (max-width:1024px) { .text-content { min-width:320px; max-width: 100%; transform: translateX(0%);} } @media (max-width:768px) { .text-content .btn-more{display: none;} } .series-name{ font-size:1.125rem; font-weight: 700; color: #000; margin: 10px 0px; } .series-name:before { content: ""; display: inline-block; vertical-align: middle; width: 40px; height: 5px; background-color: #000; margin: -2px 20px 0 0;} @media (max-width:1024px) { .series-name{font-size:0.9rem;} .series-name:before { height: 3px; background-color: #000; margin: -2px 20px 0 0;} } .btn-more { opacity: 1; transform: none; margin: 0px;} .btn-more a{color: #000; font-weight: 700; font-size: 1.125rem; display: flex; align-items: center; } .btn-more a:hover{opacity: .5;} /*.arrow*/ .arrow { position: relative; display: inline-block; margin-left: 10px; border: 2px solid #000; width: 34px; height: 34px; border-radius: 50%; transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1)} @media (min-width: 740px) { .arrow { width: 38px;height: 38px; } } @media (min-width: 1380px) { .arrow {width: 40px; height: 40px;} } @media (min-width: 1700px) { .arrow { width: 44px;height: 44px;} } .arrow::before, .arrow::after {width: 26px;height: 26px;content: "";display: inline-block; vertical-align: middle;background: url("/images/theme-b67/icon/arrow-down.svg") center no-repeat;background-size: auto 50%; position: absolute; left: 50%; top: 50%;opacity: .5; transform: translate(-50%, -50%);} .arrow:after {opacity: 0} .text-stroke{ -webkit-text-stroke: 1px #a3d6bf;} .main-area{ width: 100%; padding:50px 0px 0px 0px; margin:0px auto; position: relative;} .bg_wrap {background-image: url("../../images/theme-b67/index/bg-line.jpg");background-repeat: no-repeat; background-size: 100% auto; background-position: left top;} /*----------------------------------------/ cms-main-content ----------------------------------------*/ .main-content{position: relative; width: 100%; min-height: 50vh; margin:0 auto; padding:0px; } .cms-decorate-end {width: 100%; height: 100px; position: absolute; z-index: 13; left: 0px; } /*----------------------------------------/ 麵包屑 自訂顏色樣式 ----------------------------------------*/ .main-breads{ width: 100%; margin:0px auto; padding:5px 30px; color:#000; background-image: linear-gradient(to right, rgba(215, 215, 215, 0.7) 0%, rgba(215, 215, 215, .4) 50%,rgba(193, 193, 193, 0) 100%);} .main-breads .breadcrumb{ width: auto; padding:0px; margin:0px auto; background:none; } .main-breads .breadcrumb li{ font-size:12px; overflow: hidden; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;/* text-shadow: 1px 1px 3px rgba(0,0,0,.5)*/ } .main-breads .breadcrumb li a{ color:#555; } .main-breads .breadcrumb li a:hover{color:#f39800} .breadcrumb-item:first-child::before {content: ""; color:#fff !important; position: absolute; left:0px;top:6px; width: 13px; height:13px; background: url("/images/theme-b67/icon/home-b.svg") no-repeat left top; } .breadcrumb-item+.breadcrumb-item::before { content: " | "; margin-left: 5px;color:#555;} .main-breads .breadcrumb li:first-child{ position: relative; padding-left: 20px; color:#f39800;} .main-breads .breadcrumb-item.active{color:#000;} /*----------------------------------------/ 上方無banner麵包屑 ----------------------------------------*/ .top .main-breads {background: transparent} .top .main-breads .breadcrumb li a{ color:#817e7a; } .top .breadcrumb-item+.breadcrumb-item::before { content: " | "; margin-left: 5px;color:#acacac;} .top .breadcrumb li:first-child{ position: relative; padding-left: 20px; color: #ffbe5d;} .top .breadcrumb-item.active{color:#f39700;} .top .breadcrumb-item:first-child::before { background: url("/images/theme-b67/icon/home-b.svg") no-repeat left top; } @media (max-width: 768px) { .main-breads{margin:0px auto; /*border-bottom: solid 1px rgba(0,0,0,.35); */ background-image:none;} .main-breads .breadcrumb{ padding:2px; justify-content: flex-start; } } /*----------------------------------------/ Default Typography ----------------------------------------*/ .edit{} .edit h2 {font-size: 200%; color:#f39700; margin-bottom: 15px} .edit h3 {font-size: 162.5%; color:#f39700; margin-bottom: 15px} .edit h4 {font-size: 150%; color:#f39700; margin-bottom: 15px} .edit h5 {font-size: 135%; color:#f39700; margin-bottom: 15px} .edit h6 {font-size: 115%; color:#f39700; margin-bottom: 15px} /*----------------------------------------/ description Typography ----------------------------------------*/ .description{ display: block; margin: 0px auto; line-height: 1.875rem; padding: 0px 30px; width:100%; max-width: calc((100% - 40px)/12*12 + 40px);position: relative;} .description h2 {font-size: 200%; color: #f39700; margin-bottom: 15px} .description h3 {font-size: 162.5%;color:#f39700;margin-bottom: 15px} .description h4 {font-size: 150%;color:#f39700; margin-bottom: 15px} .description h5 {font-size: 137.5%; color:#f39700; margin-bottom: 15px} .description h6 {font-size: 125%;color:#f39700;margin-bottom: 15px} .description p {font-size: 1rem; margin-bottom: 15px} .description p strong{color:#f39700} .collapseBox {max-height: 210px; overflow: hidden; position: relative; z-index: 1; transition: all 0.5s ease 0s;} .collapseBtn {position: absolute; bottom: 0; left: 0; width: 100%; height: 70px; z-index: 100; cursor: pointer; background-image: linear-gradient(180deg, rgba(245, 245, 245, 0.0) 0%, rgba(245, 245, 245, 1) 50%); display: flex; flex-flow: wrap; align-items: flex-end; padding: 0 0 5px 0;} .collapseBtn::before {content: ''; background: url(/images/theme-b67/view_more_open.svg) no-repeat center / cover; height: 27px; width: 100%; max-width: 753px; display: block; margin: 0 auto;} .showBox {max-height: inherit; padding-bottom: 60px!important; transition: all 1s ease 0s;} .showBox > .collapseBtn {background-image: linear-gradient(180deg, rgba(245, 245, 245, 0.0) 0%, rgba(245, 245, 245, 0) 50%);} .showBox > .collapseBtn::before {background: url(/images/theme-b67/view_more_close.svg) no-repeat center / cover;} @media (max-width:320px) { .description { padding: 0px 20px; } } @media (max-width: 767.98px) { .description{margin:15px 0; padding:0px 0px 20px 0px; } } @media (min-width: 980px) { .description { width: 96%;} } @media (min-width: 1300px) { .description { width:92%;} } @media (min-width: 1600px) { .description { width:100%;max-width: 1400px;} } .article { position: relative; -webkit-column-count: 2; column-count: 2; -webkit-column-gap: 100px; column-gap: 100px; color: #515151; /*text-align: justify;*/ letter-spacing: 0.05em; /*margin-bottom: 65px;*/} .article:before { position: absolute;left: 50%; top: 0;content: '';width: 1px; height: 100%;background-color: #ebebeb;} .article p{margin-bottom: 10px; font-size:1rem; line-height: 1.65rem;} .article a{color: #555;} @media (max-width: 1440px) { .article { -webkit-column-gap: 60px; column-gap:60px; } } @media (max-width: 767.98px) { .article { -webkit-column-count: 1; column-count: 1; text-align: left; } .article:before {display: none } } /* cms-title-block h1 ======================================================================= */ .title-block{ width: 100%; height: auto; margin:0px auto 30px auto; display: flex; flex-wrap: wrap; justify-content:center; position: relative; } .title-block:after{content: ""; display: block; width: 5px; height: 40px; background-color:#f39700; margin: 20px auto;} .title-block h1 {width:100%; margin:0px auto; padding:20px 0px 0px 0px; font-size:1.5rem; color:#000; font-weight:700; text-align: center; position: relative; } .title-block p {width:100%; margin:0px auto; padding:20px 0px 0px 0px; font-size:1.25rem; color:#000; font-weight:400; text-align: center; position: relative; } @media (min-width: 1100px) { .title-block h1 { font-size:2.5rem; } } @media (min-width: 1600px) { .title-block h1 { font-size:3rem; } } @media (max-width: 1199.98px) { .title-block h1{ font-size: 1.5rem; } } @media (max-width: 768px) { .title-block { margin: 15px auto; } .title-block p { padding: 0px;font-size:1rem; } } /*----------------------------------------/ title樣式 cart ----------------------------------------*/ .title-style{ margin-bottom:60px;position: relative;width: auto; font-size: 2.4rem; line-height: 130%; } .title-style:after { content: ""; width:50px; height:75px; display: block; position: absolute; left: -60px; top:-24px; background: url(/images/theme-b67/index/dot.svg) no-repeat right top; background-size: auto;} .title-span{ margin:0px; font-size: 0.9rem; text-align: left; text-transform: uppercase; letter-spacing: 1px; font-weight: 400;color:#666;} .title-style h2{ color:#0a326c; font-size: 2rem; margin-bottom: 25px; font-weight: 700; } .title-style h3{ color:#b38f36; font-size: 1.15rem!important; line-height: 130%;font-weight: 700; } @media (max-width:768px) { .title-style{ padding: 0px 20px; } } /*cms-Title Styles 樣式 =================================*/ .title { width: 100%; margin:0px auto;padding: 0px;position: relative; } .title h1{ width: 100%;display: block;margin: 0 auto; font-size: 2.5rem; font-weight:900; color:#000; } .title h2{ width: auto;margin:15px auto; font-size:1.875rem; font-weight:700; } .title h3{ margin:15px auto; font-size: 2.35rem; line-height: 3.75rem; color:#131212; font-weight:900; letter-spacing:10px; text-align: center; } .title p{ margin:10px auto; font-weight: 400; line-height: 1.35rem; color:#fff; } .title strong{ color:#f39800;; } @media (max-width:820px) { .title h3{ letter-spacing:5px; } } @media (max-width:767.98px) { .title { margin:0px auto 20px auto; } .title h3{ font-size: 1.313rem; line-height: 2rem; letter-spacing:0; } } .title-2 { width:100%; height: auto; padding-bottom: 10px; margin:0 auto 2% auto; position: relative; border-bottom: 1px solid #dae2e1; } .title-2::after { content: ""; position: absolute; left: 50%; margin-left: -4.5px; bottom: -4.5px; width: 10px; height: 10px; border: 1px solid #fff; background-color:#77908d; transform: rotate(45deg);} .title-2 h2{ width: 100%; margin:5px auto; font-size:1.5rem; font-weight:700; text-align: center; color:#000; letter-spacing: 2.5px } .title-2 p{ width: 100%; margin:0px auto; font-size:1.15rem; font-weight:400; text-align: center; color:#000; } @media (max-width: 1024px) { .title h2{ font-size: 2rem; } } @media (max-width:768px) { .title-style{ padding: 0px 20px; } .title { margin:20px 0px; } .title h2{ font-size: 2em; } } @media (min-width:1100px) { .title-2 h2{ font-size:1.75rem; } } @media (min-width:1600px) { .title-2 h2{ font-size:2.5rem; } } /*ms-title-3 樣式 =================================*/ .title-3 { width:100%; height: auto; margin:0px auto 30px auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; flex-direction:column; position: relative; } .title-3 h2{ width: auto;margin:0px auto 10px auto; font-size: 2.5rem; font-weight: 700; color:#000; } .title-3 h3{ width: auto;margin:0px auto 10px auto; font-size: 1.75rem; font-weight: 700; color:#fff; } .title-3 p{ width: auto; margin:0px auto; font-size:1rem; line-height: 2rem; font-weight: 400; padding: 0px; color: #666464; } /*ms-title-4 樣式 =================================*/ .title-4 { width: 100%; display: flex; flex-wrap: wrap; position: relative; justify-content: center; flex-direction: column; } .title-4 h2{ font-size: 2.15rem;margin:15px; text-align: center; font-weight: 700;color:#f39700; } .title-4 h3{ margin:15px auto 5px auto;font-size: 2.5rem; color:#f39700; font-weight: 700; } .title-4 span {margin: 0px; font-size:0.9375rem; text-align: left; display: flex;font-weight: 500; } .title-4 { width:100%; margin: 30px auto; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content:center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; flex-wrap: wrap;position: relative; } /*.title-4::before { display: block; content: ''; width: 2px; height:80px; top:-68px; background:#f39700; position: absolute; z-index:2; }*/ @media (max-width: 1199.98px) { .title-4 h2,.title-4 h1{ font-size: 1.5rem; } } @media (max-width:767.98px) { .title-4 h2, .title-4 h3{ font-size: 2.15rem; font-weight: 600; } } /*----------------------------------------/ 分頁 自訂顏色樣式 ----------------------------------------*/ .pagination{ width: 100%; margin:50px auto 0px auto; padding-bottom: 30px; display: flex; flex-flow: wrap; justify-content: center; } .pagination .page-link { color:#31315e; width:40px;height: 40px;text-align: center; background-color:transparent;; border-color:transparent; border-radius:99rem; line-height: 1.5; padding: .5rem .25rem;} .pagination .page-link:hover { color: #fff; background-color:#dcdddd; border-color:#dcdddd;} .pagination .page-link:focus { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);} .pagination .page-item{ margin: 5px; } .pagination .page-item:first-child .page-link {background-color:transparent; } .pagination .page-item:last-child .page-link { background-color:transparent;} .pagination .page-item.active .page-link { color: #fff!important; background-color:#f39700; border-color:#f39700;} .pagination .page-item.disabled .page-link { color: #6c757d; background-color:transparent; border-color:transparent; } /*---------------*/ /***** icon *****/ /*---------------*/ .icon-download{background: url("/images/theme-b67/icon/icon-download.svg") no-repeat; } .icon-next{background: url("/images/theme-b67/icon/arrow-right-2.svg") no-repeat left 0px; background-size:auto;} .icon-shop{display: block; margin: auto;background:url(/images/theme-b67/icon/shop-2.svg) no-repeat left top; } .icon-link{background: url("/images/theme-b67/icon/link.svg") no-repeat left 2px; background-size:auto;} .icon-check{background: url("/images/theme-b67/icon/check.svg") no-repeat center 4px; background-size:70% auto;} .icon-clear{background: url("/images/theme-b67/icon/clear-w.svg") no-repeat center 4px; background-size:70% auto;} .transition-3d-hover { transition: all .2s ease-in-out} .transition-3d-hover:focus, .transition-3d-hover:hover {-webkit-transform: translateY(-3px);transform: translateY(-3px)} /***** btn *****/ /*---------------*/ .btn { width: 100%;margin: 0px 5px 0px 0px;padding: 10px 0.75rem;font-size: .95rem; line-height: 1.5; border-radius:15px; display: flex; flex-wrap: wrap;justify-content: center; align-self: center;} .btn i{ width:26px; height:26px;margin:-5px 5px 0px 0px; display: inline-block; } .btn i.cicrcle{ width:26px; height:26px; border: solid 1px #fff; border-radius:99rem; } .btn.btn-secondary { color:#fff; font-weight: 400; background:#f39700;border-radius:15px; border:none!important; text-align: center; display: flex; flex-wrap: wrap;justify-content: center; align-items: center;} .btn.btn-secondary:hover { color: #fff; background-color:#666465; border:none!important; } .btn.btn-secondary i{ margin:auto 5px auto -5px; display: flex; } .btn-submit{ font-weight: 400; background:#000;border: solid 1px #000; color: #fff!important; vertical-align: text-bottom; } .btn-submit:hover { color: #fff; background:#000; border: solid 1px #000; box-shadow: 0px 3px 10px #ed9823; } .btn-reset{ font-weight: 400; background: #555;border: solid 1px #555; color: #fff!important; vertical-align: text-bottom; } .btn-reset:hover { color: #fff; background:#000; box-shadow: 0px 3px 10px rgba(148,0,11,.5); } /* Bounce To Right */ .hvr-bounce-to-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; border-radius:15px; overflow: hidden; } .hvr-bounce-to-right:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background:#f39700; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;} .hvr-bounce-to-right:hover, .hvr-bounce-to-right:focus, .hvr-bounce-to-right:active {color: white;} .hvr-bounce-to-right:hover:before, .hvr-bounce-to-right:focus:before, .hvr-bounce-to-right:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);} .text-button { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.125rem; cursor: pointer; display: inline-block; color: currentColor; padding-left: 2.1875rem; position: relative; transition: padding 0.3s ease;} .text-button::before { content: ''; display: inline-block; position: absolute; left: 0; top: 50%; width: 1.5625rem; height: 0.0625rem; background: currentColor; vertical-align: middle; margin-right: 0.625rem; transition: padding 0.3s ease} @media (hover: hover) { .text-button:hover { color: currentColor; padding-left: 2.8125rem } .text-button:hover:before { width: 2.1875rem; color: currentColor } } @media (max-width: 798px) { .text-button { letter-spacing: 0rem; } p a.text-button { font-size: 0.7rem; } } /*---------------*/ /***** btn *****/ /*---------------*/ .btn-btnbox {position: relative;z-index:9; display: flex; justify-content: center; width: 100%; height: auto; margin:10px auto; transition: all 1s;} .btnbox {position: relative;z-index:9; display: flex; justify-content: flex-end; width: 100%; height: auto; margin:20px auto 0px auto; transition: all 1s;} /*mousey Styles====*/ .scroll-downs { position: absolute; top: -30px; right: 0; bottom: auto; left: 0; margin:auto; width :20px; height: 44px;z-index: 999;} .mousey { width: 2px; padding: 5px 8px; height: 24px; border: 1px solid #f39700; border-radius: 25px; opacity: 0.75; box-sizing: content-box; position: relative; } .mousey:after{content: "";position: absolute;top:38px; left:8px;width: 1px; height:30px; background:#f39700;} .scroller { width: 2px; height: 8px; border-radius: 25%; background-color:#f39700; animation-name: scroll; animation-duration: 2.2s; animation-timing-function: cubic-bezier(.15,.41,.69,.94); animation-iteration-count: infinite;} @keyframes scroll { 0% { opacity: 0; } 10% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(15px); opacity: 0;} } .icon-next{background: url("/images/theme-b67/icon/arrow-right-2.svg") no-repeat left 0px; background-size:auto;} .next-button{width:150px; height:34px; position: relative; z-index: 9; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: space-between; cursor: pointer; background-color:transparent; border-radius: 30px;} .next-button:hover {/* -webkit-transform: scale(.95);transform: scale(.95);*/ background: #000;} .next-button-circle { width:28px; height: 28px; position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin:auto 5px; background: #fff; border-radius: 50%; -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s} .next-button i { width:16px; height: 16px; -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s} .next-button-txt { padding-left: 10px; font-size: 16px; font-weight:400; line-height: 1.5; color: #fff; -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s; position: relative} .bg-bk{background:#666464;} .bg-orange{background: #f39700; } .bg-orange-line{background: #f39700; } .arrow-w{background: url("/images/theme-b67/icon/arrow-right-2.svg") no-repeat right top; } .arrow-b{background: url("/images/theme-b67/icon/arrow-right-b.svg") no-repeat right top; } .icon-add{background: url("/images/theme-b67/icon/add.svg") no-repeat right top; } @media (max-width:767.98px) { .next-button{ width: auto; height: 24px } .next-button-circle { width: 20px; height: 20px;margin: auto 3px; } .next-button i { width: 18px; height: 18px; } .next-button-txt { font-size: 14px; line-height: normal; letter-spacing: normal } } a.btn-prev {color:#131212; font-weight: 700; text-align: center; transition: all 0.5s; position: relative; } a.btn-next {color:#131212; font-weight: 700; text-align: center; transition: all 0.5s; position: relative; } a.btn-prev:before{content: ""; position: absolute;top:18px; left:8px;width:18px; height:12px; background: url(/images/theme-b67/icon/arrow-left-r.svg) no-repeat left top; transition: all 0.5s; filter: grayscale(1) brightness(1);} a.btn-next:before{content: ""; position: absolute;top:18px; right:8px;width:18px; height:12px; background: url(/images/theme-b67/icon/arrow-right-2.svg) no-repeat left top; transition: all 0.5s; filter: grayscale(1) brightness(1);} a.btn-prev:after,a.btn-next:after { display: block; content: ''; width: 0; height:1px; position: absolute; left:0px; bottom: 0px; background:#f39700; transition: all .3s ease;} @media (max-width: 767.98px) { a.btn-prev:before{top:14px; left:0px; width:18px; height:12px; } a.btn-next:before{ top:14px; right:0px; width:18px; height:12px; } } a.btn-prev:hover:after,a.btn-next:hover:after{ width: 100%; } a.btn-prev:hover:before{ -webkit-transform: translateX(5px); transform: translateX(5px); filter: none; } a.btn-next:hover:before{ -webkit-transform: translateX(-5px); transform: translateX(-5px); filter: none;} a.btn-prev:hover, a.btn-next:hover { color:#f39700!important; } a.btn-back { width:auto; color:#000!important; padding: 10px; font-weight: 700; background-color:#f2f2f2; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content:center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .btn-back:before,.btn-back::after{ content: ''; width: 10px; height:1px; background:#797371;-moz-transition: ease 0.3s; -o-transition: ease 0.3s; -webkit-transition: ease 0.3s; transition: ease 0.3s; } .btn-back:before { margin-right: 20px; margin-left: 5px;} .btn-back:after { margin-left: 20px; margin-right: 5px;} a.btn-back:hover { color:#f39700!important; } .btn-back:hover:before{ background:#f39700; -moz-transform: translateX(20%); -ms-transform: translateX(20%); -webkit-transform: translateX(20%); transform: translateX(20%); } .btn-back:hover:after{ background:#f39700;-moz-transform: translateX(-20%); -ms-transform: translateX(-20%); -webkit-transform: translateX(-20%); transform: translateX(-20%); } @media (max-width:1024px) { .btn-back:before,.btn-back::after{ display: none; } } @media (max-width: 767.98px) { .btn-back { font-size:.875rem; padding:5px 10px;} } .back-button { width: auto; height: 40px; margin: 0; padding: 10px 15px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; cursor: pointer; border-radius:30px; background:#000;} .back-button:hover .back-button-circle { -webkit-transform: scale(1.05); transform: scale(1.05)} .back-button:hover .back-button-txt, .back-button:hover i { -webkit-transform: translateX(-2px); transform: translateX(-2px)} .back-circle { width: 32px; height: 32px; position: relative; display: block; margin:0px 10px 0px -10px; border: 1px solid #fff; border-radius: 50%; background: url("/images/theme-b67/icon/arrow-left-2.svg") no-repeat 0px 4px; -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s} .cms-next-circle { width: 32px; height: 32px; position: relative; display: block; margin:0px -10px 0px 10px; border: 1px solid #fff; border-radius: 50%; background: url("/images/theme-b67/icon/arrow-right-w.svg") no-repeat 0px 0px; -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s} .back-button-txt { font-size: 16px; font-weight: 700; line-height: 1.5; letter-spacing: 1px; color: #fff; -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s} .back-button:hover{ background:#f39800!important; } @media (max-width:767px) { .back-button { width: auto; } .back-button-circle { width: 24px; height: 24px; margin-right: 15px} .back-button i { width: 22px; height: 22px; margin: auto auto auto 10px} .back-button-txt { font-size: 14px; line-height: normal; letter-spacing: normal;word-break: normal; } } /*cms-btn Styles 1===*/ .btn-01 { cursor: pointer; width:200px; height:2.75rem; padding:0px 30px; line-height:2.75rem; display: block; margin: 0; position: relative; box-shadow: 0px 0px 17px 1px rgba(0, 0, 0, 0.34); background:#f39700;z-index: 1; } .btn-01 span { display: block; transform-origin: center left; transition: color 0.3s ease;position: relative;z-index:1; font-weight: 700; color: #fff;} .btn-01 em {position: absolute;width:60px; height:25px; right:30px;top: 25%; transition: all 0.3s ease; background: url("/images/theme-b67/icon/arrow-right-f.svg") no-repeat right top; z-index:1; } .btn-01:before,.btn-01:after {content: '';background:#ec9722;height:100%; width: 0;position: absolute;transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);} .btn-01:before { top: 0; left: 0; right: auto; } .btn-01:after { bottom: 0; right: 0; left: auto; } .btn-01:hover:before { width: 100%; right: 0; left: auto;} .btn-01:hover:after { width: 100%; left: 0; right: auto;} .btn-01:hover span{ } .btn-01:hover em{ transform:translateX(20px);} /*cms-btn Styles 2===*/ a.btn-02{width: 100%; max-width: 200px; height: auto; display: block; color: #fff!important;font-weight:700; overflow: hidden; padding:10px 40px; text-align: center; background-color: #f39700;border:solid 1px #0070bd; cursor: pointer; letter-spacing: 0.1rem; box-shadow: inset 0 0 0 1px #eaeff3;-webkit-transition: color 0.25s 0.0833333333s; transition: color 0.25s 0.0833333333s; position: relative;} .btn-02::before, .btn-02::after {border: 0 solid transparent; box-sizing: border-box; content: ''; pointer-events: none; position: absolute; width: 0; height: 0; bottom: 0; right: 0;} .btn-02::before{border-bottom-width: 2px; border-left-width: 2px;} .btn-02::after{border-top-width: 2px; border-right-width: 2px;} a.btn-02:hover{color:#016f89; background:#000; } .btn-02:hover::before, .btn-02:hover::after{border-color: #000; -webkit-transition: border-color 0s, width 0.25s, height 0.25s; transition: border-color 0s, width 0.25s, height 0.25s; width: 100%; height: 100%;} .btn-02:hover::before{-webkit-transition-delay: 0s, 0s, 0.25s; transition-delay: 0s, 0s, 0.25s;} .btn-02:hover::after{-webkit-transition-delay: 0s, 0.25s, 0s; transition-delay: 0s, 0.25s, 0s;} .btn-02:focus{outline: 1px inset #fff;} .btn-02 span { display: block; padding-right:5px; transform-origin: center left; transition: color 0.3s ease;position: relative;z-index:1;font-size:1.188rem; font-weight: 700; letter-spacing: 1px; color: #fff;} .btn-02 em {position: absolute;width:60px; height:25px; right:10px;top: 25%; transition: all 0.3s ease; background: url("/images/theme-b67/icon/arrow-right-f.svg") no-repeat right top; z-index:1; } .btn-02:hover em{ transform:translateX(10px);} .btn-02 i {position: absolute;width:60px; height:60px; left:10px; top: 10%; transition: all 0.3s ease; z-index:1;} .btn-02:hover i{ transform:translateY(-10px);} @media (max-width: 991.98px) { a.btn-02{max-width: 100%; font-size:0.9rem;} } /*cms-btn Styles 3===*/ a.btn-03{ display: block; color: #1fbaee!important; font-size:1rem; font-weight:700; height: auto; overflow: hidden; padding:15px 25px; text-align: center; background-color: transparent;border:solid 1px #1fbaee; cursor: pointer; letter-spacing: 0.1rem; box-shadow: inset 0 0 0 1px #eaeff3;-webkit-transition: color 0.25s 0.0833333333s; transition: color 0.25s 0.0833333333s; position: relative;} .btn-03::before, .btn-03::after {border: 0 solid transparent; box-sizing: border-box; content: ''; pointer-events: none; position: absolute; width: 0; height: 0; bottom: 0; right: 0;} .btn-03::before{border-bottom-width: 2px; border-left-width: 2px;} .btn-03::after{border-top-width: 2px; border-right-width: 2px;} a.btn-03:hover{color:#1fbaee; background:rgba(31,186,238,.3); } .btn-03:hover::before, .btn-03:hover::after{border-color: #1fbaee; -webkit-transition: border-color 0s, width 0.25s, height 0.25s; transition: border-color 0s, width 0.25s, height 0.25s; width: 100%; height: 100%;} .btn-03:hover::before{-webkit-transition-delay: 0s, 0s, 0.25s; transition-delay: 0s, 0s, 0.25s;} .btn-03:hover::after{-webkit-transition-delay: 0s, 0.25s, 0s; transition-delay: 0s, 0.25s, 0s;} .btn-03:focus{outline: 1px inset #fff;} @media (max-width: 991.98px) { a.btn-03{max-width: 100%; font-size:0.9rem; } } a.btn-04 { position: relative; margin:10px auto;padding: 0px 10px; width: 100%; display: flex; justify-content: center; align-items: center; background:#f39700; font-size:1rem; color: #fff!important; font-weight: 500; line-height: 38px; letter-spacing: 1px; border-radius:30px; transform: scale(1); transition: all 1s; } a.btn-04:hover { color:#fff!important;text-shadow:1px 1px rgba(0,0,0,.5); background:#555; transform: scale(1.05);} .btn-play { width: 116px; height: 116px; z-index: 9999; position: absolute; margin: auto; display: flex; align-items: center; justify-content: center;} .btn-play:before { content: ''; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width:60px; height:60px; background: url("/images/theme-b67/icon/play-btn.svg") no-repeat; background-size: contain;} .btn-play:hover .rotate2 { -webkit-animation: rotate 1s linear infinite;animation: rotate 1s linear infinite;} .btn-play .rotate1,.btn-play .rotate2 { -webkit-transform: translate(5px, 5px); -ms-transform: translate(5px, 5px);transform: translate(5px, 5px);} .btn-play .rotate2 { stroke-dashoffset: 110; stroke-dasharray: 360; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-90deg) translate(5px, 5px); -ms-transform: rotate(-90deg) translate(5px, 5px); transform: rotate(-90deg) translate(5px, 5px);} .btn-play-bg{width: 116px; height: 116px;} .btn-play .bg { opacity: .5;} @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(-90deg) translate(5px, 5px); transform: rotate(-90deg) translate(5px, 5px);} 100% { -webkit-transform: rotate(270deg) translate(5px, 5px);transform: rotate(270deg) translate(5px, 5px);} } @keyframes rotate { 0% { -webkit-transform: rotate(-90deg) translate(5px, 5px);transform: rotate(-90deg) translate(5px, 5px); } 100% { -webkit-transform: rotate(270deg) translate(5px, 5px);transform: rotate(270deg) translate(5px, 5px);} } /*----------------------------------------/ ul style 自訂樣式 ----------------------------------------*/ .cms-dot{ width: 100%; display: block; margin:0px;padding: 0px; position: relative;} .cms-dot li{ width: 100%!important;display: block; padding: 2px 0px 2px 15px!important; margin:4px 0px!important; font-size:1rem; line-height:1.75rem; font-weight:400; color:#666464; position: relative; word-break: normal; } .cms-dot li:before{ content: ''; width:6px; height:6px; background-color:#f39700; border-radius: 99rem; position: absolute; top: 10px; left: 0px; transition: all 0.5s ease 0s;} .cms-check{ width: 100%; display: block; margin:0px;padding: 0px; } .cms-check li{ width: 100%; display: block; padding: 0px 0px 0px 25px!important; margin:0px 0px 2px 0px; font-size:1.125rem; font-weight:400; color: #131212; position: relative;} .cms-check li:before{ content: ''; width: 15px; height: 15px; background-color:#f39700; border-radius: 99rem; position: absolute; top: 6px; left: 0px; transition: all 0.5s ease 0s;} .cms-check li:after{ content: ''; width: 12px; height: 12px; background: url("/images/theme-b67/icon/check.svg") no-repeat left top;position: absolute; top:8px; left: 2px; transition: all 0.5s ease 0s;} .cms-arrow{ width: 100%; display: block; margin: 1.5% auto; } .cms-arrow li{ width: 100%; display: block; padding:1px 0 10px 15px; font-size:15px; line-height:1.4em; font-weight:400; background: url(/images/theme-b67/icon/arrow-right.svg) no-repeat left 8px; background-size:8px;} .cms-decimal { list-style-position: outside; list-style-type: decimal; padding-left: 15px;} .cms-decimal li{margin-bottom: 10px; font-size:1.125rem; line-height:1.5em; font-weight:400; } .cms-tag{ padding: 5px 10px; display: inline-block; width: auto; max-width: 100px; margin: 5px;font-size:15px; line-height:1.5em; font-weight:400; text-align: center; border: solid 1px #eee; background: #eee;} /*----------------------------------------/ leftMenu start 樣式 ----------------------------------------*/ @media only screen and (min-width:993px){ .leftMenuMobile {display: none;} } .leftMenu { width: 100%; padding: 20px 20px 0 0; position: sticky; top: 0px;} .leftMenu h2{ font-size: 1.5rem; font-weight: 700; margin-bottom: 30px; } @media(min-width:1002px) { .leftMenu { width:240px; } } @media(min-width:1100px) { .leftMenu { width: 300px; } } @media(max-width:992px) { .leftMenu { position: relative; padding:20px 0px 0px 0px; } } .leftMenu ul, .leftMenu ul li {list-style-type:none; margin: 0; padding: 0;} .leftMenu ul {width: 100%; } .leftMenu ul li.menu-title a{ color:#fff; font-size: 1.35rem; font-weight: 700; line-height: 2rem; background:#f39800; } .leftMenu ul li:hover.menu-title a{ color:#fff; } .leftMenu ul:nth-child(2){margin-bottom: 30px;} .leftMenu > ul ul {display: none;} .leftMenu ul li {position: relative; z-index: 1; font-size: 1.125rem; font-weight: 400; line-height:1.5rem; border-bottom: 1px solid #d8d8d8;} .leftMenu ul li:last-child {border-bottom: none;} .leftMenu ul li a:hover { color:#f39800!important; } .leftMenu ul li a { transition: all .3s ease } .leftMenu ul li a:after { content: ""; display: block; height: 4px; width: 100%; transition: all .3s ease; transform: scaleX(0); position: absolute; left: 0; bottom: 0; background-color: #f39800; transform-origin: left bottom} .leftMenu ul li a.active, .leftMenu ul li a:hover { border-color: transparent} .leftMenu ul li a.active:after, .leftMenu ul li a:hover:after { transform: scaleX(1)} .menu_dot {position: absolute; top: 10px; right: 0px; z-index: 99; width: 30px; height: 30px; cursor: pointer;} .menu_dot::before {content: ''; width: 12px; height: 2px; background-color: #000; border-radius: 2px; position: absolute; top: 12px; left: 7px; z-index: 99; transition: all 0.5s ease 0s;} .menu_dot::after {content: ''; width: 2px; height:12px; background-color: #000; border-radius: 2px; position: absolute; top: 7px; left: 12px; z-index: 99; transition: all 0.5s ease 0s;} .leftMenu .menu_dot_open{top:6px; } .leftMenu .menu_dot_open::before {background-color:#f39700;} .leftMenu .menu_dot_open::after { display: none;} .leftMenu a:link, .leftMenu a:visited {text-decoration:none; color:#666464; background-color: transparent; padding: 10px 30px; display: block; position: relative; z-index: 1; transition: all 0.5s ease 0s;} .leftMenu a:active, .leftMenu a:hover {text-decoration:none; color:#f39800!important; cursor:pointer; transition: all 0.5s ease 0s;} .leftMenu ul li ul li a{color:#666464; font-weight: 400;padding: 10px!important; } @media only screen and (max-width:992px){ .leftMenu a:link, .leftMenu a:visited { font-weight: 700;} } /*.leftMenu img style*/ .menu-img {width: 100%; display: flex;flex-wrap: wrap; align-items: center; } .menu-img figure{width:20%; padding-right: 10px;} .menu-img h3{width: calc(100% - 20% - 10px); font-size: 1rem;} @media only screen and (max-width:992px){ .menu-img figure{width:10%; padding-right: 10px;} .menu-img h3{width: calc(100% - 10% - 10px); font-size: 1.125rem;} } /*.leftMenu img end style*/ .menu_bg_open{background-color: rgba(243,152,0,0);} .leftMenu ul li a.menu_arrow_open{background-color:transparent; color: #f39700;} .menu_arrow {position: absolute; top: 15px; left: 5px; width: 20px; height: 20px; -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg); transform:rotate(0deg); transition: all 0.5s ease 0s;} .menu_arrow::before {content: ''; width: 7px; height: 2px; background-color: #000; border-radius: 2px; position: absolute; top: 7px; left: 6px; -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); transition: all 0.5s ease 0s;} .leftMenu a:hover .menu_arrow::before {background-color: #f39800; transition: all 0.5s ease 0s;} .menu_arrow::after {content: ''; width: 7px; height: 2px; background-color: #000; border-radius: 2px; position: absolute; top: 11px; left: 6px; -moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -o-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg); transition: all 0.5s ease 0s;} .leftMenu ul li a.menu_arrow_open .menu_arrow::before,.leftMenu ul li a.menu_arrow_open .menu_arrow::after {background-color:#f39800; } .leftMenu a:hover .menu_arrow::after {background-color: #f39800; transition: all 0.5s ease 0s;} .menu_arrow_open .menu_arrow {-moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -o-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg); transition: all 0.5s ease 0s; } @media only screen and (max-width:992px){ .leftMenu ul {width: 100%;} .leftMenuMobile {width: 100%; height:50px; margin: 40px auto 0px auto; padding: 0px 10px; position: relative; cursor: pointer; border-bottom:solid 1px #000; border-top:solid 1px #000; } .leftMenu.show {background-color: #fff;} .leftMenuMobile > span:nth-child(1) {width:20px; height: 2px; background-color: #000; position: absolute; top: 22px; right: 14px; transition: all 0.5s ease 0s; transform: rotate(45deg);} .leftMenu > div.show > span:nth-child(1) { transform: rotate(-45deg);} .leftMenuMobile > span:nth-child(2) {width: 20px; height: 2px; background-color: #000; position: absolute; top: 22px; right: 0; transition: all 0.5s ease 0s;transform: rotate(-45deg);} .leftMenu > div.show > span:nth-child(2) { transform: rotate(45deg);} .leftMenuMobile::before {content: attr(data-title); width: 100%; height: 30px; line-height: 30px; position: absolute; top:10px; left:0px; text-align: left; font-size: 1rem; font-weight: 700; color: #000;} .leftMenu > ul {max-height: 0; overflow: hidden; transition: all 0.5s ease 0s; position: absolute;z-index: 999; background-color: #fff; } .leftMenu > ul.open {max-height: 500px; overflow: auto; padding-bottom: 10px; transition: all 1.5s ease 0s; } } /*----------------------------------------/ aside cssmenu樣式 ----------------------------------------*/ .menu-item{width: 100%; display: flex; flex-wrap: wrap; align-items: center;} #cssmenu{width:calc(100% - 100px); margin:0 auto 40px auto;padding:10px 0px; list-style:none; display:block; -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box; border-bottom: 1px solid #f1f1f1; } #cssmenu #menu-button{margin:0px;padding:0;border:0;list-style:none; display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;z-index:9999;background-color:#fff; } #cssmenu #menu-button{display:none;} #cssmenu ul,#cssmenu ul li,#cssmenu ul li a{margin:0;padding:0; list-style:none; display:block;position:relative;z-index: 1; -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box; } #cssmenu:after, #cssmenu > ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;} #menu-line{position:relative;top:0px; left:0px; right: 0px; margin-left: 2px; width: auto;height:2px;background:#db0632;-webkit-transition:all 0.25s ease-out;-moz-transition:all 0.25s ease-out;-ms-transition:all 0.25s ease-out;-o-transition:all 0.25s ease-out;transition:all 0.25s ease-out;} #cssmenu > ul > li{float:left; width: auto; position: relative;z-index: 1; margin:5px 10px; background-color:transparent; -webkit-transition: all 0.3s; transition: all 0.3s; } #cssmenu.align-center > ul{font-size:0;text-align:center; width: calc(100% - 100px) } #cssmenu.align-center > ul > li{display:inline-block;float:none; width: auto; } #cssmenu.align-center ul ul{text-align:left;} #cssmenu.align-right > ul > li{float:right;} #cssmenu.align-right ul ul{text-align:right;} #cssmenu > ul > li > a{font-size:1.188rem;font-weight: 700; text-align:center;text-decoration:none; color:#666464;/*-webkit-transition:color .2s ease;-moz-transition:color .2s ease;-ms-transition:color .2s ease;-o-transition:color .2s ease;transition:color .2s ease; */ transition: all .4s ease; } #cssmenu > ul > li > a:after { content: ""; display: block; width: 12px; height: 4px; background-color: #b0b0b0; border-radius: 3px; transition: all .4s ease; margin-top: 1px} #cssmenu > ul > li > a:hover:after { width: 100%} #cssmenu > ul > li > .active a { color: #000} #cssmenu > ul > li.active a:after { background-color:#f39700; width: 100%;} #cssmenu > ul > li:hover,#cssmenu > ul > li:hover > a,#cssmenu > ul > li.active{ border-color:#f6f2f0; border-radius:0px; } #cssmenu > ul > li.active > a{color:#f39700; } #cssmenu > ul > li:hover > a {color:#f39700; } #cssmenu > ul > li.has-all{display: none; } #cssmenu > ul > li.has-sub > a{ padding:5px 15px !important; } #cssmenu > ul > li.has-sub:hover > a::after{border-color:#f6f2f0;} #cssmenu ul ul{position:absolute;z-index: 9999; left:-9999px; background:#f1f1f1; -webkit-transition:all 0.25s ease-out;-moz-transition:all 0.25s ease-out;-ms-transition:all 0.25s ease-out;-o-transition:all 0.25s ease-out;transition:all 0.25s ease-out;} #cssmenu li:hover > ul{left:auto;} #cssmenu.align-right li:hover > ul{right:0;} #cssmenu.align-right ul ul ul{margin-left:0;margin-right:100%;} #cssmenu ul ul li{ -webkit-transition:height .2s ease;-moz-transition:height .2s ease;-ms-transition:height .2s ease;-o-transition:height .2s ease;transition:height .2s ease;} #cssmenu ul ul ul{margin-left:100%;top:0; background:#e3edef!important; -webkit-transition:all 0.25s ease-out;-moz-transition:all 0.25s ease-out;-ms-transition:all 0.25s ease-out;-o-transition:all 0.25s ease-out;transition:all 0.25s ease-out;} #cssmenu ul li:hover > ul > li{ /* height: 40px; */ } #cssmenu ul ul li a{ padding:15px 20px; width:200px; font-size:1rem; font-weight: 700; line-height:1.5rem;text-align:left;text-decoration:none;color:#000; -webkit-transition:color .2s ease;-moz-transition:color .2s ease;-ms-transition:color .2s ease;-o-transition:color .2s ease;transition:color .2s ease;} #cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover{color:#fff; background: #db0632;} #cssmenu ul ul li.has-sub > a::after{position:absolute;top:25px;right:10px;width:4px;height:4px;border-bottom:1px solid #000;border-right:1px solid #000;content:"";-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition:border-color 0.2s ease;-moz-transition:border-color 0.2s ease;-ms-transition:border-color 0.2s ease;-o-transition:border-color 0.2s ease;transition:border-color 0.2s ease;} #cssmenu ul ul li.has-sub:hover > a::after{border-color:#776b62;} @media (max-width:840px) { #cssmenu{width:100%; margin:0 auto;padding: 0px; position: relative; z-index:9; border-top:solid 1px #fff;} #cssmenu ul{width:100%; margin: auto; display:none; position: absolute; background:#666464; border:1px solid rgba(120, 120, 120, 0.15);} #cssmenu > ul > li.active > a{color:#fff; } #cssmenu > ul > li.active{background:#f49800; } #cssmenu ul ul ul{ background:#e7eaeb!important; } #cssmenu.align-center > ul,#cssmenu.align-right ul ul{ width:100%; text-align:left;} #cssmenu ul li,#cssmenu ul ul li,#cssmenu ul li:hover > ul > li{width:100%;height:auto;margin: 0px; border-top:1px solid rgba(120, 120, 120, 0.15);} #cssmenu > ul > li{border: none; border-bottom: solid 1px #ddd; box-shadow: none;} #cssmenu ul li a,#cssmenu ul ul li a{width:100%; padding: 10px 0px; font-size: .9rem; color: #fff; } #cssmenu > ul > li,#cssmenu.align-center > ul > li,#cssmenu.align-right > ul > li{float:none;display:block;} #cssmenu ul ul li a{padding:10px 15px;font-size:12px;color:#000000;background:none;text-align:center;} #cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover{color:#000000;} #cssmenu ul ul ul li a{padding-left:40px;} #cssmenu ul ul,#cssmenu ul ul ul{position:relative;left:0;right:auto;width:100%;margin:0; padding-bottom: 0px;} #cssmenu > ul > li.has-sub > a::after,#cssmenu ul ul li.has-sub > a::after{display:none;} #menu-line{display:none;} #cssmenu #menu-button{display:block; padding:10px 20px; color:#000;cursor:pointer;font-size:1rem;font-weight: 700;text-align: center; text-transform:uppercase; border-bottom:solid 1px #e7e7e7;background-color:#fff;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;} #cssmenu #menu-button::after { display: block; content: ""; position: absolute; right:15px; top: 15px; vertical-align: middle; width: 10px; height: 10px; border-top: 2px solid #000; border-right: 2px solid #000; -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); -webkit-transition: transform .5s; transition: transform .5s; } #cssmenu .submenu-button{position:absolute;z-index:10;right:0;top:0;display:block;border-left:1px solid rgba(120, 120, 120, 0.15);height:46px;width:46px;cursor:pointer;} #cssmenu .submenu-button::after{content:'';position:absolute;top:17px;left:23px;display:block;width:1px;height:11px;background:#be892f;z-index:99;} #cssmenu .submenu-button::before{content:'';position:absolute;left:18px;top:22px;display:block;width:11px;height:1px;background:#be892f;z-index:99;} #cssmenu .submenu-button.submenu-opened:after{display:none;} #cssmenu ul li span.submenu-button.submenu-opened::after{display:none;} #cssmenu ul li ul li span.submenu-button{display:none;} #cssmenu > ul > li > a:after { display: none; } #cssmenu > ul > li.has-all{display: block; } } .navfix {width: 100px; margin: auto; padding-bottom:30px } .navfix .next-button{ width: 100px; justify-content: flex-start} @media (max-width: 840px) { .navfix {display: none} } /*--------form style------------*/ #cms-main label{ } input, option, textarea, input[type="radio"]{ color: #000;background-color:#fff; } input[type="radio"]+label, input[type="checkbox"]+label { width:auto; box-sizing: border-box; } *:focus { outline: none; } /* placeholder ---*/ input::placeholder { font-size:0.875rem; } input:focus, textarea:focus { outline: none; } input:focus:placeholder { color: transparent; } input:focus::-webkit-input-placeholder { color: transparent; } input:focus:-moz-placeholder { color: transparent; } input:focus::-moz-placeholder { color: transparent; } input:focus:-ms-input-placeholder { color: transparent; } select{min-height:36px; line-height:2rem; color: #333; border-radius:0px; } /*IE --*/ select::-ms-expand {display: none; } select:focus{ box-shadow: 0 0 5px 2px #467BF4; } input, button, select, textarea { outline: none; } .circle{ position: fixed; z-index: 0;left:-3%; top:20%; width:200px; height:200px; display:flex; align-items:center; justify-content:center; background: url("/images/theme-b67/icon/gear-1.svg"); animation:anim 4s infinite linear ; opacity: .5;} .circle-1{ position: fixed; z-index: 0;left:30px; top:38%; width:100px; height:100px; display:flex; align-items:center; justify-content:center; background: url("/images/theme-b67/icon/gear.svg"); animation:anim 3s infinite linear ;} @media (max-width: 1280px) { .circle{width:120px; height:120px; } } @keyframes anim{ 0%{ transform:rotate(0deg); } 100%{ transform:rotate(360deg); } } @keyframes anim-1{ 0%{ transform:rotate(0deg); } 100%{ transform:rotate(-360deg); } } /*search*/ div.search-box { width: 100%; margin: -20px 18px auto 0px; display: flex; flex-wrap: wrap; justify-content: flex-end } div.search { width: 100%; max-width: 300px; margin: auto 0px; vertical-align: middle; white-space: nowrap; position: relative; display: flex; flex-wrap: wrap; } .tname{ font-size: 1.15rem; font-weight: 700; } .search input { width:calc(100% - 20%); height: 32px; padding:0px 0px 0px 10px; border:solid 1px #f5dcb5; border-radius:30px; background-color:#fafaf5; font-size:14px; color: #262626; -webkit-transition: width .55s ease;-moz-transition: width .55s ease;-ms-transition: width .55s ease;-o-transition: width .55s ease; transition: width .55s ease; position: relative;} .search .icon {color:#6c7280; position: absolute;top:2px; right: 30px;z-index: 1; background: none; border: none;} .search input:focus, .search input:active{ outline:none; background-color:#fff; box-shadow:0px 6px 6px rgba(0,0,0,.2);} .search:hover .icon{ color:#3ea528; } .search:hover input{ box-shadow: 2px 3px 5px rgba(0,0,0,.1); } .search input::placeholder{ font-size:14px;color:#f39602; } @media (max-width: 1024px) { div.search { margin: auto 20px; } } @media (max-width: 840px) { div.search-box { margin: 20px 18px auto 0px;} .search .icon { right: 30px; } .search input { max-width: 210px; height: 32px; } } @media (max-width: 640px) { div.search { margin: auto 0px; } } @media (max-width: 360px) { .search .icon { right: 0px; } } .card-list-new {display: flex; flex-flow: wrap; padding: 0 0 20px 0;} .card-list-new > div {width: calc(100% / 3 - 46px); margin: 23px;} .article-info-new {position: relative; z-index: 1; padding: 100px 0 50px 0;} .article-info-fon{color: #fff; font-size: 72px; font-weight: 700; position: absolute; left:-120px; top:0px; -webkit-text-stroke: 2px #f39800; z-index: -1; opacity: .1;} .article-box { position: relative; -webkit-column-count: 2; column-count: 2; -webkit-column-gap: 130px; column-gap: 130px; color: #515151; font-size: 0.9rem; line-height: 1.5rem; letter-spacing: 0.05em; margin-bottom: 65px;text-align: justify; } .article-pretitle { margin: auto auto 30px auto; font-size:2.5rem;font-weight: 700;color: #f39800; word-wrap: normal; } .article-pretitle::before { content: "\2015"; margin-right: 0.25rem; color:#f39800} .patterns_list {display: flex; flex-flow: wrap; padding: 70px 0 60px 0; position: relative; z-index: 1;} .patterns_list::before {content: ''; background: url("/images/theme-b67/patterns_bg.jpg") no-repeat center / cover; width: 118.807%; padding-bottom: 91.344%; position: absolute; /*left: calc((-1920px + 1340px) / 2);*/ left: -21.643%; top: 0; z-index: -10;} .patterns_list::after {content: ''; background: url("/images/theme-b67/patterns_pic.png") no-repeat center / cover; width: 52.314%; padding-bottom: 29.478%; position: absolute; bottom: 0px; right: -10.448%; z-index: -5;} .patterns_list > div {width: 16.419%; margin: 0 11.418% 70px 0; position: relative; z-index: 1;} .patterns_list > div:nth-child(4n+4) {margin: 0 0 70px 0;} .patterns_list > div > .img {width: 180px; height: 180px; border: 2px solid #ed9518; background: #fff; border-radius: 15px; display: flex; flex-flow: wrap; justify-content: center; align-items: center; line-height: 0; font-size: 0; box-shadow: 0 0 20px rgba(237, 149, 24, 0.95); padding: 18px; margin: 0 auto 20px auto; position: relative; z-index: 1;} .patterns_list > div > .img img {max-height: 100%;} .patterns_list > div > .img > .rou {/*background: url("/images/theme-b67/patterns_round.png") no-repeat center / cover;*/ width: 60px; height: 60px; border-radius: 50%; position: absolute; top: -10px; left: -20px; z-index: 100; display: flex; flex-flow: wrap; justify-content: center; align-items: center; text-align: center; font-size: 36px; font-weight: 600; line-height: 1; color: #fff; background-color: #f39700; box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.5); text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);} .patterns_list > div > .tit {font-size: 20px; font-weight: 400; text-align: center; line-height: 1.625; padding: 0; margin: 0;} @media (max-width: 1600px) { .patterns_list::after {right: -7%;} .article-info-fon {left: -7%;} } @media (max-width: 1400px) { .patterns_list::after {right: -5%; bottom: 30px;} .patterns_list > div {width: 20%; margin: 0 6.6% 60px 0;} .patterns_list > div:nth-child(4n+4) {margin: 0 0 60px 0;} .article-info-fon {left: -5%;} .card-list-new > div {width: calc(100% / 3 - 40px); margin: 20px;} } @media (max-width: 992px) { .patterns_list::after {bottom: 50px;} .patterns_list > div, .patterns_list > div:nth-child(4n+4) {width: 31%; margin: 0 3.5% 60px 0;} .patterns_list > div:nth-child(3n+3) {margin: 0 0 60px 0;} .card-list-new > div {width: calc(100% / 3 - 30px); margin: 20px 15px;} .article-box {-webkit-column-gap: 60px; column-gap: 60px; margin-bottom: 65px;} } @media (max-width: 980px) { .article-info-fon {left: -30px;} } @media (max-width: 768px) { .patterns_list {padding: 50px 0 30px 0;} .patterns_list::after {content: none;} .patterns_list > div, .patterns_list > div:nth-child(4n+4), .patterns_list > div:nth-child(3n+3) {width: 48%; margin: 0 4% 50px 0;} .patterns_list > div:nth-child(2n+2) {margin: 0 0 50px 0;} .card-list-new > div {width: calc(100% / 3 - 20px); margin: 20px 10px;} .article-pretitle {margin: auto auto 30px auto; font-size: 2rem;} .article-box {-webkit-column-count: 1; column-count: 1; text-align: left;} } @media (max-width: 576px) { .patterns_list > div > .img {width: 160px; height: 160px;} .card-list-new > div {width: calc(100% / 3 - 10px); margin: 20px 5px;} } @media (max-width: 430px) { .patterns_list > div > .img {width: 180px; height: 180px;} .patterns_list > div, .patterns_list > div:nth-child(4n+4), .patterns_list > div:nth-child(3n+3), .patterns_list > div:nth-child(2n+2) {width: 100%; margin: 0 0 50px 0;} .card-list-new > div {width: 100%; margin: 20px auto; max-width: 401px;} }