/* 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; } a:hover, a:active, a:visited, 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: #004098;} .color-white{color: #fff!important; } .color-red{color:#cb2520!important; } .color-gray{color:#5a5a5a; } .color-bk{color:#000!important; } .txt-stork { -webkit-text-stroke: 1px #fff; -webkit-text-fill-color: transparent;} .txt-just{text-align: justify!important; } .txt-center{text-align: center!important; } .txt-gradient{ background-image: linear-gradient(45deg, #24f4df, #2196f3, #003567); -webkit-background-clip: text; -webkit-text-fill-color: transparent;} /** bg-color:=================================*/ .bg-orange{background: #004098; } .bg-orange-line{background: #004098; } .main-wrap{width: 100%;padding: 0px; display: flex; flex-wrap: wrap; align-content:flex-start;} .wrapper-full { display: block; margin:0px auto; padding: 0px 20px; width: 100%; max-width: calc((100% - 40px)/12*12 + 40px); } @media (min-width: 320px) { .wrapper-full { padding: 0px 30px; } } @media (min-width: 1200px) { .wrapper-full { width: 96%;} } @media (min-width: 1300px) { .wrapper-full { width:92%;} } @media (min-width: 1600px) { .wrapper-full { max-width: 96%;} } .wrapper { position: relative; display: block; margin:0px auto; padding: 0px 20px; width: 100%; max-width: calc((100% - 40px)/12*12 + 40px); } @media (min-width:1025px) { .wrapper { padding-right: 40px; padding-left: 40px; } } @media (min-width: 1201px) and (max-width: 1400px) { .wrapper { padding-right: 30px; padding-left: 30px; max-width: 100%;} } @media (min-width: 1401px) { .wrapper { padding-right: 80px; padding-left: 80px; max-width: 1440px; } } .main-banner-txt .txt-style { position: absolute; top:10%; left: 0px; z-index: -1; color:transparent; font-size: 120px; font-weight:900; line-height: 1; letter-spacing:1px;text-transform: uppercase; -webkit-text-stroke: 1px #dfdfdf;} .main-banner-txt .txt-style {color: #fff; opacity: .35; } /* banner area*/ .main-banner{width:100%; height: auto; min-height: 100px; margin:0px; display: flex; flex-wrap: wrap;justify-content:flex-start; align-items: flex-start; position: relative; overflow: hidden; background-image: linear-gradient(to top, #004198 0%, #fafcfe 100%); border-radius:0px 0px 0px 260px; } .main-banner-img{width: 100%; height: auto; margin:0; padding:0px; position: relative; } .main-banner-img img{ width: 100%; max-width: 100%; height: auto; display: block; margin: auto; -o-object-fit: cover; object-fit: cover; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: all 0.3s; position: relative; z-index: 0; } .main-banner-txt {display: flex;flex-direction: column; justify-content:center; padding: 0 20px; z-index: 9; width:100%; height: 100%; margin:auto 0px; position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .main-banner-txt h1 { font-weight: 700; font-size:3rem;line-height: 3.75rem; text-align: center; letter-spacing:2px; margin: auto auto 10px auto; color: #fff; text-transform: uppercase; position: relative;} .main-banner-txt p{ margin-bottom: 15px;font-size:1.75rem;line-height: 1.75rem; font-weight: 900;color: #fff; letter-spacing:3px; overflow: hidden; text-transform: uppercase; } .title-box { width: auto; position: relative } .title-box::after { content: ""; position: absolute; left: calc(50% - 22.5px); bottom:-10px; width: 55px; height: 3px; background: #ffffff;} @media (max-width:1440px) { .main-banner-txt h1 { font-size:2.5rem;line-height: 2.125rem; letter-spacing:1px; } .main-banner::after { border-radius:0px 0px 100px 0px; } } @media (max-width:1160px) { .main-banner{ border-radius:0px 0px 0px 160px; } .main-banner-txt h1 { margin-bottom: 10px; font-size:2.5rem;line-height: 2.75rem;} .main-banner-txt p{ font-size:1.125rem;line-height: 1.5rem; } } @media (max-width:1024px) { .main-banner{ border-radius:0px 0px 0px 160px; } } @media (max-width:992px) { .main-banner{ background: none; box-shadow:none;border-radius:0px;} .main-banner::after { display: none; } .main-banner-txt {width: 100%; position: relative; order: 2; padding: 0px; margin-top:20px; left: auto; } .main-banner-img{ width: 100%; position: relative; order: 1; } .main-banner-txt h1 { font-size:2rem; color:#003567; text-align: center;} .main-banner-txt h1 span{ font-size:1rem;display: block;color:#003567; } .main-banner-txt p {font-size:1rem; margin-bottom: 0px; text-align: center;font-weight: 400} .title-box::after { background: #003567;} } @media (max-width:767.98px) { .main-banner{ margin-top: 0px;} .main-banner-img{width: 100%; position: relative; order: 1;} .main-banner-txt {margin-top: 10px; } .main-banner-txt h1 { font-size:1.375rem; line-height: 1.75rem; margin-bottom: 5px;letter-spacing: 1px; } .main-banner-txt p { font-size:.75rem; line-height: 1.15rem; color:#999;letter-spacing:0; } } /*----------------------------------------/ 麵包屑 自訂顏色樣式 ----------------------------------------*/ .main-breads{ width: 100%; max-width: calc((100% - 40px)/12*12 + 40px); margin:auto; padding:10px 0px; border-bottom: solid 1px #eee;background-color: #fff; position: relative; } .main-breads .breadcrumb{ width: auto; padding:0px; margin:2px auto; background:none; } .main-breads .breadcrumb li{ font-size:.75rem; font-weight:400; overflow: hidden; word-break: break-all; } .main-breads .breadcrumb li a{color:#4f5d78; } .main-breads .breadcrumb li a:hover,.main-area.top .main-breads .breadcrumb li a:hover{color:#035cd8;} .breadcrumb-item+.breadcrumb-item::before { content: " / "; margin-left: 5px;color:#4f5d78;} .main-breads .breadcrumb li:first-child{ position: relative; color:#edf1f7;} .main-breads .breadcrumb-item.active{color:#004198;} .main-area.top .main-breads{ padding:5px 0px; border-top:solid 1px #eee;border-bottom:solid 1px #eee; } .main-area.top .main-breads .breadcrumb{ } .main-area.top .main-breads .breadcrumb li a,.main-area.top .breadcrumb-item+.breadcrumb-item::before{ color:#777; } @media (max-width: 992px) { .main-breads{ max-width: 100%; margin:0px auto; border-top: solid 1px rgba(255,255,255,.35);} .main-breads .breadcrumb{width: 100%; padding:2px 0px; justify-content: center; } .main-breads .breadcrumb li{ font-size:.9rem; } .main-breads .breadcrumb li a{color:#a4a4a4;} .breadcrumb-item+.breadcrumb-item::before { margin-left:2px;color:#a4a4a4;} .breadcrumb-item+.breadcrumb-item{padding-left: 0.1rem} .main-breads::after { display: none} } @media (max-width: 767.98px) { .main-breads .breadcrumb li{ font-size:.55rem; line-height: 1rem; } } .main-content{position: relative;z-index: 1; width: 100%; min-height: 50vh; margin:0px auto; padding:0px; overflow: hidden; } @media (max-width:1024px) { .main-content{margin: auto; padding:0px; } } @media (max-width:767.98px) { .main-content{margin: auto; padding:0px; } } .description{margin: auto; padding: 20px;} .description p{font-size: clamp(.875rem, 2.3vw, 1rem); font-weight: 400; line-height: 1.5rem;} @media (max-width:1024px) { .description{ max-width: 100%; } } @media (max-width:767.98px) { .description{ padding: 20px 0px;} } /* cms-title-block h2 ======================================================================= */ .title-block{ width: 100%; height: auto; margin:0px auto 30px auto; text-align: center; position: relative; } .title-block h2:before{ content: ""; position: absolute; height: 2px; width: 100px; background-color:#004198; display: inline-block; margin-left:-200px; margin-top: 30px;} .title-block h2::after { content: ""; height: 2px; width: 100px; background-color:#004198; position: absolute; display: inline-block; margin-left: 100px; margin-top: 30px;} .title-block h2 {width: auto; display: block; margin:0px auto; padding:20px 0px;font-size: clamp(1.5rem, 2.3vw, 3.5rem); font-weight:900; color:#003567; letter-spacing: 2px; position: relative;} .title-block h3 { font-size: clamp(1.125rem, 2.3vw, 1.5rem); font-weight:600;color:#1894ac; letter-spacing: 2px; } .title-block p {margin:0px auto; padding:20px 0px 0px 0px; font-size:1.25rem; color:#2c3943; font-weight:400; text-align: center; position: relative; } .title-block.subtitle { display: inline-block; text-transform: uppercase; font-size: 18px; font-weight: 700; letter-spacing: 2.8px; margin-bottom: 8px; color:#004198;} .title-block.line .subtitle:before { content: ""; position: absolute; top: calc(50% - 0.5px); right: 0; width: 0; height: 1px; background-color: #0075af; transition: ease-out 0.5s 0.8s;} @media (min-width: 1100px) { .title-block h2 { font-size:2.175rem; } } @media (max-width: 1199.98px) { .title-block h2{ font-size: 1.5rem; } .title-block h2:before,.title-block h2::after{ margin-top: 15px;} } @media (max-width: 767.98px) { .title-block { margin: 15px auto; } .title-block h2{ font-size: 1.125rem; } .title-block h2:before,.title-block h2::after{ display: none} } /*cms-Title Styles 樣式 =================================*/ .title-h2-sub{margin: auto 0px; padding: 0px; } .title-h2-sub h2{ margin-bottom:10px; font-size: 2.75rem; font-size: min(max(3.5vw, 1.75rem), 2.75rem); line-height: 100%;font-weight: 700; letter-spacing: 3px; color: #fff; text-transform:uppercase} .title-h2-sub p{margin-top: 0px; font-size:1.275rem; font-size: min(max(3.5vw, 1rem), 1.275rem); line-height:1.375rem; font-weight:600;color: #fff; } .title-h2-sub span{ font-size: 1.375rem;font-size: min(max(3.5vw, 1rem), 1.375rem); line-height: 130%;font-weight: 400; color: #fff; text-transform:uppercase } .title-h2-sub strong{font-weight:900;} @media (max-width: 998px) { .title-h2-sub{text-align: left; padding-left: 20px;} } @media (max-width: 840px) { .title-h2-sub{ width: 100%; padding: 0px 20px; } } @media (max-width: 640px) { .title-h2-sub{ padding: 0px; } .title-h2-sub p{ line-height:1.375rem; } } .title {width: 100%; margin:0px auto 30px 0px; padding: 0px; letter-spacing: 2px; /*text-transform:uppercase */} .title h2 { margin:10px auto;font-size: clamp(1.5rem, 2.3vw, 3.5rem); font-weight:900; color:#003567; } .title h3{ margin:10px auto; font-size: clamp(1.275rem, 2.3vw, 2rem); font-weight:700; color:#1894ac; } .title em{ font-size:1rem; font-weight:700; color: #003567; display: block } .title span{ font-size: clamp(1.125rem, 2.3vw, 2.75rem);font-weight:700; color: #000; } .title strong{color:#003567;} .title-2 { width: 100%; margin:0px auto 30px 0px; padding: 0px; text-align: center; text-transform:uppercase } .title-2 h2{ margin:10px auto; font-size: clamp(1.375rem, 2.3vw, 2.75rem); font-weight:900; color: #fff; letter-spacing: 2px; } .title-2 h3{ font-size: clamp(1.125rem, 2.3vw, 1.5rem); font-weight:600; color: #fff; letter-spacing: 1px; } .title-2 p{ margin: 0px auto; } .title-3 { width: auto; margin:0px auto 10px 0px; padding: 0px 0px 5px 0px; text-transform:uppercase;position: relative; } .title-3 h2{ margin:0px auto 10px auto; font-size: clamp(1.375rem, 2.3vw, 2.75rem); font-weight:900; color: #003567; letter-spacing: 2px; } .title-3 span{ font-size: clamp(1rem, 2.3vw, 1.75rem);font-weight:700; color: #1894ac; } /*title-left 樣式 =================================*/ .title-left { width:100%; height: auto; padding-bottom: 10px; margin:0 auto 30px auto; position: relative; border-bottom:2px solid #c0d1dd; } .title-left h2{ margin-bottom: 0px; font-size:2.2875rem; font-size: calc(1.5625rem + 1.0416666667vw);font-weight: 500; line-height: 1.23; letter-spacing: normal; color:#004098; } .title-left h3{ margin-bottom: 0px;font-size:2rem; font-size: calc(0.9rem + 1.0416666667vw); font-weight:600; line-height: 1.23; letter-spacing: normal; color:#000; } .title-left p{ width: 100%; margin:0px auto; font-size:1.15rem; font-weight:400; color:#000; } .title-left strong{ letter-spacing:2px; font-weight:700; color:#004098; } @media (max-width: 1280px) { .title-left p{font-size: 1rem;} .title-left h2,.title-left h3,.title-left p{ margin:15px auto; } } @media (max-width: 768px) { .title-left p{ line-height: 1.35rem;} .title-left span{ line-height: 1rem;} } @media (max-width: 767.98px) { .title-left { padding:0px; } .title-left h2{font-size:1.5rem;} .title-left h3{font-size: 130%; line-height: 1.75rem; color: #004098 } .title-left p{ font-size: .9rem; line-height: 1.15rem; } } @media (max-width: 480px) { .title-left h2{font-size:1.35rem;} } .title-wrap{ width: calc(100% - 200px); margin: 20px auto;position: relative;z-index:3; } .titlebox{margin-bottom: 50px;position: relative;z-index:3; } .titlebox strong{display: block} .titlebox .title-en { font-size: 2rem; font-weight: 700; line-height: 3rem; color:#003567; position: relative;} @media (max-width:840px) { .title-wrap{ width: 100%; margin: 20px auto; } } @media (max-width:767.98px) { .titlebox strong{display: inline-block!important; } .titlebox .title-en {font-size: 130%; line-height: 1.75rem; } } .line-en { margin-bottom: 20px; font-size: 1.275rem; font-weight: 700; line-height: 2.5rem; position: relative;} .line-en:before { content: ""; margin:0px auto;position: absolute; bottom:0px;left:0px; width:20px; height: 2px; background-color: #004098; } @media (max-width:767.98px) { .line-en {font-size: 130%; line-height: 1.75rem; } .line-en:before { bottom:-5px;left:0px; } } .title-center { width: calc(100% - 100px); margin: 0 auto 80px auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; ustify-content: center; position: relative; z-index: 1;} .title-center::before { content: ""; position: absolute; width: 100%; height: 5px; background: #004198; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);} @media (max-width: 480px) { .title-center {width: 100%; margin:20px 0px 0px 0px; } } .title-center .innerbox { background:#fff; padding: 0 10px; position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; flex-direction: column } .title-center .innerbox .m-title { font-size: calc(1.5625rem + 1.0416666667vw); font-weight:700;line-height: 3rem;margin-bottom: 10px;} @media (max-width: 768px) { .title-center .innerbox .m-title { font-size:1.5rem; } } @media (max-width: 480px) { .title-center .innerbox .m-title { font-size:1.35rem;line-height: 1.875rem; } } .title-center .innerbox .circle-dot {display: block; width: 22px; height: 22px; border: 2px solid #004098; border-radius: 50%; position: relative; top: unset; left: unset; right: unset; bottom: unset; z-index: 1; margin: 0 10px; -webkit-animation: jump 1.5s linear infinite;} @media (max-width: 740px) { .title-center .innerbox .circle-dot { display: none; } } .title-center .innerbox .circle-dot:before { content: ""; position: absolute; width: 6px; height: 6px; background:#fdb311; border-radius: 50%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} .title-center .innerbox .subtitle { width: 100%; text-align: center; font-weight: 700; margin:20px auto;} @media (max-width: 740px) { .title-center .innerbox .subtitle { display: none; } } .title-center .innerbox .subtitle span { color:#004098; padding-left: 5px;} .title-center .innerbox p { font-size: calc(0.9rem + 1.0416666667vw); font-weight:500; color:#004098; } .title-center .leftLine { width:5px; height: 50px; background:#004198; position: absolute; top:50%; left: 0; right: unset; bottom: unset; z-index: 1;} .title-center .rightLine { width:5px; height: 50px; background:#004198; position: absolute; top:50%; left: unset; right: 0; bottom: unset; z-index: 1;} @media (max-width: 740px) { .title-center .leftLine ,.title-center .rightLine{display: none} } .title-text span{color: #f38054; font-size: 26px; font-weight: bold; top:-10px; margin-right: 30px; position: absolute;} /*----------------------------------------/ 分頁 自訂顏色樣式 ----------------------------------------*/ .pagination{ width: 100%; margin:50px auto 0px auto; padding-bottom: 30px; display: flex; justify-content: center; } .pagination .page-link { color:#004198; min-width: 48px;height: 48px;padding: .75rem .75rem;text-align: center; background-color:transparent;; border-color:transparent; border-radius:99rem;} .pagination .page-link:hover { color: #fff; background-color:#004198; border-color:#004198;} .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 { border-radius:99rem; background-color:transparent; border-color:#004198;} .pagination .page-item:last-child .page-link { border-radius:99rem; background-color:transparent; border-color:#004198;} .pagination .page-item.active .page-link { color: #fff!important; background-color:#004198; border-color:#004198;} .pagination .page-item.disabled .page-link { color: #fff; background-color:#555; border-color:#555; } .pagination .page-link:hover span { color: #004198; } @media (max-width: 320px) { .pagination .page-link { padding: 3px; width:30px;height: 30px; } } .editor blockquote {width: 100%; display: block; font-size: 26px; font-weight: 400; line-height: 1.5; letter-spacing: normal; position: relative; margin: 0; padding-left: 32px; color: #1e88c9; -webkit-box-sizing: border-box;box-sizing: border-box;} .editor blockquote:before { width: 8px; height: 100%; content: ""; position: absolute; top: 0; left: 0; display: block; background-color: #1e88c9;} /*---------------*/ /***** icon *****/ /*---------------*/ .icon-download{ background: url("../images/icon/icon-download.svg") no-repeat left center; } .icon-back{background: url("../images/icon/arrow-left-2.svg") no-repeat left center; background-size:auto;} .icon-shop{display: block; margin: auto;background:url("../images/icon/shop-1.svg") no-repeat left top; } .arrow-w{background: url("../images/icon/arrow-right-2.svg") no-repeat right top; } .icon-next{background: url("../images/icon/arrow-right-2.svg") no-repeat left 0px; background-size:auto;} .icon-link{background: url("../images/icon/link.svg") no-repeat left center; background-size:auto;} .icon-check{background: url("../images/icon/check.svg") no-repeat center 4px; background-size:70% auto;} .icon-clear{background: url("../images/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)} .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%; min-height: 58px; margin: 0px 5px 0px 0px;padding: 10px;font-size: .95rem; line-height: 1.5; border-radius:0px; overflow: hidden;} .btn .circle{ width:36px; height:36px; border: solid 1px #004198; background: #fff; border-radius:99rem; margin:auto 5px auto 0px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;z-index: 1 } .btn .circle-orange{ background: #004198; border: solid 1px #004198;} @media (max-width: 991.98px) { .btn { font-size: .9rem; } } @media (max-width: 797.98px) { .btn { font-size: .875rem; } } @media (max-width: 320px) { .btn { font-size: .75rem; } } .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/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;} @media (max-width: 767.98px) { .btn-play {transform: scale(.7)} } .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;} .btn.btn-secondary { color:#fff; font-size: 1rem; font-weight: 700; letter-spacing: 0px; background:#000; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;transition: all 1s; } .btn.btn-secondary:hover { color: #fff; } .btn-btnbox {position: relative;z-index:9; display: flex; justify-content: center; width: calc(100% - 80px); height: auto; margin:10px auto; transition: all 1s; overflow: hidden; } .btn-btnbox .btn { margin: 0px; } .btn-submit{ font-weight: 700; background:#004098;border: solid 1px #000; color: #fff!important; vertical-align: text-bottom; } .btn-submit:hover { color: #fff; background:#000; border: solid 1px #000; } .btn-reset{ font-weight: 700; background: #555;border: solid 1px #555; color: #fff!important; vertical-align: text-bottom; } .btn-reset:hover { color: #fff; background:#000; } /*print =================================*/ .btn.btn-print { color:#fff; font-size: 1rem; font-weight: 700; letter-spacing: 0px; background-color:#004098; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; transition: all 1s; } .btn.btn-print:hover { color: #fff; } /*---------------*/ /***** btn *****/ /*---------------*/ .btnbox {position: relative;z-index:9; display: flex; justify-content: center; width: 100%; height: auto; margin:20px auto 0px auto; transition: all 1s;} a.btn-prev {color:#000; font-weight: 600; text-align: center; transition: all 0.5s; position: relative; } a.btn-next {color:#000; font-weight: 600; text-align: center; transition: all 0.5s; position: relative; } a.btn-prev:before{content: ""; position: absolute;top:18px; left:13%;width:18px; height:18px; background: url("../images/icon/arrow-left-2.svg") no-repeat left 2px; transition: all 0.5s; filter: grayscale(1) brightness(0);} a.btn-next:before{content: ""; position: absolute;top:18px; right:13%;width:18px; height:18px; background: url(../images/icon/arrow-right-2.svg) no-repeat left 2px; transition: all 0.5s; filter: grayscale(1) brightness(0);} a.btn-prev:after,a.btn-next:after { display: block; content: ''; width: 0; height:3px; position: absolute; left:0px; bottom: 0px; background:#29b8ed; transition: all .3s ease;} @media (max-width:320px) { a.btn-prev:before{ top:10px; } a.btn-next:before{ top:10px; } } a.btn-prev:hover:after,a.btn-next:hover:after{ width: 100%; } a.btn-prev:hover:before{ -webkit-transform: translateX(5px); transform: translateX(-5px); } a.btn-next:hover:before{ -webkit-transform: translateX(-5px); transform: translateX(5px); } a.btn-prev:hover, a.btn-next:hover { color:#2ab8ed; } a.btn-back { width:auto; color:#000; padding: 10px; font-weight:600; 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; display: block; 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-left: 10px;margin-right: 10px; } .btn-back:after { margin-left:10px; margin-right: 10px; } a.btn-back:hover { color:#2da6e0; } .btn-back:hover:before{ background:#2da6e0; -moz-transform: translateX(20%); -ms-transform: translateX(20%); -webkit-transform: translateX(20%); transform: translateX(20%); } .btn-back:hover:after{ background:#2da6e0;-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 20px 10px 1px; 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:0px; background:#004098;} .back-button:hover .back-button-circle { -webkit-transform: scale(1.2); transform: scale(1.2)} .back-button:hover .back-button-txt, .back-button:hover i { -webkit-transform: translateX(-5px); transform: translateX(-5px)} .back-button-circle { width: 32px; height: 32px; position: relative; display: block; margin:0px 10px 0px 0px; border: 1px solid none; border-radius: 50%; -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s} .back-button i.arrow-l { width: 28px; height: 28px; position: absolute;top: 0; bottom: 0; left:0px; background: url("../images/icon/arrow-left-2.svg") no-repeat 4px 4px; margin: auto; -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:#000; } @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 } } /*cms-btn Styles 1 =================================*/ /*.btn-1 =================================*/ .btn-1 {position:relative; border: none; cursor: pointer; margin: 20px auto; padding:12px 20px; background:#003399; border-radius:30px; overflow: hidden; } a.btn-1 { color: #fff;} a:active .btn-1 {background-color:#004198;} .btn-1 span { color: #fff;font-weight:700; position: relative;z-index:1; transform-origin: center left; transition: color 0.3s ease; } .btn-1:before,.btn-1:after {content: '';background:#fdb212;height:100%; width: 0;position: absolute; transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);border-radius:30px; overflow: hidden; } .btn-1:before { top: 0; left: 0; right: auto;} .btn-1:after { bottom: 0; right: 0; left: auto;} .btn-1:hover:before { width: 100%; right: 0; left: auto;} .btn-1:hover:after { width: 100%; left: 0; right: auto;} /*.btn-01 =================================*/ .btn-01{ cursor: pointer; width:200px; height:2.75rem; padding:0px 30px 0px 50px;margin: 0px auto; line-height:2.75rem; display: flex; align-items: center; position: relative; box-shadow: 0px 0px 17px 1px rgba(0, 0, 0, 0.34); background-color:#fff; z-index: 1; border-radius:8px; overflow: hidden; } .btn-01 span {display: flex; transform-origin: center left; transition: color 0.3s ease;position: relative;z-index:1; font-weight: 700; color: #003567;} .btn-01 em {position: absolute;width:32px; height:32px;right:5px;top:5px; transition: all 0.3s ease; background: url("../images/icon/arrow-right-f.svg") no-repeat center; background-size:22px;z-index:1;} .btn-01:before,.btn-01:after {content: '';background:#ef6908;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{color: #fff;} .btn-01:hover em{ transform:translateX(5px); filter:invert(100%) brightness(5) grayscale(1)} @media (max-width: 320px) { .btn-01{ width:100%; } .btn-01 span { font-size:.9rem;} } /*.btn-02 =================================*/ .btn-02{ cursor: pointer; width:200px; height:2.75rem; padding:0px 30px 0px 40px;margin: 0px; line-height:2.75rem; display: flex; align-items: center; position: relative; box-shadow: 0px 0px 17px 1px rgba(0, 0, 0, 0.34); background-color:#003567; z-index: 1; border-radius:8px; overflow: hidden; } .btn-02 span {display: flex; transform-origin: center left; transition: color 0.3s ease;position: relative;z-index:1; font-weight: 700; color: #fff;} .btn-02 em {position: absolute;width:32px; height:32px;right:5px;top:6px; transition: all 0.3s ease; background: url("../images/icon/arrow-right-f.svg") no-repeat center; background-size:22px;z-index:1;} .btn-02:before,.btn-02:after {content: '';background:#ef6908;height:100%; width: 0;position: absolute; transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);} .btn-02:before { top: 0; left: 0; right: auto; } .btn-02:after { bottom: 0; right: 0; left: auto; } .btn-02:hover:before { width: 100%; right: 0; left: auto;} .btn-02:hover:after { width: 100%; left: 0; right: auto;} .btn-02:hover span{color: #fff;} .btn-02:hover em{ transform:translateX(5px); filter:invert(100%) brightness(5) grayscale(1)} @media (max-width: 320px) { .btn-02{width:100%;} .btn-02 span { font-size:.875rem;} } /*cms-btn Styles 3=== */ a.btn-03{width:auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; color: #004098;font-weight:400; overflow: hidden; text-align: center; background-color: transparent;border:solid 1px transparent; cursor: pointer; letter-spacing: 0.1rem; box-shadow: inset 0 0 0 1px #004098;-webkit-transition: color 0.25s 0.0833333333s; transition: color 0.25s 0.0833333333s; position: relative;} .btn-03 span { display: inline-block; transform-origin: center left; transition: color 0.3s ease;position: relative;z-index:1;font-size:1rem; font-weight: 700; color:#004098;} .btn-03 i{ filter: brightness(200%); } .btn-03:hover i{ filter:invert(1) brightness(200%); } .btn-03:hover .circle{ background-color: #fff } a.btn-03:hover{color:#fff; background:#ff6733; } a.btn-03:hover span{color:#fff; } /* 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;} .hvr-bounce-to-right:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background:#004098; -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);} a.text-button{color:#004098 } .text-button { margin: 25px 0px; font-size: 1rem; 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; } a.text-button { font-size: 0.875rem; } } @media (max-width: 320px) { .text-button::before { top: 20%;} } /*----------------------------------------/ 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:0px!important; font-size:1rem; line-height:1.75rem; font-weight:700; color:#4a4a4a; position: relative; } .cms-dot li:before{ content: ''; width:6px; height:6px; background-color:#004098; border-radius: 99rem; position: absolute; top: 12px; left: 0px; transition: all 0.5s ease 0s;} .check{ width: 100%; display: block; margin:0px;padding: 0px; } .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;} .check li:before{ content: ''; width: 15px; height: 15px; background-color:#004098; border-radius: 99rem; position: absolute; top: 6px; left: 0px; transition: all 0.5s ease 0s;} .check li:after{ content: ''; width: 12px; height: 12px; background: url("../images/icon/check.svg") no-repeat left top;position: absolute; top:8px; left: 2px; transition: all 0.5s ease 0s;} .decimal { list-style-position: outside; list-style-type: decimal; padding-left: 15px;} .decimal li{margin-bottom: 10px; font-size:1.125rem; line-height:1.5em; font-weight:400; } .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;} /*----------------------------------------/ aside cssmenu樣式 ----------------------------------------*/ .main-area.top #cssmenu{margin:50px auto 10px auto;} #cssmenu{width:100%; margin:0px auto;padding:0px; list-style:none; display:block; -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box; position: relative; background-color:transparent;border-bottom: solid 1px rgb(196, 209, 220); } #cssmenu ul{width:100%; max-width:1440px; margin:0px auto; } #cssmenu #menu-button{margin:0px;padding:0;border:0;list-style:none; 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 li,#cssmenu ul li a{ padding:0; list-style:none; 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; 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.align-center > ul{font-size:0;text-align:center; margin: auto; justify-content: center } #cssmenu.align-center > ul > li{ float:none;/* display: flex;*/ border-left:solid 1px rgb(196, 209, 220); } #cssmenu.align-center > ul > li:first-child{ border-left:none;} #cssmenu.align-center > ul > li > a{ margin: auto; padding:10px 15px; text-align:center;text-decoration:none; color:#000} #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{ margin:0px auto; padding: 0px; display: flex; flex-wrap: wrap; } #cssmenu > ul > li{ flex: 1 1 0; margin:0px; padding: 0px; background-color:transparent; border: solid 1px transparent; } #cssmenu > ul > li > a{ display: flex; flex-wrap: wrap; justify-content: center; margin: auto; padding:10px ;font-size:1rem; line-height: 1.5rem; font-weight:400; text-decoration:none; color:#444; text-align: center; transition: all .4s ease; } #cssmenu > ul > li:after { opacity:0;content: ""; display: block; width: 12px; height: 2px; position: absolute; z-index: 1; bottom: 0px; background-color:#fff; transition: all .4s ease; } #cssmenu > ul > li:hover:after { width: 100%;opacity: 1} #cssmenu > ul > li.active{ background: #004198; } #cssmenu > ul > li.active > a{color:#fff; } #cssmenu > ul > li.active:after { opacity: 1; content: ""; display: block; width: 100%; height: 1px; bottom: -2px; z-index: 2; background-color:#004198; transition: all .4s ease;} #cssmenu > ul > li.active:hover:after { background-color:#fff; } #cssmenu > ul > li:hover > a {color:#fff;} #cssmenu > ul > li:hover > a > figure,#cssmenu > ul > li.active figure{filter:invert(100%) brightness(5) grayscale(1)} #cssmenu > ul > li:hover { border-color:transparent; background: #004198; } /*img*/ #cssmenu > ul > li > a > figure{width: 100%; max-width:42px; height: 42px; margin: auto;} #cssmenu > ul > li > a span{width: 100%; font-size: 0.9rem; font-weight: 500; word-break: normal; text-align: center; margin: 10px auto;} #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 > li.has-sub > a{ padding:5px 15px !important; } #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:1px solid #003567; } #cssmenu ul{width:100%;max-height:300px; margin: auto; padding: 0px; display:none; position: absolute; overflow-y: scroll; background:#f5f5f5; border:1px solid rgba(120, 120, 120, 0.15);} #cssmenu > ul > li{border-radius:0px; } #cssmenu > ul > li.active > a{color:#fff; } #cssmenu > ul > li.active{background:#004098; } #cssmenu.align-center > ul > li{ width:100%; text-align:left; } #cssmenu ul ul ul{ background:#e7eaeb!important; } #cssmenu.align-center > ul,#cssmenu.align-right ul ul{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; } #cssmenu > ul > li,#cssmenu.align-center > ul > li,#cssmenu.align-right > ul > li{float:none;display:block;} #cssmenu ul ul li a{padding:10px 5px;font-size:12px;color:#000000;background:none;text-align:center;} #cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover{color:#fff;} #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; background-color:#e3e8ee;-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 { margin: auto 10px;} #cssmenu > ul > li > a > figure{ width: 42px; margin: auto 10px;} #cssmenu > ul > li > a h3{ text-align: left; margin: 10px;} #cssmenu.align-center > ul > li{ float:none; display: flex; } #cssmenu.align-center > ul > li > a{ margin: auto ; display: flex; flex-wrap: wrap;text-decoration:none; } #cssmenu.align-center > ul > li > a span{ width:calc(100% - 82px); margin:auto auto auto 20px; text-align:left; } } /*----------------------------------------/ leftMenu start 樣式 ----------------------------------------*/ @media only screen and (min-width:993px){ .leftMenuMobile {display: none;} } .leftMenu { flex: 2; padding:40px 20px 20px 20px; background-color: transparent; border-right:solid 1px #eee; position: relative; z-index: 9;} .leftMenu h2{ font-size: 1.5rem; font-weight: 700; margin-bottom: 30px; } .leftMenu .subject { margin: 20px 0; font-size: 1.125rem; font-weight: 700; line-height: 1.2; text-transform: uppercase;} .leftMenu .subject img { width: 24px; margin-right: 12px;} .leftMenu ul, .leftMenu ul li {list-style-type:none; margin: 0; padding: 0;} .leftMenu ul {width: 100%; } .leftMenu > ul ul { padding: 30px 0px; } .leftMenu ul li { margin:20px 0px 0px 0px; position: relative; z-index: 1; font-size: 1.375rem; font-weight: 700; line-height:1.75rem; border-bottom: 1px solid #d8d8d8;} .leftMenu ul li:last-child {border-bottom: none;} .leftMenu ul li a:hover { color:#ef430a!important; } .leftMenu ul li a { transition: all .3s ease } .leftMenu ul li a.active, .leftMenu ul li a:hover { border-color: transparent} .leftMenu ul li a.active { color: #fff; background-color:#003567 } .leftMenu ul li a:hover.active { color: #003567!important; } .leftMenu ul li ul li.current a{ color:#003567;} .leftMenu ul li ul li{ margin:0px; font-size:1rem; font-weight: 600; line-height:1.5rem; position: relative; border-bottom:none} /*.leftMenu ul li ul li:before{ content: ""; width: 10px; height: 10px; background-color:#ff4600; position: absolute; left:30px; top:18px; z-index: 9;}*/ .leftMenu ul li ul li:hover:before{ background-color:#ef430a; } .leftMenu ul li ul li a.menu_arrow_open{background-color:#fff; color:#ef430a;} .leftMenu ul li ul li a{ color:#555;} .leftMenu ul li ul li ul li{padding-left: 0px;} .leftMenu ul li ul li ul li a{ color:#615f5e;} .leftMenu ul li ul li ul li:before{display: none} .menu_dot {position: absolute; top: 10px; right: 0px; z-index: 99; width: 100%; height: 30px; cursor: pointer;} .menu_dot::before {content: ''; width:20px; height: 20px; background: url("../images/icon/icon-up.svg") no-repeat left top; position: absolute; top:0px; right: 7px; z-index: 99; transition: all 0.5s ease 0s;} .leftMenu .menu_dot_open{ } .leftMenu .menu_dot_open::before {transform: rotate(90deg)} .leftMenu .menu_dot_open::after { display: none;} .leftMenu a:link, .leftMenu a:visited {text-decoration:none; color:#312927; background-color: transparent; padding: 10px 0px; display: block; position: relative; z-index: 1; transition: all 0.5s ease 0s;} .leftMenu a:active, .leftMenu a:hover {text-decoration:none; color:#003567!important; cursor:pointer; transition: all 0.5s ease 0s;} /*.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(80% - 10px);} .leftMenu ul li a.menu_arrow_open{ color:#004198;} .leftMenu ul li ul li a.menu_arrow_open{background-color:#fff; color:#ef430a!important;} .menu_arrow { display: none; 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: #172987; 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: #172987; transition: all 0.5s ease 0s;} .menu_arrow::after {content: ''; width: 7px; height: 2px; background-color: #172987; 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:#172987; } .leftMenu a:hover .menu_arrow::after {background-color: #172987; 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; } .leftMenu .check-list li{margin-bottom: 10px;} @media only screen and (max-width:992px){ .leftMenu .subject { width: 100px; height: 50px; margin: 0; font-size: 0; position: absolute; left:20px; top:6px; z-index: 10;} .leftMenu { flex: 1 1 100%;margin-bottom: 20px; padding: 0px; position: relative} .leftMenu h2{ display:none} .leftMenu ul {width: 100%;} .leftMenuMobile {width: 100%; height:40px; margin:0px auto; cursor: pointer; border: solid 1px #e7eef5; background:#e7eef5; position: relative; z-index: 9; } .leftMenuMobile > span:nth-child(1) {width: 30px; height: 2px; background-color: #000; position: absolute; top: 10px; right: 10px; transition: all 0.5s ease 0s;} .leftMenu > div.show > span:nth-child(1) {top: 18px; transform: rotate(45deg);} .leftMenuMobile > span:nth-child(2) {width: 30px; height: 2px; background-color: #000; position: absolute; top: 22px; right: 10px; transition: all 0.5s ease 0s;} .leftMenu > div.show > span:nth-child(2) {top: 18px; transform: rotate(-45deg);} .leftMenuMobile::before {content: attr(data-title); width: 200px; height: 40px; line-height: 40px; position: absolute; top:0px; left: calc(50% - 100px); text-align: center; font-size: 1.375rem; font-weight:400; color: #000;} .leftMenu > ul {max-height: 0; overflow: hidden; transition: all 0.5s ease 0s; } .leftMenu > ul.open {max-height: 500px; overflow: auto; padding-bottom: 10px; transition: all 1.5s ease 0s; position: absolute;z-index: 9; background: #fff; box-shadow: 0 0 30px hsla(0,0%,46.7%,.2); } .leftMenu ul li { font-size: 0.9rem; line-height:1.25rem; } .leftMenu a:link, .leftMenu a:visited { padding: 10px 25px 10px 15px; } .leftMenu ul li ul li{padding-left:10px; word-break: break-all;} .leftMenu ul li ul li:before{ left:10px; top:18px; } } @media only screen and (max-width:767.98px){ .leftMenuMobile::before {font-size: 1.125rem;font-weight:700} } /* ==== 底圖 === */ .bg-background { background-image: attr(src url); background-repeat: no-repeat; background-size: 100% auto;background-position:left bottom; position: absolute;z-index: 1; bottom:0px; left: 0; right: 0; line-height: 0; width: 100%; } @media(max-width: 992px) { .bg-background {background-position:center;} }