/*home in*/
html, body, button, * {
font-family: '*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; }
.abs {
position: absolute; }
.local .abtn {
background-color: rgba(255, 0, 0, .6); }
.abtn img {
width: 100%;
height: 100%;
display: block; }
.bold {
font-weight: bold;
}
::-webkit-scrollbar {
width: 3px;
height: 3px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #aaa;
}
::-webkit-scrollbar-thumb:hover {
background: #ccc; }
.okicss {
}
.okicss body {
-background-color: #fff3db; }
.okicss .container {
width: 100%;
padding: 0;
margin: 0;
max-width: 100%; }
.okicss .content {
width: 100%;
-max-width: 1920px;
max-width: 480px;
margin: auto; }
.okicss .content .topseg {
height: 68px;
width: 100%;
display: block; }
.okicss .rel {
position: relative; }
.okicss .relbox {
position: relative;
width: 100%;
height: 100%;
}
.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%;
display: block;
}
.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: #af1e23;
border-bottom: 2px solid #af1e23; }
@media (max-width: 1280px) {
.okicss {
}
.okicss .wmid {
box-sizing: border-box; } }
@media (max-width: 1080px) {
.okicss {
}
.okicss .content .topseg {
height: 50px; } }
@media (max-width: 640px) {
.okicss {
} }
.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 .ani2up {
transform: translateY(20%);
opacity: 0;
transition: none; }
.okicss .animated .ani2up {
transform: translateY(0%);
opacity: 1;
transition: all 0.8s ease-in-out; }
.okicss .ani2down {
transform: translateY(-20%);
opacity: 0;
transition: none; }
.okicss .animated .ani2down {
transform: translateY(0%);
opacity: 1;
transition: all 0.8s ease-in-out; }
.okicss .ani2right {
transform: translateX(-20%);
opacity: 0;
transition: none; }
.okicss .animated .ani2right {
transform: translateX(0%);
opacity: 1;
transition: all 0.8s ease-in-out; }
.okicss .ani2left {
transform: translateX(20%);
opacity: 0;
transition: none; }
.okicss .animated .ani2left {
transform: translateX(0%);
opacity: 1;
transition: all 0.8s ease-in-out; }
.okicss .ani2big {
transform: scale(0.8);
opacity: 0;
transition: none; }
.okicss .animated .ani2big {
transform: scale(1);
opacity: 1;
transition: all 0.8s ease-in-out; }
.okicss .ani2show {
opacity: 0;
transition: none; }
.okicss .animated .ani2show {
opacity: 1;
transition: all 0.8s ease-in-out; }
.okicss {
}
.okicss .okitbox {
display: block;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9990;
}
.okicss .okitbox .cbox {
display: block;
width: 95%;
max-width: 320px;
min-height: 320px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-background-color: #c6b4e4;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.8); }
.okicss .okitbox .rel {
display: block;
width: 100%;
height: 100%;
position: relative; }
.okicss .okitbox .okitbox_close {
position: absolute;
display: block;
width: 40px;
height: 40px;
right: -10px;
top: -10px;
border-radius: 50px;
border: 3px solid #7d55c7;
overflow: hidden;
cursor: pointer;
box-shadow: 0 0 10px rgba(0, 0, 0, .6); }
.okicss .okitbox .cbody {
padding: 15px;
box-sizing: border-box; }
.okicss .okitbox .okitbox_close img {
width: 100%; }
.okicss .okitbox input[type=text], .okicss .okitbox input[type=date] {
padding: 8px 10px;
box-sizing: border-box;
width: 100%; }
.okicss .okitbox input[class~=err] {
border: 1px solid red; }
.okicss .okitbox .skin label {
display: inline-block;
width: 45%;
padding-bottom: 10px; }
.okicss .okitbox table {
width: 100%; }
.okicss .okitbox table td {
vertical-align: top;
font-size: 11pt;
padding-bottom: 10px; }
.okicss .okitbox table.infobox tr td:nth-child(1) {
width: 60px; }
.okicss .okitbox .note {
font-size: 10pt;
padding: 20px 0px; }
.okicss .okitbox .t-right {
text-align: right; }
.okicss .okitbox button {
width: 100%;
padding: 10px;
box-sizing: border-box;
background-color: #7d55c7;
border: 0;
border-radius: 5px;
font-size: 10pt;
color: #fff;
cursor: pointer;
margin-top: 10px; }
@media (max-width: 1280px) {
.okicss .okitbox {
} }
@media (max-width: 1080px) {
.okicss .okitbox {
} }
@media (max-width: 640px) {
.okicss .okitbox {
} }
.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: 30px;
height: auto;
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: 0px; }
.okicss .slider .next {
right: 0px; }
.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: #af1e23;
background-color: #af1e23; }
@media (max-width: 1920px) {
.okicss {
} }
@media (max-width: 640px) {
.okicss {
} }
.regbox {
display:block;
position:fixed;
left:0;
top:0;
width:100%;
height:100vh;
background-color:rgba(0,0,0,0.8);
z-index:9990;
}
.regbox .cbox {
display:block;
width:95%;
max-width:320px;
min-height:320px;
position:fixed;
left:50%;
top:50%;
transform:translate(-50%,-50%);
background-color:#c6b4e4;
border-radius:10px;
box-shadow:0 0 30px rgba(0,0,0,0.8);
}
.regbox .rel {
display:block;
width:100%;
height:100%;
position:relative;
}
.regbox .reg_close {
position:absolute;
display:block;
width:40px;
height:40px;
right:-10px;
top:-10px;
border-radius:50px;
overflow:hidden;
cursor:pointer;
}
.regbox .cbody {
padding:15px;
box-sizing:border-box;
}
.regbox .reg_close img {
width:100%;
}
.regbox input[type=text],.regbox input[type=date] {
padding:8px 10px;
box-sizing:border-box;
width:100%;
}
.regbox input[class~=err] {
border:1px solid red;
}
.regbox .skin label {
display:inline-block;
width:45%;
padding-bottom:10px;
}
.regbox table {
width:100%;
}
.regbox table td {
vertical-align:top;
font-size:11pt;
padding-bottom:10px
}
.regbox table.infobox tr td:nth-child(1) {
width:60px;
}
.regbox .note {
font-size:10pt;
padding:20px 0px;
}
.regbox .t-right {
text-align:right
}
.regbox button {
width:100%;
padding:10px;
box-sizing:border-box;
background-color:#7d55c7;
border:0;
border-radius:5px;
font-size:10pt;
color:#fff;
cursor:pointer;
margin-top:10px;
}
.okicss {
}
.okicss .footer {
}
@media (max-width: 760px) {
.okicss .footer {
} }
@media (max-width: 640px) {
.okicss .footer {
} }
.okicss {
}
.okicss .header {
display: block;
position: fixed;
width: 100%;
-max-width: 1440px;
left: 50%;
transform: translateX(-50%);
z-index: 20;
background-color: rgba(150, 120, 211, 0.9);
top: 0px;
height: 83px;
transition: all cubic-bezier(0.075, 0.82, 0.165, 1) 0.5s;
}
.okicss .header .wmid {
width: 100%;
max-width: 1440px;
position: relative;
margin: auto;
-box-shadow: 0 5px 5px rgba(0, 0, 0, .5);
padding: 0px; }
.okicss .header .logo {
position: absolute;
left: 10px;
top: 10px;
width: 120px; }
.okicss .header .abtn {
top: 0px;
width: 25%;
height: 100%; }
.okicss .header .mb {
display: none; }
.okicss .header .hbtns {
right: 10px; }
.okicss .header .hbtns a {
display: inline-block;
border-right: 1px solid #fff;
color: #fff;
height: 12px;
line-height: 12px;
vertical-align: middle;
margin-left: 0px;
margin-top: 30px;
font-size: 16px;
text-decoration: none;
-box-sizing: border-box;
padding: 5px 15px;
position: relative; }
.okicss .header .hbtns a:last-of-type {
border-right: none; }
.okicss .header .hbtns a:hover {
background-color: rgba(0, 0, 0, .2); }
.okicss .header .hbtns a:hover .submenu {
height: auto;
max-height: 100vh; }
.okicss .header .pc .submenu {
position: absolute;
overflow: hidden;
transition: 0.5s all;
left: 50%;
top: 23px;
height: 0px;
max-height: 0vh;
transform: translate(-50%); }
.okicss .header .pc .submenu .subbox {
display: block;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, .6);
margin: 10px 10px;
background-color: #9678d3;
overflow: hidden; }
.okicss .header .pc .submenu .sub {
display: block;
line-height: 30px;
padding: 10px;
word-wrap: nowrap;
word-break: keep-all; }
.okicss .header .pc .submenu .sub:hover {
background-color: #8c6ec8; }
.okicss .header[class~=on] {
transition: all 0s;
position: fixed;
max-width: 100%;
top: 0px;
background-size: contain;
background-position: center;
box-shadow: 0 5px 5px rgba(0, 0, 0, .5); }
.okicss .header[class~=on] .wmid {
box-shadow: 0 5px 5px rgba(0, 0, 0, 0); }
@media (max-width: 1440px) {
.okicss {
}
.okicss .header {
top: calc(0vw); } }
@media (max-width: 1180px) {
.okicss {
} }
@media (max-width: 1080px) {
.okicss {
} }
@media (max-width: 780px) {
.okicss {
}
.okicss .header {
top: calc(0vw);
height: 60px;
}
.okicss .header .logo {
width: 90px;
top: 8px;
z-index: 23; }
.okicss .header .mb {
display: block; }
.okicss .header .pc {
display: none; }
.okicss .mbtn {
display: block;
width: 26px;
height: 26px;
position: absolute;
right: 15px;
top: 15px;
z-index: 9999;
}
.okicss .mbtn i {
display: block;
height: 2px;
width: 90%;
position: absolute;
background: #fff;
border-radius: 5px;
transition: all 0.3s; }
.okicss .mbtn i:nth-of-type(1) {
top: 10%; }
.okicss .mbtn i:nth-of-type(2) {
top: calc(50% - 1px); }
.okicss .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 .menubox {
width: 100%;
z-index: 21;
position: absolute;
left: 0px;
top: 0px;
background: rgba(150, 120, 211, 0.9);
height: 100vh;
max-height: 0vh;
overflow: hidden;
transition: all 0.3s; }
.okicss .menubox a {
display: none;
vertical-align: middle;
letter-spacing: 2px; }
.okicss .menubox .submenu {
display: none;
text-align: center;
margin: 10px 0px; }
.okicss .menubox .submenu .sub {
color: #fff;
padding: 10px 0px; }
.okicss .inbox {
overflow: auto;
width: 100%;
height: calc(100% - 60px);
margin-top: 60px;
display: block; }
.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 {
position: relative;
display: block;
text-align: center;
text-decoration: none;
border: 1px solid #fff;
border-radius: 10px;
width: 90%;
max-width: 320px;
color: #fff;
padding: 10px 10px;
margin: 5px auto;
box-sizing: border-box;
font-size: 12pt;
background-color: rgba(0, 0, 0, 0); }
.okicss .header[class~=on] .menubox a:hover {
background-color: rgba(0, 0, 0, .1); }
.okicss .header[class~=on] .menubox > .inbox > a:nth-of-type(1) {
margin-top: 45px; }
.okicss .header[class~=on] .menubox .side {
position: absolute;
right: 4vw; } }
.okicss {
}
.okicss .ani2up {
transform: translateY(20%);
opacity: 0;
transition: none; }
.okicss .animated .ani2up {
transform: translateY(0%);
opacity: 1;
transition: all 0.8s ease-in-out; }
.okicss .ani2down {
transform: translateY(-20%);
opacity: 0;
transition: none; }
.okicss .animated .ani2down {
transform: translateY(0%);
opacity: 1;
transition: all 0.8s ease-in-out; }
.okicss .ani2right {
transform: translateX(-20%);
opacity: 0;
transition: none; }
.okicss .animated .ani2right {
transform: translateX(0%);
opacity: 1;
transition: all 0.8s ease-in-out; }
.okicss .ani2left {
transform: translateX(20%);
opacity: 0;
transition: none; }
.okicss .animated .ani2left {
transform: translateX(0%);
opacity: 1;
transition: all 0.8s ease-in-out; }
.okicss .ani2big {
transform: scale(0.8);
opacity: 0;
transition: none; }
.okicss .animated .ani2big {
transform: scale(1);
opacity: 1;
transition: all 0.8s ease-in-out; }
.okicss .ani2show {
opacity: 0;
transition: none; }
.okicss .animated .ani2show {
opacity: 1;
transition: all 0.8s ease-in-out; }
.okicss {
}
.okicss .okitbox {
display: block;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9990;
}
.okicss .okitbox .cbox {
display: block;
width: 95%;
max-width: 320px;
min-height: 320px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-background-color: #c6b4e4;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.8); }
.okicss .okitbox .rel {
display: block;
width: 100%;
height: 100%;
position: relative; }
.okicss .okitbox .okitbox_close {
position: absolute;
display: block;
width: 40px;
height: 40px;
right: -10px;
top: -10px;
border-radius: 50px;
border: 3px solid #7d55c7;
overflow: hidden;
cursor: pointer;
box-shadow: 0 0 10px rgba(0, 0, 0, .6); }
.okicss .okitbox .cbody {
padding: 15px;
box-sizing: border-box; }
.okicss .okitbox .okitbox_close img {
width: 100%; }
.okicss .okitbox input[type=text], .okicss .okitbox input[type=date] {
padding: 8px 10px;
box-sizing: border-box;
width: 100%; }
.okicss .okitbox input[class~=err] {
border: 1px solid red; }
.okicss .okitbox .skin label {
display: inline-block;
width: 45%;
padding-bottom: 10px; }
.okicss .okitbox table {
width: 100%; }
.okicss .okitbox table td {
vertical-align: top;
font-size: 11pt;
padding-bottom: 10px; }
.okicss .okitbox table.infobox tr td:nth-child(1) {
width: 60px; }
.okicss .okitbox .note {
font-size: 10pt;
padding: 20px 0px; }
.okicss .okitbox .t-right {
text-align: right; }
.okicss .okitbox button {
width: 100%;
padding: 10px;
box-sizing: border-box;
background-color: #7d55c7;
border: 0;
border-radius: 5px;
font-size: 10pt;
color: #fff;
cursor: pointer;
margin-top: 10px; }
@media (max-width: 1280px) {
.okicss .okitbox {
} }
@media (max-width: 1080px) {
.okicss .okitbox {
} }
@media (max-width: 640px) {
.okicss .okitbox {
} }
html, body, button, * {
font-family: '*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; }
.abs {
position: absolute; }
.local .abtn {
background-color: rgba(255, 0, 0, .6); }
.abtn img {
width: 100%;
height: 100%;
display: block; }
.bold {
font-weight: bold;
}
::-webkit-scrollbar {
width: 3px;
height: 3px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #aaa;
}
::-webkit-scrollbar-thumb:hover {
background: #ccc; }
.okicss {
}
.okicss body {
-background-color: #fff3db; }
.okicss .container {
width: 100%;
padding: 0;
margin: 0;
max-width: 100%; }
.okicss .content {
width: 100%;
-max-width: 1920px;
max-width: 480px;
margin: auto; }
.okicss .content .topseg {
height: 68px;
width: 100%;
display: block; }
.okicss .rel {
position: relative; }
.okicss .relbox {
position: relative;
width: 100%;
height: 100%;
}
.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%;
display: block;
}
.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: #af1e23;
border-bottom: 2px solid #af1e23; }
@media (max-width: 1280px) {
.okicss {
}
.okicss .wmid {
box-sizing: border-box; } }
@media (max-width: 1080px) {
.okicss {
}
.okicss .content .topseg {
height: 50px; } }
@media (max-width: 640px) {
.okicss {
} }
label {
position: relative;
cursor: pointer;
}
input[type=checkbox] {
cursor: pointer;
margin-right:10px;
}
input:checked + chkbox {
background:#f60;
}
input:checked + chkbox:before {
opacity:1;
}
chkbox {
position: absolute;
top: 1px;
left: 0px;
width: 18px;
height: 18px;
border-radius: 3px;
background: #ddd;
}
chkbox:before {
content: '';
position: absolute;
opacity:0;
top: 3px;
left: 7px;
width: 3px;
height: 8px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
label {
position: relative;
cursor: pointer;
}
label.inline {
display: inline-block;
margin-right: 10px;
}
input[type=radio] {
cursor: pointer;
margin-right:10px;
}
input:checked + radiobox {
background:#f60;
}
input:checked + radiobox:before {
opacity:1;
}
radiobox {
position: absolute;
top: 1px;
left: 0px;
width: 20px;
height: 20px;
border-radius: 10px;
background: #ddd;
}
radiobox:before {
content: '';
position: absolute;
opacity:0;
top: 5px;
left: 5px;
width: 10px;
height: 10px;
background-color:#fff;
border-radius:10px;
transform: rotate(45deg);
}
.okicss {
}
.okicss .pager21 {
padding-top: 40px;
text-align: center; }
.okicss .pager21 nav {
display: inline-block; }
.okicss .pager21 ul.pagination > li.page-item {
display: inline-block; }
.okicss .pager21 ul.pagination > li.page-item a {
display: block;
line-height: 30px;
width: 30px;
height: 30px;
text-decoration: none;
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 .rside {
position: fixed;
right: 0;
bottom: 15%;
z-index: 40;
width: 60px;
}
.okicss .rside .side {
width: 100%; }
.okicss .modal-sch .htag a {
font-size: 9pt;
color: #333; }
.okicss .modal-sch .htag a:hover {
color: #af1e23; }
.okicss .fbtn {
display: block;
position: fixed;
z-index: 19;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 480px;
text-align: right;
padding: 0px;
margin: 0px;
}
.okicss .fbtn img {
display: inline-block;
height: 35px;
vertical-align: bottom; }
.okicss .sec-anno {
text-align: left;
background-color: #f4d899;
box-sizing: border-box;
height: 100vh;
min-height: 800px; }
.okicss .sec-anno .sa-title {
color: #000;
font-size: 22pt;
text-align: Center;
padding-bottom: 40px; }
.okicss .sec-anno .sa-scroll {
display: block;
width: 100%;
max-width: 1400px;
height: 70vh;
min-height: 500px;
margin: auto;
box-sizing: border-box;
padding: 40px;
overflow-x: visible;
overflow-y: scroll;
background: #f4d899;
-box-shadow: 0 0 10px rgba(0, 0, 0, .2); }
.okicss .sec-anno .wmid {
display: block;
width: 100%;
max-width: 1000px;
padding: 40px 10px;
box-sizing: border-box; }
.okicss .sec-anno ol, .okicss .sec-anno ol li {
margin: 0;
padding: 0;
box-sizing: border-box; }
.okicss .sec-anno ol {
color: #4f4f4f;
width: 98%;
letter-spacing: 2px;
line-height: 18pt;
font-size: 12pt; }
.okicss .sec-anno ol li {
margin-left: 30px;
padding-bottom: 10px;
box-sizing: border-box;
text-align: justify; }
.okicss .glowbtn {
background-size: 100%;
background-repeat: no-repeat; }
.okicss .glowbtn img {
animation: glowbtnani 2s 0s 1;
animation-iteration-count: infinite; }
@media (max-width: 1200px) {
.okicss {
}
.okicss .rside {
width: 45px; } }
@media (max-width: 1080px) {
.okicss {
} }
@media (max-width: 750px) {
.okicss {
}
.okicss .sec-anno {
height: 100vh;
min-height: auto; }
.okicss .sec-anno .wmid {
padding: 20px; }
.okicss .sec-anno .sa-title {
padding: 20px 0px;
font-size: 16pt; }
.okicss .sec-anno .sa-scroll {
width: 90%;
padding: 10px;
height: 70vh;
min-height: auto; }
.okicss .sec-anno ol {
font-size: 10pt;
letter-spacing: 1px;
line-height: 16pt; } }
@media (max-width: 640px) {
.okicss {
}
.okicss .btmsldbox {
display: block;
width: 100%;
height: 66vw; }
.okicss .btmsldbox .owl-dots {
display: block; } }
@keyframes glowbtnani {
0% {
opacity: 1; }
50% {
opacity: 0; }
100% {
opacity: 1; } }
.local div {
border: 1px solid #f00; }
.okicss {
/*end okicss*/
/*
----home//sec-0.css----
*/
/*.sec-0
extest/sec-x.css
*/ }
.okicss .pmc {
color: #af1e23; }
.okicss .blk {
color: #000; }
.okicss .gc {
color: #575757; }
.okicss .mb {
display: none; }
.okicss .wmid {
width: 100%;
height: 100%;
max-width: 1200px;
margin: auto;
position: relative; }
.okicss .wcrop {
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden; }
.okicss .tcenter {
text-align: center; }
.okicss .seg {
display: block;
height: 30px; }
.okicss .sec {
width: 100%;
--min-height: 100vh;
--display: none;
--background-color: #000;
text-align: center;
--inpage: home; }
.okicss .sec .relbox {
position: relative; }
.okicss .sec .ubg {
background-position: center;
background-size: cover;
width: 100%;
height: 100%;
margin: auto; }
.okicss .red {
color: #6a0000; }
.okicss .sec {
/*cus ----------------------------------------------------------*/
/*vote slider --------------------------------------------------*/
/*cus sec utitle -------------------------------------------------------------------------------------------------------*/ }
.okicss .sec .mb {
display: none; }
@media (max-width: 1920px) {
.okicss {
/*w:1920*/ } }
@media (max-width: 1300px) {
.okicss {
/*w:1300*/ } }
@media (max-width: 1280px) {
.okicss {
/*w:1200*/ } }
@media (max-width: 1180px) {
.okicss {
/*w:1180*/ } }
@media (max-width: 750px) {
.okicss {
/*w:750*/ }
.okicss .sec, .okicss #sharebk {
height: auto; }
.okicss .sec .pc, .okicss #sharebk .pc {
display: none; }
.okicss .sec .mb, .okicss #sharebk .mb {
display: block; } }
@media (max-width: 640px) {
.okicss {
/*w:640*/ } }
.okicss {
/*end okicss*/
/*
----home//sec-1.css----
*/
/*..sec-1
extest/sec-x.css
*/ }
.okicss .sec-0 {
/*end sec-0 */ }
.okicss .sec-0 {
display: block;
height: 83px;
-background: #fff; }
@media (max-width: 1920px) {
.okicss .sec-0 {
/*w:1920*/ } }
@media (max-width: 1300px) {
.okicss .sec-0 {
/*w:1300*/ } }
@media (max-width: 1280px) {
.okicss .sec-0 {
/*w:1280*/ } }
@media (max-width: 1180px) {
.okicss .sec-0 {
/*w:1180*/ } }
@media (max-width: 780px) {
.okicss .sec-0 {
/*w:750*/ }
.okicss .sec-0 {
display: block;
height: 60px; } }
.okicss {
/*end okicss*/
/*
----home//sec-2.css----
*/
/*..sec-2
extest/sec-x.css
*/ }
.okicss .sec-1 {
/*end sec-1 */ }
.okicss .sec-1 .s1t {
left: 0px;
top: 0px; }
@media (max-width: 1920px) {
.okicss .sec-1 {
/*w:1920*/ } }
@media (max-width: 1300px) {
.okicss .sec-1 {
/*w:1300*/ } }
@media (max-width: 1280px) {
.okicss .sec-1 {
/*w:1280*/ } }
@media (max-width: 1180px) {
.okicss .sec-1 {
/*w:1180*/ } }
@media (max-width: 780px) {
.okicss .sec-1 {
/*w:750*/ } }
@media (max-width: 480px) {
.okicss .sec-1 {
/*w:480*/ } }
.okicss {
/*end okicss*/
/*
----home//sec-3.css----
*/
/*..sec-3
extest/sec-x.css
*/ }
.okicss .sec-2 {
/*end sec-2 */ }
.okicss .sec-2 .s2i {
left: 0px;
top: 0px;
width: 100%; }
@media (max-width: 1920px) {
.okicss .sec-2 {
/*w:1920*/ } }
@media (max-width: 1300px) {
.okicss .sec-2 {
/*w:1300*/ } }
@media (max-width: 1280px) {
.okicss .sec-2 {
/*w:1280*/ } }
@media (max-width: 1180px) {
.okicss .sec-2 {
/*w:1180*/ } }
@media (max-width: 780px) {
.okicss .sec-2 {
/*w:750*/ } }
@media (max-width: 480px) {
.okicss .sec-2 {
/*w:480*/ } }
@keyframes bounceIn {
0% {
transform: scale(1);
opacity: 1; }
50% {
transform: scale(0.9);
opacity: 1; }
100% {
transform: scale(1); } }
.okicss {
/*end okicss*/
/*
----home//sec-4.css----
*/
/*..sec-4
extest/sec-x.css
*/ }
.okicss .sec-3 {
/*end sec-3 */ }
.okicss .sec-3 .s3mv {
width: 80%;
padding-bottom: 45.5%;
background-color: #fff;
opacity: 1;
left: 11%;
top: 11%;
background-size: cover; }
.okicss .sec-3 .s3mv iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
display: none; }
.okicss .sec-3 .s3g {
width: 31%;
right: 0px;
bottom: 5.65%; }
.okicss .sec-3 .s3t1, .okicss .sec-3 .s3t2, .okicss .sec-3 .s3t3, .okicss .sec-3 .s3t4, .okicss .sec-3 .s3p {
left: 0;
top: 0;
width: 100%; }
.okicss .sec-3 .s3b {
width: 47.2%;
left: 10%;
top: 75%; }
.okicss .sec-3 .s3b img {
animation: bounceIn 2.5s infinite 2s alternate-reverse; }
@media (max-width: 1920px) {
.okicss .sec-3 {
/*w:1920*/ } }
@media (max-width: 1300px) {
.okicss .sec-3 {
/*w:1300*/ } }
@media (max-width: 1280px) {
.okicss .sec-3 {
/*w:1280*/ } }
@media (max-width: 1180px) {
.okicss .sec-3 {
/*w:1180*/ } }
@media (max-width: 780px) {
.okicss .sec-3 {
/*w:750*/ } }
@media (max-width: 480px) {
.okicss .sec-3 {
/*w:480*/ } }
@keyframes moving {
0% {
transform: translateX(-5%);
opacity: 1; }
50% {
transform: translateX(5%);
opacity: 1; }
100% {
transform: translateX(-5%); } }
@keyframes pulse {
from {
transform: scale(0.9); }
to {
transform: scale(1.1); } }
.okicss {
/*end okicss*/
/*
----home//sec-5.css----
*/
/*..sec-5
extest/sec-x.css
*/ }
.okicss .sec-4 {
/*end sec-4 */ }
.okicss .sec-4 .s4i {
left: 0;
top: 0;
width: 100%; }
.okicss .sec-4 .s4buyA, .okicss .sec-4 .s4buyB {
width: 40%;
z-index: 10; }
.okicss .sec-4 .s4buyA img, .okicss .sec-4 .s4buyB img {
width: 100%;
animation: pulse 1s infinite ease-in-out alternate; }
.okicss .sec-4 .s4buyA {
left: 30%;
top: 52%; }
.okicss .sec-4 .s4buyB {
left: 30%;
top: 51%; }
@media (max-width: 1920px) {
.okicss .sec-4 {
/*w:1920*/ } }
@media (max-width: 1300px) {
.okicss .sec-4 {
/*w:1300*/ } }
@media (max-width: 1280px) {
.okicss .sec-4 {
/*w:1280*/ } }
@media (max-width: 1180px) {
.okicss .sec-4 {
/*w:1180*/ } }
@media (max-width: 780px) {
.okicss .sec-4 {
/*w:750*/ } }
@media (max-width: 480px) {
.okicss .sec-4 {
/*w:480*/ } }
.okicss {
/*end okicss*/
/*
----home//sec-6.css----
*/
/*..sec-6
extest/sec-x.css
*/ }
.okicss .sec-5 {
/*end sec-5 */ }
.okicss .sec-5 .s5t, .okicss .sec-5 .s5r {
width: 100%;
left: 0;
top: 0; }
.okicss .sec-5 .s5i {
width: 100%;
left: 0;
bottom: 0; }
@media (max-width: 1920px) {
.okicss .sec-5 {
/*w:1920*/ } }
@media (max-width: 1300px) {
.okicss .sec-5 {
/*w:1300*/ } }
@media (max-width: 1280px) {
.okicss .sec-5 {
/*w:1280*/ } }
@media (max-width: 1180px) {
.okicss .sec-5 {
/*w:1180*/ } }
@media (max-width: 780px) {
.okicss .sec-5 {
/*w:750*/ } }
@media (max-width: 480px) {
.okicss .sec-5 {
/*w:480*/ } }
.okicss {
/*end okicss*/
/*
----home//sec-7.css----
*/
/*..sec-7
extest/sec-x.css
*/ }
.okicss .sec-6 {
/*end sec-6 */ }
.okicss .sec-6 .s6t {
width: 100%;
left: 0;
top: 0; }
.okicss .sec-6 .s6i {
width: 100%;
left: 0;
bottom: 0; }
@media (max-width: 1920px) {
.okicss .sec-6 {
/*w:1920*/ } }
@media (max-width: 1300px) {
.okicss .sec-6 {
/*w:1300*/ } }
@media (max-width: 1280px) {
.okicss .sec-6 {
/*w:1280*/ } }
@media (max-width: 1180px) {
.okicss .sec-6 {
/*w:1180*/ } }
@media (max-width: 780px) {
.okicss .sec-6 {
/*w:750*/ } }
@media (max-width: 480px) {
.okicss .sec-6 {
/*w:480*/ } }
.okicss {
/*end okicss*/
/*
----home//sec-8.css----
*/
/*..sec-8
extest/sec-x.css
*/ }
.okicss .sec-7 {
/*end sec-7 */ }
.okicss .sec-7 .s7t, .okicss .sec-7 .s7b {
left: 0px;
top: 0px; }
.okicss .sec-7 .s7i {
top: 32%;
width: 22%; }
.okicss .sec-7 .s7im {
left: 11%; }
.okicss .sec-7 .s7iw {
left: 40%; }
.okicss .sec-7 .s7ic {
left: 68%; }
@media (max-width: 1920px) {
.okicss .sec-7 {
/*w:1920*/ } }
@media (max-width: 1300px) {
.okicss .sec-7 {
/*w:1300*/ } }
@media (max-width: 1280px) {
.okicss .sec-7 {
/*w:1280*/ } }
@media (max-width: 1180px) {
.okicss .sec-7 {
/*w:1180*/ } }
@media (max-width: 780px) {
.okicss .sec-7 {
/*w:750*/ } }
@media (max-width: 480px) {
.okicss .sec-7 {
/*w:480*/ } }
.okicss {
/*end okicss*/
/*
----home//sec-9.css----
*/
/*..sec-9
extest/sec-x.css
*/ }
.okicss .sec-8 {
/*end sec-8 */ }
.okicss .sec-8 .s8qbox {
position: relative;
width: 80%;
margin-left: 10%;
text-align: left; }
.okicss .sec-8 .s8qbox p {
padding-left: 6%; }
.okicss .sec-8 .s8qbox .s8t {
position: absolute; }
.okicss .sec-8 .s8q p {
padding-bottom: 10px; }
.okicss .sec-8 .s8a p {
padding-bottom: 20px; }
@media (max-width: 1920px) {
.okicss .sec-8 {
/*w:1920*/ } }
@media (max-width: 1300px) {
.okicss .sec-8 {
/*w:1300*/ } }
@media (max-width: 1280px) {
.okicss .sec-8 {
/*w:1280*/ } }
@media (max-width: 1180px) {
.okicss .sec-8 {
/*w:1180*/ } }
@media (max-width: 780px) {
.okicss .sec-8 {
/*w:750*/ } }
@media (max-width: 480px) {
.okicss .sec-8 {
/*w:480*/ }
.okicss .sec-8 .s8qbox {
font-size: 3.6vw; }
.okicss .sec-8 .s8qbox p {
padding-left: 6vw; }
.okicss .sec-8 .s8q p {
padding-bottom: 10px; }
.okicss .sec-8 .s8a p {
padding-bottom: 20px; } }
.okicss {
/*end okicss*/ }
.okicss .sec-9 {
/*end sec-9 */ }
.okicss .sec-9 .s9ig {
left: 25%;
top: 15%;
width: 50%; }
@media (max-width: 1920px) {
.okicss .sec-9 {
/*w:1920*/ } }
@media (max-width: 1300px) {
.okicss .sec-9 {
/*w:1300*/ } }
@media (max-width: 1280px) {
.okicss .sec-9 {
/*w:1280*/ } }
@media (max-width: 1180px) {
.okicss .sec-9 {
/*w:1180*/ } }
@media (max-width: 780px) {
.okicss .sec-9 {
/*w:750*/ } }
@media (max-width: 480px) {
.okicss .sec-9 {
/*w:480*/ } }