@charset "utf-8"; @import "../initial"; .view_count{ display: none; } #gotocenter.add_default { display: block; width: 100%; text-align: center; font-weight: bold; font-size: 1.5em; background: black; color: white; margin-top: 0.3em; } .fa-classic, .fa-regular, .fa-solid, .far, .fas { font-family: var(--fa-style-family, "FontAwesome"); } .index-announcement-14{ .i-annc__title{ span{ font-family: "Noto Sans TC", sans-serif !important; color: #333 !important; font-weight: normal !important; } } } .w-annc__title{ span{ font-family: "Noto Sans TC", sans-serif !important; color: #333 !important; font-weight: normal !important; } } .widget-announcement-24{ .w-annc__title{ span{ color: #fff !important; } } } .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9{ @media(max-width: $screen-xs){ padding: 0; } } .page-home{ .w-annc__category-wrap{ display: none!important; } .section-box{ .row{ padding: 0 0.5em; } } } .internal-page{ .outdropdowns{ position: relative; } .navbar-header{ // float: none!important; } } .layout-content-box{ } .page-home{ .verticalhome{ background-color: #e4e4e4; } } .verticalhome{ z-index: unset; position: relative; width: 100%; overflow: hidden; background: #fff; } .big-banner{ width: 100%; position: relative; } .lastcontent{ padding-bottom: 8em; padding-top: 4em; background: #ffffff69; backdrop-filter: blur(5px); } .banner-section{ position: relative; } .layout-content { position: relative; min-height: 46.5em; .container { @extend .response-container; } } .layout-content-inner{ overflow: hidden; } .video-banner{ max-width: 850px; } .homebanner{ -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out; transition: .3s ease-out; } .fa, .fas{ font-family: "FontAwesome"; font-weight: 900; font-style: normal; } .fab{ font-family: "Font Awesome 5 Brands"; } .padding0{ .layout-content-box{ &:hover{ opacity: .8; transition: all .3s; } } .layout-content-box{ padding: 0; } padding: 0 1em; } @keyframes circleboxroll { 0% { transform: rotate(0deg); } 50% { transform: rotate(160deg); } 100% { transform: translateY(60vh) rotate(320deg); } } .circlebox{ &:before{ content: ""; position: fixed; opacity: .1; // background: #afc7e0; background: radial-gradient(circle at 70% 80%, #66a9e2b3, transparent 60%), radial-gradient(circle at 5% 5%, #80b5ff, transparent 40%), radial-gradient(circle at 50% 50%, #3c78ff4d, transparent 70%), linear-gradient(135deg, #54a1e1 0%, #00437c 60%, #fb8f72 100%); border-radius: 100%; z-index: -1; clip-path: polygon(25% 5.77%, 75% 5.77%, 100% 50%, 75% 94.23%, 25% 94.23%, 0% 50%); } // &:after{ // content: ""; // position: fixed; // opacity: .15; // background: #00356a61; // border-radius: 100%; // z-index: 0; // } @media(max-width:768px){ &:before{ top: -20vw; right: -35vw; width: 70vw; height: 80vw; } &:after{ width: 40vw; height: 40vw; bottom: 0; left: -8vw; } } @media(min-width:769px){ &:before{ top: 0; right: -16vw; width: 30vw; height: 30vw; transform-origin: center center; animation: circleboxroll 10s linear forwards; animation-timeline: scroll(); } &:after{ bottom: 0; left: -8vw; width: 27vw; height: 27vw; } } } .contentwrap{ background-color:#e4e4e4; overflow: hidden; position: relative; width: 100%; padding-bottom: 2em; padding-top: 2em; .container{ // padding-bottom: 1em!important; // padding-top: 1em!important; } } .contentwrap1{ background-color: #f8f8f8; overflow: hidden; position: relative; width: 100%; // background-image: linear-gradient(280deg, #e6e6e6 56%, #fff 0); padding-top: 4em; padding-bottom: 4em; } .contentwrap2{ overflow: hidden; position: relative; width: 100%; padding-top: 4em; padding-bottom: 4em; } .contentwrap3{ overflow: hidden; position: relative; width: 100%; } .iconwrap{ padding: 4em 0 0; } .zero{ padding: 0; } .i-video_data{ li{ list-style: none; } } .ask-question .form-horizontal .control-label{ width: 100% !important; max-width: 100% !important; text-align: justify !important; } .ask-question .single-col.form-horizontal .control-group .controls{ justify-content: flex-start; max-width: 100%; width: 100%; } .ask-question-form{ padding: 2em; border-radius: 10px; border: 1px solid #E4E6EA; padding-bottom: 3em!important; @media(max-width: 820px){ padding: 1.5em; } } .image-carousel{ padding: 15px 0px 25px 0px; } .downIcon { a{ bottom: 0; position: absolute; left: 0; right: 0; top: 0; } position: absolute; left: 48.8%; bottom: 10%; z-index:2; display: block; cursor: pointer; @media(max-width:$screen-sm){ bottom: 10%; } @media(max-width:$screen-xs){ left: 45%; } &:hover{ transform:scale(1.1); -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out; transition: .3s ease-out; } width: 3px; padding: 10px 15px; height: 35px; border: 2px solid #fff; border-radius: 25px; opacity: 0.75; box-sizing: content-box; animation: move 3s ease-out 1s infinite; } .scroller { width: 3px; height: 10px; border-radius: 25%; background-color: #fff; 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;} } @keyframes move { 25% { opacity: 1; } 33% { opacity: 1; transform: translateY(30px); } 67% { opacity: 1; transform: translateY(40px); } 100% { opacity: 0; transform: translateY(55px) scale3d(0.5, 0.5, 0.5); } } .moduletitle{ margin-bottom: 10px; background:$theme-color-second; font-size: 0.9375em; font-weight: bold; line-height: 30px; border-radius: 6px !important; margin-top: 0; padding: 8.5px 15px 8.5px; text-transform: uppercase; color: #fff; } .je_acc{ ul{ padding: 0; } } .je_acc > ul > li { margin-bottom: 10px; list-style: none; a{ border:1px solid #d7d7d7; padding: 15px 15px; cursor: pointer; z-index: 2; font-weight: bold; color: #6D6D6D; width: 100%; position: relative; display: block; } } .membercontainer{ // background-color: #fff; } .marqueeken { font-family: "Noto Serif TC", sans-serif; width: 100vw; overflow: hidden; position: absolute; .scroll .text1{ font-size:1000%; color:#fff !important; letter-spacing: 8px; white-space: nowrap; text-transform: uppercase; animation: scroll 80s linear infinite; -webkit-animation:scrollken 80s linear infinite; line-height: 1; &:nth-child(2) { animation: scroll2 80s linear infinite; animation-delay: -40s; } } .scroll .text2{ font-size:1000%; color:#f5f5f5; letter-spacing: 8px; white-space: nowrap; text-transform: uppercase; animation: scroll 80s linear infinite; -webkit-animation:scrollken 80s linear infinite; line-height: 1; &:nth-child(2) { animation: scroll2 80s linear infinite; animation-delay: -40s; } } } @keyframes scrollken { from { transform: translateX(100%); } to { transform: translateX(-100%); } } @keyframes scroll2 { from { transform: translateX(0%); } to { transform: translateX(-200%); } } .quick > p {display: flex;} .quick .ic-list { display: flex;align-items: center;position: relative; width: 100%; margin:0 2% 0 0; background-color: #fff; border-radius: 7px; box-shadow: #00000033 0px 10px 20px 0px; text-align: left; @media(max-width:$screen-xs){ padding: 0 0.5em; } } .quick .ic-list.half {width: 50%; } .quick .ic-list a { display: inline-block; color: #000; text-align: center; text-decoration: none; padding: 1em; padding-left: 0.5em; } .quick .ic-list:before {vertical-align: middle; color: #5182a7; padding: 0; padding-left: 1em;} .quick .hot a {color: #ff0000; font-weight: bold;} .page-home{ .zt-font-ic{ overflow: hidden; &:after{ z-index: 0; content: ''; position: absolute; top: -100%; left: -100%; width: 200%; height: 200%; background: linear-gradient( 45deg, rgba(255, 255, 255, 0) 30%, #fff 50%, rgba(255, 255, 255, 0) 70% ); transform: translateX(-100%) rotate(0deg); transition: all 1.2s ease; pointer-events: none; } } .zt-font-ic:hover{ background: #e1e1e1; // a{ // color: #fff; // } // &:before { // color: #fff; // } &:after{ transform: translateX(100%) rotate(0deg); } } } .background-screw{ top: -98px; width: 400px; height: 400px; position: absolute; bottom: -200px; right:-200px; display: block; background: url(/assets/screw.png) no-repeat top left; transform: translate(0, 0); transition: transform 0.6s ease-out; /* 平滑回原位 */ will-change: transform; background-size: cover; } .background-dotballleft{ -webkit-transform: translate(36%, -50%); transform: translate(36%, -50%); position: absolute; top: 70%; left: 0; &:before{ width: 500px; height: 500px; content: ''; position: absolute; bottom: -100px; left: -200px; display: block; background: url(/assets/dotballwhite.png) no-repeat top left; -webkit-transform: translateY(50%); transform: translateY(50%); background-size: cover; } } .background-dotball{ -webkit-transform: translate(36%, -50%); transform: translate(36%, -50%); position: absolute; top: 50%; right: 0; &:before{ width: 500px; height: 500px; content: ''; position: absolute; bottom: -300px; right: -200px; display: block; background: url(/assets/dotballwhite.png) no-repeat top left; -webkit-transform: translateY(50%); transform: translateY(50%); background-size: cover; } } .page-index__background-ball{ position: absolute; bottom: 0; left: 50%; width: 57.98611%; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); .page-index__background-ball-img{ padding-bottom: 100%; width: 100%; border: solid 1px #eaf6fd; border-radius: 50%; } } .background-ball2{ position: absolute; width: 50%; transform: translate(0, 0); transition: transform 0.6s ease-out; /* 平滑回原位 */ will-change: transform; bottom:0; &:before{ content: ''; position: absolute; bottom: 0; right: 0; display: block; padding-bottom: 100%; width: 100%; background: radial-gradient(circle at 60% 90%, #eaf6fd, transparent 60%), radial-gradient(circle at 10% 10%, #bddbf8, transparent 25%), #dbdee280; border-radius: 50%; -webkit-transform: translate(150%,0); transform:translate(150%,0); } } .background-ball{ position: absolute; width: 100%; transform: translate(0, 0); transition: transform 0.6s ease-out; /* 平滑回原位 */ will-change: transform; top:0; &:before{ content: ''; position: absolute; bottom: 0; left: 0; display: block; padding-bottom: 100%; width: 100%; opacity: .04; background:url(/assets/banner-deco2.svg) no-repeat; // background-color: #eaf6fd; // background: radial-gradient(circle at 60% 90%, #eaf6fd, transparent 60%), radial-gradient(circle at 20px 20px, #bddbf8, transparent 25%), #dbdee240; // border-radius: 50%; -webkit-transform: translate(-50%, 85%); transform: translate(-50%, 85%); // clip-path: polygon(25% 5.77%, 75% 5.77%, 100% 50%, 75% 94.23%, 25% 94.23%, 0% 50%); } } .w-annc__item{ .card{ width: 100%; --bs-card-bg: transparent; } .card:before{ background: radial-gradient(circle at 60% 90%, #ea8466, transparent 60%), radial-gradient(circle at 10px 10px, #e66c4a, transparent 25%), #cc3d00!important; } } // .section-one{ // position: absolute; // z-index: 200; // } .section-one div img { opacity: .6; position: absolute; width: 160px; bottom: 27%; left: -4%; transform-origin: center center; animation: roll 5s linear forwards; animation-timeline: scroll(); @media(max-width: $screen-sm){ width: 100px!important; height: 100px!important; bottom: auto!important; top:25%!important; } } @keyframes roll { 0% { transform: translateX(0) rotate(0deg); } 50% { transform: translateX(70vw) rotate(450deg); } 100% { transform: translateX(60vw) translateY(60vh) rotate(620deg); } } .quick{ &:hover{ } } #itemFullText{ td{ &:first-child{ @media(min-width:769px){ width: 27%; } } } } #subCategory2{ tbody{ border-radius: 0.5em; background: radial-gradient(circle at 60% 90%, #eaf6fd, transparent 60%), radial-gradient(circle at 10% 10%, #bddbf8, transparent 25%), #dbdee280; border: 1px solid #d7d7d7; margin-bottom: 1em !important; position: relative; overflow: hidden; } } #subCategory{ tr { border-radius: 0.5em; background: radial-gradient(circle at 60% 90%, #eaf6fd, transparent 60%), radial-gradient(circle at 10% 10%, #bddbf8, transparent 25%), #dbdee280; border: 1px solid #d7d7d7; margin-bottom: 1em !important; position: relative; display: flex; } td{ display: block; width: fit-content; // @media(min-width:480px){ // width: 50%!important; // } &:first-child{ } img{ @media(min-width:480px){ outline: 0px; vertical-align: middle; display: block; border-radius: 0.5em; max-width: 100%; padding: 4px; } } h2{ outline: 0px; font-weight: 300; line-height: 1.1; color: inherit; margin-top: 20px; margin-bottom: 10px; font-size: 1em!important; a{ color: #347018; } a:before { // content: ""; // display: block; // background: url(/assets/li-sign.gif) no-repeat; // width: 20px; // height: 20px; // float: left; // margin: 0 6px 0 0; } } } } .subCategory { background: #fafafa; border: 1px solid #ddd; h2{ font-size: 1.5em!important ; } } .subCategory h2 a:before { content: ""; display: block; background: url(/assets/li-sign.gif) no-repeat; width: 20px; height: 20px; float: left; margin: 0 6px 0 0; } .itemFullText { font-size: 0.8em; } .ic-wrapper { background-color: #F0F0F0; border-top: 10px solid #ffffff; border-bottom: 3px solid #E0E0E0; padding: 8px; font-size: 20px; line-height: 20px; font-family: Microsoft JhengHei, arial; } .ic-wrapper-item { padding: 0; min-width:unset!important; } .toggler{ cursor: pointer; margin-bottom: 10px; padding: 7px; border: 1px solid #ddd; background: #F5F5F5; background: -moz-linear-gradient(top, #FAFAFA 0%, #F5F5F5 100%); background: -webkit-linear-gradient(top, #FAFAFA 0%, #F5F5F5 100%); background: -o-linear-gradient(top, #FAFAFA 0%, #F5F5F5 100%); background: linear-gradient(to bottom, #FAFAFA 0%, #F5F5F5 100%); border-radius: 5px; box-shadow: 0 1px 0 #fff inset; text-shadow: 0 1px 0 #fff; font-size: 1.2em!important; } blockquote{ border-radius: 0.5em; background: radial-gradient(circle at 60% 90%, #eaf6fd, transparent 60%), radial-gradient(circle at 10% 10%, #bddbf8, transparent 25%), #dbdee280; border: 1px solid #d7d7d7; &:hover{ border: 2px solid #ec6641; -webkit-transition: .6s all ease; -o-transition: .6s all ease; transition: .6s all ease; -webkit-transform: translateY(-6px); -ms-transform: translateY(-6px); transform: translateY(-6px); } } .ic-wrapper { background-color: #F0F0F0; border-top:10px solid #ffffff; border-bottom: 3px solid #E0E0E0; padding: 8px; font-size:20px; line-height: 20px; font-family: Microsoft JhengHei, arial; } // .fa { margin:0;} // .row table {width: 100%;} // .ic-wrapper-item { // Font-family:Microsoft JhengHei; // background-color: white; // color: #333; // line-height: 16px; // width: 14px; // } // .ic-wrapper-item:hover { // Font-family:Microsoft JhengHei; // background-color: white; // color: #f60; // line-height: 18px; // width: 14px; // } .tab-content{ .w-annc__widget-title{ margin: 0; span{ &:before{ display: none!important; } } } } .kenbox{ // &:before{ // content: ""; // position: absolute; // left: 0; // top: 0; // width: 100%; // height: 100%; // clip-path: polygon( // 20px 0, // calc(100% - 20px) 0, // 100% 20px, // 100% calc(100% - 20px), // calc(100% - 20px) 100%, // 20px 100%, // 0 calc(100% - 20px), // 0 20px // ); // transform: translateY(6px) scale(1.02); // filter: blur(12px); // background: rgba(0,0,0,0.54); // z-index: 0; // pointer-events: none; // } @media(min-width:769px){ padding: 1em; z-index: 1; box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 20px 0px; border-radius: 1em; padding-top: 1em; background:#fff; } // clip-path: polygon(20px 0, /* 左上水平切入 */ calc(100% - 20px) 0, /* 右上水平切入 */ 100% 20px, /* 右上垂直切入 */ 100% calc(100% - 20px), /* 右下垂直切入 */ calc(100% - 20px) 100%, /* 右下水平切入 */ 20px 100%, /* 左下水平切入 */ 0 calc(100% - 20px), /* 左下垂直切入 */ 0 20px /* 左上垂直切入 */); } .colorbox { border-radius: 0.5em; background: radial-gradient(circle at 60% 90%, #eaf6fd, transparent 60%), radial-gradient(circle at 10% 10%, #bddbf8, transparent 25%), #dbdee280; border: 1px solid #d7d7d7; padding: 15px 15px; min-height: 22em; &:hover{ -webkit-transition: .6s all ease; -o-transition: .6s all ease; transition: .6s all ease; -webkit-transform: translateY(-6px); -ms-transform: translateY(-6px); transform: translateY(-6px); } } .view_count{ position: absolute; right: 0; } .btn-warning{ background: radial-gradient(circle at 60% 90%, #ea8466, transparent 60%), radial-gradient(circle at 10px 10px, #e66c4a, transparent 25%), #cc3d00; &:hover{ background: radial-gradient(circle at 70% 80%, #046fca, transparent 60%), radial-gradient(circle at 1% 1%, #f25930, transparent 30%), radial-gradient(circle at 50% 50%, #2963e64d, transparent 70%), linear-gradient(135deg, #0076d8 0%, #00437c 80%, #f25930 100%); } &:focus{ background: radial-gradient(circle at 70% 80%, #046fca, transparent 60%), radial-gradient(circle at 1% 1%, #f25930, transparent 30%), radial-gradient(circle at 50% 50%, #2963e64d, transparent 70%), linear-gradient(135deg, #0076d8 0%, #00437c 80%, #f25930 100%); } } .row{ @media(max-width:768px){ margin-right: 0!important; margin-left: 0!important; } } .pagination { display: inline-block; padding-left: 0; margin: 1.25em 0; border-radius: 0.25em li{ list-style: none; } } .pagination>li { display: inline } .pagination>li>a,.pagination>li>span { position: relative; float: left; padding: 0.375em 1.125em; margin-left: -0.0625em; line-height: 1.42857143; text-decoration: none; background-color: #fff; border: 0.0625em solid #ddd } .pagination>li:first-child>a,.pagination>li:first-child>span { margin-left: 0; border-top-left-radius: 0.25em; border-bottom-left-radius: 0.25em } .pagination>li:last-child>a,.pagination>li:last-child>span { border-top-right-radius: 0.25em; border-bottom-right-radius: 0.25em } .pagination>li>a:focus,.pagination>li>a:hover,.pagination>li>a.hover-class,.pagination>li>span:focus,.pagination>li>span:hover,.pagination>li>span.hover-class { z-index: 2; color: #23527c; background-color: #eee; border-color: #ddd } .pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>a.hover-class,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover,.pagination>.active>span.hover-class { z-index: 3; color: #fff; cursor: default; } .pagination>.disabled>a,.pagination>.disabled>a:focus,.pagination>.disabled>a:hover,.pagination>.disabled>a.hover-class,.pagination>.disabled>span,.pagination>.disabled>span:focus,.pagination>.disabled>span:hover,.pagination>.disabled>span.hover-class { color: #777; cursor: not-allowed; background-color: #fff; border-color: #ddd } .pagination-lg>li>a,.pagination-lg>li>span { padding: 0.625em 10.375em; font-size: 1.125em; line-height: 1.3333333 } .pagination-lg>li:first-child>a,.pagination-lg>li:first-child>span { border-top-left-radius: 0.375em; border-bottom-left-radius: 0.375em } .pagination-lg>li:last-child>a,.pagination-lg>li:last-child>span { border-top-right-radius: 0.375em; border-bottom-right-radius: 0.375em } .pagination-sm>li>a,.pagination-sm>li>span { padding: 0.3125em 0.625em; font-size: 0.750em; line-height: 1.5 } .pagination-sm>li:first-child>a,.pagination-sm>li:first-child>span { border-top-left-radius: 0.1875em; border-bottom-left-radius: 0.1875em } .pagination-sm>li:last-child>a,.pagination-sm>li:last-child>span { border-top-right-radius: 0.1875em; border-bottom-right-radius: 0.1875em } .pager { padding-left: 0; margin: 1.25em 0; text-align: center; list-style: none } .pager li { display: inline } .pager li>a,.pager li>span { display: inline-block; padding: 0.3125em 10.25em; background-color: #fff; border: 0.0625em solid #ddd; border-radius: 0.9375em } .pager li>a:focus,.pager li>a:hover,.pager li>a.hover-class { text-decoration: none; background-color: #eee } .pager .next>a,.pager .next>span { float: right } .pager .previous>a,.pager .previous>span { float: left } .pager .disabled>a,.pager .disabled>a:focus,.pager .disabled>a:hover,.pager .disabled>a.hover-class,.pager .disabled>span { color: #777; cursor: not-allowed; background-color: #fff } a.line-it-button{ color: #fff!important; }