/*casesp in*/
@import url("fontawesome-free-5.15.4-web/css/all.css");\nhtml, body, button, * {
font-family: "Times New Roman", "Serif", '*Raleway*', 'Lato', "PingFang TC", "Heiti TC", "Noto Sans TC", aktiv-grotesk, source-han-sans-traditional, "Segoe UI", Roboto, "Helvetica Neue", "Microsoft JhengHei", "Microsoft YaHei", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
margin: 0px;
padding: 0px; }
html, body {
background-color: #ccc !important; }
.okicss {
}
.okicss a {
text-decoration: none;
color: #333; }
.okicss a:hover {
text-decoration: none;
color: #55e; }
.okicss .container {
width: 100%;
padding: 0;
margin: 0 auto;
max-width: 1920px;
position: relative;
box-sizing: border-box;
background-attachment: fixed; }
.okicss .content {
min-height: calc(100vh - 80px); }
.okicss .content .topseg {
height: 68px;
width: 100%;
display: block;
}
.okicss .wmid {
width: 100%;
max-width: 1280px;
margin: auto; }
.okicss .ptr {
cursor: pointer; }
.okicss .abscenter {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: block; }
.okicss .bgcenter {
background-position: center center;
background-size: cover; }
.okicss *:focus {
outline-style: none;
box-shadow: none;
border-color: transparent;
}
.okicss .lazy {
opacity: 0;
transition: all 0.3s;
-webkit-transition: all 0.3s;
background-size: cover;
background-position: center center c; }
.okicss .lazy[class~=lzon] {
opacity: 1; }
.okicss .lazy img.lazybg {
opacity: 0;
width: 100%;
height: 100%;
position: absolute; }
.okicss .full {
width: 100%;
}
.okicss .nopage {
padding: 60px 0px;
}
.okicss .nopage .nt {
font-size: 14pt;
padding: 40px 0px; }
.okicss .nopage .back {
text-decoration: none;
color: #333;
display: inline-block;
padding: 5px 0px;
border-bottom: 2px solid #666; }
.okicss .nopage .back:hover {
color: #ad871d;
border-bottom: 2px solid #ad871d; }
.okicss .ctag {
display: block;
position: fixed;
left: 0px;
top: 150px;
width: 25px;
z-index: 999; }
.okicss .ctag img {
width: 100%; }
.okicss .casetype {
display: block;
position: fixed;
left: 50%;
width: 100%;
transform: translateX(-50%);
max-width: 1920px;
text-align: right;
top: 80px;
z-index: 2000; }
.okicss .casetype img {
width: 80px; }
.okicss .casetype .caselink {
display: none;
position: absolute;
right: 0px;
width: 80px;
border: 1px solid #ad871d;
background-color: #fff; }
.okicss .casetype .caselink a {
display: block;
font-size: 12pt;
text-align: center;
color: #ad871d;
padding: 5px 0px; }
.okicss .casetype .caselink a:hover, .okicss .casetype .caselink a[class~=on] {
color: #fff;
background-color: #ad871d; }
.okicss .casetype[class~=on] {
}
.okicss .casetype[class~=on] .caselink {
display: block; }
.okicss ::-webkit-scrollbar {
width: 5px;
}
.okicss ::-webkit-scrollbar-track {
background: #f1f1f1;
}
.okicss ::-webkit-scrollbar-thumb {
background: #aaa;
}
.okicss ::-webkit-scrollbar-thumb:hover {
background: #ccc; }
@media (max-width: 1280px) {
.okicss {
}
.okicss .wmid {
box-sizing: border-box;
padding: 10px; } }
@media (max-width: 1080px) {
.okicss {
}
.okicss .content .topseg {
height: 50px; } }
@media (max-width: 640px) {
.okicss {
}
.okicss .ctag {
display: block;
position: fixed;
left: 0px;
top: 100px;
width: 25px; }
.okicss .ctag img {
width: 100%; }
.okicss .casetype {
top: 55px; }
.okicss .casetype img {
width: 45px; }
.okicss .casetype .caselink {
width: 45px; }
.okicss .casetype .caselink a {
font-size: 9pt; } }
html, body, button, * {
font-family: "Times New Roman", "Serif", '*Raleway*', 'Lato', "PingFang TC", "Heiti TC", "Noto Sans TC", aktiv-grotesk, source-han-sans-traditional, "Segoe UI", Roboto, "Helvetica Neue", "Microsoft JhengHei", "Microsoft YaHei", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
margin: 0px;
padding: 0px; }
html, body {
background-color: #ccc !important; }
.okicss {
}
.okicss a {
text-decoration: none;
color: #333; }
.okicss a:hover {
text-decoration: none;
color: #55e; }
.okicss .container {
width: 100%;
padding: 0;
margin: 0 auto;
max-width: 1920px;
position: relative;
box-sizing: border-box;
background-attachment: fixed; }
.okicss .content {
min-height: calc(100vh - 80px); }
.okicss .content .topseg {
height: 68px;
width: 100%;
display: block;
}
.okicss .wmid {
width: 100%;
max-width: 1280px;
margin: auto; }
.okicss .ptr {
cursor: pointer; }
.okicss .abscenter {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: block; }
.okicss .bgcenter {
background-position: center center;
background-size: cover; }
.okicss *:focus {
outline-style: none;
box-shadow: none;
border-color: transparent;
}
.okicss .lazy {
opacity: 0;
transition: all 0.3s;
-webkit-transition: all 0.3s;
background-size: cover;
background-position: center center c; }
.okicss .lazy[class~=lzon] {
opacity: 1; }
.okicss .lazy img.lazybg {
opacity: 0;
width: 100%;
height: 100%;
position: absolute; }
.okicss .full {
width: 100%;
}
.okicss .nopage {
padding: 60px 0px;
}
.okicss .nopage .nt {
font-size: 14pt;
padding: 40px 0px; }
.okicss .nopage .back {
text-decoration: none;
color: #333;
display: inline-block;
padding: 5px 0px;
border-bottom: 2px solid #666; }
.okicss .nopage .back:hover {
color: #ad871d;
border-bottom: 2px solid #ad871d; }
.okicss .ctag {
display: block;
position: fixed;
left: 0px;
top: 150px;
width: 25px;
z-index: 999; }
.okicss .ctag img {
width: 100%; }
.okicss .casetype {
display: block;
position: fixed;
left: 50%;
width: 100%;
transform: translateX(-50%);
max-width: 1920px;
text-align: right;
top: 80px;
z-index: 2000; }
.okicss .casetype img {
width: 80px; }
.okicss .casetype .caselink {
display: none;
position: absolute;
right: 0px;
width: 80px;
border: 1px solid #ad871d;
background-color: #fff; }
.okicss .casetype .caselink a {
display: block;
font-size: 12pt;
text-align: center;
color: #ad871d;
padding: 5px 0px; }
.okicss .casetype .caselink a:hover, .okicss .casetype .caselink a[class~=on] {
color: #fff;
background-color: #ad871d; }
.okicss .casetype[class~=on] {
}
.okicss .casetype[class~=on] .caselink {
display: block; }
.okicss ::-webkit-scrollbar {
width: 5px;
}
.okicss ::-webkit-scrollbar-track {
background: #f1f1f1;
}
.okicss ::-webkit-scrollbar-thumb {
background: #aaa;
}
.okicss ::-webkit-scrollbar-thumb:hover {
background: #ccc; }
@media (max-width: 1280px) {
.okicss {
}
.okicss .wmid {
box-sizing: border-box;
padding: 10px; } }
@media (max-width: 1080px) {
.okicss {
}
.okicss .content .topseg {
height: 50px; } }
@media (max-width: 640px) {
.okicss {
}
.okicss .ctag {
display: block;
position: fixed;
left: 0px;
top: 100px;
width: 25px; }
.okicss .ctag img {
width: 100%; }
.okicss .casetype {
top: 55px; }
.okicss .casetype img {
width: 45px; }
.okicss .casetype .caselink {
width: 45px; }
.okicss .casetype .caselink a {
font-size: 9pt; } }
.okicss .err {
font-size: 9pt;
color: #f00; }
.okicss .cap {
font-size: 10pt;
margin: 8px 0px; }
.okicss .row {
margin-bottom: 15px; }
.okicss .modal-dialog {
height: 100%;
width: 100%;
display: flex;
align-items: center; }
.okicss .modal-content {
margin: 0 auto;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.okicss .modal-content span.ing {
width: 100%;
display: block;
text-align: center; }
.okicss .okiloading {
display: block;
text-align: center;
width: 100%;
height: 120px; }
.okicss .okiloading-icon {
display: block;
border: 2px solid #ad871d;
border-right: rgba(173, 135, 29, 0);
height: 100px;
width: 100px;
border-radius: 50px;
animation: 1s okiloadingani infinite linear;
-webkit-animation: 1s okiloadingani infinite linear;
margin: auto; }
@media (max-width: 1280px) {
.okicss {
}
.okicss .p-md-3 {
padding: 16px;
box-sizing: border-box; } }
@media (max-width: 640px) {
.okicss {
} }
@keyframes okiloadingani {
0% {
transform: rotate(0deg);
-webki-transform: rotate(0deg); }
100% {
transform: rotate(360deg);
-webki-transform: rotate(360deg); } }
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}
.okicss {
}
.okicss .lazyslider .item {
display: none; }
.okicss .lazyslider[class~=slider] .item {
display: block; }
.okicss .slider {
width: 100%;
height: 100%;
position: relative;
}
.okicss .slider .owl, .okicss .slider .owl-stage-outer, .okicss .slider .owl-stage, .okicss .slider .owl-item {
min-height: 100%;
height: 100%; }
.okicss .slider .item {
background-size: cover;
background-position: center center;
min-height: 100%;
width: 100%;
display: block; }
.okicss .slider .prev, .okicss .slider .next {
width: 40px;
height: 40px;
display: block;
position: absolute;
top: 50%;
background: rgba(0, 0, 0, .7);
z-index: 2;
transform: translateY(-50%);
border-radius: 20px;
cursor: pointer;
text-align: center;
line-height: 40px;
overflow: hidden;
transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1); }
.okicss .slider .prev:hover, .okicss .slider .next:hover {
background: rgba(0, 0, 0, .4); }
.okicss .slider .prev img, .okicss .slider .next img {
width: 100%;
height: 100%;
transform: scale(0.5, 0.5);
display: block;
filter: brightness(1000%); }
.okicss .slider .prev {
left: 10px; }
.okicss .slider .next {
right: 10px; }
.okicss .slider .owl-dots {
position: absolute;
bottom: 0px;
text-align: center;
width: 100%; }
.okicss .slider .owl-dots .owl-dot {
width: 15px;
height: 15px;
border-radius: 10px;
border: 2px solid #fff;
background-color: rgba(0, 0, 0, 0);
margin: 10px; }
.okicss .slider .owl-dots .owl-dot[class~=active] {
border-color: #ad871d;
background-color: #ad871d; }
@media (max-width: 640px) {
.okicss {
} }
.okicss .err {
font-size: 9pt;
color: #f00; }
.okicss .cap {
font-size: 10pt;
margin: 8px 0px; }
.okicss .row {
margin-bottom: 15px; }
.okicss .modal-dialog {
height: 100%;
width: 100%;
display: flex;
align-items: center; }
.okicss .modal-content {
margin: 0 auto;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.okicss .modal-content span.ing {
width: 100%;
display: block;
text-align: center; }
.okicss .okiloading {
display: block;
text-align: center;
width: 100%;
height: 120px; }
.okicss .okiloading-icon {
display: block;
border: 2px solid #ad871d;
border-right: rgba(173, 135, 29, 0);
height: 100px;
width: 100px;
border-radius: 50px;
animation: 1s okiloadingani infinite linear;
-webkit-animation: 1s okiloadingani infinite linear;
margin: auto; }
@media (max-width: 1280px) {
.okicss {
}
.okicss .p-md-3 {
padding: 16px;
box-sizing: border-box; } }
@media (max-width: 640px) {
.okicss {
} }
@keyframes okiloadingani {
0% {
transform: rotate(0deg);
-webki-transform: rotate(0deg); }
100% {
transform: rotate(360deg);
-webki-transform: rotate(360deg); } }
.okicss {
}
.okicss .footer {
width: 100%;
background-color: #fff;
position: relative;
min-height: 90px;
}
.okicss .footer .wmid {
margin: auto;
width: 100%;
max-width: 100%;
text-align: center;
padding: 1px 0px;
box-sizing: border-box; }
.okicss .footer .icnbox {
position: absolute;
left: 20px;
margin: 0px auto; }
.okicss .footer .icnbox .icn {
display: inline-block;
margin: 10px;
width: 50px; }
.okicss .footer .copyright {
position: absolute;
right: 20px;
top: 15px;
color: #d9d9d9;
padding: 15px 0;
text-align: center;
font-size: 9pt; }
.okicss .footer .addr {
padding-top: 20px;
color: #ad871d;
font-family: Arial, Helvetica, sans-serif; }
.okicss .footer .addr_en {
color: #ad871d;
}
.okicss .footer[class~=footer-home] .icnbox {
position: relative;
left: 0px;
top: 0px;
width: 100%;
text-align: center;
margin: 0px auto;
padding-top: 100px; }
.okicss .footer[class~=footer-home] .icnbox .icn {
display: inline-block;
margin: 50px;
width: 450px; }
.okicss .footer[class~=footer-home] .copyright {
position: relative;
color: #d9d9d9;
padding: 15px 0;
text-align: center;
font-size: 9pt;
top: 0px; }
@media (max-width: 1200px) {
.okicss .footer {
}
.okicss .footer[class~=footer-home] .icnbox {
margin: 4vw auto;
padding-top: 0px; }
.okicss .footer[class~=footer-home] .icnbox .icn {
width: 18vw;
margin: 4vw; }
.okicss .footer[class~=footer-home] .addr {
font-size: 2vw; }
.okicss .footer[class~=footer-home] .addr_en {
font-size: 2vw; } }
@media (max-width: 1080px) {
.okicss .footer {
}
.okicss .footer .icnbox {
position: relative;
left: 0px;
margin: 10px auto; }
.okicss .footer .icnbox .icn {
display: inline-block;
margin: 10px;
width: 50px; }
.okicss .footer .copyright {
position: relative;
right: 20px;
top: 0px;
color: #d9d9d9;
padding: 15px 0;
text-align: center;
font-size: 10pt; }
.okicss .footer .addr {
padding-top: 0px;
font-size: 2.2vw; }
.okicss .footer .addr_en {
font-size: 2.2vw; } }
@media (max-width: 760px) {
.okicss .footer {
} }
@media (max-width: 640px) {
.okicss .footer {
}
.okicss .footer[class~=footer-home] .icnbox .icn {
width: 24vw;
margin: 4vw; } }
.okicss {
}
.okicss .header {
display: block;
min-height: 68px;
position: fixed;
width: 100%;
max-width: 1920px;
z-index: 20;
}
.okicss .header .logo {
position: absolute;
left: 20px;
top: 20px;
z-index: 2; }
.okicss .header .logo img {
aspect-ratio: 200 / 100;
max-height: 70px;
max-width: 150px; }
.okicss .header .header-bg {
display: none;
box-shadow: 0 2px 3px rgba(0, 0, 0, .2);
height: 68px;
position: absolute;
width: 100%;
left: 0;
top: 0;
background-color: rgba(255, 255, 255, .9); }
.okicss .header .wmid {
position: relative;
margin: auto;
width: 100%;
max-width: 100%; }
.okicss .header .fas {
font-size: 1em;
line-height: 60px;
padding: 0 0.5em; }
.okicss .header .ban {
display: block;
width: 100%;
height: 200px;
background-size: cover;
background-position: center top; }
.okicss .header .menu {
display: inline-block;
width: auto;
text-align: center;
height: 60px;
line-height: 60px;
position: absolute;
right: 0;
top: 0px; }
.okicss .header .menu .mrow {
display: flex;
width: auto; }
.okicss .header .menu a {
display: block;
width: 116px;
word-wrap: nowrap;
word-break: keep-all;
color: #fff;
font-size: 1em;
margin: 0;
text-decoration: none;
box-sizing: border-box;
padding: 0 0.5em;
border-bottom: 2px solid rgba(173, 135, 29, 0);
letter-spacing: 0.1em;
transition: 0.3s all ease-out;
position: relative;
text-align: center; }
.okicss .header .menu a .ren {
display: block;
width: 100%;
font-size: 12pt;
transition: 0.3s all ease-out;
word-wrap: nowrap; }
.okicss .header .menu a .rtw {
display: block;
position: absolute;
width: 100%;
text-align: center;
font-size: 9.5pt;
padding: 0px;
left: 0px;
top: 50%;
transform: translateY(-82%);
transition: 0.3s all ease-out;
opacity: 0; }
.okicss .header .menu a:hover, .okicss .header .menu a[class~=on] {
background-color: #ad871d; }
.okicss .header .menu a:hover .ren, .okicss .header .menu a[class~=on] .ren {
transform: translateY(20%); }
.okicss .header .menu a:hover .rtw, .okicss .header .menu a[class~=on] .rtw {
transform: translateY(-62%);
opacity: 1; }
.okicss .header .tel {
position: absolute;
right: 20px;
top: 5px;
font-size: 13pt;
font-weight: 200;
color: #ad871d;
letter-spacing: 0.05em; }
.okicss .header .tel a {
text-decoration: none;
color: #ad871d; }
.okicss .header .hopen, .okicss .header .hlinks, .okicss .header .hsch {
display: inline-block; }
.okicss .header .hopen {
margin-left: 10px;
cursor: pointer; }
.okicss .header .hlinks {
padding-left: 20px; }
.okicss .header .hsch {
position: absolute;
right: 10px;
top: 0px;
cursor: pointer; }
.okicss .header .schbox {
height: 60px;
padding: 0 10px;
box-sizing: border-box;
position: absolute;
right: 0px;
top: 0px; }
.okicss .header .schbox button {
border: 0px;
padding: 0px;
height: 60px;
box-sizing: border-box;
vertical-align: top;
background: #fff; }
.okicss .header .schbox input {
box-sizing: border-box;
padding: 5px;
height: 40px;
vertical-align: top;
margin-top: 10px; }
@media (max-width: 1280px) {
.okicss .header {
}
.okicss .header .logo {
left: 15px;
top: 15px; } }
@media (max-width: 1080px) {
.okicss .header {
height: 50px;
min-height: 50px;
}
.okicss .header .header-bg {
height: 50px; }
.okicss .header .logo {
-left: calc(50% + 10px);
-transform: translate(-50%, 0); }
.okicss .header .logo img {
height: 50px;
width: auto; }
.okicss .header .tel, .okicss .header .fas {
top: 0px;
height: 50px;
line-height: 50px; }
.okicss .header .tel {
right: 0px; }
.okicss .header .tel a, .okicss .header .tel .fa-phone {
display: none; } }
@media (max-width: 640px) {
.okicss .header {
}
.okicss .header .menu a {
display: block;
width: 88px;
font-size: 9pt; }
.okicss .header .menu a .ren, .okicss .header .menu a .rtw {
font-size: 8pt; } }
.okicss {
}
.okicss .header {
}
.okicss .header .dropbtn {
display: inline-block;
position: relative; }
.okicss .header .dropbtn .dropbox {
height: auto;
max-height: 0px;
opacity: 0;
overflow: hidden;
position: absolute;
left: 50%;
top: 0px;
transition: 0.3s ease-in-out;
transform: translateX(-50%);
min-width: 100px;
background: rgba(255, 255, 255, .9);
border-radius: 5px;
padding: 10px; }
.okicss .header .dropbtn .dropbox a {
font-size: 11pt;
display: block;
line-height: 22px; }
.okicss .header .dropbtn:hover .dropbox {
top: 60px;
opacity: 1;
height: auto;
max-height: 100vh;
overflow: visible;
box-shadow: 0 0 10px rgba(0, 0, 0, .6); }
@media (max-width: 1280px) {
.okicss .header {
} }
@media (max-width: 1080px) {
.okicss .header {
} }
@media (max-width: 640px) {
.okicss .header {
} }
.okicss {
}
.okicss .header {
}
.okicss .header .mbmenu {
width: 100%;
display: none;
position: absolute;
left: 0px;
top: 0px; }
@media (max-width: 1280px) {
.okicss .header {
} }
@media (max-width: 1080px) {
.okicss .header {
}
.okicss .header .mbmenu {
-display: block;
}
.okicss .header .mbtn {
display: block;
width: 26px;
height: 26px;
position: absolute;
left: 12px;
top: 12px;
z-index: 9999;
}
.okicss .header .mbtn i {
display: block;
height: 2px;
width: 90%;
position: absolute;
background: #ad871d;
border-radius: 5px;
transition: all 0.3s; }
.okicss .header .mbtn i:nth-of-type(1) {
top: 10%; }
.okicss .header .mbtn i:nth-of-type(2) {
top: calc(50% - 1px); }
.okicss .header .mbtn i:nth-of-type(3) {
bottom: 10%; }
.okicss .header[class~=on] {
}
.okicss .header[class~=on] .mbtn i:nth-of-type(1) {
top: 10%;
display: none; }
.okicss .header[class~=on] .mbtn i:nth-of-type(2) {
top: 15px;
transform: rotate(45deg); }
.okicss .header[class~=on] .mbtn i:nth-of-type(3) {
top: 15px;
bottom: none;
transform: rotate(-45deg); }
.okicss .header .menubox {
width: 100%;
z-index: 9990;
position: absolute;
left: 0px;
top: 0px;
background: rgba(255, 255, 255, .85);
height: 100vh;
max-height: 0vh;
overflow: hidden;
transition: all 0.3s; }
.okicss .header .menubox a {
display: none;
vertical-align: middle;
letter-spacing: 2px; }
.okicss .header .inbox {
overflow: auto;
width: 100%;
height: calc(100% - 60px);
margin-top: 60px;
display: block; }
.okicss .header[class~=on] {
}
.okicss .header[class~=on] .mbmenu {
height: 100vh; }
.okicss .header[class~=on] .menubox {
max-height: 105vh;
overflow: hidden;
transition: all 0.5s ease-in-out; }
.okicss .header[class~=on] .menubox a {
display: block;
text-align: left;
text-decoration: none;
color: #000;
padding: 10px 10px;
margin: 0px 0px;
box-sizing: border-box;
font-size: 12pt;
background-color: rgba(0, 0, 0, 0); }
.okicss .header[class~=on] .menubox a:hover {
background-color: rgba(173, 135, 29, .2); }
.okicss .header[class~=on] .menubox > .inbox > a:nth-of-type(1) {
margin-top: 10px; }
.okicss .header .subbox {
max-height: 0px;
height: auto;
overflow: hidden;
transition: all 0.3s ease-in-out;
padding-left: 10px;
box-sizing: border-box;
margin: 0px 7px; }
.okicss .header .subbtn {
display: block; }
.okicss .header .subbtn .fas {
height: 28px;
line-height: inherit;
transition: all 0.1s ease-in-out;
transform: rotate(-90deg); }
.okicss .header .subbtn[class~=on] .fas {
transform: rotate(0deg); }
.okicss .header .subbtn[class~=on] .subbox {
max-height: 100vh;
margin: 5px 15px;
padding: 5px 0;
height: auto;
overflow: visible;
transition: all 0.5s ease-in-out;
border-top: 1px solid #ad871d;
border-bottom: 1px solid #ad871d; } }
@media (max-width: 640px) {
.okicss .header {
} }
.okicss {
}
.okicss .header {
}
@media (max-width: 1280px) {
.okicss .header {
} }
@media (max-width: 1080px) {
.okicss .header {
} }
@media (max-width: 640px) {
.okicss .header {
} }
.okicss {
}
.okicss .header {
}
.okicss .header .dropbtn {
display: inline-block;
position: relative; }
.okicss .header .dropbtn .dropbox {
height: auto;
max-height: 0px;
opacity: 0;
overflow: hidden;
position: absolute;
left: 50%;
top: 0px;
transition: 0.3s ease-in-out;
transform: translateX(-50%);
min-width: 100px;
background: rgba(255, 255, 255, .9);
border-radius: 5px;
padding: 10px; }
.okicss .header .dropbtn .dropbox a {
font-size: 11pt;
display: block;
line-height: 22px; }
.okicss .header .dropbtn:hover .dropbox {
top: 60px;
opacity: 1;
height: auto;
max-height: 100vh;
overflow: visible;
box-shadow: 0 0 10px rgba(0, 0, 0, .6); }
@media (max-width: 1280px) {
.okicss .header {
} }
@media (max-width: 1080px) {
.okicss .header {
} }
@media (max-width: 640px) {
.okicss .header {
} }
html, body, button, * {
font-family: "Times New Roman", "Serif", '*Raleway*', 'Lato', "PingFang TC", "Heiti TC", "Noto Sans TC", aktiv-grotesk, source-han-sans-traditional, "Segoe UI", Roboto, "Helvetica Neue", "Microsoft JhengHei", "Microsoft YaHei", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
margin: 0px;
padding: 0px; }
html, body {
background-color: #ccc !important; }
.okicss {
}
.okicss a {
text-decoration: none;
color: #333; }
.okicss a:hover {
text-decoration: none;
color: #55e; }
.okicss .container {
width: 100%;
padding: 0;
margin: 0 auto;
max-width: 1920px;
position: relative;
box-sizing: border-box;
background-attachment: fixed; }
.okicss .content {
min-height: calc(100vh - 80px); }
.okicss .content .topseg {
height: 68px;
width: 100%;
display: block;
}
.okicss .wmid {
width: 100%;
max-width: 1280px;
margin: auto; }
.okicss .ptr {
cursor: pointer; }
.okicss .abscenter {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: block; }
.okicss .bgcenter {
background-position: center center;
background-size: cover; }
.okicss *:focus {
outline-style: none;
box-shadow: none;
border-color: transparent;
}
.okicss .lazy {
opacity: 0;
transition: all 0.3s;
-webkit-transition: all 0.3s;
background-size: cover;
background-position: center center c; }
.okicss .lazy[class~=lzon] {
opacity: 1; }
.okicss .lazy img.lazybg {
opacity: 0;
width: 100%;
height: 100%;
position: absolute; }
.okicss .full {
width: 100%;
}
.okicss .nopage {
padding: 60px 0px;
}
.okicss .nopage .nt {
font-size: 14pt;
padding: 40px 0px; }
.okicss .nopage .back {
text-decoration: none;
color: #333;
display: inline-block;
padding: 5px 0px;
border-bottom: 2px solid #666; }
.okicss .nopage .back:hover {
color: #ad871d;
border-bottom: 2px solid #ad871d; }
.okicss .ctag {
display: block;
position: fixed;
left: 0px;
top: 150px;
width: 25px;
z-index: 999; }
.okicss .ctag img {
width: 100%; }
.okicss .casetype {
display: block;
position: fixed;
left: 50%;
width: 100%;
transform: translateX(-50%);
max-width: 1920px;
text-align: right;
top: 80px;
z-index: 2000; }
.okicss .casetype img {
width: 80px; }
.okicss .casetype .caselink {
display: none;
position: absolute;
right: 0px;
width: 80px;
border: 1px solid #ad871d;
background-color: #fff; }
.okicss .casetype .caselink a {
display: block;
font-size: 12pt;
text-align: center;
color: #ad871d;
padding: 5px 0px; }
.okicss .casetype .caselink a:hover, .okicss .casetype .caselink a[class~=on] {
color: #fff;
background-color: #ad871d; }
.okicss .casetype[class~=on] {
}
.okicss .casetype[class~=on] .caselink {
display: block; }
.okicss ::-webkit-scrollbar {
width: 5px;
}
.okicss ::-webkit-scrollbar-track {
background: #f1f1f1;
}
.okicss ::-webkit-scrollbar-thumb {
background: #aaa;
}
.okicss ::-webkit-scrollbar-thumb:hover {
background: #ccc; }
@media (max-width: 1280px) {
.okicss {
}
.okicss .wmid {
box-sizing: border-box;
padding: 10px; } }
@media (max-width: 1080px) {
.okicss {
}
.okicss .content .topseg {
height: 50px; } }
@media (max-width: 640px) {
.okicss {
}
.okicss .ctag {
display: block;
position: fixed;
left: 0px;
top: 100px;
width: 25px; }
.okicss .ctag img {
width: 100%; }
.okicss .casetype {
top: 55px; }
.okicss .casetype img {
width: 45px; }
.okicss .casetype .caselink {
width: 45px; }
.okicss .casetype .caselink a {
font-size: 9pt; } }
.okicss {
}
.okicss .icnset21 {
width: 100%;
display: flex;
flex-direction: row column;
justify-content: left;
flex-wrap: wrap; }
.okicss .icnset21 .icncol {
display: block;
flex: 33.3%;
flex-grow: 0;
flex-shrink: 1;
text-align: center;
position: relative;
padding-top: 20px;
padding-bottom: 70px; }
.okicss .icnset21 .icncol .icn {
width: 25%;
aspect-ratio: 100 / 100;
height: auto; }
.okicss .icnset21 .icncol p {
font-size: 11pt;
width: 70%;
margin: 10px auto; }
.okicss .icnset21 .icncol it {
display: block;
position: absolute;
left: 50%;
bottom: 25px;
border: 0px solid #000;
background: #644;
color: #fff;
width: 60%;
padding: 8px 0;
border-radius: 25px;
transform: translate(-50%, 0%);
cursor: pointer;
transition: 0.3s all ease-in-out; }
.okicss .icnset21 .icncol it:hover {
background: #311;
text-shadow: 0 0 10px #fff; }
@media (max-width: 1280px) {
.okicss {
} }
@media (max-width: 1080px) {
.okicss {
} }
@media (max-width: 640px) {
.okicss {
}
.okicss .icnset21 {
width: 100%;
margin: auto; }
.okicss .icnset21 .icncol {
flex: 50%;
padding-top: 10px;
padding-bottom: 60px; }
.okicss .icnset21 .icncol .icn {
width: 80%;
aspect-ratio: 1 / 1; }
.okicss .icnset21 .icncol p {
font-size: 9pt; }
.okicss .icnset21 .icncol it {
width: 84%;
font-size: 10.5pt; } }
.okicss {
}
.okicss .itm21 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
xjustify-content: space-between;
}
.okicss .itm21 .col:nth-of-type(4n) {
margin-right: 0%; }
.okicss .itm21 .col {
display: block;
margin-right: 2%;
box-sizing: border-box;
flex: 23.5%;
flex-grow: 0;
flex-shrink: 0;
text-align: center;
position: relative;
padding: 0px;
padding-bottom: 30px;
margin-top: 30px;
border: 3px solid #eee;
}
.okicss .itm21 .col a {
text-decoration: none;
}
.okicss .itm21 .col a .pic {
width: 100%;
aspect-ratio: 1/1;
overflow: hidden;
position: relative;
background-color: #000; }
.okicss .itm21 .col a .pic .pin {
display: block;
background-position: center center;
background-size: cover;
width: 100%;
aspect-ratio: 1/1;
transition: 0.3s all ease-in-out;
transform: scale(1, 1); }
.okicss .itm21 .col a .pic .fas {
opacity: 0;
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
width: 18%;
aspect-ratio: 1/1;
background-color: rgba(255, 255, 255, .8);
border-radius: 100%;
background-position: center center;
transition: 0.3s all cubic-bezier(0.075, 0.82, 0.165, 1); }
.okicss .itm21 .col a .pic .fas::before {
position: absolute;
left: 50%;
top: 50%;
font-size: 120%;
transform: translate(-50%, -50%);
color: #333; }
.okicss .itm21 .col a .info {
padding: 10px 20px; }
.okicss .itm21 .col a .info .it {
color: #000;
padding: 10px 0;
font-size: 14pt;
text-align: center;
margin: auto;
border-bottom: 2px solid #ad871d;
display: inline-block; }
.okicss .itm21 .col a .info .if {
color: #666;
padding: 4px 0;
font-size: 12pt;
text-align: justify;
margin: auto;
margin-top: 5px; }
.okicss .itm21 .col a:hover .pic .pin {
transform: scale(1.1, 1.1);
opacity: 0.6; }
.okicss .itm21 .col a:hover .fas {
top: 50%;
opacity: 1; }
@media (max-width: 1280px) {
.okicss {
} }
@media (max-width: 1080px) {
.okicss {
} }
@media (max-width: 640px) {
.okicss {
}
.okicss .itm21 .col:nth-of-type(2n) {
margin-right: 0%; }
.okicss .itm21 .col {
margin-right: 4%;
flex: 48%;
flex-grow: 0;
flex-shrink: 0;
padding-bottom: 10px; }
.okicss .itm21 .col a .info .it {
font-size: 12pt; }
.okicss .itm21 .col a .info .if {
font-size: 10pt; } }
.okicss {
}
.okicss ul.list21, .okicss ol.list21 {
counter-reset: index;
padding: 0; }
.okicss ul.list21 li, .okicss ol.list21 li {
counter-increment: index;
display: flex;
align-items: center;
padding: 12px 0;
box-sizing: border-box;
position: relative;
padding-right: 100px;
}
.okicss ul.list21 li::before, .okicss ol.list21 li::before {
content: counters(index, ".", decimal-leading-zero);
font-size: 1.5rem;
text-align: right;
font-weight: bold;
min-width: 50px;
padding-right: 12px;
font-variant-numeric: tabular-nums;
align-self: flex-start;
background-image: linear-gradient(to bottom, aquamarine, orangered);
background-attachment: fixed;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.okicss ul.list21 li + li, .okicss ol.list21 li + li {
border-top: 1px solid rgba(255, 255, 255, 0.2); }
.okicss ol.list21 li::before {
content: "●";
font-weight: bold;
border-radius: 30px;
width: 50px;
height: 50px;
display: block;
line-height: 50px;
background-image: linear-gradient(to bottom, aquamarine, orangered); }
@use postcss-preset-env {
stage: 0;
autoprefixer-grid: true;
browsers: last 2 versions; }
@media (max-width: 1280px) {
.okicss {
} }
@media (max-width: 1080px) {
.okicss {
} }
@media (max-width: 640px) {
.okicss {
} }
.okicss {
}
.okicss .page-title {
width: 100%;
height: 200px;
text-align: center;
position: relative;
background-position: center center;
margin-bottom: 50px; }
.okicss .page-title h1 {
font-size: 20pt;
letter-spacing: 0.2em;
padding: 10px;
display: inline-block;
font-weight: 200;
border-bottom: 2px solid #ad871d; }
.okicss .page-title .breadcrumb {
display: block;
text-align: center;
background-color: transparent;
padding: 0px;
margin: 0px;
margin-top: 2px;
font-size: 9pt; }
.okicss .page-title .breadcrumb a {
color: #666;
letter-spacing: 0.1em;
text-decoration: none; }
.okicss .page-title .breadcrumb a:hover {
color: #ad871d; }
.okicss .sec-title {
margin: auto;
width: 50%;
min-width: 50%;
padding: 30px auto;
box-sizing: border-box;
display: flex;
}
.okicss .sec-title::before, .okicss .sec-title::after {
content: '';
flex: 1;
display: block;
border-bottom: 1px solid #000;
transform: translate(0, -50%); }
.okicss .sec-title st {
font-size: 18pt;
padding: 30px;
text-align: center; }
.okicss .tagbox {
padding: 10px 0px; }
.okicss .tagbox a {
text-decoration: none; }
.okicss .tagbox i {
border: 1px solid #ad871d;
font-size: 11pt;
padding: 5px;
color: #ad871d;
transition: 0.3s all ease-in-out;
font-style: normal; }
.okicss .tagbox i:hover {
background-color: rgba(173, 135, 29, .8);
color: #fff; }
.okicss .sec {
min-height: 100px; }
.okicss .sec-ubm {
padding-bottom: 40px; }
.okicss .sec-b {
width: 100%;
height: 40vw;
}
.okicss .okibtn {
border-radius: 30px;
padding: 10px 20px; }
@media (max-width: 1280px) {
.okicss {
} }
@media (max-width: 1080px) {
.okicss {
} }
@media (max-width: 640px) {
.okicss {
}
.okicss .page-title {
height: 150px;
margin-bottom: 30px; }
.okicss .page-title h1 {
font-size: 14pt;
width: auto;
min-width: 120px;
word-break: keep-all; }
.okicss .sec-title {
width: 90%; }
.okicss .sec-title st {
padding: 20px; } }
.okicss {
}
.okicss .pager21 {
padding-top: 40px;
text-align: center; }
.okicss .pager21 nav {
display: inline-block; }
.okicss .pager21 ul.pagination > li.page-item a {
border-radius: 40px;
margin: 5px;
border: 0px solid #000;
background-color: #ddd;
color: #000;
font-size: 10pt; }
.okicss .pager21 ul.pagination > li.page-item a:hover {
background-color: #555;
color: #fff; }
.okicss .pager21 ul.pagination > li.page-item[class~=active] a {
background-color: #555;
color: #fff; }
@media (max-width: 1280px) {
.okicss {
} }
@media (max-width: 1080px) {
.okicss {
} }
@media (max-width: 640px) {
.okicss {
} }
.okicss {
}
.okicss .btmsldbox {
display: block;
width: 100%;
height: 300px;
}
.okicss .btmsldbox .owl-dots {
display: none; }
.okicss .btmsldbox .item {
position: relative; }
.okicss .btmsldbox a {
display: block;
position: absolute;
width: 100%;
height: 100%;
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.okicss .btmsldbox a:hover {
background-color: rgba(0, 0, 0, .5); }
.okicss .btmsldbox a:hover .cbox {
opacity: 1;
top: 50%; }
.okicss .btmsldbox a .cbox {
color: #fff;
opacity: 0;
position: absolute;
left: 50%;
top: 60%;
transform: translate(-50%, -50%);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
text-align: center; }
.okicss .btmsldbox a .cbox .sn {
font-size: 9pt; }
.okicss .btmsldbox a .fas {
width: 60px;
height: 60px;
aspect-ratio: 1 / 1;
background-color: rgba(255, 255, 255, .8);
border-radius: 100%;
background-position: center center;
position: relative; }
.okicss .btmsldbox a .fas::before {
position: absolute;
left: 50%;
top: 50%;
font-size: 200%;
transform: translate(-50%, -50%);
color: #ad871d; }
.okicss .modal-sch .htag a {
font-size: 9pt;
color: #333; }
.okicss .modal-sch .htag a:hover {
color: #ad871d; }
@media (max-width: 1280px) {
.okicss {
} }
@media (max-width: 1080px) {
.okicss {
} }
@media (max-width: 640px) {
.okicss {
}
.okicss .btmsldbox {
display: block;
width: 100%;
height: 66vw; }
.okicss .btmsldbox .owl-dots {
display: block; } }
.okicss {
/*1920--------------------------------------*/
/*end okicss*/ }
.okicss .page-casesp {
background-size: 100%;
background-position: top center;
background-color: #ebebeb;
background-repeat: no-repeat; }
.okicss .tseg-case {
height: 0px; }
.okicss .casesp-pc {
display: block;
width: 100%;
height: 100%;
min-height: calc(.6 * 1920px);
background-size: 97%;
background-position: left center;
background-repeat: no-repeat;
overflow: hidden;
position: relative;
cursor: move; }
.okicss .casesp-in {
position: absolute;
height: 100%;
min-width: 1920px;
min-height: 100vh;
left: 0px;
top: 0px;
display: flex;
flex-direction: row;
flex-wrap: nowrap; }
.okicss .casesp-rel {
position: relative;
width: 100%;
height: 100%;
min-width: 1920px;
min-height: 100vh;
flex: 100%;
border: 0px solid #f00; }
.okicss .casesp-mb {
display: none;
width: 100%;
height: 100vh;
min-height: 100vh;
background-size: 100% 100%;
background-attachment: fixed;
background-position: 10% top;
background-repeat: no-repeat;
/*dx*/ }
.okicss .dx {
border: 0px solid #f00;
position: absolute; }
.okicss .dx div {
border: 0px solid #f00; }
.okicss .dx .relbox {
position: relative;
width: 100%;
height: 100%; }
.okicss .dx .d {
position: absolute;
color: #ad871d; }
.okicss .dx .pbox img {
width: 100%; }
.okicss .dx .stitle {
font-size: calc(.01 * 1920px); }
.okicss .dx .yr {
color: #fff;
background-color: #ad871d;
display: inline-block;
padding: 1px 10px;
box-sizing: border-box;
font-weight: bold;
font-size: calc(.007 * 1920px);
line-height: calc(.007 * 1920px); }
.okicss .dx .bbox {
font-size: calc(.007 * 1920px); }
.okicss .dx .nbox {
font-weight: bold; }
.okicss .dx-a {
width: 12%;
padding-bottom: 8%;
left: 3%;
top: calc(.08 * 1920px); }
.okicss .dx-a .stitle {
top: calc(.12 * 1920px);
width: calc(.15 * 1920px);
left: 105%; }
.okicss .dx-a .bbox {
top: calc(.127 * 1920px);
width: calc(.2 * 1920px);
left: 0%;
letter-spacing: calc(.005 * 1920px); }
.okicss .dx-a .nbox {
left: 105%;
top: calc(.064 * 1920px);
font-size: calc(.03 * 1920px); }
.okicss .dx-b {
width: 22%;
padding-bottom: 23%;
left: 21%;
top: calc(.21 * 1920px); }
.okicss .dx-b .stitle {
top: calc(.122 * 1920px);
width: calc(.15 * 1920px);
left: 100%; }
.okicss .dx-b .bbox {
top: calc(.13 * 1920px);
width: calc(.2 * 1920px);
left: -87%;
text-align: right;
font-size: calc(.01 * 1920px);
letter-spacing: calc(.001 * 1920px); }
.okicss .dx-b .nbox {
left: 100%;
top: calc(.07 * 1920px);
font-size: calc(.04 * 1920px); }
.okicss .dx-c {
width: 23%;
padding-bottom: 12%;
left: 42%;
top: calc(.3 * 1920px); }
.okicss .dx-c .stitle {
top: calc(.122 * 1920px);
width: calc(.15 * 1920px);
left: 102%; }
.okicss .dx-c .bbox {
top: calc(.14 * 1920px);
width: calc(.2 * 1920px);
left: -2%;
text-align: left;
font-size: calc(.011 * 1920px);
letter-spacing: calc(.001 * 1920px); }
.okicss .dx-c .nbox {
left: 102%;
top: calc(.07 * 1920px);
font-size: calc(.04 * 1920px); }
.okicss .dx-d {
width: 18%;
padding-bottom: 23%;
left: 57%;
top: calc(.08 * 1920px); }
.okicss .dx-d .stitle {
top: calc(.102 * 1920px);
width: calc(.15 * 1920px);
left: 103%; }
.okicss .dx-d .bbox {
top: calc(.12 * 1920px);
width: calc(.2 * 1920px);
left: 103%;
text-align: left;
font-size: calc(.011 * 1920px);
letter-spacing: calc(.001 * 1920px); }
.okicss .dx-d .nbox {
left: 103%;
top: calc(.05 * 1920px);
font-size: calc(.04 * 1920px); }
@media (max-width: 1920px) {
.okicss {
/*w:1920*/
/*casesp-mb ---------------------------------------------------------------------------------------------------*/ }
.okicss .casesp-pc {
min-height: 60vw; }
.okicss .casesp-in {
min-width: 100vw; }
.okicss .casesp-rel {
width: 100vw;
min-width: 100vw; }
.okicss .casesp-mb {
height: 100vh;
min-height: 100vh;
background-size: 12vw;
/*dx*/ }
.okicss .dx .stitle {
font-size: 1vw; }
.okicss .dx .yr {
font-size: 1vw;
line-height: 1vw; }
.okicss .dx .bbox {
font-size: 0.7vw; }
.okicss .dx-a {
top: 8vw; }
.okicss .dx-a .stitle {
top: 10.2vw;
width: 15vw;
left: 105%; }
.okicss .dx-a .bbox {
top: 12.7vw;
width: 20vw;
letter-spacing: 0.05vw; }
.okicss .dx-a .nbox {
top: 6.4vw;
font-size: 3vw; }
.okicss .dx-b {
top: 16vw; }
.okicss .dx-b .stitle {
top: 12.2vw;
width: 15vw;
left: 100%; }
.okicss .dx-b .bbox {
top: 16vw;
width: 20vw;
font-size: 1.3vw;
letter-spacing: 0.1vw; }
.okicss .dx-b .nbox {
top: 7vw;
font-size: 4vw; }
.okicss .dx-c {
top: 31vw; }
.okicss .dx-c .stitle {
top: 12.2vw;
width: 15vw; }
.okicss .dx-c .bbox {
top: 14vw;
width: 20vw;
font-size: 1.1vw;
letter-spacing: 0.1vw; }
.okicss .dx-c .nbox {
top: 7vw;
font-size: 4vw; }
.okicss .dx-d {
top: 8vw; }
.okicss .dx-d .stitle {
top: 10.2vw;
width: 15vw; }
.okicss .dx-d .bbox {
top: 12vw;
width: 20vw;
font-size: 1.1vw;
letter-spacing: 0.1vw; }
.okicss .dx-d .nbox {
top: 5vw;
font-size: 4vw; } }
.okicss .casesp-mb {
height: 100%;
min-height: 100vh;
overflow-x: hidden;
padding-bottom: 30vw;
/*-mb*/ }
.okicss .casesp-mb .casesp-rel {
display: block;
overflow: hidden;
width: 100vw;
height: 190vw;
min-height: 100vw; }
.okicss .casesp-mb .dx .yr {
color: #fff;
background-color: #ad871d;
display: inline-block;
padding: 3px 10px;
box-sizing: border-box;
font-weight: bold;
font-size: 2vw;
line-height: 2.1vw; }
.okicss .casesp-mb .dx-a {
width: 35%;
padding-bottom: 8%;
left: 30%;
top: 8vw; }
.okicss .casesp-mb .dx-a .stitle {
left: -28.5vw;
top: 30.5vw;
font-size: 2vw;
width: 28vw;
text-align: right; }
.okicss .casesp-mb .dx-a .bbox {
top: 20.5vw;
width: 35vw;
left: 37vw;
font-size: 3vw;
letter-spacing: 0.05vw; }
.okicss .casesp-mb .dx-a .nbox {
left: -28.5vw;
top: 19.5vw;
font-size: 9vw;
width: 28vw;
text-align: right; }
.okicss .casesp-mb .dx-b {
width: 45%;
padding-bottom: 23%;
left: 5%;
top: 49vw; }
.okicss .casesp-mb .dx-b .stitle {
top: 17.2vw;
width: 30vw;
left: 103%;
font-size: 2vw; }
.okicss .casesp-mb .dx-b .bbox {
top: 23.2vw;
width: 48vw;
left: 103%;
text-align: left;
font-size: 3vw;
letter-spacing: 0.1vw; }
.okicss .casesp-mb .dx-b .nbox {
left: 100%;
top: 0vw;
font-size: 14vw; }
.okicss .casesp-mb .dx-c {
width: 45%;
padding-bottom: 12%;
left: 42%;
top: 92vw; }
.okicss .casesp-mb .dx-c .stitle {
left: 50%;
top: 42vw;
width: 30vw;
font-size: 2vw; }
.okicss .casesp-mb .dx-c .bbox {
top: 14vw;
width: 40vw;
left: -90%;
text-align: right;
font-size: 3vw;
letter-spacing: 0.1vw; }
.okicss .casesp-mb .dx-c .nbox {
left: 50%;
top: 25vw;
font-size: 14vw; }
.okicss .casesp-mb .dx-d {
width: 43%;
padding-bottom: 23%;
left: 5%;
top: 137vw; }
.okicss .casesp-mb .dx-d .stitle {
top: 16.2vw;
width: 45vw;
left: 103%;
font-size: 2vw; }
.okicss .casesp-mb .dx-d .bbox {
top: 22vw;
width: 50vw;
left: 103%;
text-align: left;
font-size: 3vw;
letter-spacing: 0.1vw; }
.okicss .casesp-mb .dx-d .nbox {
left: 103%;
top: 0vw;
font-size: 14vw; }
@media (max-width: 1280px) {
.okicss {
/*w:1280*/ } }
@media (max-width: 1080px) {
.okicss {
/*w:1080*/ } }
@media (max-width: 800px) {
.okicss {
/*w:640*/ }
.okicss .tseg-case {
height: 80px; }
.okicss .casesp-pc {
display: none; }
.okicss .casesp-mb {
display: block;
background-size: 10vw 100vh;
background-position: 5vw -10vh; }
.okicss .casesp-mb .casesp-rel {
display: block;
overflow: hidden;
width: 100vw;
height: 180vw; } }