html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
box-sizing: border-box
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block
}
body {
line-height: 1
}
ul, li, ol {
list-style-position: inside;
}
blockquote, q {
quotes: none
}
blockquote:before, blockquote:after {
content: '';
content: none
}
q:before, q:after {
content: '';
content: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
.icon-1:before {
background-position: 0% 0
}
.icon-2:before {
background-position: 2.04% 0
}
.icon-3:before {
background-position: 4.08% 0
}
.icon-4:before {
background-position: 6.12% 0
}
.icon-5:before {
background-position: 8.16% 0
}
.icon-6:before {
background-position: 10.2% 0
}
.icon-7:before {
background-position: 12.24% 0
}
.icon-8:before {
background-position: 14.29% 0
}
.icon-9:before {
background-position: 16.33% 0
}
.icon-10:before {
background-position: 18.37% 0
}
.icon-11:before {
background-position: 20.41% 0
}
.icon-12:before {
background-position: 22.45% 0
}
.icon-13:before {
background-position: 24.49% 0
}
.icon-14:before {
background-position: 26.53% 0
}
.icon-15:before {
background-position: 28.57% 0
}
.icon-16:before {
background-position: 30.61% 0
}
.icon-17:before {
background-position: 32.65% 0
}
.icon-18:before {
background-position: 34.69% 0
}
.icon-19:before {
background-position: 36.73% 0
}
.icon-20:before {
background-position: 38.78% 0
}
.icon-21:before {
background-position: 40.82% 0
}
.icon-22:before {
background-position: 42.86% 0
}
.icon-23:before {
background-position: 44.9% 0
}
.icon-24:before {
background-position: 46.94% 0
}
.icon-25:before {
background-position: 48.98% 0
}
.icon-26:before {
background-position: 51.02% 0
}
.icon-27:before {
background-position: 53.06% 0
}
.icon-28:before {
background-position: 55.1% 0
}
.icon-29:before {
background-position: 57.14% 0
}
.icon-30:before {
background-position: 59.18% 0
}
.icon-31:before {
background-position: 61.22% 0
}
.icon-32:before {
background-position: 63.27% 0
}
.icon-33:before {
background-position: 65.31% 0
}
.icon-34:before {
background-position: 67.35% 0
}
.icon-35:before {
background-position: 69.39% 0
}
.icon-36:before {
background-position: 71.43% 0
}
.icon-37:before {
background-position: 73.47% 0
}
.icon-38:before {
background-position: 75.51% 0
}
.icon-39:before {
background-position: 77.55% 0
}
.icon-40:before {
background-position: 79.59% 0
}
.icon-41:before {
background-position: 81.63% 0
}
.icon-42:before {
background-position: 83.67% 0
}
.icon-43:before {
background-position: 85.71% 0
}
.icon-44:before {
background-position: 87.76% 0
}
.icon-45:before {
background-position: 89.8% 0
}
.icon-46:before {
background-position: 91.84% 0
}
.icon-47:before {
background-position: 93.88% 0
}
.icon-48:before {
background-position: 95.92% 0
}
.icon-49:before {
background-position: 97.96% 0
}
.icon-50:before {
background-position: 100% 0
}
.icon {
font-size: 0
}
.icon:before {
content: "";
display: inline-block;
vertical-align: middle;
background-image: url("../index_files/iconset.svg");
background-size: auto 100%;
width: 30px;
height: 30px;
filter: hue-rotate(180deg);
}
.icon.w2:before {
width: 60px
}
.icon-before:before {
content: "";
display: inline-block;
vertical-align: middle;
background-image: url("../index_files/iconset.svg")
}
.icon-after:after {
content: "";
display: inline-block;
vertical-align: middle;
background-image: url("../index_files/iconset.svg")
}
.img-100 img {
display: block;
width: 100%;
height: auto
}
.ul-sp {
display: block;
border-top: 1px solid #d4d4d4;
padding-top: 40px;
margin-top: 40px
}
.ul-sp li {
padding: 5px 0
}
@media (min-width: 0) and (max-width: 1099px) {
.ul-sp li {
padding: 10px 0
}
}
@media (min-width: 1100px) {
.ul-sp li {
display: flex;
align-items: flex-start
}
}
.ul-sp li strong {
display: inline-block;
vertical-align: middle;
font-weight: bold
}
@media (min-width: 0) and (max-width: 1099px) {
.ul-sp li strong {
display: block
}
}
@media (min-width: 1100px) {
.ul-sp li strong {
display: block;
min-width: 80px
}
}
.ul-sp li p {
display: inline-block;
vertical-align: middle;
margin-left: 10px;
opacity: 0.7
}
@media (min-width: 0) and (max-width: 1099px) {
.ul-sp li p {
display: block;
margin-left: 0
}
}
@media (min-width: 0) and (max-width: 739px) {
.mobile-mg .text>.fz-zh-B, .mobile-mg .text>.fz-zh-C {
margin-bottom: 0;
line-height: 1.5em
}
.mobile-mg .text>.fz-en-B {
margin-bottom: 0.1em;
line-height: 1.5em
}
.mobile-mg .text>p {
margin-top: 40px
}
}
@media (min-width: 980px) {
.mobile-mg .text>.fz-en-B {
font-size: 2.25em
}
}
@media (min-width: 1300px) {
.mobile-mg .text>.fz-en-B {
font-size: 2.5em
}
}
@media (min-width: 1780px) {
.mobile-mg .text>.fz-en-B {
font-size: 2.8125em
}
}
.link {
color: #0f56a1;
font-size: .875rem;
font-weight: bold;
transition: all .3s ease
}
.link span {
transition: color .35s ease
}
.link:after {
content: "";
display: inline-block;
vertical-align: middle;
background-image: url("../index_files/iconset.svg");
background-size: auto 100%;
background-position: 2.04% 0;
transition: all .3s ease;
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
margin-left: 2.5em;
margin-top: -4px;
filter: hue-rotate(180deg);
}
@media (min-width: 740px) {
.link {
font-size: 1.125rem
}
.link:after {
width: 24px;
height: 24px
}
}
@media (min-width: 1300px) {
.link {
font-size: 1.25rem
}
.link:after {
width: 26px;
height: 26px
}
}
@media (min-width: 1780px) {
.link {
font-size: 1.375rem
}
.link:after {
width: 30px;
height: 30px
}
}
.link:hover span, .link:active span {
color: #2c2c2c
}
.link:hover:after, .link:active:after {
background-size: auto 100%;
background-position: 0% 0
}
.link.small {
font-size: 1rem !important;
color: #2c2c2c
}
.link.small:after {
margin-left: 1em
}
.herobtn {
display: block;
background-color: #0f56a1;
line-height: 60px;
border-radius: 5px;
font-size: 1rem;
font-weight: bold;
border: none;
outline: none;
box-shadow: none;
width: 100%;
text-align: center;
cursor: pointer;
overflow: hidden;
font-family: "Montserrat", Helvetica, Arial, "Noto Sans TW", "PingFang", "PingFangTC", "Microsoft JhengHei", sans-serif;
margin-top: 25px
}
@media (min-width: 576px) {
.herobtn {
max-width: 340px
}
}
@media (min-width: 740px) {
.herobtn {
line-height: 72px;
font-size: 1.25rem
}
}
@media (min-width: 1100px) {
.herobtn {
line-height: 86px;
font-size: 1.375rem
}
}
@media (min-width: 1780px) {
.herobtn {
line-height: 96px;
font-size: 1.5rem
}
}
.herobtn.border {
background-color: transparent;
border: 2px solid #2c2c2c;
color: #2c2c2c
}
.more {
font-weight: 500;
font-size: .875em;
margin-top: 1em;
display: inline-block;
white-space: nowrap;
transition: all .25s ease
}
@media (min-width: 740px) {
.more {
font-size: 1em
}
}
.more:after {
content: "";
display: inline-block;
width: 100px;
border-top: 1px solid #d4d4d4;
height: 0.2em;
vertical-align: middle;
margin-left: 1em;
transition: border-color .25s ease
}
@media (min-width: 740px) {
.more:after {
width: 140px
}
}
.more:hover, .more:active {
color: #00594E
}
.more:hover:after, .more:active:after {
border-color: #00594E;
border-width: 3px
}
.fz-A {
font-size: 1.375em;
font-weight: bold;
margin-bottom: 1em;
color: #2c2c2c;
line-height: 1.375em
}
@media (min-width: 740px) {
.fz-A {
font-size: 2.25em
}
}
@media (min-width: 1300px) {
.fz-A {
font-size: 2.375em
}
}
@media (min-width: 1780px) {
.fz-A {
font-size: 2.5em
}
}
.fz-B {
font-size: 1.25em;
font-weight: bold;
margin-bottom: 1em;
color: #2c2c2c;
line-height: 1.375em
}
@media (min-width: 576px) {
.fz-B {
font-size: 1.375em
}
}
@media (min-width: 740px) {
.fz-B {
font-size: 1.5em
}
}
@media (min-width: 1300px) {
.fz-B {
font-size: 1.75em
}
}
@media (min-width: 1780px) {
.fz-B {
font-size: 1.875em
}
}
.fz-C {
font-size: 1.125em;
font-weight: bold;
margin-bottom: 1em
}
@media (min-width: 1780px) {
.fz-C {
font-size: 1.25em
}
}
select, input, textarea {
font-size: 1rem;
font-weight: bold;
display: inline-block;
color: #333;
vertical-align: middle;
height: 40px;
line-height: 40px;
width: 100%;
font-family: "Montserrat", Helvetica, Arial, "Noto Sans TW", "PingFang", "PingFangTC", "Microsoft JhengHei", sans-serif;
outline: none;
background: none;
background-color: transparent;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none
}
select.gray, input.gray, textarea.gray {
background-color: #F4F4F4
}
@media (min-width: 740px) {
select, input, textarea {
height: 40px;
line-height: 40px;
font-size: 1.125rem
}
}
@media (min-width: 1300px) {
select, input, textarea {
height: 40px;
line-height: 40px
}
}
@media (min-width: 1780px) {
select, input, textarea {
font-size: 1.25rem
}
}
::placeholder {
color: #333;
opacity: 1
}
:-ms-input-placeholder {
color: #333
}
::-ms-input-placeholder {
color: #333
}
option {
padding: 0 10px
}
select {
background: url("../index_files/select.svg") no-repeat right 20px center;
background-size: auto 6px
}
textarea {
line-height: 1.5em;
height: auto;
padding: 0.75em 1em
}
input[type="radio"], input[type="checkbox"] {
display: none
}
input[type="radio"]+label, input[type="checkbox"]+label {
display: inline-block;
text-align: left;
cursor: pointer;
color: #999;
line-height: 40px;
padding: 10px;
background-color: #fff;
transition: color 0.3s ease, border-color .3s ease, background-color .3s ease;
padding-right: 1em;
font-size: 1rem;
position: relative;
border: 2px solid #EDEDED;
border-radius: 5px;
width: 100%;
margin-bottom: 15px;
cursor: pointer;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none
}
@media (min-width: 740px) {
input[type="radio"]+label, input[type="checkbox"]+label {
font-size: 1.125rem
}
}
@media (min-width: 1780px) {
input[type="radio"]+label, input[type="checkbox"]+label {
font-size: 1.25rem
}
}
input[type="radio"]+label:before, input[type="checkbox"]+label:before {
content: "";
display: inline-block;
vertical-align: middle;
overflow: hidden;
width: 24px;
height: 24px;
margin-right: 10px;
background-color: #fff;
border: 2px solid #d4d4d4;
border-radius: 50%;
margin-top: -2px;
margin-left: 5px;
transition: border-color .3s ease
}
@media (min-width: 1100px) {
input[type="radio"]+label:before, input[type="checkbox"]+label:before {
margin-left: 10px
}
}
input[type="radio"]:checked+label, input[type="checkbox"]:checked+label {
color: #000;
font-weight: bold;
border-color: #000
}
input[type="radio"]:checked+label:before, input[type="checkbox"]:checked+label:before {
border-color: #000;
content: "";
display: inline-block;
vertical-align: middle;
background-image: url("../index_files/iconset.svg");
background-size: auto 100%;
background-position: 18.37% 0
}
input[type="radio"]:checked+label.btn-type, input[type="checkbox"]:checked+label.btn-type {
background-color: #000;
color: #fff
}
input[type="radio"]:checked+label.btn-type:before, input[type="checkbox"]:checked+label.btn-type:before {
border: none
}
input[type="radio"]:checked+label.btn-block, input[type="checkbox"]:checked+label.btn-block {
border-color: #000
}
.form {
padding: 0
}
.form-item {
position: relative;
padding: 0 0 15px !important;
list-style: none;
}
.form-item textarea, .form-item select, .form-item input {
border: none;
border-bottom: 2px solid #d4d4d4;
padding: 27px 0 8px !important;
line-height: 25px;
display: block;
background-color: #fff;
border-radius: 0;
transition: all .3s ease;
height: auto !important;
color: transparent
}
.form-item textarea:focus, .form-item select:focus, .form-item input:focus {
border-color: #000;
color: #000
}
.form-item textarea:focus+label, .form-item select:focus+label, .form-item input:focus+label {
transform: translateY(-200%);
font-size: .75rem;
color: #999
}
.form-item input.valid {
color: #000
}
.form-item input.valid+label {
transform: translateY(-200%);
font-size: .75rem;
color: #999
}
.form-item label {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-80%);
transition: all .3s ease;
font-size: 1.125rem;
color: #777;
font-weight: normal;
line-height: 1em;
pointer-events: none
}
.form-item label em {
font-style: normal;
color: #0f56a1;
font-size: 1em;
margin-right: 5px
}
.form-item .field {
display: block;
color: #999;
font-size: 0.75rem
}
.form-item .value {
display: block;
color: #333;
font-size: 1rem;
font-weight: normal
}
@media (min-width: 740px) {
.form-item .value {
font-size: 1.125rem
}
}
@media (min-width: 1780px) {
.form-item .value {
font-size: 1.25rem
}
}
.form-item select {
color: #000
}
.form-item select.filled {
color: #000
}
.form-item select.filled+label {
transform: translateY(-200%);
font-size: .75rem;
color: #999
}
.form-item textarea+label {
top: 0;
transform: translateY(20px)
}
.form-item textarea:focus {
border-color: #000;
color: #000
}
.form-item textarea:focus+label {
transform: translateY(15px);
font-size: .75rem;
color: #999
}
.form-item textarea.valid {
color: #000
}
.form-item textarea.valid+label {
transform: translateY(15px);
font-size: .75rem;
color: #999
}
.form-item.code {
position: relative
}
.form-item.code span {
height: 40px;
width: auto;
position: absolute;
right: 0;
bottom: 25px
}
.form-item.code img {
display: block;
height: 100%;
width: auto
}
@media (min-width: 980px) {
.form-item {
margin-bottom: 5px
}
}
@media (min-width: 1300px) {
.form-item {
margin-bottom: 10px
}
}
.confirm-form {
padding: 20px;
margin: 0 0 50px 0 !important;
background-color: #fff;
border: 1px solid #d4d4d4
}
.check-group {
overflow: hidden;
position: relative;
display: flex;
border-radius: 5px
}
.check-group input[type="radio"]+label, .check-group input[type="checkbox"]+label {
border-radius: 0;
white-space: nowrap;
width: 100%;
border: none;
background-color: #eee;
padding: 0 10px;
color: #888;
font-size: .75rem;
flex: 1;
text-align: center;
margin: 0;
height: auto
}
@media (min-width: 1300px) {
.check-group input[type="radio"]+label, .check-group input[type="checkbox"]+label {
font-size: .875rem
}
}
.check-group input[type="radio"]+label:before, .check-group input[type="radio"]+label:after, .check-group input[type="checkbox"]+label:before, .check-group input[type="checkbox"]+label:after {
display: none
}
.check-group input[type="radio"]:checked+label, .check-group input[type="checkbox"]:checked+label {
background-color: #333;
color: #fff;
font-weight: normal
}
.check-group+.fz-C {
margin-top: 30px
}
.edit {
padding-top: 50px
}
.edit .type-1, .edit .type-2, .edit .video {
margin-bottom: 50px
}
.edit .type-1 p, .edit .type-2 p, .edit .video p {
color: #6f6f6f;
padding-bottom: 2em
}
@media (min-width: 0) and (max-width: 979px) {
.edit .type-1 .text, .edit .type-2 .text, .edit .video .text {
padding-top: 35px
}
}
@media (min-width: 980px) {
.edit .type-1, .edit .type-2, .edit .video {
display: flex;
align-items: center
}
.edit .type-1 .img-holder, .edit .type-1 .text, .edit .type-2 .img-holder, .edit .type-2 .text, .edit .video .img-holder, .edit .video .text {
width: 50%
}
.edit .type-1 .text, .edit .type-2 .text, .edit .video .text {
padding-left: 50px;
padding-right: 50px
}
}
@media (min-width: 1300px) {
.edit .type-1, .edit .type-2, .edit .video {
margin-bottom: 60px
}
.edit .type-1 .text, .edit .type-2 .text, .edit .video .text {
padding-left: 72px;
padding-right: 72px
}
}
@media (min-width: 1780px) {
.edit .type-1, .edit .type-2, .edit .video {
margin-bottom: 70px
}
.edit .type-1 .text, .edit .type-2 .text, .edit .video .text {
padding-left: 100px;
padding-right: 100px
}
}
@media (min-width: 980px) {
.edit .type-2 {
flex-direction: row-reverse
}
}
.edit ul {
padding-left: 1em
}
.edit ul li {
display: list-item;
list-style: disc;
padding-left: 0.5em
}
.edit ol {
padding-left: 1em
}
.edit ol li {
display: list-item;
list-style: decimal;
padding-left: 0.5em
}
.fitVids-wrapper {
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0
}
.fitVids-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.swiper-container {
width: 100%
}
.loader {
height: 40px;
position: relative;
width: 40px
}
.loader span {
display: block
}
.loader .circle {
transform: rotate(-90deg);
transform-origin: center;
stroke-dasharray: 75.39;
stroke-dashoffset: 75.39;
transition: all .3s ease;
stroke: #ddd;
stroke-width: 6px
}
.loader.active span {
transition: transform 0s
}
.loader.active .circle {
animation: circle 9.5s;
stroke: #000
}
@keyframes circle {
0% {
stroke-dashoffset: 75.39
}
100% {
stroke-dashoffset: 0
}
}
@keyframes loader {
99% {
background: linear-gradient(90deg, #ddd 50%, #000 50%)
}
100% {
background: #000
}
}
@keyframes mask {
0% {
background: #ddd;
transform: rotate(180deg)
}
50% {
background: #ddd;
transform: rotate(360deg)
}
50.01% {
background: #000;
transform: rotate(180deg)
}
100% {
background: #000;
transform: rotate(360deg)
}
}
/*!
* Bootstrap Grid v4.1.3 (https://getbootstrap.com/)
* Copyright 2011-2018 The Bootstrap Authors
* Copyright 2011-2018 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
@-ms-viewport {
width: device-width
}
html {
box-sizing: border-box;
-ms-overflow-style: scrollbar
}
*, *::before, *::after {
box-sizing: inherit
}
.container, .wrap {
width: 100%;
padding-right: 35px;
padding-left: 35px;
margin-right: auto;
margin-left: auto
}
@media (min-width: 576px) {
.container, .wrap {
max-width: 100%
}
}
@media (min-width: 740px) {
.container, .wrap {
max-width: 100%
}
}
@media (min-width: 980px) {
.container, .wrap {
max-width: 100%
}
}
@media (min-width: 1100px) {
.container, .wrap {
max-width: 100%
}
}
@media (min-width: 1300px) {
.container, .wrap {
max-width: 100%
}
}
@media (min-width: 1780px) {
.container, .wrap {
max-width: 100%
}
}
@media (min-width: 2200px) {
.container, .wrap {
max-width: 100%
}
}
.container-fluid, .wrap-fs {
width: 100%;
padding-right: 35px;
padding-left: 35px;
margin-right: auto;
margin-left: auto;
padding-right: 0;
padding-left: 0
}
.row {
display: flex;
flex-wrap: wrap;
margin-right: -35px;
margin-left: -35px
}
.no-gutters {
margin-right: 0;
margin-left: 0
}
.no-gutters>.col, .no-gutters>[class*="col-"] {
padding-right: 0;
padding-left: 0
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl, .col-xxl-auto, .col-xxxl-1, .col-xxxl-2, .col-xxxl-3, .col-xxxl-4, .col-xxxl-5, .col-xxxl-6, .col-xxxl-7, .col-xxxl-8, .col-xxxl-9, .col-xxxl-10, .col-xxxl-11, .col-xxxl-12, .col-xxxl, .col-xxxl-auto, .col-super-1, .col-super-2, .col-super-3, .col-super-4, .col-super-5, .col-super-6, .col-super-7, .col-super-8, .col-super-9, .col-super-10, .col-super-11, .col-super-12, .col-super, .col-super-auto {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 35px;
padding-left: 35px
}
.col {
flex-basis: 0;
flex-grow: 1;
max-width: 100%
}
.col-auto {
flex: 0 0 auto;
width: auto;
max-width: none
}
.col-1 {
flex: 0 0 8.33333%;
max-width: 8.33333%
}
.col-2 {
flex: 0 0 16.66667%;
max-width: 16.66667%
}
.col-3 {
flex: 0 0 25%;
max-width: 25%
}
.col-4 {
flex: 0 0 33.33333%;
max-width: 33.33333%
}
.col-5 {
flex: 0 0 41.66667%;
max-width: 41.66667%
}
.col-6 {
flex: 0 0 50%;
max-width: 50%
}
.col-7 {
flex: 0 0 58.33333%;
max-width: 58.33333%
}
.col-8 {
flex: 0 0 66.66667%;
max-width: 66.66667%
}
.col-9 {
flex: 0 0 75%;
max-width: 75%
}
.col-10 {
flex: 0 0 83.33333%;
max-width: 83.33333%
}
.col-11 {
flex: 0 0 91.66667%;
max-width: 91.66667%
}
.col-12 {
flex: 0 0 100%;
max-width: 100%
}
.order-first {
order: -1
}
.order-last {
order: 13
}
.order-0 {
order: 0
}
.order-1 {
order: 1
}
.order-2 {
order: 2
}
.order-3 {
order: 3
}
.order-4 {
order: 4
}
.order-5 {
order: 5
}
.order-6 {
order: 6
}
.order-7 {
order: 7
}
.order-8 {
order: 8
}
.order-9 {
order: 9
}
.order-10 {
order: 10
}
.order-11 {
order: 11
}
.order-12 {
order: 12
}
.offset-1 {
margin-left: 8.33333%
}
.offset-2 {
margin-left: 16.66667%
}
.offset-3 {
margin-left: 25%
}
.offset-4 {
margin-left: 33.33333%
}
.offset-5 {
margin-left: 41.66667%
}
.offset-6 {
margin-left: 50%
}
.offset-7 {
margin-left: 58.33333%
}
.offset-8 {
margin-left: 66.66667%
}
.offset-9 {
margin-left: 75%
}
.offset-10 {
margin-left: 83.33333%
}
.offset-11 {
margin-left: 91.66667%
}
@media (min-width: 576px) {
.col-sm {
flex-basis: 0;
flex-grow: 1;
max-width: 100%
}
.col-sm-auto {
flex: 0 0 auto;
width: auto;
max-width: none
}
.col-sm-1 {
flex: 0 0 8.33333%;
max-width: 8.33333%
}
.col-sm-2 {
flex: 0 0 16.66667%;
max-width: 16.66667%
}
.col-sm-3 {
flex: 0 0 25%;
max-width: 25%
}
.col-sm-4 {
flex: 0 0 33.33333%;
max-width: 33.33333%
}
.col-sm-5 {
flex: 0 0 41.66667%;
max-width: 41.66667%
}
.col-sm-6 {
flex: 0 0 50%;
max-width: 50%
}
.col-sm-7 {
flex: 0 0 58.33333%;
max-width: 58.33333%
}
.col-sm-8 {
flex: 0 0 66.66667%;
max-width: 66.66667%
}
.col-sm-9 {
flex: 0 0 75%;
max-width: 75%
}
.col-sm-10 {
flex: 0 0 83.33333%;
max-width: 83.33333%
}
.col-sm-11 {
flex: 0 0 91.66667%;
max-width: 91.66667%
}
.col-sm-12 {
flex: 0 0 100%;
max-width: 100%
}
.order-sm-first {
order: -1
}
.order-sm-last {
order: 13
}
.order-sm-0 {
order: 0
}
.order-sm-1 {
order: 1
}
.order-sm-2 {
order: 2
}
.order-sm-3 {
order: 3
}
.order-sm-4 {
order: 4
}
.order-sm-5 {
order: 5
}
.order-sm-6 {
order: 6
}
.order-sm-7 {
order: 7
}
.order-sm-8 {
order: 8
}
.order-sm-9 {
order: 9
}
.order-sm-10 {
order: 10
}
.order-sm-11 {
order: 11
}
.order-sm-12 {
order: 12
}
.offset-sm-0 {
margin-left: 0
}
.offset-sm-1 {
margin-left: 8.33333%
}
.offset-sm-2 {
margin-left: 16.66667%
}
.offset-sm-3 {
margin-left: 25%
}
.offset-sm-4 {
margin-left: 33.33333%
}
.offset-sm-5 {
margin-left: 41.66667%
}
.offset-sm-6 {
margin-left: 50%
}
.offset-sm-7 {
margin-left: 58.33333%
}
.offset-sm-8 {
margin-left: 66.66667%
}
.offset-sm-9 {
margin-left: 75%
}
.offset-sm-10 {
margin-left: 83.33333%
}
.offset-sm-11 {
margin-left: 91.66667%
}
}
@media (min-width: 740px) {
.col-md {
flex-basis: 0;
flex-grow: 1;
max-width: 100%
}
.col-md-auto {
flex: 0 0 auto;
width: auto;
max-width: none
}
.col-md-1 {
flex: 0 0 8.33333%;
max-width: 8.33333%
}
.col-md-2 {
flex: 0 0 16.66667%;
max-width: 16.66667%
}
.col-md-3 {
flex: 0 0 25%;
max-width: 25%
}
.col-md-4 {
flex: 0 0 33.33333%;
max-width: 33.33333%
}
.col-md-5 {
flex: 0 0 41.66667%;
max-width: 41.66667%
}
.col-md-6 {
flex: 0 0 50%;
max-width: 50%
}
.col-md-7 {
flex: 0 0 58.33333%;
max-width: 58.33333%
}
.col-md-8 {
flex: 0 0 66.66667%;
max-width: 66.66667%
}
.col-md-9 {
flex: 0 0 75%;
max-width: 75%
}
.col-md-10 {
flex: 0 0 83.33333%;
max-width: 83.33333%
}
.col-md-11 {
flex: 0 0 91.66667%;
max-width: 91.66667%
}
.col-md-12 {
flex: 0 0 100%;
max-width: 100%
}
.order-md-first {
order: -1
}
.order-md-last {
order: 13
}
.order-md-0 {
order: 0
}
.order-md-1 {
order: 1
}
.order-md-2 {
order: 2
}
.order-md-3 {
order: 3
}
.order-md-4 {
order: 4
}
.order-md-5 {
order: 5
}
.order-md-6 {
order: 6
}
.order-md-7 {
order: 7
}
.order-md-8 {
order: 8
}
.order-md-9 {
order: 9
}
.order-md-10 {
order: 10
}
.order-md-11 {
order: 11
}
.order-md-12 {
order: 12
}
.offset-md-0 {
margin-left: 0
}
.offset-md-1 {
margin-left: 8.33333%
}
.offset-md-2 {
margin-left: 16.66667%
}
.offset-md-3 {
margin-left: 25%
}
.offset-md-4 {
margin-left: 33.33333%
}
.offset-md-5 {
margin-left: 41.66667%
}
.offset-md-6 {
margin-left: 50%
}
.offset-md-7 {
margin-left: 58.33333%
}
.offset-md-8 {
margin-left: 66.66667%
}
.offset-md-9 {
margin-left: 75%
}
.offset-md-10 {
margin-left: 83.33333%
}
.offset-md-11 {
margin-left: 91.66667%
}
}
@media (min-width: 980px) {
.col-lg {
flex-basis: 0;
flex-grow: 1;
max-width: 100%
}
.col-lg-auto {
flex: 0 0 auto;
width: auto;
max-width: none
}
.col-lg-1 {
flex: 0 0 8.33333%;
max-width: 8.33333%
}
.col-lg-2 {
flex: 0 0 16.66667%;
max-width: 16.66667%
}
.col-lg-3 {
flex: 0 0 25%;
max-width: 25%
}
.col-lg-4 {
flex: 0 0 33.33333%;
max-width: 33.33333%
}
.col-lg-5 {
flex: 0 0 41.66667%;
max-width: 41.66667%
}
.col-lg-6 {
flex: 0 0 50%;
max-width: 50%
}
.col-lg-7 {
flex: 0 0 58.33333%;
max-width: 58.33333%
}
.col-lg-8 {
flex: 0 0 66.66667%;
max-width: 66.66667%
}
.col-lg-9 {
flex: 0 0 75%;
max-width: 75%
}
.col-lg-10 {
flex: 0 0 83.33333%;
max-width: 83.33333%
}
.col-lg-11 {
flex: 0 0 91.66667%;
max-width: 91.66667%
}
.col-lg-12 {
flex: 0 0 100%;
max-width: 100%
}
.order-lg-first {
order: -1
}
.order-lg-last {
order: 13
}
.order-lg-0 {
order: 0
}
.order-lg-1 {
order: 1
}
.order-lg-2 {
order: 2
}
.order-lg-3 {
order: 3
}
.order-lg-4 {
order: 4
}
.order-lg-5 {
order: 5
}
.order-lg-6 {
order: 6
}
.order-lg-7 {
order: 7
}
.order-lg-8 {
order: 8
}
.order-lg-9 {
order: 9
}
.order-lg-10 {
order: 10
}
.order-lg-11 {
order: 11
}
.order-lg-12 {
order: 12
}
.offset-lg-0 {
margin-left: 0
}
.offset-lg-1 {
margin-left: 8.33333%
}
.offset-lg-2 {
margin-left: 16.66667%
}
.offset-lg-3 {
margin-left: 25%
}
.offset-lg-4 {
margin-left: 33.33333%
}
.offset-lg-5 {
margin-left: 41.66667%
}
.offset-lg-6 {
margin-left: 50%
}
.offset-lg-7 {
margin-left: 58.33333%
}
.offset-lg-8 {
margin-left: 66.66667%
}
.offset-lg-9 {
margin-left: 75%
}
.offset-lg-10 {
margin-left: 83.33333%
}
.offset-lg-11 {
margin-left: 91.66667%
}
}
@media (min-width: 1100px) {
.col-xl {
flex-basis: 0;
flex-grow: 1;
max-width: 100%
}
.col-xl-auto {
flex: 0 0 auto;
width: auto;
max-width: none
}
.col-xl-1 {
flex: 0 0 8.33333%;
max-width: 8.33333%
}
.col-xl-2 {
flex: 0 0 16.66667%;
max-width: 16.66667%
}
.col-xl-3 {
flex: 0 0 25%;
max-width: 25%
}
.col-xl-4 {
flex: 0 0 33.33333%;
max-width: 33.33333%
}
.col-xl-5 {
flex: 0 0 41.66667%;
max-width: 41.66667%
}
.col-xl-6 {
flex: 0 0 50%;
max-width: 50%
}
.col-xl-7 {
flex: 0 0 58.33333%;
max-width: 58.33333%
}
.col-xl-8 {
flex: 0 0 66.66667%;
max-width: 66.66667%
}
.col-xl-9 {
flex: 0 0 75%;
max-width: 75%
}
.col-xl-10 {
flex: 0 0 83.33333%;
max-width: 83.33333%
}
.col-xl-11 {
flex: 0 0 91.66667%;
max-width: 91.66667%
}
.col-xl-12 {
flex: 0 0 100%;
max-width: 100%
}
.order-xl-first {
order: -1
}
.order-xl-last {
order: 13
}
.order-xl-0 {
order: 0
}
.order-xl-1 {
order: 1
}
.order-xl-2 {
order: 2
}
.order-xl-3 {
order: 3
}
.order-xl-4 {
order: 4
}
.order-xl-5 {
order: 5
}
.order-xl-6 {
order: 6
}
.order-xl-7 {
order: 7
}
.order-xl-8 {
order: 8
}
.order-xl-9 {
order: 9
}
.order-xl-10 {
order: 10
}
.order-xl-11 {
order: 11
}
.order-xl-12 {
order: 12
}
.offset-xl-0 {
margin-left: 0
}
.offset-xl-1 {
margin-left: 8.33333%
}
.offset-xl-2 {
margin-left: 16.66667%
}
.offset-xl-3 {
margin-left: 25%
}
.offset-xl-4 {
margin-left: 33.33333%
}
.offset-xl-5 {
margin-left: 41.66667%
}
.offset-xl-6 {
margin-left: 50%
}
.offset-xl-7 {
margin-left: 58.33333%
}
.offset-xl-8 {
margin-left: 66.66667%
}
.offset-xl-9 {
margin-left: 75%
}
.offset-xl-10 {
margin-left: 83.33333%
}
.offset-xl-11 {
margin-left: 91.66667%
}
}
@media (min-width: 1300px) {
.col-xxl {
flex-basis: 0;
flex-grow: 1;
max-width: 100%
}
.col-xxl-auto {
flex: 0 0 auto;
width: auto;
max-width: none
}
.col-xxl-1 {
flex: 0 0 8.33333%;
max-width: 8.33333%
}
.col-xxl-2 {
flex: 0 0 16.66667%;
max-width: 16.66667%
}
.col-xxl-3 {
flex: 0 0 25%;
max-width: 25%
}
.col-xxl-4 {
flex: 0 0 33.33333%;
max-width: 33.33333%
}
.col-xxl-5 {
flex: 0 0 41.66667%;
max-width: 41.66667%
}
.col-xxl-6 {
flex: 0 0 50%;
max-width: 50%
}
.col-xxl-7 {
flex: 0 0 58.33333%;
max-width: 58.33333%
}
.col-xxl-8 {
flex: 0 0 66.66667%;
max-width: 66.66667%
}
.col-xxl-9 {
flex: 0 0 75%;
max-width: 75%
}
.col-xxl-10 {
flex: 0 0 83.33333%;
max-width: 83.33333%
}
.col-xxl-11 {
flex: 0 0 91.66667%;
max-width: 91.66667%
}
.col-xxl-12 {
flex: 0 0 100%;
max-width: 100%
}
.order-xxl-first {
order: -1
}
.order-xxl-last {
order: 13
}
.order-xxl-0 {
order: 0
}
.order-xxl-1 {
order: 1
}
.order-xxl-2 {
order: 2
}
.order-xxl-3 {
order: 3
}
.order-xxl-4 {
order: 4
}
.order-xxl-5 {
order: 5
}
.order-xxl-6 {
order: 6
}
.order-xxl-7 {
order: 7
}
.order-xxl-8 {
order: 8
}
.order-xxl-9 {
order: 9
}
.order-xxl-10 {
order: 10
}
.order-xxl-11 {
order: 11
}
.order-xxl-12 {
order: 12
}
.offset-xxl-0 {
margin-left: 0
}
.offset-xxl-1 {
margin-left: 8.33333%
}
.offset-xxl-2 {
margin-left: 16.66667%
}
.offset-xxl-3 {
margin-left: 25%
}
.offset-xxl-4 {
margin-left: 33.33333%
}
.offset-xxl-5 {
margin-left: 41.66667%
}
.offset-xxl-6 {
margin-left: 50%
}
.offset-xxl-7 {
margin-left: 58.33333%
}
.offset-xxl-8 {
margin-left: 66.66667%
}
.offset-xxl-9 {
margin-left: 75%
}
.offset-xxl-10 {
margin-left: 83.33333%
}
.offset-xxl-11 {
margin-left: 91.66667%
}
}
@media (min-width: 1780px) {
.col-xxxl {
flex-basis: 0;
flex-grow: 1;
max-width: 100%
}
.col-xxxl-auto {
flex: 0 0 auto;
width: auto;
max-width: none
}
.col-xxxl-1 {
flex: 0 0 8.33333%;
max-width: 8.33333%
}
.col-xxxl-2 {
flex: 0 0 16.66667%;
max-width: 16.66667%
}
.col-xxxl-3 {
flex: 0 0 25%;
max-width: 25%
}
.col-xxxl-4 {
flex: 0 0 33.33333%;
max-width: 33.33333%
}
.col-xxxl-5 {
flex: 0 0 41.66667%;
max-width: 41.66667%
}
.col-xxxl-6 {
flex: 0 0 50%;
max-width: 50%
}
.col-xxxl-7 {
flex: 0 0 58.33333%;
max-width: 58.33333%
}
.col-xxxl-8 {
flex: 0 0 66.66667%;
max-width: 66.66667%
}
.col-xxxl-9 {
flex: 0 0 75%;
max-width: 75%
}
.col-xxxl-10 {
flex: 0 0 83.33333%;
max-width: 83.33333%
}
.col-xxxl-11 {
flex: 0 0 91.66667%;
max-width: 91.66667%
}
.col-xxxl-12 {
flex: 0 0 100%;
max-width: 100%
}
.order-xxxl-first {
order: -1
}
.order-xxxl-last {
order: 13
}
.order-xxxl-0 {
order: 0
}
.order-xxxl-1 {
order: 1
}
.order-xxxl-2 {
order: 2
}
.order-xxxl-3 {
order: 3
}
.order-xxxl-4 {
order: 4
}
.order-xxxl-5 {
order: 5
}
.order-xxxl-6 {
order: 6
}
.order-xxxl-7 {
order: 7
}
.order-xxxl-8 {
order: 8
}
.order-xxxl-9 {
order: 9
}
.order-xxxl-10 {
order: 10
}
.order-xxxl-11 {
order: 11
}
.order-xxxl-12 {
order: 12
}
.offset-xxxl-0 {
margin-left: 0
}
.offset-xxxl-1 {
margin-left: 8.33333%
}
.offset-xxxl-2 {
margin-left: 16.66667%
}
.offset-xxxl-3 {
margin-left: 25%
}
.offset-xxxl-4 {
margin-left: 33.33333%
}
.offset-xxxl-5 {
margin-left: 41.66667%
}
.offset-xxxl-6 {
margin-left: 50%
}
.offset-xxxl-7 {
margin-left: 58.33333%
}
.offset-xxxl-8 {
margin-left: 66.66667%
}
.offset-xxxl-9 {
margin-left: 75%
}
.offset-xxxl-10 {
margin-left: 83.33333%
}
.offset-xxxl-11 {
margin-left: 91.66667%
}
}
@media (min-width: 2200px) {
.col-super {
flex-basis: 0;
flex-grow: 1;
max-width: 100%
}
.col-super-auto {
flex: 0 0 auto;
width: auto;
max-width: none
}
.col-super-1 {
flex: 0 0 8.33333%;
max-width: 8.33333%
}
.col-super-2 {
flex: 0 0 16.66667%;
max-width: 16.66667%
}
.col-super-3 {
flex: 0 0 25%;
max-width: 25%
}
.col-super-4 {
flex: 0 0 33.33333%;
max-width: 33.33333%
}
.col-super-5 {
flex: 0 0 41.66667%;
max-width: 41.66667%
}
.col-super-6 {
flex: 0 0 50%;
max-width: 50%
}
.col-super-7 {
flex: 0 0 58.33333%;
max-width: 58.33333%
}
.col-super-8 {
flex: 0 0 66.66667%;
max-width: 66.66667%
}
.col-super-9 {
flex: 0 0 75%;
max-width: 75%
}
.col-super-10 {
flex: 0 0 83.33333%;
max-width: 83.33333%
}
.col-super-11 {
flex: 0 0 91.66667%;
max-width: 91.66667%
}
.col-super-12 {
flex: 0 0 100%;
max-width: 100%
}
.order-super-first {
order: -1
}
.order-super-last {
order: 13
}
.order-super-0 {
order: 0
}
.order-super-1 {
order: 1
}
.order-super-2 {
order: 2
}
.order-super-3 {
order: 3
}
.order-super-4 {
order: 4
}
.order-super-5 {
order: 5
}
.order-super-6 {
order: 6
}
.order-super-7 {
order: 7
}
.order-super-8 {
order: 8
}
.order-super-9 {
order: 9
}
.order-super-10 {
order: 10
}
.order-super-11 {
order: 11
}
.order-super-12 {
order: 12
}
.offset-super-0 {
margin-left: 0
}
.offset-super-1 {
margin-left: 8.33333%
}
.offset-super-2 {
margin-left: 16.66667%
}
.offset-super-3 {
margin-left: 25%
}
.offset-super-4 {
margin-left: 33.33333%
}
.offset-super-5 {
margin-left: 41.66667%
}
.offset-super-6 {
margin-left: 50%
}
.offset-super-7 {
margin-left: 58.33333%
}
.offset-super-8 {
margin-left: 66.66667%
}
.offset-super-9 {
margin-left: 75%
}
.offset-super-10 {
margin-left: 83.33333%
}
.offset-super-11 {
margin-left: 91.66667%
}
}
.d-none {
display: none !important
}
.d-inline {
display: inline !important
}
.d-inline-block {
display: inline-block !important
}
.d-block {
display: block !important
}
.d-table {
display: table !important
}
.d-table-row {
display: table-row !important
}
.d-table-cell {
display: table-cell !important
}
.d-flex {
display: flex !important
}
.d-inline-flex {
display: inline-flex !important
}
@media (min-width: 576px) {
.d-sm-none {
display: none !important
}
.d-sm-inline {
display: inline !important
}
.d-sm-inline-block {
display: inline-block !important
}
.d-sm-block {
display: block !important
}
.d-sm-table {
display: table !important
}
.d-sm-table-row {
display: table-row !important
}
.d-sm-table-cell {
display: table-cell !important
}
.d-sm-flex {
display: flex !important
}
.d-sm-inline-flex {
display: inline-flex !important
}
}
@media (min-width: 740px) {
.d-md-none {
display: none !important
}
.d-md-inline {
display: inline !important
}
.d-md-inline-block {
display: inline-block !important
}
.d-md-block {
display: block !important
}
.d-md-table {
display: table !important
}
.d-md-table-row {
display: table-row !important
}
.d-md-table-cell {
display: table-cell !important
}
.d-md-flex {
display: flex !important
}
.d-md-inline-flex {
display: inline-flex !important
}
}
@media (min-width: 980px) {
.d-lg-none {
display: none !important
}
.d-lg-inline {
display: inline !important
}
.d-lg-inline-block {
display: inline-block !important
}
.d-lg-block {
display: block !important
}
.d-lg-table {
display: table !important
}
.d-lg-table-row {
display: table-row !important
}
.d-lg-table-cell {
display: table-cell !important
}
.d-lg-flex {
display: flex !important
}
.d-lg-inline-flex {
display: inline-flex !important
}
}
@media (min-width: 1100px) {
.d-xl-none {
display: none !important
}
.d-xl-inline {
display: inline !important
}
.d-xl-inline-block {
display: inline-block !important
}
.d-xl-block {
display: block !important
}
.d-xl-table {
display: table !important
}
.d-xl-table-row {
display: table-row !important
}
.d-xl-table-cell {
display: table-cell !important
}
.d-xl-flex {
display: flex !important
}
.d-xl-inline-flex {
display: inline-flex !important
}
}
@media (min-width: 1300px) {
.d-xxl-none {
display: none !important
}
.d-xxl-inline {
display: inline !important
}
.d-xxl-inline-block {
display: inline-block !important
}
.d-xxl-block {
display: block !important
}
.d-xxl-table {
display: table !important
}
.d-xxl-table-row {
display: table-row !important
}
.d-xxl-table-cell {
display: table-cell !important
}
.d-xxl-flex {
display: flex !important
}
.d-xxl-inline-flex {
display: inline-flex !important
}
}
@media (min-width: 1780px) {
.d-xxxl-none {
display: none !important
}
.d-xxxl-inline {
display: inline !important
}
.d-xxxl-inline-block {
display: inline-block !important
}
.d-xxxl-block {
display: block !important
}
.d-xxxl-table {
display: table !important
}
.d-xxxl-table-row {
display: table-row !important
}
.d-xxxl-table-cell {
display: table-cell !important
}
.d-xxxl-flex {
display: flex !important
}
.d-xxxl-inline-flex {
display: inline-flex !important
}
}
@media (min-width: 2200px) {
.d-super-none {
display: none !important
}
.d-super-inline {
display: inline !important
}
.d-super-inline-block {
display: inline-block !important
}
.d-super-block {
display: block !important
}
.d-super-table {
display: table !important
}
.d-super-table-row {
display: table-row !important
}
.d-super-table-cell {
display: table-cell !important
}
.d-super-flex {
display: flex !important
}
.d-super-inline-flex {
display: inline-flex !important
}
}
@media print {
.d-print-none {
display: none !important
}
.d-print-inline {
display: inline !important
}
.d-print-inline-block {
display: inline-block !important
}
.d-print-block {
display: block !important
}
.d-print-table {
display: table !important
}
.d-print-table-row {
display: table-row !important
}
.d-print-table-cell {
display: table-cell !important
}
.d-print-flex {
display: flex !important
}
.d-print-inline-flex {
display: inline-flex !important
}
}
.flex-row {
flex-direction: row !important
}
.flex-column {
flex-direction: column !important
}
.flex-row-reverse {
flex-direction: row-reverse !important
}
.flex-column-reverse {
flex-direction: column-reverse !important
}
.flex-wrap {
flex-wrap: wrap !important
}
.flex-nowrap {
flex-wrap: nowrap !important
}
.flex-wrap-reverse {
flex-wrap: wrap-reverse !important
}
.flex-fill {
flex: 1 1 auto !important
}
.flex-grow-0 {
flex-grow: 0 !important
}
.flex-grow-1 {
flex-grow: 1 !important
}
.flex-shrink-0 {
flex-shrink: 0 !important
}
.flex-shrink-1 {
flex-shrink: 1 !important
}
.justify-content-start {
justify-content: flex-start !important
}
.justify-content-end {
justify-content: flex-end !important
}
.justify-content-center {
justify-content: center !important
}
.justify-content-between {
justify-content: space-between !important
}
.justify-content-around {
justify-content: space-around !important
}
.align-items-start {
align-items: flex-start !important
}
.align-items-end {
align-items: flex-end !important
}
.align-items-center {
align-items: center !important
}
.align-items-baseline {
align-items: baseline !important
}
.align-items-stretch {
align-items: stretch !important
}
.align-content-start {
align-content: flex-start !important
}
.align-content-end {
align-content: flex-end !important
}
.align-content-center {
align-content: center !important
}
.align-content-between {
align-content: space-between !important
}
.align-content-around {
align-content: space-around !important
}
.align-content-stretch {
align-content: stretch !important
}
.align-self-auto {
align-self: auto !important
}
.align-self-start {
align-self: flex-start !important
}
.align-self-end {
align-self: flex-end !important
}
.align-self-center {
align-self: center !important
}
.align-self-baseline {
align-self: baseline !important
}
.align-self-stretch {
align-self: stretch !important
}
@media (min-width: 576px) {
.flex-sm-row {
flex-direction: row !important
}
.flex-sm-column {
flex-direction: column !important
}
.flex-sm-row-reverse {
flex-direction: row-reverse !important
}
.flex-sm-column-reverse {
flex-direction: column-reverse !important
}
.flex-sm-wrap {
flex-wrap: wrap !important
}
.flex-sm-nowrap {
flex-wrap: nowrap !important
}
.flex-sm-wrap-reverse {
flex-wrap: wrap-reverse !important
}
.flex-sm-fill {
flex: 1 1 auto !important
}
.flex-sm-grow-0 {
flex-grow: 0 !important
}
.flex-sm-grow-1 {
flex-grow: 1 !important
}
.flex-sm-shrink-0 {
flex-shrink: 0 !important
}
.flex-sm-shrink-1 {
flex-shrink: 1 !important
}
.justify-content-sm-start {
justify-content: flex-start !important
}
.justify-content-sm-end {
justify-content: flex-end !important
}
.justify-content-sm-center {
justify-content: center !important
}
.justify-content-sm-between {
justify-content: space-between !important
}
.justify-content-sm-around {
justify-content: space-around !important
}
.align-items-sm-start {
align-items: flex-start !important
}
.align-items-sm-end {
align-items: flex-end !important
}
.align-items-sm-center {
align-items: center !important
}
.align-items-sm-baseline {
align-items: baseline !important
}
.align-items-sm-stretch {
align-items: stretch !important
}
.align-content-sm-start {
align-content: flex-start !important
}
.align-content-sm-end {
align-content: flex-end !important
}
.align-content-sm-center {
align-content: center !important
}
.align-content-sm-between {
align-content: space-between !important
}
.align-content-sm-around {
align-content: space-around !important
}
.align-content-sm-stretch {
align-content: stretch !important
}
.align-self-sm-auto {
align-self: auto !important
}
.align-self-sm-start {
align-self: flex-start !important
}
.align-self-sm-end {
align-self: flex-end !important
}
.align-self-sm-center {
align-self: center !important
}
.align-self-sm-baseline {
align-self: baseline !important
}
.align-self-sm-stretch {
align-self: stretch !important
}
}
@media (min-width: 740px) {
.flex-md-row {
flex-direction: row !important
}
.flex-md-column {
flex-direction: column !important
}
.flex-md-row-reverse {
flex-direction: row-reverse !important
}
.flex-md-column-reverse {
flex-direction: column-reverse !important
}
.flex-md-wrap {
flex-wrap: wrap !important
}
.flex-md-nowrap {
flex-wrap: nowrap !important
}
.flex-md-wrap-reverse {
flex-wrap: wrap-reverse !important
}
.flex-md-fill {
flex: 1 1 auto !important
}
.flex-md-grow-0 {
flex-grow: 0 !important
}
.flex-md-grow-1 {
flex-grow: 1 !important
}
.flex-md-shrink-0 {
flex-shrink: 0 !important
}
.flex-md-shrink-1 {
flex-shrink: 1 !important
}
.justify-content-md-start {
justify-content: flex-start !important
}
.justify-content-md-end {
justify-content: flex-end !important
}
.justify-content-md-center {
justify-content: center !important
}
.justify-content-md-between {
justify-content: space-between !important
}
.justify-content-md-around {
justify-content: space-around !important
}
.align-items-md-start {
align-items: flex-start !important
}
.align-items-md-end {
align-items: flex-end !important
}
.align-items-md-center {
align-items: center !important
}
.align-items-md-baseline {
align-items: baseline !important
}
.align-items-md-stretch {
align-items: stretch !important
}
.align-content-md-start {
align-content: flex-start !important
}
.align-content-md-end {
align-content: flex-end !important
}
.align-content-md-center {
align-content: center !important
}
.align-content-md-between {
align-content: space-between !important
}
.align-content-md-around {
align-content: space-around !important
}
.align-content-md-stretch {
align-content: stretch !important
}
.align-self-md-auto {
align-self: auto !important
}
.align-self-md-start {
align-self: flex-start !important
}
.align-self-md-end {
align-self: flex-end !important
}
.align-self-md-center {
align-self: center !important
}
.align-self-md-baseline {
align-self: baseline !important
}
.align-self-md-stretch {
align-self: stretch !important
}
}
@media (min-width: 980px) {
.flex-lg-row {
flex-direction: row !important
}
.flex-lg-column {
flex-direction: column !important
}
.flex-lg-row-reverse {
flex-direction: row-reverse !important
}
.flex-lg-column-reverse {
flex-direction: column-reverse !important
}
.flex-lg-wrap {
flex-wrap: wrap !important
}
.flex-lg-nowrap {
flex-wrap: nowrap !important
}
.flex-lg-wrap-reverse {
flex-wrap: wrap-reverse !important
}
.flex-lg-fill {
flex: 1 1 auto !important
}
.flex-lg-grow-0 {
flex-grow: 0 !important
}
.flex-lg-grow-1 {
flex-grow: 1 !important
}
.flex-lg-shrink-0 {
flex-shrink: 0 !important
}
.flex-lg-shrink-1 {
flex-shrink: 1 !important
}
.justify-content-lg-start {
justify-content: flex-start !important
}
.justify-content-lg-end {
justify-content: flex-end !important
}
.justify-content-lg-center {
justify-content: center !important
}
.justify-content-lg-between {
justify-content: space-between !important
}
.justify-content-lg-around {
justify-content: space-around !important
}
.align-items-lg-start {
align-items: flex-start !important
}
.align-items-lg-end {
align-items: flex-end !important
}
.align-items-lg-center {
align-items: center !important
}
.align-items-lg-baseline {
align-items: baseline !important
}
.align-items-lg-stretch {
align-items: stretch !important
}
.align-content-lg-start {
align-content: flex-start !important
}
.align-content-lg-end {
align-content: flex-end !important
}
.align-content-lg-center {
align-content: center !important
}
.align-content-lg-between {
align-content: space-between !important
}
.align-content-lg-around {
align-content: space-around !important
}
.align-content-lg-stretch {
align-content: stretch !important
}
.align-self-lg-auto {
align-self: auto !important
}
.align-self-lg-start {
align-self: flex-start !important
}
.align-self-lg-end {
align-self: flex-end !important
}
.align-self-lg-center {
align-self: center !important
}
.align-self-lg-baseline {
align-self: baseline !important
}
.align-self-lg-stretch {
align-self: stretch !important
}
}
@media (min-width: 1100px) {
.flex-xl-row {
flex-direction: row !important
}
.flex-xl-column {
flex-direction: column !important
}
.flex-xl-row-reverse {
flex-direction: row-reverse !important
}
.flex-xl-column-reverse {
flex-direction: column-reverse !important
}
.flex-xl-wrap {
flex-wrap: wrap !important
}
.flex-xl-nowrap {
flex-wrap: nowrap !important
}
.flex-xl-wrap-reverse {
flex-wrap: wrap-reverse !important
}
.flex-xl-fill {
flex: 1 1 auto !important
}
.flex-xl-grow-0 {
flex-grow: 0 !important
}
.flex-xl-grow-1 {
flex-grow: 1 !important
}
.flex-xl-shrink-0 {
flex-shrink: 0 !important
}
.flex-xl-shrink-1 {
flex-shrink: 1 !important
}
.justify-content-xl-start {
justify-content: flex-start !important
}
.justify-content-xl-end {
justify-content: flex-end !important
}
.justify-content-xl-center {
justify-content: center !important
}
.justify-content-xl-between {
justify-content: space-between !important
}
.justify-content-xl-around {
justify-content: space-around !important
}
.align-items-xl-start {
align-items: flex-start !important
}
.align-items-xl-end {
align-items: flex-end !important
}
.align-items-xl-center {
align-items: center !important
}
.align-items-xl-baseline {
align-items: baseline !important
}
.align-items-xl-stretch {
align-items: stretch !important
}
.align-content-xl-start {
align-content: flex-start !important
}
.align-content-xl-end {
align-content: flex-end !important
}
.align-content-xl-center {
align-content: center !important
}
.align-content-xl-between {
align-content: space-between !important
}
.align-content-xl-around {
align-content: space-around !important
}
.align-content-xl-stretch {
align-content: stretch !important
}
.align-self-xl-auto {
align-self: auto !important
}
.align-self-xl-start {
align-self: flex-start !important
}
.align-self-xl-end {
align-self: flex-end !important
}
.align-self-xl-center {
align-self: center !important
}
.align-self-xl-baseline {
align-self: baseline !important
}
.align-self-xl-stretch {
align-self: stretch !important
}
}
@media (min-width: 1300px) {
.flex-xxl-row {
flex-direction: row !important
}
.flex-xxl-column {
flex-direction: column !important
}
.flex-xxl-row-reverse {
flex-direction: row-reverse !important
}
.flex-xxl-column-reverse {
flex-direction: column-reverse !important
}
.flex-xxl-wrap {
flex-wrap: wrap !important
}
.flex-xxl-nowrap {
flex-wrap: nowrap !important
}
.flex-xxl-wrap-reverse {
flex-wrap: wrap-reverse !important
}
.flex-xxl-fill {
flex: 1 1 auto !important
}
.flex-xxl-grow-0 {
flex-grow: 0 !important
}
.flex-xxl-grow-1 {
flex-grow: 1 !important
}
.flex-xxl-shrink-0 {
flex-shrink: 0 !important
}
.flex-xxl-shrink-1 {
flex-shrink: 1 !important
}
.justify-content-xxl-start {
justify-content: flex-start !important
}
.justify-content-xxl-end {
justify-content: flex-end !important
}
.justify-content-xxl-center {
justify-content: center !important
}
.justify-content-xxl-between {
justify-content: space-between !important
}
.justify-content-xxl-around {
justify-content: space-around !important
}
.align-items-xxl-start {
align-items: flex-start !important
}
.align-items-xxl-end {
align-items: flex-end !important
}
.align-items-xxl-center {
align-items: center !important
}
.align-items-xxl-baseline {
align-items: baseline !important
}
.align-items-xxl-stretch {
align-items: stretch !important
}
.align-content-xxl-start {
align-content: flex-start !important
}
.align-content-xxl-end {
align-content: flex-end !important
}
.align-content-xxl-center {
align-content: center !important
}
.align-content-xxl-between {
align-content: space-between !important
}
.align-content-xxl-around {
align-content: space-around !important
}
.align-content-xxl-stretch {
align-content: stretch !important
}
.align-self-xxl-auto {
align-self: auto !important
}
.align-self-xxl-start {
align-self: flex-start !important
}
.align-self-xxl-end {
align-self: flex-end !important
}
.align-self-xxl-center {
align-self: center !important
}
.align-self-xxl-baseline {
align-self: baseline !important
}
.align-self-xxl-stretch {
align-self: stretch !important
}
}
@media (min-width: 1780px) {
.flex-xxxl-row {
flex-direction: row !important
}
.flex-xxxl-column {
flex-direction: column !important
}
.flex-xxxl-row-reverse {
flex-direction: row-reverse !important
}
.flex-xxxl-column-reverse {
flex-direction: column-reverse !important
}
.flex-xxxl-wrap {
flex-wrap: wrap !important
}
.flex-xxxl-nowrap {
flex-wrap: nowrap !important
}
.flex-xxxl-wrap-reverse {
flex-wrap: wrap-reverse !important
}
.flex-xxxl-fill {
flex: 1 1 auto !important
}
.flex-xxxl-grow-0 {
flex-grow: 0 !important
}
.flex-xxxl-grow-1 {
flex-grow: 1 !important
}
.flex-xxxl-shrink-0 {
flex-shrink: 0 !important
}
.flex-xxxl-shrink-1 {
flex-shrink: 1 !important
}
.justify-content-xxxl-start {
justify-content: flex-start !important
}
.justify-content-xxxl-end {
justify-content: flex-end !important
}
.justify-content-xxxl-center {
justify-content: center !important
}
.justify-content-xxxl-between {
justify-content: space-between !important
}
.justify-content-xxxl-around {
justify-content: space-around !important
}
.align-items-xxxl-start {
align-items: flex-start !important
}
.align-items-xxxl-end {
align-items: flex-end !important
}
.align-items-xxxl-center {
align-items: center !important
}
.align-items-xxxl-baseline {
align-items: baseline !important
}
.align-items-xxxl-stretch {
align-items: stretch !important
}
.align-content-xxxl-start {
align-content: flex-start !important
}
.align-content-xxxl-end {
align-content: flex-end !important
}
.align-content-xxxl-center {
align-content: center !important
}
.align-content-xxxl-between {
align-content: space-between !important
}
.align-content-xxxl-around {
align-content: space-around !important
}
.align-content-xxxl-stretch {
align-content: stretch !important
}
.align-self-xxxl-auto {
align-self: auto !important
}
.align-self-xxxl-start {
align-self: flex-start !important
}
.align-self-xxxl-end {
align-self: flex-end !important
}
.align-self-xxxl-center {
align-self: center !important
}
.align-self-xxxl-baseline {
align-self: baseline !important
}
.align-self-xxxl-stretch {
align-self: stretch !important
}
}
@media (min-width: 2200px) {
.flex-super-row {
flex-direction: row !important
}
.flex-super-column {
flex-direction: column !important
}
.flex-super-row-reverse {
flex-direction: row-reverse !important
}
.flex-super-column-reverse {
flex-direction: column-reverse !important
}
.flex-super-wrap {
flex-wrap: wrap !important
}
.flex-super-nowrap {
flex-wrap: nowrap !important
}
.flex-super-wrap-reverse {
flex-wrap: wrap-reverse !important
}
.flex-super-fill {
flex: 1 1 auto !important
}
.flex-super-grow-0 {
flex-grow: 0 !important
}
.flex-super-grow-1 {
flex-grow: 1 !important
}
.flex-super-shrink-0 {
flex-shrink: 0 !important
}
.flex-super-shrink-1 {
flex-shrink: 1 !important
}
.justify-content-super-start {
justify-content: flex-start !important
}
.justify-content-super-end {
justify-content: flex-end !important
}
.justify-content-super-center {
justify-content: center !important
}
.justify-content-super-between {
justify-content: space-between !important
}
.justify-content-super-around {
justify-content: space-around !important
}
.align-items-super-start {
align-items: flex-start !important
}
.align-items-super-end {
align-items: flex-end !important
}
.align-items-super-center {
align-items: center !important
}
.align-items-super-baseline {
align-items: baseline !important
}
.align-items-super-stretch {
align-items: stretch !important
}
.align-content-super-start {
align-content: flex-start !important
}
.align-content-super-end {
align-content: flex-end !important
}
.align-content-super-center {
align-content: center !important
}
.align-content-super-between {
align-content: space-between !important
}
.align-content-super-around {
align-content: space-around !important
}
.align-content-super-stretch {
align-content: stretch !important
}
.align-self-super-auto {
align-self: auto !important
}
.align-self-super-start {
align-self: flex-start !important
}
.align-self-super-end {
align-self: flex-end !important
}
.align-self-super-center {
align-self: center !important
}
.align-self-super-baseline {
align-self: baseline !important
}
.align-self-super-stretch {
align-self: stretch !important
}
}
.text-monospace {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}
.text-justify {
text-align: justify !important
}
.text-nowrap {
white-space: nowrap !important
}
.text-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.text-left {
text-align: left !important
}
.text-right {
text-align: right !important
}
.text-center {
text-align: center !important
}
@media (min-width: 576px) {
.text-sm-left {
text-align: left !important
}
.text-sm-right {
text-align: right !important
}
.text-sm-center {
text-align: center !important
}
}
@media (min-width: 740px) {
.text-md-left {
text-align: left !important
}
.text-md-right {
text-align: right !important
}
.text-md-center {
text-align: center !important
}
}
@media (min-width: 980px) {
.text-lg-left {
text-align: left !important
}
.text-lg-right {
text-align: right !important
}
.text-lg-center {
text-align: center !important
}
}
@media (min-width: 1100px) {
.text-xl-left {
text-align: left !important
}
.text-xl-right {
text-align: right !important
}
.text-xl-center {
text-align: center !important
}
}
@media (min-width: 1300px) {
.text-xxl-left {
text-align: left !important
}
.text-xxl-right {
text-align: right !important
}
.text-xxl-center {
text-align: center !important
}
}
@media (min-width: 1780px) {
.text-xxxl-left {
text-align: left !important
}
.text-xxxl-right {
text-align: right !important
}
.text-xxxl-center {
text-align: center !important
}
}
@media (min-width: 2200px) {
.text-super-left {
text-align: left !important
}
.text-super-right {
text-align: right !important
}
.text-super-center {
text-align: center !important
}
}
.text-lowercase {
text-transform: lowercase !important
}
.text-uppercase {
text-transform: uppercase !important
}
.text-capitalize {
text-transform: capitalize !important
}
.font-weight-light {
font-weight: 300 !important
}
.font-weight-normal {
font-weight: 400 !important
}
.font-weight-bold {
font-weight: 700 !important
}
.font-italic {
font-style: italic !important
}
.text-white {
color: #fff !important
}
.text-primary {
color: #007bff !important
}
a.text-primary:hover, a.text-primary:focus {
color: #0062cc !important
}
.text-secondary {
color: #6c757d !important
}
a.text-secondary:hover, a.text-secondary:focus {
color: #545b62 !important
}
.text-success {
color: #28a745 !important
}
a.text-success:hover, a.text-success:focus {
color: #1e7e34 !important
}
.text-info {
color: #17a2b8 !important
}
a.text-info:hover, a.text-info:focus {
color: #117a8b !important
}
.text-warning {
color: #ffc107 !important
}
a.text-warning:hover, a.text-warning:focus {
color: #d39e00 !important
}
.text-danger {
color: #dc3545 !important
}
a.text-danger:hover, a.text-danger:focus {
color: #bd2130 !important
}
.text-light {
color: #f8f9fa !important
}
a.text-light:hover, a.text-light:focus {
color: #dae0e5 !important
}
.text-dark {
color: #343a40 !important
}
a.text-dark:hover, a.text-dark:focus {
color: #1d2124 !important
}
.text-body {
color: #212529 !important
}
.text-muted {
color: #6c757d !important
}
.text-black-50 {
color: rgba(0, 0, 0, 0.5) !important
}
.text-white-50 {
color: rgba(255, 255, 255, 0.5) !important
}
.text-hide {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0
}
/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
.pswp {
display: none;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
overflow: hidden;
-ms-touch-action: none;
touch-action: none;
z-index: 1500;
-webkit-text-size-adjust: 100%;
-webkit-backface-visibility: hidden;
outline: none
}
.pswp * {
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.pswp img {
max-width: none
}
.pswp--animate_opacity {
opacity: 0.001;
will-change: opacity;
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1)
}
.pswp--open {
display: block
}
.pswp--zoom-allowed .pswp__img {
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in
}
.pswp--zoomed-in .pswp__img {
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab
}
.pswp--dragging .pswp__img {
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: grabbing
}
.pswp__bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
opacity: 0;
transform: translateZ(0);
-webkit-backface-visibility: hidden;
will-change: opacity
}
.pswp__scroll-wrap {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden
}
.pswp__container, .pswp__zoom-wrap {
-ms-touch-action: none;
touch-action: none;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0
}
.pswp__container, .pswp__img {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none
}
.pswp__zoom-wrap {
position: absolute;
width: 100%;
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
-webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1)
}
.pswp__bg {
will-change: opacity;
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1)
}
.pswp--animated-in .pswp__bg, .pswp--animated-in .pswp__zoom-wrap {
-webkit-transition: none;
transition: none
}
.pswp__container, .pswp__zoom-wrap {
-webkit-backface-visibility: hidden
}
.pswp__item {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden
}
.pswp__img {
position: absolute;
width: auto;
height: auto;
top: 0;
left: 0
}
.pswp__img--placeholder {
-webkit-backface-visibility: hidden
}
.pswp__img--placeholder--blank {
background: #222
}
.pswp--ie .pswp__img {
width: 100% !important;
height: auto !important;
left: 0;
top: 0
}
.pswp__error-msg {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
font-size: 14px;
line-height: 16px;
margin-top: -8px;
color: #CCC
}
.pswp__error-msg a {
color: #CCC;
text-decoration: underline
}
/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
.pswp__button {
width: 44px;
height: 44px;
position: relative;
background: none;
cursor: pointer;
overflow: visible;
-webkit-appearance: none;
display: block;
border: 0;
padding: 0;
margin: 0;
float: right;
opacity: 0.75;
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
-webkit-box-shadow: none;
box-shadow: none
}
.pswp__button:focus, .pswp__button:hover {
opacity: 1
}
.pswp__button:active {
outline: none;
opacity: 0.9
}
.pswp__button::-moz-focus-inner {
padding: 0;
border: 0
}
.pswp__ui--over-close .pswp__button--close {
opacity: 1
}
.pswp__button, .pswp__button--arrow--left:before, .pswp__button--arrow--right:before {
background: url("../images/photoswipe/default-skin.png") 0 0 no-repeat;
background-size: 264px 88px;
width: 44px;
height: 44px
}
@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
.pswp--svg .pswp__button, .pswp--svg .pswp__button--arrow--left:before, .pswp--svg .pswp__button--arrow--right:before {
background-image: url("../images/photoswipe/default-skin.svg")
}
.pswp--svg .pswp__button--arrow--left, .pswp--svg .pswp__button--arrow--right {
background: none
}
}
.pswp__button--close {
background-position: 0 -44px
}
.pswp__button--share {
background-position: -44px -44px
}
.pswp__button--fs {
display: none
}
.pswp--supports-fs .pswp__button--fs {
display: block
}
.pswp--fs .pswp__button--fs {
background-position: -44px 0
}
.pswp__button--zoom {
display: none;
background-position: -88px 0
}
.pswp--zoom-allowed .pswp__button--zoom {
display: block
}
.pswp--zoomed-in .pswp__button--zoom {
background-position: -132px 0
}
.pswp--touch .pswp__button--arrow--left, .pswp--touch .pswp__button--arrow--right {
visibility: hidden
}
.pswp__button--arrow--left, .pswp__button--arrow--right {
background: none;
top: 50%;
margin-top: -50px;
width: 70px;
height: 100px;
position: absolute
}
.pswp__button--arrow--left {
left: 0
}
.pswp__button--arrow--right {
right: 0
}
.pswp__button--arrow--left:before, .pswp__button--arrow--right:before {
content: '';
top: 35px;
background-color: rgba(0, 0, 0, 0.3);
height: 30px;
width: 32px;
position: absolute
}
.pswp__button--arrow--left:before {
left: 6px;
background-position: -138px -44px
}
.pswp__button--arrow--right:before {
right: 6px;
background-position: -94px -44px
}
.pswp__counter, .pswp__share-modal {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.pswp__share-modal {
display: block;
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 10px;
position: absolute;
z-index: 1600;
opacity: 0;
-webkit-transition: opacity 0.25s ease-out;
transition: opacity 0.25s ease-out;
-webkit-backface-visibility: hidden;
will-change: opacity
}
.pswp__share-modal--hidden {
display: none
}
.pswp__share-tooltip {
z-index: 1620;
position: absolute;
background: #FFF;
top: 56px;
border-radius: 2px;
display: block;
width: auto;
right: 44px;
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
-webkit-transform: translateY(6px);
-ms-transform: translateY(6px);
transform: translateY(6px);
-webkit-transition: -webkit-transform 0.25s;
transition: transform 0.25s;
-webkit-backface-visibility: hidden;
will-change: transform
}
.pswp__share-tooltip a {
display: block;
padding: 8px 12px;
color: #000;
text-decoration: none;
font-size: 14px;
line-height: 18px
}
.pswp__share-tooltip a:hover {
text-decoration: none;
color: #000
}
.pswp__share-tooltip a:first-child {
border-radius: 2px 2px 0 0
}
.pswp__share-tooltip a:last-child {
border-radius: 0 0 2px 2px
}
.pswp__share-modal--fade-in {
opacity: 1
}
.pswp__share-modal--fade-in .pswp__share-tooltip {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
.pswp--touch .pswp__share-tooltip a {
padding: 16px 12px
}
a.pswp__share--facebook:before {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
top: -12px;
right: 15px;
border: 6px solid transparent;
border-bottom-color: #FFF;
-webkit-pointer-events: none;
-moz-pointer-events: none;
pointer-events: none
}
a.pswp__share--facebook:hover {
background: #3E5C9A;
color: #FFF
}
a.pswp__share--facebook:hover:before {
border-bottom-color: #3E5C9A
}
a.pswp__share--twitter:hover {
background: #55ACEE;
color: #FFF
}
a.pswp__share--pinterest:hover {
background: #CCC;
color: #CE272D
}
a.pswp__share--download:hover {
background: #DDD
}
.pswp__counter {
position: absolute;
left: 0;
top: 0;
height: 44px;
font-size: 13px;
line-height: 44px;
color: #FFF;
opacity: 0.75;
padding: 0 10px
}
.pswp__caption {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
min-height: 44px
}
.pswp__caption small {
font-size: 11px;
color: #BBB
}
.pswp__caption__center {
text-align: center;
max-width: 420px;
margin: 0 auto;
font-size: 0.875rem;
padding: 10px;
line-height: 20px;
color: #CCC;
font-weight: bold
}
.pswp__caption--empty {
display: none
}
.pswp__caption--fake {
visibility: hidden
}
.pswp__preloader {
width: 44px;
height: 44px;
position: absolute;
top: 0;
left: 50%;
margin-left: -22px;
opacity: 0;
-webkit-transition: opacity 0.25s ease-out;
transition: opacity 0.25s ease-out;
will-change: opacity;
direction: ltr
}
.pswp__preloader__icn {
width: 20px;
height: 20px;
margin: 12px
}
.pswp__preloader--active {
opacity: 1
}
.pswp__preloader--active .pswp__preloader__icn {
background: url(preloader.gif) 0 0 no-repeat
}
.pswp--css_animation .pswp__preloader--active {
opacity: 1
}
.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
-webkit-animation: clockwise 500ms linear infinite;
animation: clockwise 500ms linear infinite
}
.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
-webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite
}
.pswp--css_animation .pswp__preloader__icn {
background: none;
opacity: 0.75;
width: 14px;
height: 14px;
position: absolute;
left: 15px;
top: 15px;
margin: 0
}
.pswp--css_animation .pswp__preloader__cut {
position: relative;
width: 7px;
height: 14px;
overflow: hidden
}
.pswp--css_animation .pswp__preloader__donut {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 14px;
height: 14px;
border: 2px solid #FFF;
border-radius: 50%;
border-left-color: transparent;
border-bottom-color: transparent;
position: absolute;
top: 0;
left: 0;
background: none;
margin: 0
}
@media screen and (max-width: 1024px) {
.pswp__preloader {
position: relative;
left: auto;
top: auto;
margin: 0;
float: right
}
}
@-webkit-keyframes clockwise {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@keyframes clockwise {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@-webkit-keyframes donut-rotate {
0% {
-webkit-transform: rotate(0);
transform: rotate(0)
}
50% {
-webkit-transform: rotate(-140deg);
transform: rotate(-140deg)
}
100% {
-webkit-transform: rotate(0);
transform: rotate(0)
}
}
@keyframes donut-rotate {
0% {
-webkit-transform: rotate(0);
transform: rotate(0)
}
50% {
-webkit-transform: rotate(-140deg);
transform: rotate(-140deg)
}
100% {
-webkit-transform: rotate(0);
transform: rotate(0)
}
}
.pswp__ui {
-webkit-font-smoothing: auto;
visibility: visible;
opacity: 1;
z-index: 1550
}
.pswp__top-bar {
position: absolute;
left: 0;
top: 0;
height: 44px;
width: 100%
}
.pswp__caption, .pswp__top-bar, .pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right {
-webkit-backface-visibility: hidden;
will-change: opacity;
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1)
}
.pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right {
visibility: visible
}
.pswp__top-bar, .pswp__caption {
background-color: rgba(0, 0, 0, 0.5)
}
.pswp__ui--fit .pswp__top-bar, .pswp__ui--fit .pswp__caption {
background-color: rgba(0, 0, 0, 0.3)
}
.pswp__ui--idle .pswp__top-bar {
opacity: 0
}
.pswp__ui--idle .pswp__button--arrow--left, .pswp__ui--idle .pswp__button--arrow--right {
opacity: 0
}
.pswp__ui--hidden .pswp__top-bar, .pswp__ui--hidden .pswp__caption, .pswp__ui--hidden .pswp__button--arrow--left, .pswp__ui--hidden .pswp__button--arrow--right {
opacity: 0.001
}
.pswp__ui--one-slide .pswp__button--arrow--left, .pswp__ui--one-slide .pswp__button--arrow--right, .pswp__ui--one-slide .pswp__counter {
display: none
}
.pswp__element--disabled {
display: none !important
}
.pswp--minimal--dark .pswp__top-bar {
background: none
}
/*!
* fullPage 2.9.7
* https://github.com/alvarotrigo/fullPage.js
* MIT licensed
*
* Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo
*/
html.fp-enabled, .fp-enabled body {
margin: 0;
padding: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}
.fp-section {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.fp-slide {
float: left
}
.fp-slide, .fp-slidesContainer {
height: 100%;
display: block
}
.fp-slides {
z-index: 1;
height: 100%;
overflow: hidden;
position: relative;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out
}
.fp-section.fp-table, .fp-slide.fp-table {
display: table;
table-layout: fixed;
width: 100%
}
.fp-tableCell {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%
}
.fp-slidesContainer {
float: left;
position: relative
}
.fp-controlArrow {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-ms-user-select: none;
position: absolute;
z-index: 4;
top: 50%;
cursor: pointer;
width: 0;
height: 0;
border-style: solid;
margin-top: -38px;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.fp-controlArrow.fp-prev {
left: 15px;
width: 0;
border-width: 38.5px 34px 38.5px 0;
border-color: transparent #fff transparent transparent
}
.fp-controlArrow.fp-next {
right: 15px;
border-width: 38.5px 0 38.5px 34px;
border-color: transparent transparent transparent #fff
}
.fp-scrollable {
overflow: hidden;
position: relative
}
.fp-scroller {
overflow: hidden
}
.iScrollIndicator {
border: 0 !important
}
.fp-notransition {
-webkit-transition: none !important;
transition: none !important
}
#fp-nav {
position: fixed;
z-index: 100;
margin-top: -32px;
top: 50%;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0)
}
#fp-nav.right {
right: 17px
}
#fp-nav.left {
left: 17px
}
.fp-slidesNav {
position: absolute;
z-index: 4;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0 !important;
right: 0;
margin: 0 auto !important
}
.fp-slidesNav.bottom {
bottom: 17px
}
.fp-slidesNav.top {
top: 17px
}
#fp-nav ul, .fp-slidesNav ul {
margin: 0;
padding: 0
}
#fp-nav ul li, .fp-slidesNav ul li {
display: block;
width: 14px;
height: 13px;
margin: 7px;
position: relative
}
.fp-slidesNav ul li {
display: inline-block
}
#fp-nav ul li a, .fp-slidesNav ul li a {
display: block;
position: relative;
z-index: 1;
width: 100%;
height: 100%;
cursor: pointer;
text-decoration: none
}
#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span {
height: 12px;
width: 12px;
margin: -6px 0 0 -6px;
border-radius: 100%
}
#fp-nav ul li a span, .fp-slidesNav ul li a span {
border-radius: 50%;
position: absolute;
z-index: 1;
height: 4px;
width: 4px;
border: 0;
background: #333;
left: 50%;
top: 50%;
margin: -2px 0 0 -2px;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out
}
#fp-nav ul li:hover a span, .fp-slidesNav ul li:hover a span {
width: 10px;
height: 10px;
margin: -5px 0px 0px -5px
}
#fp-nav ul li .fp-tooltip {
position: absolute;
top: -2px;
color: #fff;
font-size: 14px;
font-family: arial, helvetica, sans-serif;
white-space: nowrap;
max-width: 220px;
overflow: hidden;
display: block;
opacity: 0;
width: 0;
cursor: pointer
}
#fp-nav ul li:hover .fp-tooltip, #fp-nav.fp-show-active a.active+.fp-tooltip {
-webkit-transition: opacity 0.2s ease-in;
transition: opacity 0.2s ease-in;
width: auto;
opacity: 1
}
#fp-nav ul li .fp-tooltip.right {
right: 20px
}
#fp-nav ul li .fp-tooltip.left {
left: 20px
}
.fp-auto-height.fp-section, .fp-auto-height .fp-slide, .fp-auto-height .fp-tableCell {
height: auto !important
}
.fp-responsive .fp-auto-height-responsive.fp-section, .fp-responsive .fp-auto-height-responsive .fp-slide, .fp-responsive .fp-auto-height-responsive .fp-tableCell {
height: auto !important
}
@font-face {
font-family: swiper-icons;
src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff");
font-weight: 400;
font-style: normal
}
:root {
--swiper-theme-color: #007aff
}
.swiper-container {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
z-index: 1
}
.swiper-container-vertical>.swiper-wrapper {
flex-direction: column
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: transform;
box-sizing: content-box
}
.swiper-container-android .swiper-slide, .swiper-wrapper {
transform: translate3d(0px, 0, 0)
}
.swiper-container-multirow>.swiper-wrapper {
flex-wrap: wrap
}
.swiper-container-multirow-column>.swiper-wrapper {
flex-wrap: wrap;
flex-direction: column
}
.swiper-container-free-mode>.swiper-wrapper {
transition-timing-function: ease-out;
margin: 0 auto
}
.swiper-slide {
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
transition-property: transform
}
.swiper-slide-invisible-blank {
visibility: hidden
}
.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide {
height: auto
}
.swiper-container-autoheight .swiper-wrapper {
align-items: flex-start;
transition-property: transform, height
}
.swiper-container-3d {
perspective: 1200px
}
.swiper-container-3d .swiper-cube-shadow, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-wrapper {
transform-style: preserve-3d
}
.swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10
}
.swiper-container-3d .swiper-slide-shadow-left {
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))
}
.swiper-container-3d .swiper-slide-shadow-right {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))
}
.swiper-container-3d .swiper-slide-shadow-top {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))
}
.swiper-container-3d .swiper-slide-shadow-bottom {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))
}
.swiper-container-css-mode>.swiper-wrapper {
overflow: auto;
scrollbar-width: none;
-ms-overflow-style: none
}
.swiper-container-css-mode>.swiper-wrapper::-webkit-scrollbar {
display: none
}
.swiper-container-css-mode>.swiper-wrapper>.swiper-slide {
scroll-snap-align: start start
}
.swiper-container-horizontal.swiper-container-css-mode>.swiper-wrapper {
scroll-snap-type: x mandatory
}
.swiper-container-vertical.swiper-container-css-mode>.swiper-wrapper {
scroll-snap-type: y mandatory
}
:root {
--swiper-navigation-size: 22px
}
.swiper-button-next, .swiper-button-prev {
position: absolute;
top: 50%;
width: calc(var(--swiper-navigation-size)/ 44 * 27);
height: var(--swiper-navigation-size);
margin-top: calc(-1 * var(--swiper-navigation-size)/ 2);
z-index: 10;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: opacity .3s;
color: #666;
outline: none;
border: none
}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
cursor: auto;
pointer-events: none
}
.swiper-button-next.swiper-button-disabled:after, .swiper-button-prev.swiper-button-disabled:after {
opacity: 0.4
}
.swiper-button-next:after, .swiper-button-prev:after {
font-family: swiper-icons;
font-size: var(--swiper-navigation-size);
text-transform: none !important;
letter-spacing: 0;
text-transform: none;
font-variant: initial;
font-weight: bolder
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
left: 10px;
right: auto
}
.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after {
content: 'prev'
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
right: 10px;
left: auto
}
.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after {
content: 'next'
}
.swiper-button-next.swiper-button-white, .swiper-button-prev.swiper-button-white {
--swiper-navigation-color: #ffffff
}
.swiper-button-next.swiper-button-black, .swiper-button-prev.swiper-button-black {
--swiper-navigation-color: #000000
}
.swiper-button-lock {
display: none
}
.swiper-pagination {
position: absolute;
text-align: center;
transition: .3s opacity;
transform: translate3d(0, 0, 0);
z-index: 10
}
.swiper-pagination.swiper-pagination-hidden {
opacity: 0
}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
bottom: 10px;
left: 0;
width: 100%
}
.swiper-pagination-bullets-dynamic {
overflow: hidden;
font-size: 0
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transform: scale(0.33);
position: relative
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
transform: scale(1)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
transform: scale(1)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
transform: scale(0.66)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
transform: scale(0.33)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
transform: scale(0.66)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
transform: scale(0.33)
}
.swiper-pagination-bullet {
width: 8px;
height: 8px;
display: inline-block;
border-radius: 100%;
opacity: 1;
background-color: transparent;
border: 1px solid #bbbcbc
}
button.swiper-pagination-bullet {
border: none;
margin: 0;
padding: 0;
box-shadow: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none
}
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer
}
.swiper-pagination-bullet-active {
opacity: 1;
background-color: #bbbcbc
}
.swiper-container-vertical>.swiper-pagination-bullets {
right: 10px;
top: 50%;
transform: translate3d(0px, -50%, 0)
}
.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 6px 0;
display: block
}
.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
top: 50%;
transform: translateY(-50%);
width: 8px
}
.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
display: inline-block;
transition: .2s transform, .2s top
}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 4px
}
@media (min-width: 0) and (max-width: 739px) {
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0
}
}
.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
left: 50%;
transform: translateX(-50%);
white-space: nowrap
}
.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transition: .2s transform, .2s left
}
.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transition: .2s transform, .2s right
}
.swiper-pagination-progressbar {
background: rgba(0, 0, 0, 0.25);
position: absolute
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: var(--swiper-pagination-color, var(--swiper-theme-color));
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: scale(0);
transform-origin: left top
}
.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
transform-origin: right top
}
.swiper-container-horizontal>.swiper-pagination-progressbar, .swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
width: 100%;
height: 4px;
left: 0;
top: 0
}
.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-container-vertical>.swiper-pagination-progressbar {
width: 4px;
height: 100%;
left: 0;
top: 0
}
.swiper-pagination-white {
--swiper-pagination-color: #ffffff
}
.swiper-pagination-black {
--swiper-pagination-color: #000000
}
.swiper-pagination-lock {
display: none
}
.swiper-scrollbar {
border-radius: 10px;
position: relative;
-ms-touch-action: none;
background: rgba(0, 0, 0, 0.1)
}
.swiper-container-horizontal>.swiper-scrollbar {
position: absolute;
left: 1%;
bottom: 3px;
z-index: 50;
height: 5px;
width: 98%
}
.swiper-container-vertical>.swiper-scrollbar {
position: absolute;
right: 3px;
top: 1%;
z-index: 50;
width: 5px;
height: 98%
}
.swiper-scrollbar-drag {
height: 100%;
width: 100%;
position: relative;
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
left: 0;
top: 0
}
.swiper-scrollbar-cursor-drag {
cursor: move
}
.swiper-scrollbar-lock {
display: none
}
.swiper-zoom-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center
}
.swiper-zoom-container>canvas, .swiper-zoom-container>img, .swiper-zoom-container>svg {
max-width: 100%;
max-height: 100%;
object-fit: contain
}
.swiper-slide-zoomed {
cursor: move
}
.swiper-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
transform-origin: 50%;
animation: swiper-preloader-spin 1s infinite linear;
box-sizing: border-box;
border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
border-radius: 50%;
border-top-color: transparent
}
.swiper-lazy-preloader-white {
--swiper-preloader-color: #fff
}
.swiper-lazy-preloader-black {
--swiper-preloader-color: #000
}
@keyframes swiper-preloader-spin {
100% {
transform: rotate(360deg)
}
}
.swiper-container .swiper-notification {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
opacity: 0;
z-index: -1000
}
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
transition-timing-function: ease-out
}
.swiper-container-fade .swiper-slide {
pointer-events: none;
transition-property: opacity
}
.swiper-container-fade .swiper-slide .swiper-slide {
pointer-events: none
}
.swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active {
pointer-events: auto
}
.swiper-container-cube {
overflow: visible
}
.swiper-container-cube .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1;
visibility: hidden;
transform-origin: 0 0;
width: 100%;
height: 100%
}
.swiper-container-cube .swiper-slide .swiper-slide {
pointer-events: none
}
.swiper-container-cube.swiper-container-rtl .swiper-slide {
transform-origin: 100% 0
}
.swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active {
pointer-events: auto
}
.swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-next+.swiper-slide, .swiper-container-cube .swiper-slide-prev {
pointer-events: auto;
visibility: visible
}
.swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right, .swiper-container-cube .swiper-slide-shadow-top {
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.swiper-container-cube .swiper-cube-shadow {
position: absolute;
left: 0;
bottom: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: .6;
-webkit-filter: blur(50px);
filter: blur(50px);
z-index: 0
}
.swiper-container-flip {
overflow: visible
}
.swiper-container-flip .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1
}
.swiper-container-flip .swiper-slide .swiper-slide {
pointer-events: none
}
.swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active {
pointer-events: auto
}
.swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right, .swiper-container-flip .swiper-slide-shadow-top {
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.cc-window {
opacity: 1;
-webkit-transition: opacity 1s ease;
transition: opacity 1s ease
}
.cc-window.cc-invisible {
opacity: 0
}
.cc-animate.cc-revoke {
-webkit-transition: transform 1s ease;
-webkit-transition: -webkit-transform 1s ease;
transition: -webkit-transform 1s ease;
transition: transform 1s ease;
transition: transform 1s ease, -webkit-transform 1s ease
}
.cc-animate.cc-revoke.cc-top {
-webkit-transform: translateY(-2em);
transform: translateY(-2em)
}
.cc-animate.cc-revoke.cc-bottom {
-webkit-transform: translateY(2em);
transform: translateY(2em)
}
.cc-animate.cc-revoke.cc-active.cc-top {
-webkit-transform: translateY(0);
transform: translateY(0)
}
.cc-animate.cc-revoke.cc-active.cc-bottom {
-webkit-transform: translateY(0);
transform: translateY(0)
}
.cc-revoke:hover {
-webkit-transform: translateY(0);
transform: translateY(0)
}
.cc-grower {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 1s;
transition: max-height 1s
}
.cc-revoke, .cc-window {
position: fixed;
overflow: hidden;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: Helvetica, Calibri, Arial, sans-serif;
font-size: 16px;
line-height: 1.5em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
z-index: 9999
}
.cc-window.cc-static {
position: static
}
.cc-window.cc-floating {
padding: 2em;
max-width: 24em;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
.cc-window.cc-banner {
padding: 1em 1.8em;
width: 100%;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row
}
@media (min-width: 1780px) {
.cc-window.cc-banner {
padding: 50px
}
}
.cc-revoke {
padding: .5em
}
.cc-revoke:hover {
text-decoration: underline
}
.cc-header {
font-size: 18px;
font-weight: 700
}
.cc-btn, .cc-close, .cc-link, .cc-revoke {
cursor: pointer
}
.cc-link {
opacity: .8;
display: inline-block;
padding: .2em;
text-decoration: underline
}
.cc-link:hover {
opacity: 1
}
.cc-link:active, .cc-link:visited {
color: initial
}
.cc-btn {
display: block;
width: 100%;
height: 45px;
font-size: .9em;
font-weight: bold;
border: none;
border-style: solid;
text-align: center;
white-space: nowrap;
background-color: #0f56a1;
font-family: "Montserrat", Helvetica, Arial, "Noto Sans TW", "PingFang", "PingFangTC", "Microsoft JhengHei", sans-serif;
transition: all .35s ease;
display: flex;
align-items: center;
justify-content: center;
border: none;
outline: none
}
.cc-btn:hover, .cc-btn:active {
background-color: #fff
}
@media (min-width: 740px) {
.cc-btn {
width: 200px;
height: 64px;
font-size: 1.125rem
}
}
@media (min-width: 1300px) {
.cc-btn {
width: 220px;
height: 88px;
font-size: 1.375rem
}
}
@media (min-width: 1780px) {
.cc-btn {
width: 260px;
height: 96px;
font-size: 1.5rem
}
}
.cc-highlight .cc-btn:first-child {
background-color: transparent;
border-color: transparent
}
.cc-highlight .cc-btn:first-child:focus, .cc-highlight .cc-btn:first-child:hover {
background-color: transparent;
text-decoration: underline
}
.cc-close {
display: block;
position: absolute;
top: .5em;
right: .5em;
font-size: 1.6em;
opacity: .9;
line-height: .75
}
.cc-close:focus, .cc-close:hover {
opacity: 1
}
.cc-revoke.cc-top {
top: 0;
left: 3em;
border-bottom-left-radius: .5em;
border-bottom-right-radius: .5em
}
.cc-revoke.cc-bottom {
bottom: 0;
left: 3em;
border-top-left-radius: .5em;
border-top-right-radius: .5em
}
.cc-revoke.cc-left {
left: 3em;
right: unset
}
.cc-revoke.cc-right {
right: 3em;
left: unset
}
.cc-top {
top: 1em
}
.cc-left {
left: 1em
}
.cc-right {
right: 1em
}
.cc-bottom {
bottom: 1em
}
.cc-floating>.cc-link {
margin-bottom: 1em
}
.cc-floating .cc-message {
display: block;
margin-bottom: 1em
}
.cc-message p {
font-family: "Montserrat", Helvetica, Arial, "Noto Sans TW", "PingFang", "PingFangTC", "Microsoft JhengHei", sans-serif;
color: #a4a4a4
}
@media (min-width: 0) and (max-width: 979px) {
.cc-message p {
font-size: .875rem;
line-height: 1.75em
}
}
.cc-message p a {
color: #0f56a1
}
.cc-window.cc-floating .cc-compliance {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
font-family: "Montserrat", Helvetica, Arial, "Noto Sans TW", "PingFang", "PingFangTC", "Microsoft JhengHei", sans-serif;
font-weight: bold
}
.cc-window.cc-banner {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
.cc-banner.cc-top {
left: 0;
right: 0;
top: 0
}
.cc-banner.cc-bottom {
left: 0;
right: 0;
bottom: 0
}
.cc-banner .cc-message {
display: block;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
max-width: 100%;
margin-right: 1em
}
.cc-compliance {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: justify;
align-content: space-between
}
.cc-floating .cc-compliance>.cc-btn {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1
}
.cc-btn+.cc-btn {
margin-left: .5em
}
@media print {
.cc-revoke, .cc-window {
display: none
}
}
@media screen and (max-width: 900px) {
.cc-btn {
white-space: normal
}
}
@media screen and (max-width: 414px) and (orientation: portrait), screen and (max-width: 736px) and (orientation: landscape) {
.cc-window.cc-top {
top: 0
}
.cc-window.cc-bottom {
bottom: 0
}
.cc-window.cc-banner, .cc-window.cc-floating, .cc-window.cc-left, .cc-window.cc-right {
left: 0;
right: 0
}
.cc-window.cc-banner {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
.cc-window.cc-banner .cc-compliance {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto
}
.cc-window.cc-floating {
max-width: none
}
.cc-window .cc-message {
margin-bottom: 1em
}
.cc-window.cc-banner {
-webkit-box-align: unset;
-ms-flex-align: unset;
align-items: unset
}
.cc-window.cc-banner .cc-message {
margin-right: 0
}
}
.cc-floating.cc-theme-classic {
padding: 1.2em 40px;
border-radius: 5px;
background-color: rgba(0, 0, 0, 0.85) !important
}
.cc-floating.cc-type-info.cc-theme-classic .cc-compliance {
text-align: center;
display: inline;
-webkit-box-flex: 0;
-ms-flex: none;
flex: none
}
.cc-theme-classic .cc-btn {
border-radius: 5px
}
.cc-theme-classic .cc-btn:last-child {
min-width: 140px
}
.cc-floating.cc-type-info.cc-theme-classic .cc-btn {
display: inline-flex;
align-items: center
}
.cc-theme-edgeless.cc-window {
padding: 0
}
.cc-floating.cc-theme-edgeless .cc-message {
margin: 2em;
margin-bottom: 1.5em
}
.cc-banner.cc-theme-edgeless .cc-btn {
margin: 0;
padding: .8em 1.8em;
height: 100%
}
.cc-banner.cc-theme-edgeless .cc-message {
margin-left: 1em
}
.cc-floating.cc-theme-edgeless .cc-btn+.cc-btn {
margin-left: 0
}
.image-container {
height: 100vh;
width: 100%;
overflow: hidden;
margin-bottom: 200px;
position: relative;
background-color: #000
}
.image-container .image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
z-index: 1;
background-size: cover;
opacity: 0;
transform: translate(0, -200px) scale(1.25);
transition: opacity 1.5s linear 0.6s, transform 1.25s cubic-bezier(0.165, 0.84, 0.44, 1) 0.6s
}
.image-container img {
display: none;
width: 100%;
height: 100vh
}
.image-container .loading-mask {
margin: 0 -10px 0 0;
position: absolute;
top: 0;
right: 100%;
bottom: 100%;
left: 0;
background-color: #0f56a1;
z-index: 10;
transition: bottom 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, right 0.3s cubic-bezier(0.77, 0, 0.175, 1) 0.3s, margin 0.3s cubic-bezier(0.77, 0, 0.175, 1) 0.3s, left 0.6s cubic-bezier(0.77, 0, 0.175, 1) 0.6s
}
html, body {
background-color: #fff;
line-height: 1.875;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
body {
font-family: "Montserrat", Helvetica, Arial, "Noto Sans TW", "PingFang", "PingFangTC", "Microsoft JhengHei", sans-serif;
font-weight: normal;
font-size: 16px;
color: #000;
overflow-x: hidden !important
}
.pages {
background-size: 100% auto;
background-repeat: no-repeat;
overflow-x: hidden;
padding-top: 60px
}
@media (min-width: 740px) {
.pages {
padding-top: 90px
}
}
@media (min-width: 1300px) {
.pages {
padding-top: 100px
}
}
@media (min-width: 1780px) {
.pages {
padding-top: 140px
}
}
@media (min-width: 980px) {
.fp-viewing-0 .pages, .fp-viewing-1 .pages, .fp-viewing-2 .pages, .fp-viewing-3 .pages {
padding-top: 0
}
}
.fp-viewing-0 .pages .header.release .container-max, .fp-viewing-1 .pages .header.release .container-max, .fp-viewing-2 .pages .header.release .container-max, .fp-viewing-3 .pages .header.release .container-max {
border-bottom: 1px solid #d4d4d4
}
p {
color: #333;
}
a {
text-decoration: none;
color: #000
}
strong {
font-weight: bold
}
@media (min-width: 0) and (max-width: 739px) {
.overlay-line {
display: none
}
}
@media (min-width: 740px) {
.overlay-line {
display: block;
width: 100%;
height: 100%;
display: flex;
z-index: 2;
pointer-events: none;
position: absolute;
left: 0;
top: 0
}
.overlay-line i {
flex: 1;
display: block;
height: 100%;
border-left: 1px solid rgba(212, 212, 212, 0.6);
position: relative
}
.overlay-line i:first-of-type {
border-left: none
}
.overlay-line.darken i {
border-left: 1px solid rgba(212, 212, 212, 0.25)
}
}
@media (min-width: 740px) {
.line-animation .overlay-line i:before {
right: 100%;
bottom: 0;
left: 0
}
.line-animation .overlay-line i:after {
right: 0;
bottom: 0;
left: 100%;
background-color: rgba(255, 255, 255, 0.5)
}
}
ul {
display: block;
}
.container-max {
width: 100%;
margin: 0 auto
}
@media (min-width: 1300px) {
.container-max {
max-width: 90%
}
}
.container-s {
width: 100%;
margin: 0 auto
}
@media (min-width: 980px) {
.container-s {
max-width: 80%
}
}
@media (min-width: 1300px) {
.container-s {
max-width: 70%
}
}
@media (min-width: 1780px) {
.container-s {
max-width: 60%
}
}
@media (min-width: 740px) and (max-width: 979px) {
.container {
padding-left: 100px;
padding-right: 100px
}
}
@media (min-width: 980px) {
.container {
width: 90%;
padding-left: 0;
padding-right: 0
}
}
.mask {
position: fixed;
width: 100%;
height: 100vh;
background-color: #00594E;
left: 0;
top: 0;
z-index: 98;
display: none
}
picture {
font-size: 0;
outline: none
}
.swiper-slide {
background: transparent;
box-shadow: none
}
select {
-webkit-appearance: none;
-webkit-border-radius: 0px;
appearance: none;
border: none;
background-color: transparent;
width: 100%;
height: 50px;
border-bottom: 1px solid #000;
font-family: "Montserrat", Helvetica, Arial, "Noto Sans TW", "PingFang", "PingFangTC", "Microsoft JhengHei", sans-serif;
font-weight: bold;
font-size: 1rem;
outline: none;
border-radius: none;
background: url("../index_files/select.svg") no-repeat right center;
background-size: 8px auto
}
input, textarea {
-webkit-appearance: none;
-webkit-border-radius: 0px;
appearance: none
}
.gotop {
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
left: 50%;
bottom: 50px;
transform: translate(-50%, 0);
z-index: 6;
top: auto;
display: flex;
align-items: center;
justify-content: center;
transition: all .3s ease;
cursor: pointer
}
@media (min-width: 0) and (max-width: 739px) {
.gotop {
left: auto;
right: 0;
bottom: 90px
}
}
@media (min-width: 740px) {
.gotop {
bottom: 60px
}
}
.gotop:hover {
transform: translate(-50%, 0) scale(1.25);
background-color: #0f56a1
}
.gotop:hover:before {
background-size: auto 100%;
background-position: 0% 0;
transform: rotate(-90deg)
}
.gotop::before {
width: 22px;
height: 22px;
content: "";
display: inline-block;
vertical-align: middle;
background-image: url("../index_files/iconset.svg");
background-size: auto 100%;
background-position: 2.04% 0;
transform: rotate(-90deg);
filter: hue-rotate(180deg);
}
.pagination-wrap {
padding-bottom: 60px;
max-width: 400px;
margin: 0 auto
}
@media (min-width: 740px) {
.pagination-wrap {
padding-bottom: 8vw
}
}
.pagination {
display: flex;
align-items: center;
justify-content: space-between
}
.pagination a, .pagination .dot {
display: inline-flex;
width: 35px;
height: 35px;
font-size: .875rem;
line-height: 1em;
align-items: center;
justify-content: center;
font-family: "Montserrat", "Noto Sans TW", "PingFang", "PingFangTC", "Microsoft JhengHei", Helvetica, Arial, sans-serif
}
.pagination .dot {
width: 20px
}
.pagination .dot:before {
content: "...";
letter-spacing: 2px;
display: block;
transform: translateY(-20%)
}
.pagination a {
border: 2px solid #d4d4d4;
margin: 0 3px;
transition: all .35s ease
}
.pagination a:hover, .pagination a:active {
border-color: #666
}
.pagination a.pg-prev, .pagination a.pg-next {
font-size: 0;
border: none;
width: 26px
}
.pagination a.pg-prev:before, .pagination a.pg-next:before {
width: 26px;
height: 26px;
content: "";
display: inline-block;
vertical-align: middle;
background-image: url("../index_files/iconset.svg");
background-size: auto 100%;
background-position: 18.37% 0;
transform: rotate(-180deg)
}
.pagination a.pg-next:before {
transform: rotate(0)
}
.pagination a.active {
border-color: #0f56a1
}
@media (min-width: 980px) {
.col-layout {
display: flex;
align-self: flex-start
}
}
@media (min-width: 1300px) {
.col-layout {
padding-left: 4vw;
padding-right: 4vw
}
}
.col-layout .left-area {
width: 100%
}
.col-layout .left-area .fz-B {
border-top: 3px solid #2c2c2c;
padding-top: 1em
}
@media (min-width: 980px) {
.col-layout .left-area .fz-B {
margin-top: 5px;
border-top: 3px solid #2c2c2c
}
}
@media (min-width: 980px) {
.col-layout .left-area {
width: 32%;
padding: 0 50px 0 0
}
}
@media (min-width: 1100px) {
.col-layout .left-area {
padding: 0 80px 0 0
}
}
@media (min-width: 1300px) {
.col-layout .left-area {
padding: 0 100px 0 0
}
}
@media (min-width: 1780px) {
.col-layout .left-area {
padding: 0 150px 0 0;
width: 29%
}
}
.col-layout .right-area {
width: 100%
}
@media (min-width: 980px) {
.col-layout .right-area {
width: 68%
}
}
@media (min-width: 1780px) {
.col-layout .right-area {
width: 71%
}
}
.line-down .base {
z-index: 2;
position: relative
}
.line-down .overlay-line {
z-index: 1
}
.swiper-count {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
margin: 0;
width: 100%;
color: #fff
}
.swiper-count span {
font-size: 1.25em;
margin: 0 0.25em;
letter-spacing: 1px
}
.swiper-count span.line {
display: block;
height: 3em;
width: 2px;
border-right: 2px solid #fff;
opacity: 0.3
}
.swiper-count .swiper-idx-count {
font-size: 1.5em;
font-weight: bold
}
.swiper-count:after {
content: "";
display: block;
height: 50px;
width: 1px
}
.swiper-pagination span {
border: none;
outline: none;
border-radius: none;
width: 40px;
height: 40px;
background-color: transparent;
display: flex;
align-items: center;
justify-content: center;
transition: all .35s ease
}
.swiper-pagination span:before {
content: "";
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
transition: all .3s ease;
border: 2px solid #d4d4d4;
background-color: rgba(0, 0, 0, 0.1);
background-color: transparent;
transition: all .35s ease
}
.swiper-pagination span.swiper-pagination-bullet-active:before {
background-color: #0f56a1;
border-color: #0f56a1
}
.mobile-prd-shortcut {
background-color: transparent;
padding: 5px 35px 20px
}
.mobile-prd-shortcut select {
border-bottom: 5px solid #2c2c2c
}
@media (min-width: 980px) {
.mobile-prd-shortcut {
display: none
}
}
.section {
position: relative
}
.section .base {
z-index: 1;
position: relative
}
.section .content {
position: relative
}
.section .content:before {
content: "";
margin: 0 -10px 0 0;
position: absolute;
top: 0;
right: 100%;
bottom: 100%;
left: 0;
background-color: #0f56a1;
z-index: 10;
transition: bottom 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, right 0.3s cubic-bezier(0.77, 0, 0.175, 1) 0.3s, margin 0.3s cubic-bezier(0.77, 0, 0.175, 1) 0.3s, left 0.6s cubic-bezier(0.77, 0, 0.175, 1) 0.6s;
pointer-events: none
}
.mobile .section .controller {
opacity: 1
}
@media (min-width: 0) and (max-width: 739px) {
.section-normal .content {
background-color: #f6f6f6;
padding: 70px
}
}
@media (min-width: 740px) {
.section-normal .content-wrap {
padding-right: 25%
}
.section-normal .content {
width: 100%;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
padding-left: 33.33%;
padding-top: 100px;
padding-bottom: 100px
}
.section-normal .text {
width: 80%
}
.section-normal.right .content-wrap {
padding-right: 0;
padding-left: 25%
}
.section-normal.right .content {
padding-left: 0;
padding-right: 33.33%
}
}
@media (min-width: 1780px) {
.section-normal .text {
width: 70%
}
}
@media (min-width: 1300px) {
.tabshow .container {
padding-left: 4vw;
padding-right: 4vw
}
}
.tabshow select {
border-bottom: 5px solid #0f56a1
}
@media (min-width: 740px) {
.tabshow select {
display: none
}
}
@media (min-width: 0) and (max-width: 1099px) {
.h_scroll {
white-space: nowrap;
-webkit-overflow-scrolling: touch;
overflow-x: auto
}
}
.tabshow-content .tab {
display: none
}
.tabshow-content .tab.active {
display: block
}
@media (min-width: 980px) and (min-height: 500px) and (max-height: 720px) and (orientation: landscape) {
.controller .swiper-pagination span {
height: 30px;
padding: 11px 16px
}
}
.swiper-button-prev {
width: 50px;
height: 50px
}
.swiper-button-prev:after {
content: "";
display: inline-block;
vertical-align: middle;
background-image: url("../index_files/iconset.svg");
background-size: auto 100%;
background-position: 20.41% 0;
width: 35px;
height: 35px;
transform: rotate(-180deg)
}
.swiper-button-prev:hover:after {
background-size: auto 100%;
background-position: 18.37% 0
}
.swiper-button-disabled {
opacity: 1
}
.swiper-button-next {
width: 50px;
height: 50px
}
.swiper-button-next:after {
width: 35px;
height: 35px;
content: "";
display: inline-block;
vertical-align: middle;
background-image: url("../index_files/iconset.svg");
background-size: auto 100%;
background-position: 20.41% 0
}
.swiper-button-next:hover:after {
background-size: auto 100%;
background-position: 18.37% 0
}
.fix-add-to-cart {
position: fixed;
width: 60px;
height: 60px;
z-index: 85;
bottom: 40px;
right: 10px;
transition: all .35s ease
}
@media (min-width: 740px) {
.fix-add-to-cart {
bottom: 50px;
right: 50px
}
}
.fix-add-to-cart .num {
font-size: 11px;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
background-color: #0f56a1;
position: absolute;
border-radius: 50%;
right: 0;
top: 0;
transition: all .35s ease
}
.fix-add-to-cart .icon {
display: block;
width: 52px;
height: 52px;
margin: 6px 0 0 2px;
background-color: #2c2c2c;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all .35s ease
}
.fix-add-to-cart:hover, .fix-add-to-cart:active {
transform: scale(1.25)
}
.fix-add-to-cart:hover .icon, .fix-add-to-cart:active .icon {
background-color: #0f56a1
}
.fix-add-to-cart:hover .num, .fix-add-to-cart:active .num {
background-color: #2c2c2c;
color: #0f56a1
}
.fix-add-to-cart.active {
animation: fix-cart .7s ease alternate forwards
}
.fix-add-to-cart.active .icon {
animation: fix-color .7s ease alternate forwards
}
.fix-add-to-cart.active .num {
animation: fix-num .7s ease alternate forwards
}
@keyframes fix-color {
0% {
background-color: #2c2c2c
}
50% {
background-color: #0f56a1
}
100% {
background-color: #2c2c2c
}
}
@keyframes fix-num {
0% {
background-color: #0f56a1;
color: #2c2c2c
}
50% {
background-color: #2c2c2c;
color: #0f56a1
}
100% {
background-color: #0f56a1;
color: #2c2c2c
}
}
@keyframes fix-cart {
0% {
transform: scale(1)
}
50% {
transform: scale(1.25)
}
100% {
transform: scale(1)
}
}
.nav {
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.7);
visibility: hidden;
opacity: 0;
transition: all .5s ease;
position: fixed;
left: 0;
top: 0;
z-index: 200;
pointer-events: none
}
@media (min-width: 0) and (max-width: 1099px) {
.nav {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
z-index: 90;
background-color: #ffffff;
}
}
@media (min-width: 1100px) {
.nav {
display: flex
}
}
.main-nav {
background-color: #fff;
height: 100%;
min-height: 100vh
}
.main-nav .app {
width: 50%;
height: 50px;
left: 12%;
position: relative;
top: 20px;
}
.main-nav .app strong {
color: #fff;
font-size: 14px;
}
.main-nav .app:before {
width: 40px;
height: 30px;
margin-right: 0;
}
@media (max-width: 1100px) {
.main-nav .app {
width: 200px;
height: 50px;
position: relative;
top: 30px;
left: 70px;
}
}
@media (max-width: 740px) {
.main-nav .app {
width: 200px;
height: 50px;
position: relative;
top: 30px;
left: 40px;
}
}
@media (min-width: 1100px) {
.main-nav {
width: 420px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
transform: translateX(-50px);
opacity: 0;
transition: all .6s ease
}
}
@media (min-width: 1100px) and (max-height: 599px) {
.main-nav {
overflow-y: auto;
display: block
}
.main-nav .deco-soco {
position: static;
margin: 50px 0 30px 50px
}
.main-nav .deco-copyright {
position: static;
margin-top: 40px
}
}
.link-area {
padding: 100px 40px 40px
}
@media (min-width: 740px) and (max-width: 1099px) {
.link-area {
padding: 140px 70px 70px
}
}
@media (min-width: 1100px) {
.link-area {
padding: 0
}
}
.link-area>a {
font-size: 1.125em;
overflow: hidden;
color: #000;
font-weight: bold;
transition-delay: 0.1s;
transition: all .5s ease, border .25s ease;
opacity: 0;
position: relative;
display: block;
width: 100%;
padding-left: 48px;
border-bottom: 1px solid #e5e5e5;
width: 100%
}
.link-area>a:last-of-type {
border-bottom: none
}
.link-area>a.hassub {
position: relative
}
.link-area>a.hassub .btn-icon-toggle {
width: 56px;
height: 56px;
position: absolute;
right: 0;
display: flex;
align-items: center;
justify-content: center;
top: 0;
font-size: 0
}
@media (min-width: 1100px) and (max-height: 599px) {
.link-area>a.hassub .btn-icon-toggle {
width: 45px;
height: 45px
}
}
@media (min-width: 1100px) and (min-height: 600px) {
.link-area>a.hassub .btn-icon-toggle {
width: 50px;
height: 50px
}
}
@media (min-width: 1100px) and (min-height: 800px) {
.link-area>a.hassub .btn-icon-toggle {
width: 60px;
height: 60px
}
}
@media (min-width: 1100px) and (min-height: 900px) {
.link-area>a.hassub .btn-icon-toggle {
width: 70px;
height: 70px
}
}
.link-area>a.hassub .btn-icon-toggle:after {
content: "";
display: inline-block;
vertical-align: middle;
background-image: url("../index_files/iconset.svg");
background-size: auto 100%;
background-position: 10.2% 0;
width: 24px;
height: 24px;
transition: all .35s ease
}
@media (min-width: 1100px) {
.link-area>a.hassub .btn-icon-toggle:after {
width: 28px;
height: 28px;
transition: all .35s ease
}
}
@media (min-width: 1100px) {
.link-area>a.hassub .btn-icon-toggle:hover:after {
transform: scale(1.25)
}
}
.link-area>a em {
display: block;
font-size: 11px;
position: absolute;
left: 0
}
@media (min-width: 1100px) {
.link-area>a em {
left: 50px
}
}
.link-area>a span {
display: block;
transition: margin .3s ease, color .3s ease;
font-weight: 700
}
@media (min-width: 0) and (max-width: 1099px) {
.link-area>a span {
line-height: 3.5rem;
height: 3.5rem;
min-height: 3.5rem
}
.link-area>a span.en {
display: none
}
.link-area>a span:first-of-type {
display: none
}
}
@media (min-width: 0) and (max-width: 350px) {
.link-area>a span {
line-height: 3rem;
height: 3rem;
min-height: 3rem
}
}
@media (min-width: 1100px) and (max-height: 599px) {
.link-area>a span {
line-height: 45px;
height: 45px;
min-height: 45px
}
}
@media (min-width: 1100px) and (min-height: 600px) {
.link-area>a span {
line-height: 50px;
height: 50px;
min-height: 50px
}
}
@media (min-width: 1100px) and (min-height: 800px) {
.link-area>a span {
line-height: 60px;
height: 60px;
min-height: 60px
}
}
@media (min-width: 1100px) and (min-height: 900px) {
.link-area>a span {
line-height: 70px;
height: 70px;
min-height: 70px;
font-size: 1.625rem
}
}
@media (min-width: 0) and (max-width: 1099px) {
.link-area>a {
text-align: left;
line-height: 3.5rem;
height: 3.5rem;
min-height: 3.5rem;
transform: translateY(-35px)
}
}
@media (min-width: 0) and (max-width: 350px) {
.link-area>a {
line-height: 3rem;
height: 3rem;
min-height: 3rem
}
}
@media (min-width: 740px) {
.link-area>a {
font-size: 1.375em
}
}
@media (min-width: 1100px) and (max-height: 599px) {
.link-area>a {
line-height: 45px;
height: 45px;
min-height: 45px;
padding-left: 100px
}
}
@media (min-width: 1100px) and (min-height: 600px) {
.link-area>a {
transform: translateX(-25px);
padding-left: 100px;
line-height: 50px;
height: 50px;
min-height: 50px
}
}
@media (min-width: 1100px) and (min-height: 800px) {
.link-area>a {
line-height: 60px;
height: 60px;
min-height: 60px
}
}
@media (min-width: 1100px) and (min-height: 900px) {
.link-area>a {
line-height: 70px;
height: 70px;
min-height: 70px
}
}
.link-area>a:hover {
border-bottom: 3px solid #0f56a1;
transition-delay: 0s
}
@media (min-width: 1100px) and (max-height: 599px) {
.link-area>a:hover span:first-of-type {
margin-top: -45px
}
}
@media (min-width: 1100px) and (min-height: 600px) {
.link-area>a:hover span:first-of-type {
margin-top: -50px
}
}
@media (min-width: 1100px) and (min-height: 800px) {
.link-area>a:hover span:first-of-type {
margin-top: -60px
}
}
@media (min-width: 1100px) and (min-height: 900px) {
.link-area>a:hover span:first-of-type {
margin-top: -70px
}
}
.link-area>a:hover span:last-of-type {
color: #000
}
@media (min-width: 0) and (max-width: 1099px) {
.deco-soco {
display: none
}
}
@media (min-width: 1100px) and (max-height: 599px) {
.deco-soco img {
height: 45px;
width: auto;
display: block
}
}
@media (min-width: 1100px) and (min-height: 600px) {
.deco-soco {
position: absolute;
left: 50px;
top: 7%;
}
.deco-soco img {
height: 50px;
width: auto;
display: block
}
}
@media (min-width: 1100px) and (min-height: 800px) {
.deco-soco img {
height: 55px
}
}
@media (min-width: 1100px) and (min-height: 900px) {
.deco-soco img {
height: 60px
}
}
.deco-copyright {
display: block;
position: static;
opacity: 1;
transform: none;
font-size: .75rem;
padding-top: 40px
}
.deco-copyright a, .deco-copyright span {
font-size: .75rem;
margin: 0;
color: #909090;
padding: 0;
font-weight: normal;
line-height: 1.25em;
display: block
}
@media (min-width: 0) and (max-width: 1099px) {
.deco-copyright {
padding: 20px 40px
}
.deco-copyright a {
display: none
}
}
@media (min-width: 740px) and (max-width: 1099px) {
.deco-copyright {
padding: 20px 70px
}
}
@media (min-width: 1100px) {
.deco-copyright {
padding: 0 50px 50px;
position: absolute;
bottom: 0;
width: 100%;
left: 0
}
.deco-copyright span {
padding-bottom: 30px
}
}
.btn-close-nav-inside {
display: none
}
@media (min-width: 1100px) {
.btn-close-nav-inside {
position: absolute;
right: 10px;
top: 10px;
font-size: 0;
width: 60px;
height: 60px;
display: flex;
cursor: pointer;
align-items: center;
justify-content: center
}
.btn-close-nav-inside:after {
width: 30px;
height: 30px;
content: "";
display: inline-block;
vertical-align: middle;
background-image: url("../index_files/iconset.svg");
background-size: auto 100%;
background-position: 16.33% 0;
transition: all .35s ease
}
.btn-close-nav-inside:hover:after {
transform: scale(1.25)
}
}
.back-to-one, .back-to-second {
font-size: 0;
display: block;
width: 100%;
height: 40px;
display: flex;
justify-content: flex-start;
align-items: center
}
.back-to-one:before, .back-to-second:before {
width: 20px;
height: 20px;
content: "";
display: inline-block;
vertical-align: middle;
background-image: url("../index_files/iconset.svg");
background-size: auto 100%;
background-position: 0% 0;
transform: rotate(-180deg)
}
@media (min-width: 1100px) {
.back-to-one, .back-to-second {
display: none
}
}
.sub-nav {
background: #0f56a1 url("../index_files/bg-sub-nav.png") no-repeat left bottom;
visibility: hidden;
opacity: 0;
transition: all .4s ease;
display: flex;
align-items: center;
background-size: cover;
pointer-events: none
}
@media (min-width: 0) and (max-width: 1099px) {
.sub-nav {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100vh;
overflow-y: auto;
display: block
}
}
@media (min-width: 1100px) {
.menu-second, .menu-third {
min-width: 240px;
display: flex;
flex-direction: column;
min-width: 280px
}
}
@media (min-width: 1780px) {
.menu-second, .menu-third {
min-width: 300px
}
}
@media (min-width: 0) and (max-width: 1099px) {
.menu-second {
padding: 100px 40px 40px;
position: static;
width: 100%;
transform: translateY(30px);
transition: all .35s ease
}
}
@media (min-width: 740px) and (max-width: 1099px) {
.menu-second {
padding: 150px 70px 40px
}
}
.menu-second a {
position: relative;
white-space: initial
}
@media (min-width: 0) and (max-width: 1099px) {
.menu-second a {
font-size: 1.125rem;
display: block;
height: 60px;
line-height: 60px;
padding: 0;
font-weight: bold;
width: 100%;
border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}
.menu-second a:first-of-type {
border-top: 1px solid rgba(0, 0, 0, 0.1)
}
.menu-second a:after {
position: absolute;
right: 0;
content: "";
display: inline-block;
vertical-align: middle;
background-image: url("../index_files/iconset.svg");
background-size: auto 100%;
background-position: 4.08% 0;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
opacity: 0.2
}
.menu-second a:last-of-type {
border-bottom: none
}
}
@media (min-width: 1100px) and (max-height: 599px) {
.menu-second a {
height: 40px;
line-height: 40px
}
}
@media (min-width: 1100px) and (min-height: 600px) {
.menu-second a {
font-size: 1.125rem;
display: block;
height: 40px;
line-height: 40px;
display: block;
padding: 0 20px;
font-weight: bold
}
.menu-second a.active:after {
background-color: #fff
}
.menu-second a:after {
content: "";
display: block;
width: 100%;
height: 3px;
background-color: transparent;
transition: all .3s ease;
position: absolute;
bottom: 0;
width: calc(100% - 40px)
}
.menu-second a:hover:after {
background-color: #fff
}
}
@media (min-width: 1100px) and (min-height: 800px) {
.menu-second a {
font-size: 1.25rem;
height: 45px;
line-height: 45px
}
}
@media (min-width: 1100px) and (min-height: 900px) {
.menu-second a {
font-size: 1.375rem;
height: 60px;
line-height: 60px;
padding: 0 35px
}
.menu-second a:after {
width: calc(100% - 70px)
}
}
.menu-third {
display: none
}
@media (min-width: 0) and (max-width: 1099px) {
.menu-third {
display: block;
max-height: 300px;
visibility: hidden;
opacity: 0;
width: 100%;
transition: all .3s ease;
padding: 100px 40px 40px;
pointer-events: none;
position: absolute;
overflow: hidden;
top: 0
}
.menu-third>div {
transform: translateY(30px);
transition: all .35s ease
}
.menu-third.active {
max-height: none;
position: static;
opacity: 1;
visibility: visible;
pointer-events: auto
}
.menu-third.active>div {
transform: translateY(0)
}
}
@media (min-width: 740px) and (max-width: 1099px) {
.menu-third {
padding: 150px 70px 40px
}
}
@media (min-width: 1100px) {
.menu-third {
padding-right: 30px;
border-left: 1px solid rgba(51, 51, 51, 0.1);
transition: all .2s ease
}
}
@media (min-width: 1780px) {
.menu-third {
padding-right: 40px
}
}
@media (min-width: 1100px) {
.menu-third>div {
display: flex;
align-items: flex-start
}
}
@media (min-width: 1100px) and (max-width: 1779px) {
.menu-third>div {
display: block
}
}
.menu-third.active {
display: block
}
@media (min-width: 1100px) and (max-width: 1779px) {
.menu-third.active {
overflow-y: auto;
height: 100%;
padding-top: 5vh;
padding-bottom: 5vh
}
}
.menu-third ul {
display: block
}
@media (min-width: 1100px) and (max-width: 1779px) {
.menu-third ul {
display: block
}
}
.menu-third li {
display: block;
padding-bottom: 15px;
padding-top: 15px
}
@media (min-width: 0) and (max-width: 1099px) {
.menu-third li {
border-bottom: 1px solid rgba(51, 51, 51, 0.1)
}
.menu-third li:first-of-type {
border-top: 1px solid rgba(0, 0, 0, 0.1)
}
}
@media (min-width: 1100px) and (min-height: 600px) {
.menu-third li {
padding-bottom: 40px
}
}
@media (min-width: 1100px) {
.menu-third li {
padding-left: 30px
}
}
@media (min-width: 1780px) {
.menu-third li {
padding-left: 40px
}
.menu-third li:last-of-type {
padding-bottom: 0
}
}
.menu-third a {
display: block;
color: #000;
opacity: 0.6;
transition: all .15s ease
}
@media (min-width: 0) and (max-width: 1099px) {
.menu-third a {
line-height: 35px
}
}
@media (min-width: 1100px) {
.menu-third a {
line-height: 1.125em;
padding-top: 8px;
padding-bottom: 8px
}
}
@media (min-width: 1100px) and (max-width: 1299px) {
.menu-third a {
max-width: 320px
}
}
@media (min-width: 1300px) {
.menu-third a {
max-width: 380px
}
}
.menu-third a.title-cat {
font-weight: bold;
opacity: 0.9
}
.menu-third a:hover, .menu-third a:active {
opacity: 1
}
.focus-nav {
width: 100%;
position: fixed;
z-index: 100;
top: 0;
left: 0;
pointer-events: none;
transition: all .4s ease
}
.focus-nav ul {
padding-left: 35.33%;
/* margin-left: -20px; */
white-space: nowrap
}
@media (min-width: 1100px) and (max-width: 1779px) {
.focus-nav ul {
word-wrap: break-word
}
}
.focus-nav li {
display: inline-block;
pointer-events: auto
}
@media (min-width: 1100px) and (max-width: 1376px) {
.lang {
display: none;
}
}
.focus-nav li.hassub:hover .fn-item:after {
transform: scaleX(1)
}
.focus-nav li.hassub:hover .dropmenu {
visibility: visible;
opacity: 1;
z-index: 99;
transition: visibility 0s, z-index 0s, opacity .3s ease
}
.focus-nav .fn-item {
display: block;
line-height: 60px;
transition: all .4s ease;
font-size: 1rem;
color: #2c2c2c;
padding: 0 20px;
font-weight: bold;
position: relative
}
.focus-nav .fn-item:after {
content: "";
display: block;
position: absolute;
bottom: 0;
width: calc(100% - 40px);
height: 5px;
background-color: #0f56a1;
transition: all .35s ease;
transform: scaleX(0)
}
.focus-nav .fn-item:hover:after {
transform: scaleX(1)
}
@media (min-width: 1780px) {
.focus-nav .fn-item {
line-height: 70px;
font-size: 1.125rem
}
.focus-nav .fn-item:after {
height: 7px
}
}
@media (min-width: 0) and (max-width: 1099px) {
.focus-nav {
display: none
}
}
@media (min-width: 1100px) {
.focus-nav {
display: flex
}
}
@media (min-width: 740px) {
.focus-nav.release .fn-item {
line-height: 90px
}
}
@media (min-width: 1300px) {
.focus-nav.release .fn-item {
line-height: 100px
}
}
@media (min-width: 1780px) {
.focus-nav.release .fn-item {
line-height: 140px
}
}
.dropmenu {
background-color: #fff;
position: absolute;
width: 90%;
left: 5%;
box-shadow: 0px 17px 29px -3px rgba(0, 0, 0, 0.2);
visibility: hidden;
transition: all .3s ease;
opacity: 0;
display: flex;
padding: 50px 15%;
justify-content: center;
border-top: 1px solid #d4d4d4
}
@media (min-width: 1100px) {
.dropmenu {
transition: none
}
}
@media (min-width: 1100px) and (max-width: 1779px) {
.dropmenu {
padding: 30px 5%;
flex-wrap: wrap;
justify-content: flex-start
}
}
@media (min-width: 1300px) and (max-width: 1779px) {
.dropmenu {
padding: 40px 10%
}
}
@media (min-width: 1780px) {
.dropmenu {
flex-wrap: wrap;
justify-content: flex-start
}
}
.dropmenu-item {
margin: 0 30px;
width: 20%;
border-left: 1px solid #d4d4d4;
padding-left: 20px
}
@media (min-width: 1100px) and (max-width: 1779px) {
.dropmenu-item {
width: 33.33%;
margin: 0;
max-width: 33.33%;
font-size: .875rem
}
.dropmenu-item:nth-of-type(3n+1) {
border-left: none;
padding-left: 0
}
.dropmenu-item:nth-of-type(1), .dropmenu-item:nth-of-type(2), .dropmenu-item:nth-of-type(3) {
margin-bottom: 25px
}
}
@media (min-width: 1780px) {
.dropmenu-item {
width: 33.33%;
margin: 0;
max-width: 33.33%;
font-size: .9375rem
}
.dropmenu-item:nth-of-type(3n+1) {
border-left: none;
padding-left: 0
}
.dropmenu-item:nth-of-type(1), .dropmenu-item:nth-of-type(2), .dropmenu-item:nth-of-type(3) {
}
}
.dropmenu-item:first-of-type {
border-left: none;
padding-left: 0
}
.dropmenu-item a {
white-space: initial;
word-break: normal;
display: block;
color: #8d8d8d;
font-weight: 400;
transition: all .35s ease
}
@media (min-width: 1100px) and (max-width: 1779px) {
.dropmenu-item a {
font-size: .9375rem
}
}
@media (min-width: 1100px) {
.dropmenu-item a {
line-height: 1.125em;
padding-top: 4px;
padding-bottom: 4px
}
}
@media (min-width: 1300px) {
.dropmenu-item a {
line-height: 1.25em
}
}
.dropmenu-item a:hover {
color: #0f56a1
}
.dropmenu-item a.title {
color: #2c2c2c;
font-weight: bold
}
.nav-open {
overflow: hidden
}
@media (min-width: 0) and (max-width: 1099px) {
.nav-open .hamburger span {
transform: rotate(-90deg)
}
}
@media (min-width: 1100px) {
.nav-open .hamburger span {
background-color: transparent !important
}
.nav-open .hamburger span:before {
top: 50%;
transform: rotate(-45deg)
}
.nav-open .hamburger span:after {
top: 50%;
transform: rotate(45deg)
}
}
@media (min-width: 1100px) {
.nav-open .btn-nav-toggle {
transform: translate(-40px, -40px);
opacity: 0;
transition: all .6s ease
}
}
.nav-open .idx-cprt {
opacity: 0 !important
}
.nav-open .nav {
visibility: visible;
opacity: 1;
pointer-events: auto
}
@media (min-width: 1100px) {
.nav-open .main-nav {
transform: translateX(0);
opacity: 1
}
}
.nav-open .color-header .focus-nav a, .nav-open .header .focus-nav a {
color: #fff
}
.nav-open .color-header .btn-nav-toggle, .nav-open .header .btn-nav-toggle {
color: #fff
}
.nav-open .header {
border-bottom: 1px solid transparent
}
@media (min-width: 740px) {
.nav-open .header {
height: 100px
}
}
@media (min-width: 1300px) {
.nav-open .header {
height: 120px
}
}
@media (min-width: 1780px) {
.nav-open .header {
height: 160px
}
}
.nav-open .link-area a {
transform: translateY(0);
opacity: 1
}
@media (min-width: 0) and (max-width: 1099px) {
.nav-open .link-area a:nth-of-type(1) {
transition-delay: 0.06s
}
.nav-open .link-area a:nth-of-type(2) {
transition-delay: 0.12s
}
.nav-open .link-area a:nth-of-type(3) {
transition-delay: 0.18s
}
.nav-open .link-area a:nth-of-type(4) {
transition-delay: 0.24s
}
.nav-open .link-area a:nth-of-type(5) {
transition-delay: 0.3s
}
.nav-open .link-area a:nth-of-type(6) {
transition-delay: 0.36s
}
}
@media (min-width: 1100px) {
.nav-open .link-area a:nth-of-type(1) {
transition-delay: 0.16s
}
.nav-open .link-area a:nth-of-type(2) {
transition-delay: 0.22s
}
.nav-open .link-area a:nth-of-type(3) {
transition-delay: 0.28s
}
.nav-open .link-area a:nth-of-type(4) {
transition-delay: 0.34s
}
.nav-open .link-area a:nth-of-type(5) {
transition-delay: 0.4s
}
.nav-open .link-area a:nth-of-type(6) {
transition-delay: 0.46s
}
.nav-open .link-area a:hover {
transition-delay: 0s
}
}
.show-sub-nav .sub-nav {
visibility: visible;
pointer-events: auto;
opacity: 1
}
@media (min-width: 0) and (max-width: 1099px) {
.show-sub-nav .sub-nav .menu-second {
transform: translateY(0)
}
}
@media (min-width: 0) and (max-width: 1099px) {
.show-sub-nav.show-third .menu-second {
opacity: 0;
pointer-events: none;
position: absolute
}
}
.show-sub-nav .link-area>a.hassub .btn-icon-toggle:after {
transform: rotate(-45deg)
}
.switch-slide, .switch-bar {
border-bottom: 2px solid #2c2c2c;
margin-bottom: 50px;
white-space: nowrap
}
@media (min-width: 740px) {
.switch-slide, .switch-bar {
margin-bottom: 0;
margin-top: -10px
}
}
@media (min-width: 1300px) {
.switch-slide, .switch-bar {
margin-bottom: 20px
}
}
@media (min-width: 1780px) {
.switch-slide, .switch-bar {
margin-bottom: 50px
}
}
.switch-slide a, .switch-slide .switch-item, .switch-bar a, .switch-bar .switch-item {
display: inline-block;
line-height: 60px;
font-weight: bold;
position: relative;
padding: 0 25px
}
.switch-slide a span, .switch-slide .switch-item span, .switch-bar a span, .switch-bar .switch-item span {
display: inline-block;
line-height: 60px;
position: relative
}
.switch-slide a:after, .switch-slide a:before, .switch-slide .switch-item:after, .switch-slide .switch-item:before, .switch-bar a:after, .switch-bar a:before, .switch-bar .switch-item:after, .switch-bar .switch-item:before {
content: "";
display: block;
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #d4d4d4;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%)
}
.switch-slide a:after, .switch-slide .switch-item:after, .switch-bar a:after, .switch-bar .switch-item:after {
right: auto;
left: 25px;
width: calc(100% - 50px);
background-color: #0f56a1;
top: auto;
bottom: 0;
transform: scaleX(0);
border-radius: 0;
transition: all .35s ease
}
@media (min-width: 740px) {
.switch-slide a:after, .switch-slide .switch-item:after, .switch-bar a:after, .switch-bar .switch-item:after {
height: 5px;
left: 15px;
width: calc(100% - 35px)
}
}
@media (min-width: 1100px) {
.switch-slide a:after, .switch-slide .switch-item:after, .switch-bar a:after, .switch-bar .switch-item:after {
left: 20px;
width: calc(100% - 45px);
left: 5px;
width: calc(100% - 15px)
}
}
@media (min-width: 1300px) {
.switch-slide a:after, .switch-slide .switch-item:after, .switch-bar a:after, .switch-bar .switch-item:after {
height: 7px;
left: 20px;
width: calc(100% - 45px);
left: 10px;
width: calc(100% - 25px)
}
}
@media only screen and (min-width: 1400px) {
.switch-slide a:after, .switch-slide .switch-item:after, .switch-bar a:after, .switch-bar .switch-item:after {
left: 30px;
width: calc(100% - 65px);
left: 10px;
width: calc(100% - 25px)
}
}
@media (min-width: 1780px) {
.switch-slide a:after, .switch-slide .switch-item:after, .switch-bar a:after, .switch-bar .switch-item:after {
left: 45px;
width: calc(100% - 95px);
left: 20px;
width: calc(100% - 45px)
}
}
.switch-slide a:first-of-type, .switch-slide .switch-item:first-of-type, .switch-bar a:first-of-type, .switch-bar .switch-item:first-of-type {
padding: 0 25px 0 0
}
.switch-slide a:first-of-type:after, .switch-slide .switch-item:first-of-type:after, .switch-bar a:first-of-type:after, .switch-bar .switch-item:first-of-type:after {
left: 0;
width: calc(100% - 25px)
}
.switch-slide a:last-of-type:before, .switch-slide .switch-item:last-of-type:before, .switch-bar a:last-of-type:before, .switch-bar .switch-item:last-of-type:before {
display: none
}
.switch-slide a:hover:after, .switch-slide a.active:after, .switch-slide .switch-item:hover:after, .switch-slide .switch-item.active:after, .switch-bar a.active:after, .switch-bar .switch-item:hover:after, .switch-bar .switch-item.active:after {
transform: scaleX(1)
}
@media (min-width: 1100px) {
.switch-bar a:hover:after {
transform: scaleX(1)
}
}
@media (min-width: 740px) {
.switch-slide a, .switch-slide .switch-item, .switch-bar a, .switch-bar .switch-item {
line-height: 60px
}
.switch-slide a span, .switch-slide .switch-item span, .switch-bar a span, .switch-bar .switch-item span {
line-height: 60px
}
.switch-slide a:first-of-type, .switch-slide .switch-item:first-of-type, .switch-bar a:first-of-type, .switch-bar .switch-item:first-of-type {
padding: 0 35px 0 0
}
.switch-slide a:first-of-type:after, .switch-slide .switch-item:first-of-type:after, .switch-bar a:first-of-type:after, .switch-bar .switch-item:first-of-type:after {
width: calc(100% - 35px);
left: 0
}
}
@media (min-width: 740px) and (max-width: 1779px) {
.switch-slide a, .switch-slide .switch-item, .switch-bar a, .switch-bar .switch-item {
padding: 0 20px 0 15px;
line-height: 50px;
font-size: .9375rem
}
.switch-slide a span, .switch-slide .switch-item span, .switch-bar a span, .switch-bar .switch-item span {
line-height: 50px
}
.switch-slide a:first-of-type, .switch-slide .switch-item:first-of-type, .switch-bar a:first-of-type, .switch-bar .switch-item:first-of-type {
padding: 0 20px 0 0
}
.switch-slide a:first-of-type:after, .switch-slide .switch-item:first-of-type:after, .switch-bar a:first-of-type:after, .switch-bar .switch-item:first-of-type:after {
width: calc(100% - 20px);
left: 0
}
}
@media (min-width: 1100px) and (max-width: 1299px) {
.switch-slide a, .switch-slide .switch-item, .switch-bar a, .switch-bar .switch-item {
padding: 0 25px 0 20px;
line-height: 50px;
font-size: .9375rem;
padding: 0 10px 0 5px;
font-size: .875rem
}
.switch-slide a span, .switch-slide .switch-item span, .switch-bar a span, .switch-bar .switch-item span {
line-height: 50px
}
.switch-slide a:first-of-type, .switch-slide .switch-item:first-of-type, .switch-bar a:first-of-type, .switch-bar .switch-item:first-of-type {
padding: 0 25px 0 0;
padding: 0 10px 0 0
}
.switch-slide a:first-of-type:after, .switch-slide .switch-item:first-of-type:after, .switch-bar a:first-of-type:after, .switch-bar .switch-item:first-of-type:after {
width: calc(100% - 10px);
left: 0
}
.switch-slide a:first-of-type:after, .switch-slide .switch-item:first-of-type:after, .switch-bar a:first-of-type:after, .switch-bar .switch-item:first-of-type:after {
width: calc(100% - 25px);
left: 0
}
}
@media (min-width: 1300px) and (max-width: 1779px) {
.switch-slide a, .switch-slide .switch-item, .switch-bar a, .switch-bar .switch-item {
line-height: 70px;
padding: 0 25px 0 20px;
font-size: 1rem;
padding: 0 15px 0 10px;
font-size: .9375rem;
letter-spacing: -0.5px
}
.switch-slide a span, .switch-slide .switch-item span, .switch-bar a span, .switch-bar .switch-item span {
line-height: 70px
}
.switch-slide a:first-of-type, .switch-slide .switch-item:first-of-type, .switch-bar a:first-of-type, .switch-bar .switch-item:first-of-type {
padding: 0 25px 0 0;
padding: 0 15px 0 0
}
.switch-slide a:first-of-type:after, .switch-slide .switch-item:first-of-type:after, .switch-bar a:first-of-type:after, .switch-bar .switch-item:first-of-type:after {
width: calc(100% - 15px);
left: 0
}
.switch-slide a:first-of-type:after, .switch-slide .switch-item:first-of-type:after, .switch-bar a:first-of-type:after, .switch-bar .switch-item:first-of-type:after {
width: calc(100% - 25px);
left: 0
}
}
@media only screen and (min-width: 1400px) {
.switch-slide a, .switch-slide .switch-item, .switch-bar a, .switch-bar .switch-item {
padding: 0 35px 0 30px;
padding: 0 15px 0 10px;
font-size: 1rem
}
.switch-slide a:first-of-type, .switch-slide .switch-item:first-of-type, .switch-bar a:first-of-type, .switch-bar .switch-item:first-of-type {
padding: 0 35px 0 0;
padding: 0 15px 0 0
}
.switch-slide a:first-of-type:after, .switch-slide .switch-item:first-of-type:after, .switch-bar a:first-of-type:after, .switch-bar .switch-item:first-of-type:after {
width: calc(100% - 15px);
left: 0
}
.switch-slide a:first-of-type:after, .switch-slide .switch-item:first-of-type:after, .switch-bar a:first-of-type:after, .switch-bar .switch-item:first-of-type:after {
width: calc(100% - 35px);
left: 0
}
}
@media (min-width: 1780px) {
.switch-slide a, .switch-slide .switch-item, .switch-bar a, .switch-bar .switch-item {
padding: 0 50px 0 45px;
font-size: 1.25rem;
line-height: 90px;
padding: 0 25px 0 20px;
font-size: 1.25rem;
letter-spacing: -0.5px
}
.switch-slide a span, .switch-slide .switch-item span, .switch-bar a span, .switch-bar .switch-item span {
line-height: 90px
}
.switch-slide a:first-of-type, .switch-slide .switch-item:first-of-type, .switch-bar a:first-of-type, .switch-bar .switch-item:first-of-type {
padding: 0 50px 0 0;
padding: 0 25px 0 0
}
.switch-slide a:first-of-type:after, .switch-slide .switch-item:first-of-type:after, .switch-bar a:first-of-type:after, .switch-bar .switch-item:first-of-type:after {
width: calc(100% - 50px);
left: 0
}
.switch-slide a:first-of-type:after, .switch-slide .switch-item:first-of-type:after, .switch-bar a:first-of-type:after, .switch-bar .switch-item:first-of-type:after {
width: calc(100% - 25px);
left: 0
}
}
.switch-bar {
margin-bottom: 0
}
@media (min-width: 0) and (max-width: 979px) {
.switch-bar {
overflow-x: auto;
-webkit-overflow-scrolling: touch
}
}
@media (min-width: 740px) {
.switch-bar {
margin-bottom: 0
}
}
@media (min-width: 1300px) {
.switch-bar {
margin-bottom: 0
}
}
@media (min-width: 1780px) {
.switch-bar {
margin-bottom: 0
}
}
.switch-wrap {
padding-top: 20px
}
@media (min-width: 740px) {
.switch-wrap {
padding-top: 0
}
}
@media (min-width: 1780px) {
.switch-wrap {
padding-top: 30px
}
}
.switch-wrap-big {
padding-top: 30px
}
@media (min-width: 740px) {
.switch-wrap-big {
padding-top: 0
}
}
@media (min-width: 1780px) {
.switch-wrap-big {
padding-top: 70px
}
}
.select2-container {
box-sizing: border-box;
display: inline-block;
margin: 0;
position: relative;
vertical-align: middle
}
.select2-container .select2-selection--single {
box-sizing: border-box;
cursor: pointer;
display: block;
height: 28px;
user-select: none;
-webkit-user-select: none
}
.select2-container .select2-selection--single .select2-selection__rendered {
display: block;
padding-left: 8px;
padding-right: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.select2-container .select2-selection--single .select2-selection__clear {
position: relative
}
.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
padding-right: 8px;
padding-left: 20px
}
.select2-container .select2-selection--multiple {
box-sizing: border-box;
cursor: pointer;
display: block;
min-height: 32px;
user-select: none;
-webkit-user-select: none
}
.select2-container .select2-selection--multiple .select2-selection__rendered {
display: inline-block;
overflow: hidden;
padding-left: 8px;
text-overflow: ellipsis;
white-space: nowrap
}
.select2-container .select2-search--inline {
float: left
}
.select2-container .select2-search--inline .select2-search__field {
box-sizing: border-box;
border: none;
font-size: 100%;
margin-top: 5px;
padding: 0
}
.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
-webkit-appearance: none
}
.select2-dropdown {
background-color: white;
border: 1px solid #aaa;
border-radius: 4px;
box-sizing: border-box;
display: block;
position: absolute;
left: -100000px;
width: 100%;
z-index: 1051
}
.select2-results {
display: block
}
.select2-results__options {
list-style: none;
margin: 0;
padding: 0
}
.select2-results__option {
padding: 6px;
user-select: none;
-webkit-user-select: none
}
.select2-results__option[aria-selected] {
cursor: pointer
}
.select2-container--open .select2-dropdown {
left: 0
}
.select2-container--open .select2-dropdown--above {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0
}
.select2-container--open .select2-dropdown--below {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0
}
.select2-search--dropdown {
display: block;
padding: 4px
}
.select2-search--dropdown .select2-search__field {
padding: 4px;
width: 100%;
box-sizing: border-box
}
.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
-webkit-appearance: none
}
.select2-search--dropdown.select2-search--hide {
display: none
}
.select2-close-mask {
border: 0;
margin: 0;
padding: 0;
display: block;
position: fixed;
left: 0;
top: 0;
min-height: 100%;
min-width: 100%;
height: auto;
width: auto;
opacity: 0;
z-index: 99;
background-color: #fff;
filter: alpha(opacity=0)
}
.select2-hidden-accessible {
border: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important;
height: 1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
white-space: nowrap !important
}
.select2-container--default .select2-selection--single {
background-color: #fff;
border: 1px solid #aaa;
border-radius: 4px
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: #444;
line-height: 28px
}
.select2-container--default .select2-selection--single .select2-selection__clear {
cursor: pointer;
float: right;
font-weight: bold
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
color: #999
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 26px;
position: absolute;
top: 1px;
right: 1px;
width: 20px
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: #888 transparent transparent transparent;
border-style: solid;
border-width: 5px 4px 0 4px;
height: 0;
left: 50%;
margin-left: -4px;
margin-top: -2px;
position: absolute;
top: 50%;
width: 0
}
.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear {
float: left
}
.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {
left: 1px;
right: auto
}
.select2-container--default.select2-container--disabled .select2-selection--single {
background-color: #eee;
cursor: default
}
.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
display: none
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
border-color: transparent transparent #888 transparent;
border-width: 0 4px 5px 4px
}
.select2-container--default .select2-selection--multiple {
background-color: white;
border: 1px solid #aaa;
border-radius: 4px;
cursor: text
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
box-sizing: border-box;
list-style: none;
margin: 0;
padding: 0 5px;
width: 100%
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
list-style: none
}
.select2-container--default .select2-selection--multiple .select2-selection__clear {
cursor: pointer;
float: right;
font-weight: bold;
margin-top: 5px;
margin-right: 10px;
padding: 1px
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
background-color: #e4e4e4;
border: 1px solid #aaa;
border-radius: 4px;
cursor: default;
float: left;
margin-right: 5px;
margin-top: 5px;
padding: 0 5px
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
color: #999;
cursor: pointer;
display: inline-block;
font-weight: bold;
margin-right: 2px
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
color: #333
}
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline {
float: right
}
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
margin-left: 5px;
margin-right: auto
}
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
margin-left: 2px;
margin-right: auto
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
border: solid black 1px;
outline: 0
}
.select2-container--default.select2-container--disabled .select2-selection--multiple {
background-color: #eee;
cursor: default
}
.select2-container--default.select2-container--disabled .select2-selection__choice__remove {
display: none
}
.select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
border-top-left-radius: 0;
border-top-right-radius: 0
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0
}
.select2-container--default .select2-search--dropdown .select2-search__field {
border: 1px solid #aaa
}
.select2-container--default .select2-search--inline .select2-search__field {
background: transparent;
border: none;
outline: 0;
box-shadow: none;
-webkit-appearance: textfield
}
.select2-container--default .select2-results>.select2-results__options {
max-height: 200px;
overflow-y: auto
}
.select2-container--default .select2-results__option[role=group] {
padding: 0
}
.select2-container--default .select2-results__option[aria-disabled=true] {
color: #999
}
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: #ddd
}
.select2-container--default .select2-results__option .select2-results__option {
padding-left: 1em
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__group {
padding-left: 0
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option {
margin-left: -1em;
padding-left: 2em
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
margin-left: -2em;
padding-left: 3em
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
margin-left: -3em;
padding-left: 4em
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
margin-left: -4em;
padding-left: 5em
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
margin-left: -5em;
padding-left: 6em
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #5897fb;
color: white
}
.select2-container--default .select2-results__group {
cursor: default;
display: block;
padding: 6px
}
.select2-container--classic .select2-selection--single {
background-color: #f7f7f7;
border: 1px solid #aaa;
border-radius: 4px;
outline: 0;
background-image: -webkit-linear-gradient(top, #fff 50%, #eee 100%);
background-image: -o-linear-gradient(top, #fff 50%, #eee 100%);
background-image: linear-gradient(to bottom, #fff 50%, #eee 100%);
background-repeat: repeat-x
}
.select2-container--classic .select2-selection--single:focus {
border: 1px solid #5897fb
}
.select2-container--classic .select2-selection--single .select2-selection__rendered {
color: #444;
line-height: 28px
}
.select2-container--classic .select2-selection--single .select2-selection__clear {
cursor: pointer;
float: right;
font-weight: bold;
margin-right: 10px
}
.select2-container--classic .select2-selection--single .select2-selection__placeholder {
color: #999
}
.select2-container--classic .select2-selection--single .select2-selection__arrow {
background-color: #ddd;
border: none;
border-left: 1px solid #aaa;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
height: 26px;
position: absolute;
top: 1px;
right: 1px;
width: 20px;
background-image: -webkit-linear-gradient(top, #eee 50%, #ccc 100%);
background-image: -o-linear-gradient(top, #eee 50%, #ccc 100%);
background-image: linear-gradient(to bottom, #eee 50%, #ccc 100%);
background-repeat: repeat-x
}
.select2-container--classic .select2-selection--single .select2-selection__arrow b {
border-color: #888 transparent transparent transparent;
border-style: solid;
border-width: 5px 4px 0 4px;
height: 0;
left: 50%;
margin-left: -4px;
margin-top: -2px;
position: absolute;
top: 50%;
width: 0
}
.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear {
float: left
}
.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow {
border: none;
border-right: 1px solid #aaa;
border-radius: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
left: 1px;
right: auto
}
.select2-container--classic.select2-container--open .select2-selection--single {
border: 1px solid #5897fb
}
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow {
background: transparent;
border: none
}
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {
border-color: transparent transparent #888 transparent;
border-width: 0 4px 5px 4px
}
.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
background-image: -webkit-linear-gradient(top, #fff 0%, #eee 50%);
background-image: -o-linear-gradient(top, #fff 0%, #eee 50%);
background-image: linear-gradient(to bottom, #fff 0%, #eee 50%);
background-repeat: repeat-x
}
.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
background-image: -webkit-linear-gradient(top, #eee 50%, #fff 100%);
background-image: -o-linear-gradient(top, #eee 50%, #fff 100%);
background-image: linear-gradient(to bottom, #eee 50%, #fff 100%);
background-repeat: repeat-x
}
.select2-container--classic .select2-selection--multiple {
background-color: white;
border: 1px solid #aaa;
border-radius: 4px;
cursor: text;
outline: 0
}
.select2-container--classic .select2-selection--multiple:focus {
border: 1px solid #5897fb
}
.select2-container--classic .select2-selection--multiple .select2-selection__rendered {
list-style: none;
margin: 0;
padding: 0 5px
}
.select2-container--classic .select2-selection--multiple .select2-selection__clear {
display: none
}
.select2-container--classic .select2-selection--multiple .select2-selection__choice {
background-color: #e4e4e4;
border: 1px solid #aaa;
border-radius: 4px;
cursor: default;
float: left;
margin-right: 5px;
margin-top: 5px;
padding: 0 5px
}
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
color: #888;
cursor: pointer;
display: inline-block;
font-weight: bold;
margin-right: 2px
}
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
color: #555
}
.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
float: right;
margin-left: 5px;
margin-right: auto
}
.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
margin-left: 2px;
margin-right: auto
}
.select2-container--classic.select2-container--open .select2-selection--multiple {
border: 1px solid #5897fb
}
.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0
}
.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0
}
.select2-container--classic .select2-search--dropdown .select2-search__field {
border: 1px solid #aaa;
outline: 0
}
.select2-container--classic .select2-search--inline .select2-search__field {
outline: 0;
box-shadow: none
}
.select2-container--classic .select2-dropdown {
background-color: #fff;
border: 1px solid transparent
}
.select2-container--classic .select2-dropdown--above {
border-bottom: none
}
.select2-container--classic .select2-dropdown--below {
border-top: none
}
.select2-container--classic .select2-results>.select2-results__options {
max-height: 200px;
overflow-y: auto
}
.select2-container--classic .select2-results__option[role=group] {
padding: 0
}
.select2-container--classic .select2-results__option[aria-disabled=true] {
color: grey
}
.select2-container--classic .select2-results__option--highlighted[aria-selected] {
background-color: #3875d7;
color: #fff
}
.select2-container--classic .select2-results__group {
cursor: default;
display: block;
padding: 6px
}
.select2-container--classic.select2-container--open .select2-dropdown {
border-color: #5897fb
}
.table-list-wrap {
padding-bottom: 50px
}
@media (min-width: 1100px) {
.table-list-wrap {
padding-bottom: 70px
}
}
@media (min-width: 1780px) {
.table-list-wrap {
padding-bottom: 90px
}
}
.table-list-wrap table {
width: 100%
}
@media (min-width: 0) and (max-width: 979px) {
.table-list-wrap thead {
display: none
}
}
@media (min-width: 980px) {
.table-list-wrap thead {
border-bottom: 3px solid #0f56a1
}
}
@media (min-width: 0) and (max-width: 979px) {
.table-list-wrap tbody {
display: block
}
}
@media (min-width: 0) and (max-width: 979px) {
.table-list-wrap tr {
display: block;
border-bottom: 3px solid #0f56a1
}
.table-list-wrap tr:first-of-type {
border-top: 3px solid #0f56a1
}
}
.table-list-wrap td, .table-list-wrap th {
color: #2c2c2c;
text-align: left
}
@media (min-width: 0) and (max-width: 979px) {
.table-list-wrap td, .table-list-wrap th {
display: block;
width: 100%;
border-bottom: 1px solid #d4d4d4;
padding-top: 10px;
padding-bottom: 10px;
font-weight: bold;
line-height: 1.5em
}
.table-list-wrap td::before, .table-list-wrap th::before {
content: attr(data-field);
display: block;
width: 100%;
color: #898989;
font-weight: normal;
font-size: .875rem
}
.table-list-wrap td:last-of-type, .table-list-wrap th:last-of-type {
border-bottom: none
}
.table-list-wrap td.add-td, .table-list-wrap th.add-td {
padding-top: 15px;
padding-bottom: 15px;
font-size: 1.125rem
}
.table-list-wrap td.add-td:before, .table-list-wrap th.add-td:before {
display: none
}
}
@media (min-width: 980px) {
.table-list-wrap td, .table-list-wrap th {
text-align: left;
border-bottom: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
padding: 15px
}
.table-list-wrap td:last-of-type, .table-list-wrap th:last-of-type {
border-right: none
}
.table-list-wrap td:first-of-type, .table-list-wrap th:first-of-type {
padding: 15px 15px 15px 0
}
}
@media (min-width: 1300px) {
.table-list-wrap td, .table-list-wrap th {
padding: 20px 25px
}
.table-list-wrap td:last-of-type, .table-list-wrap th:last-of-type {
border-right: none
}
.table-list-wrap td:first-of-type, .table-list-wrap th:first-of-type {
padding: 20px 25px 20px 0
}
}
@media (min-width: 1780px) {
.table-list-wrap td, .table-list-wrap th {
padding: 25px 30px
}
.table-list-wrap td:last-of-type, .table-list-wrap th:last-of-type {
border-right: none
}
.table-list-wrap td:first-of-type, .table-list-wrap th:first-of-type {
padding: 25px 30px 25px 0
}
}
.table-list-wrap th {
font-weight: bold
}
@media (min-width: 980px) {
.table-list-wrap th {
font-size: 1.125rem
}
}
@media (min-width: 1300px) {
.table-list-wrap th {
font-size: 1.25rem
}
}
@media (min-width: 1780px) {
.table-list-wrap th {
font-size: 1.375rem
}
}
.table-list-wrap .herobtn {
margin: 40px auto 0
}
.add-to-cart {
display: block;
position: relative;
width: 100%
}
@media (min-width: 980px) {
.add-to-cart span {
border-bottom: 1px solid #0f56a1;
display: inline-block;
line-height: 1.75em;
transition: all .3s ease
}
}
.add-to-cart:after {
width: 30px;
height: 30px;
content: "";
display: inline-block;
vertical-align: middle;
background-image: url("../index_files/iconset.svg");
background-size: auto 100%;
background-position: 24.49% 0;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
transition: all .3s ease
}
@media (min-width: 1100px) {
.add-to-cart:active span, .add-to-cart:hover span {
color: #0f56a1
}
.add-to-cart:active:after, .add-to-cart:hover:after {
background-size: auto 100%;
background-position: 26.53% 0
}
}
.sm p, .sm li, .sp p, .sp li {
color: #6f6f6f
}
.sm a, .sp a {
color: #0f56a1;
border-bottom: 1px solid #0f56a1
}
.sm li, .sp li {
padding-left: 2em;
position: relative
}
.sm ul, .sp ul {
padding-bottom: 1em
}
.sm ul li:before, .sp ul li:before {
content: "";
display: block;
width: 4px;
height: 4px;
background-color: #666;
border-radius: 50%;
position: absolute;
left: 0;
top: 0.9em
}
.sm ol, .sp ol {
padding-bottom: 1em
}
.sm ol li, .sp ol li {
counter-increment: counter;
position: relative
}
.sm ol li:before, .sp ol li:before {
content: counter(counter) ". ";
position: absolute;
left: 0;
display: block
}
.sp-desc {
border-bottom: 1px solid #d4d4d4
}
@media (min-width: 740px) {
.sp-desc {
padding: 25px 60% 25px 0
}
}
@media (min-width: 1780px) {
.sp-desc {
padding: 35px 50% 35px 0
}
}
.sm-head, .sp-header {
position: relative;
border-bottom: 2px solid #2c2c2c
}
.sm-head .fz-A, .sp-header .fz-A {
margin-bottom: 0.1em
}
@media (min-width: 740px) {
.sm-head .fz-A, .sp-header .fz-A {
font-size: 2.25rem
}
}
@media (min-width: 1300px) {
.sm-head .fz-A, .sp-header .fz-A {
font-size: 2.8125rem
}
}
.sm-head .fz-B, .sp-header .fz-B {
margin-bottom: 0
}
@media (min-width: 740px) {
.sm-head .fz-B, .sp-header .fz-B {
font-size: 1.25rem
}
}
@media (min-width: 1300px) {
.sm-head .fz-B, .sp-header .fz-B {
font-size: 1.5rem
}
}
.sm-head .date, .sp-header .date {
font-size: .875rem
}
@media (min-width: 740px) {
.sm-head .date, .sp-header .date {
position: absolute;
right: 0;
bottom: 20px
}
}
@media (min-width: 740px) {
.sm-head, .sp-header {
padding-right: 20%;
padding-top: 60px;
padding-bottom: 20px
}
}
@media (min-width: 1780px) {
.sm-head, .sp-header {
padding-top: 100px;
padding-bottom: 20px
}
}
.sm-head {
padding-top: 0;
padding-bottom: 0;
border: none
}
@media (min-width: 0) and (max-width: 739px) {
.sm-head {
margin-bottom: 30px
}
}
.sm-head:after {
content: "";
display: block;
width: 30px;
height: 3px;
background-color: #0f56a1;
margin-top: 1.5em
}
@media (min-width: 740px) {
.sm-head:after {
width: 40px;
height: 5px
}
}
@media (min-width: 1780px) {
.sm-head:after {
width: 50px;
height: 7px
}
}
.sp-section {
padding-top: 30px;
padding-bottom: 30px;
line-height: 2em
}
@media (min-width: 740px) {
.sp-section {
padding-top: 50px;
padding-bottom: 50px
}
}
.sp-section a {
color: #0f56a1;
border-bottom: 1px solid #0f56a1
}
.sp-section li {
padding-left: 2em;
position: relative
}
.sp-section ul {
padding-bottom: 1em
}
.sp-section ul li:before {
content: "";
display: block;
width: 4px;
height: 4px;
background-color: #666;
border-radius: 50%;
position: absolute;
left: 0;
top: 0.9em
}
.sm-wrap {
padding-top: 50px;
padding-bottom: 50px
}
@media (min-width: 740px) {
.sm-wrap {
padding-top: 60px;
padding-bottom: 60px
}
.sm-wrap .row {
margin-left: -50px;
margin-right: -50px
}
.sm-wrap [class^="col-"] {
padding-left: 50px;
padding-right: 50px
}
}
@media (min-width: 1780px) {
.sm-wrap {
padding-top: 100px;
padding-bottom: 100px
}
.sm-wrap .row {
margin-left: -60px;
margin-right: -60px
}
.sm-wrap [class^="col-"] {
padding-left: 60px;
padding-right: 60px
}
}
.sm-item .fz-B {
border-bottom: 2px solid #2c2c2c;
display: block;
width: 100%;
padding-bottom: 0.375em
}
.sm-item .fz-C {
margin-bottom: 1.25em;
display: block
}
.sm-item a {
transition: all .35s ease
}
.sm-item a:hover, .sm-item a:active {
color: #0f56a1
}
@media (min-width: 0) and (max-width: 739px) {
.sm-item {
padding-top: 20px;
padding-bottom: 20px
}
.sm-item .fz-B {
margin-bottom: 0.25em
}
}
@media (min-width: 740px) {
.sm-item {
margin-bottom: 80px
}
}
@media (min-width: 1780px) {
.sm-item {
margin-bottom: 140px
}
}
.link-first .fz-C {
display: block;
width: 100%;
line-height: 3em;
font-weight: bold;
margin-bottom: 0
}
@media (min-width: 0) and (max-width: 739px) {
.link-first .fz-C {
line-height: 2.25em
}
}
.link-second>a {
display: block;
width: 100%;
line-height: 3em;
font-weight: bold;
font-size: 1rem
}
@media (min-width: 740px) {
.link-second>a {
font-size: 1.125rem
}
}
@media (min-width: 1300px) {
.link-second>a {
font-size: 1.25rem
}
}
.sm-prd {
padding-bottom: 25px
}
@media (min-width: 740px) {
.sm-prd {
padding-bottom: 30px
}
}
@media (min-width: 1780px) {
.sm-prd {
padding-bottom: 40px
}
}
.sm-prd a {
font-weight: normal;
font-size: .875rem;
display: block;
position: relative;
width: 100%;
padding-left: 1em;
transition: all .35s ease
}
.sm-prd a:before {
content: "";
display: block;
width: 4px;
height: 4px;
background-color: #666;
border-radius: 50%;
position: absolute;
left: 0;
top: 0.9em
}
.sm-prd a.title {
font-weight: bold;
padding-left: 0
}
.sm-prd a.title:before {
display: none
}
.sm-prd a:hover, .sm-prd a:active {
color: #0f56a1
}
@media (min-width: 740px) {
.sm-prd a {
font-size: .9375rem
}
}
@media (min-width: 1780px) {
.sm-prd a {
font-size: 1rem
}
}
.header {
height: 60px;
position: fixed;
left: 0;
top: 0;
width: 100%;
background-color: #fff;
z-index: 99;
transition: all .3s
}
.header .container-max {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #d4d4d4;
margin: 0 auto;
height: 100%
}
@media (min-width: 0) and (max-width: 979px) {
.header .container-max {
background-color: #f8f8f8
}
}
@media (min-width: 0) and (max-width: 1299px) {
.header .container-max {
padding: 0 5%
}
}
@media (min-width: 0) and (max-width: 1099px) {
.header .focus-nav {
display: none
}
}
@media (min-width: 0) and (max-width: 979px) {
.header .lang select {
height: 30px;
line-height: 30px
}
}
@media (min-width: 0) and (max-width: 350px) {
.header .lang {
margin-right: 70px
}
}
@media (min-width: 0) and (max-width: 1099px) {
.header .lang {
margin-right: 70px
}
}
@media (min-width: 576px) and (max-width: 1099px) {
.header .lang {
margin-right: 80px
}
}
@media (min-width: 740px) and (max-width: 1099px) {
.header .lang {
margin-right: 160px
}
}
@media (min-width: 0) and (max-width: 979px) {
.header:after {
content: "";
display: block;
width: 90%;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
position: absolute;
bottom: 0;
left: 5%
}
}
@media (min-width: 1780px) {
.header {
height: 70px
}
}
.header.release {
border-bottom: 1px solid transparent
}
.header.release .soco {
transform: scale(1)
}
.header.release .container-max {
border-color: transparent
}
@media (min-width: 740px) {
.header.release {
height: 90px
}
}
@media (min-width: 980px) {
.header.release .btn-nav-toggle {
font-size: 1.5rem
}
}
@media (min-width: 1300px) {
.header.release {
height: 100px
}
}
@media (min-width: 1780px) {
.header.release {
height: 140px
}
.header.release .btn-nav-toggle {
font-size: 1.875rem
}
}
@media (min-width: 740px) {
.fp-viewing-1 .header.release, .fp-viewing-2 .header.release, .fp-viewing-3 .header.release, .fp-viewing-4 .header.release {
height: 60px
}
}
@media (min-width: 980px) {
.fp-viewing-1 .header.release .btn-nav-toggle, .fp-viewing-2 .header.release .btn-nav-toggle, .fp-viewing-3 .header.release .btn-nav-toggle, .fp-viewing-4 .header.release .btn-nav-toggle {
font-size: 1.5rem
}
}
@media (min-width: 1300px) {
.fp-viewing-1 .header.release, .fp-viewing-2 .header.release, .fp-viewing-3 .header.release, .fp-viewing-4 .header.release {
height: 60px
}
}
@media (min-width: 1780px) {
.fp-viewing-1 .header.release, .fp-viewing-2 .header.release, .fp-viewing-3 .header.release, .fp-viewing-4 .header.release {
height: 70px
}
}
@media (min-width: 740px) {
.fp-viewing-1 .release .soco, .fp-viewing-2 .release .soco, .fp-viewing-3 .release .soco, .fp-viewing-4 .release .soco {
transform: scale(0.7)
}
}
@media (min-width: 740px) {
.fp-viewing-1 .release .fn-item, .fp-viewing-2 .release .fn-item, .fp-viewing-3 .release .fn-item, .fp-viewing-4 .release .fn-item {
line-height: 60px
}
}
@media (min-width: 1300px) {
.fp-viewing-1 .release .fn-item, .fp-viewing-2 .release .fn-item, .fp-viewing-3 .release .fn-item, .fp-viewing-4 .release .fn-item {
line-height: 60px
}
}
@media (min-width: 1780px) {
.fp-viewing-1 .release .fn-item, .fp-viewing-2 .release .fn-item, .fp-viewing-3 .release .fn-item, .fp-viewing-4 .release .fn-item {
line-height: 70px
}
}
@media (min-width: 0) and (max-width: 979px) {
.mobile-w .header.release .camden {
background-image: url("../index_files/camden-white.svg")
}
.mobile-w .header.release .hamburger span {
background-color: #fff
}
.mobile-w .header.release .hamburger span:before, .mobile-w .header.release .hamburger span:after {
background-color: #fff
}
}
.soco {
display: block;
background: url("../index_files/logo.png") no-repeat center center;
background-size: contain;
transition: width .2s, height .2s;
font-size: 0;
width: 110px;
height: 100%;
transform-origin: left center;
transition: transform .25s
}
@media (min-width: 740px) {
.soco {
width: 140px;
height: 100%;
transform: scale(0.7)
}
}
@media (min-width: 1100px) {
.soco {
width: 280px;
}
}
@media (min-width: 1300px) {
.soco {
width: 300px;
}
}
@media (min-width: 1780px) {
.soco {
width: 380px;
}
}
.soco:after {
content: "";
display: block;
width: 100%;
padding-bottom: 50%
}
.btn-nav-toggle {
position: absolute;
left: 31%;
vertical-align: middle;
color: #000;
font-family: "Montserrat", "Noto Sans TW", "PingFang", "PingFangTC", "Microsoft JhengHei", Helvetica, Arial, sans-serif;
font-weight: 600;
letter-spacing: -0.6px;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none
}
@media (min-width: 980px) {
.btn-nav-toggle {
font-size: 1.5em;
margin-top: -4px;
transition: all .4s ease
}
}
@media (min-width: 1780px) {
.btn-nav-toggle {
font-size: 1.875em
}
}
.btn-nav-toggle span, .btn-nav-toggle .hamburger {
display: inline-block;
vertical-align: middle
}
@media (min-width: 0) and (max-width: 1099px) {
.btn-nav-toggle {
left: auto;
right: 5%;
font-size: 0
}
}
@media (min-width: 1100px) {
.btn-nav-toggle:hover .hamburger span {
width: 10px;
margin-left: -20px
}
.btn-nav-toggle:hover .hamburger span:before, .btn-nav-toggle:hover .hamburger span:after {
width: 30px
}
}
.hamburger {
width: 24px;
height: 24px;
cursor: pointer;
position: relative;
display: inline-flex !important;
vertical-align: middle;
justify-content: center;
align-items: center
}
@media (min-width: 740px) {
.hamburger {
width: 30px;
height: 30px
}
}
.hamburger span {
position: relative;
display: inline-block;
height: 2px;
width: 18px;
border-radius: 0;
background-color: #000;
transition: all .3s ease
}
@media (min-width: 740px) {
.hamburger span {
width: 30px
}
}
.hamburger span:before, .hamburger span:after {
content: "";
display: block;
position: absolute;
top: -5px;
left: 0;
height: 100%;
width: 100%;
background-color: #000;
border-radius: 5px;
transition: all .3s ease
}
@media (min-width: 740px) {
.hamburger span:before, .hamburger span:after {
top: -8px
}
}
.hamburger span:after {
top: 5px
}
@media (min-width: 740px) {
.hamburger span:after {
top: 8px
}
}
.lang {
width: 100px
}
@media (min-width: 740px) {
.lang {
width: 140px
}
}
@media (min-width: 1780px) {
.lang {
width: 160px
}
}
.white-header .header.release .hamburger span {
background-color: #fff
}
.white-header .header.release .hamburger span:before, .white-header .header.release .hamburger span:after {
background-color: #fff
}
.white-header .header.release .btn-nav-toggle {
color: #fff
}
footer {
background-color: #2c2c2c;
color: #6f6f6f;
padding-top: 50px;
padding-bottom: 20px;
letter-spacing: 1px;
position: relative;
color: #a4a4a4
}
footer a, footer p {
color: #a4a4a4
}
@media (min-width: 740px) {
footer {
padding-top: 80px;
padding-bottom: 80px;
overflow: hidden
}
}
@media (min-width: 740px) and (min-width: 740px) {
footer:before {
content: "Success";
color: #181818;
font-weight: bold;
font-size: 16vw;
position: absolute;
line-height: 0.8em;
transform: translate(-6%, -18%);
line-height: 1em;
letter-spacing: -0.05em;
left: 0;
top: 0
}
}
@media (min-width: 740px) and (max-width: 1099px) {
footer {
padding-left: 70px;
padding-right: 70px
}
footer .container {
padding-left: 0;
padding-right: 0
}
}
@media (min-width: 1780px) {
footer {
padding-top: 120px;
padding-bottom: 80px
}
}
@media (min-width: 1300px) {
footer .container {
max-width: 80%
}
}
@media (min-width: 1780px) {
footer .container {
max-width: 72%
}
}
.footer-header {
border-bottom: 1px solid #3c3c3c;
padding-bottom: 40px
}
@media (min-width: 0) and (max-width: 739px) {
.footer-header {
padding: 0 0 40px
}
.footer-header img {
max-width: 160px;
margin-bottom: 30px
}
}
.footer-header img {
display: block
}
@media (min-width: 740px) {
.footer-header img {
max-width: 180px
}
}
@media (min-width: 1300px) {
.footer-header img {
max-width: 270px
}
}
.footer-header strong {
font-weight: bold;
color: #fff;
font-size: .875rem
}
@media (min-width: 1300px) {
.footer-header strong {
font-size: 1.125rem
}
}
.footer-header p {
font-size: .875rem
}
.footer-link {
font-size: 1rem;
display: flex;
justify-content: space-between
}
.footer-link a {
color: #fff
}
@media (min-width: 0) and (max-width: 575px) {
.footer-link {
font-size: .875rem
}
}
@media (min-width: 0) and (max-width: 350px) {
.footer-link {
font-size: .75rem
}
}
.ft-item {
padding-bottom: 30px
}
.ft-item img {
display: inline-block;
height: 17px;
width: auto;
opacity: 0.5;
transition: all .35s ease
}
.ft-item a+a {
margin-left: 20px
}
.ft-item a+a img {
height: 23px
}
.ft-item a:hover img, .ft-item a:active img {
opacity: 1
}
.ft-contact br {
visibility: hidden;
opacity: 0
}
@media (min-width: 0) and (max-width: 575px) {
.ft-contact {
display: flex
}
.ft-contact p+p {
margin-left: 50px
}
}
@media (min-width: 576px) {
.ft-contact p+p {
margin-top: 20px
}
}
.footer-logo strong {
display: inline-block;
vertical-align: middle;
font-size: 1.375em;
color: #fff;
line-height: 1em;
letter-spacing: 1px;
margin-left: 5px;
font-weight: bold
}
@media (min-width: 1300px) {
.footer-logo strong {
font-size: 1.75em
}
}
.footer-logo img {
display: inline-block;
height: 30px;
width: auto;
vertical-align: middle
}
@media (min-width: 1300px) {
.footer-logo img {
height: 38px
}
}
.footer-copyright {
align-items: flex-end;
color: #606060;
font-size: .75em;
line-height: 1.25em
}
.footer-copyright .copyright {
display: flex;
justify-content: space-between
}
.footer-copyright .copyright a {
color: #606060
}
.footer-copyright .copyright br {
display: none
}
.footer-copyright .copyright span {
display: block
}
@media (min-width: 0) and (max-width: 575px) {
.footer-copyright .copyright {
display: block
}
.footer-copyright .copyright span {
padding-bottom: 30px
}
.footer-copyright .copyright br {
display: block
}
}
@media (min-width: 576px) {
.footer-copyright .copyright {
padding-top: 30px
}
}
@media (min-width: 0) and (max-width: 575px) {
.footer-copyright {
padding: 30px 0
}
}
.app {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
background-color: #181818;
border-radius: 6px;
padding: 0 15px;
margin-bottom: 40px
}
@media (min-width: 1780px) {
.app {
padding: 0 30px
}
}
.app strong {
font-size: .875rem;
line-height: 60px;
white-space: nowrap
}
@media (min-width: 740px) {
.app strong {
font-size: .875rem;
line-height: 72px
}
}
@media (min-width: 980px) {
.app strong {
font-size: .875rem
}
}
@media (min-width: 1300px) {
.app strong {
line-height: 80px
}
}
@media (min-width: 1780px) {
.app strong {
font-size: 1.25rem;
line-height: 96px
}
}
.app:before {
content: "";
display: inline-block;
vertical-align: middle;
background-image: url("../index_files/iconset.svg");
background-size: auto 100%;
background-position: 12.24% 0;
width: 40px;
height: 40px;
margin-right: 15px
}
@media (min-width: 980px) {
.app:before {
width: 50px;
height: 50px
}
}
@media (min-width: 1300px) {
.app:before {
width: 60px;
height: 60px
}
}
@media (min-width: 1780px) {
.app:before {
width: 70px;
height: 70px
}
}
.app-download {
padding: 40px
}
@media (min-width: 740px) {
.app-download {
padding: 80px
}
}
.app-download .icon {
height: 50px;
width: 50px;
display: block
}
.app-download .icon:before {
width: 100%;
height: 100%
}
@media (min-width: 740px) {
.app-download .icon {
width: 64px;
height: 64px
}
}
@media (min-width: 1300px) {
.app-download .icon {
width: 72px;
height: 72px
}
}
.app-download .title {
font-size: 1.625rem;
font-weight: bold;
margin-bottom: 0.5em
}
@media (min-width: 740px) {
.app-download .title {
font-size: 2.5rem
}
}
@media (min-width: 980px) {
.app-download .title {
font-size: 2.75rem
}
}
@media (min-width: 1300px) {
.app-download .title {
font-size: 2.875rem
}
}
@media (min-width: 1780px) {
.app-download .title {
font-size: 3.125rem
}
}
.app-download .app-stroe a {
border: 1px solid #d4d4d4;
border-radius: 6px;
position: relative;
display: block;
margin-bottom: 40px;
overflow: hidden
}
.app-download .app-stroe a:after {
content: "";
width: 100%;
height: 3px;
background-color: #0f56a1;
transition: all .35s ease
}
@media (min-width: 740px) {
.app-download .app-stroe {
display: flex
}
.app-download .app-stroe a {
flex: 1
}
.app-download .app-stroe a+a {
margin-left: 30px
}
}
.hero-banner {
width: 90vw;
height: 100vh;
position: relative;
color: #2c2c2c;
background-color: #fff
}
@media (min-width: 0) and (max-width: 979px) {
.hero-banner {
height: 160vw !important;
display: block !important
}
}
@media (min-width: 740px) and (max-width: 979px) {
.hero-banner {
height: 120vw !important;
display: block !important
}
}
@media (min-width: 0) and (max-width: 979px) {
.hero-banner .fp-tableCell {
display: block
}
}
.hero-banner .swiper-wrapper {
height: 100vh
}
@media (min-width: 0) and (max-width: 979px) {
.hero-banner .swiper-wrapper {
height: 160vw !important
}
}
@media (min-width: 740px) and (max-width: 979px) {
.hero-banner .swiper-wrapper {
height: 120vw !important;
display: block !important
}
}
.hero-banner .swiper-count-hero::before {
content: '0'
}
.hero-banner .swiper-slide {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
display: flex;
justify-content: center;
align-items: flex-end;
color: #fff;
position: absolute;
left: 0;
top: 0;
opacity: 1;
visibility: hidden;
transition: opacity 0s, visibility 0s;
transition-delay: .9s;
pointer-events: none;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none
}
@media (min-width: 980px) {
.hero-banner .swiper-slide {
padding-left: 8%;
justify-content: flex-start;
align-items: center
}
}
@media (min-width: 1780px) {
.hero-banner .swiper-slide {
}
}
.hero-banner .swiper-slide .base {
width: 100%;
padding: 35px
}
@media (min-width: 0) and (max-width: 979px) {
.hero-banner .swiper-slide .base {
background-color: #fff;
position: relative;
z-index: 90
}
.hero-banner .swiper-slide .base:before {
content: attr(data-num);
position: absolute;
display: block;
letter-spacing: -1px;
font-size: 4.5rem;
right: 35px;
top: 0;
font-weight: bold;
transform: translateY(-50%);
color: #efefef
}
}
@media (min-width: 740px) and (max-width: 979px) {
.hero-banner .swiper-slide .base {
padding: 70px
}
}
@media (min-width: 980px) {
.hero-banner .swiper-slide .base {
max-width: 23%;
padding: 0
}
}
@media (min-width: 1780px) {
.hero-banner .swiper-slide .base {
}
}
.hero-banner .swiper-slide:before {
transition: transform .8s ease .1s, opacity .6s ease .1s;
transform: translateX(-40px);
opacity: 0
}
@media (min-width: 980px) {
.hero-banner .swiper-slide:before {
content: attr(data-num);
position: absolute;
display: block;
letter-spacing: -1px;
font-size: 11rem;
left: 0;
top: 20%;
font-weight: bold;
transform: translateX(-35%);
color: #f4f4f4
}
}
@media (min-width: 1300px) {
.hero-banner .swiper-slide:before {
font-size: 12rem;
transform: translateX(-30%)
}
}
@media (min-width: 1780px) {
.hero-banner .swiper-slide:before {
font-size: 16rem;
transform: translateX(-25%)
}
}
@media (min-width: 2200px) {
.hero-banner .swiper-slide:before {
font-size: 20rem
}
}
.hero-banner .page-title {
transform: none !important
}
.hero-banner .hero-img-holder {
width: 100%;
height: 100%;
background-size: cover;
transition: transform 0s linear 1s, opacity 0s linear 1s;
transform: translateX(-100px);
transform-origin: left center;
opacity: 0
}
.hero-banner .hero-img-holder img {
display: none;
width: 100%;
height: auto
}
@media (min-width: 0) and (max-width: 739px) {
.hero-banner .hero-img-holder .img_desk {
display: none
}
}
@media (min-width: 740px) {
.hero-banner .hero-img-holder .img_desk {
display: block;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center
}
}
@media (min-width: 0) and (max-width: 979px) {
.hero-banner .hero-img-holder {
height: 74%
}
}
@media (min-width: 0) and (max-width: 740px) and (orientation: portrait) {
.hero-banner .hero-img-holder {
background: none !important
}
.hero-banner .hero-img-holder img {
display: block !important
}
}
@media (min-width: 980px) {
.hero-banner .hero-img-holder {
padding: 90px 5vw 3.5vw 0
}
}
@media (min-width: 1300px) {
.hero-banner .hero-img-holder {
padding: 100px 5vw 3.5vw 0;
transform: translateX(-400px)
}
}
@media (min-width: 1780px) {
.hero-banner .hero-img-holder {
padding: 140px 5vw 3.5vw 0
}
}
@media (min-width: 0) and (max-width: 1099px) {
.hero-banner .swiper-slide-active {
background-color: #fff;
opacity: 1;
visibility: visible;
transition: opacity 0.2s, visibility 0s;
transition-delay: 0.1s;
pointer-events: auto
}
.hero-banner .swiper-slide-active .title {
opacity: 1;
transform: translateX(0);
transition: transform .8s ease .1s, opacity .6s ease .1s
}
.hero-banner .swiper-slide-active .subtitle {
opacity: 1;
transform: translateX(0);
transition: transform .8s ease .25s, opacity .6s ease .25s
}
.hero-banner .swiper-slide-active .desc {
opacity: 1;
transform: translateX(0);
transition: transform .8s ease .4s, opacity .6s ease .4s
}
.hero-banner .swiper-slide-active .link {
opacity: 1;
transform: translateX(0);
transition: transform .8s ease .6s, opacity .6s ease .6s
}
.hero-banner .swiper-slide-active .hero-img-holder {
transition: transform .9s ease 0s, opacity .9s ease 0s;
opacity: 1;
transform: translateX(0)
}
.hero-banner .swiper-slide-active .bg {
z-index: 10
}
.hero-banner .swiper-slide-active .next:before {
margin-right: 0;
right: 0;
bottom: 0;
left: 100%
}
}
@media (min-width: 0) and (max-width: 1099px) {
.hero-banner .swiper-slide-active:before {
opacity: 1;
transform: translateX(0);
transition: transform .8s ease .8s, opacity .6s ease .8s
}
}
@media (min-width: 980px) and (max-width: 1099px) {
.hero-banner .swiper-slide-active:before {
transform: translateX(-30%)
}
}
@media (min-width: 1100px) {
.hero-banner .swiper-slide-active:before {
transform: translateX(-30%)
}
}
@media (min-width: 1300px) {
.hero-banner .swiper-slide-active:before {
transform: translateX(-25%)
}
}
@media (min-width: 1780px) {
.hero-banner .swiper-slide-active:before {
transform: translateX(-20%)
}
}
.hero-banner picture {
visibility: hidden;
opacity: 0;
display: none
}
.hero-banner .link, .hero-banner .title, .hero-banner .subtitle, .hero-banner .desc {
display: block;
transition: transform .2s ease, opacity .6s ease;
opacity: 0
}
.hero-banner .title {
margin-bottom: 1em;
transition: transform .2s ease .8s, opacity .6s ease .2s;
transform: translateX(-50px);
color: #2c2c2c;
font-weight: bold;
line-height: 1.125em;
font-size: 1.25rem
}
.hero-banner .title strong {
color: #0f56a1
}
@media (min-width: 740px) {
.hero-banner .title {
font-size: 2rem
}
}
@media (min-width: 1100px) {
.hero-banner .title {
font-size: 2.375rem;
letter-spacing: -1px
}
}
@media (min-width: 1300px) {
.hero-banner .title {
font-size: 2.625rem
}
}
@media (min-width: 1780px) {
.hero-banner .title {
font-size: 2.875rem
}
}
.hero-banner .subtitle {
font-weight: 500;
transition: transform .2s ease .9s, opacity .6s ease .3s;
transform: translateX(-60px);
color: #2c2c2c;
font-weight: bold;
font-size: .9375rem;
line-height: 1em;
margin-bottom: 40px
}
@media (min-width: 0) and (max-width: 979px) {
.hero-banner .subtitle {
display: none
}
}
@media (min-width: 1300px) {
.hero-banner .subtitle {
font-size: 1rem;
margin-bottom: 50px
}
}
@media (min-width: 1780px) {
.hero-banner .subtitle {
margin-bottom: 40px;
font-size: 1.5rem
}
}
.hero-banner .desc {
margin-bottom: 0;
transition: transform .2s ease .8s, opacity .6s ease .1s;
transform: translateX(-50px);
color: #6f6f6f
}
@media (min-width: 0) and (max-width: 739px) {
.hero-banner .desc {
display: none
}
}
@media (min-width: 740px) {
.hero-banner .desc {
font-size: .9375rem
}
}
@media (min-width: 1780px) {
.hero-banner .desc {
font-size: 1rem
}
}
.hero-banner .bg {
position: absolute;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
z-index: 1;
right: 0;
bottom: 0;
overflow: hidden;
background-color: transparent
}
@media (min-width: 980px) {
.hero-banner .bg:before, .hero-banner .bg:after {
content: "";
display: block;
background-color: #fff;
position: absolute;
z-index: 99
}
}
.hero-banner .bg:before {
width: 5vw;
height: 100%;
right: 0;
top: 0
}
.hero-banner .bg:after {
width: 100%;
height: 3.5vw;
right: 0;
bottom: 0
}
@media (min-width: 980px) {
.hero-banner .bg {
width: 66.66%
}
}
.hero-banner .link {
transform: translateX(-40px);
transition: transform .2s ease .8s, opacity .6s ease .1s
}
.hero-banner .loader-line {
display: block;
width: 100%;
height: 4px;
background-color: transparent;
position: absolute;
overflow: hidden;
bottom: 0
}
@media (min-width: 980px) {
.hero-banner .loader-line {
width: 66.66%;
left: 33.34%
}
}
@media (min-width: 740px) {
.hero-banner .loader-line {
height: 6px
}
}
@media (min-width: 980px) {
.hero-banner .loader-line {
bottom: 3.5vw
}
}
@media (min-width: 1300px) {
.hero-banner .loader-line {
height: 8px
}
}
.hero-banner .loader-line:before {
content: "";
display: block;
position: absolute;
width: 100%;
height: 8px;
background-color: #0f56a1;
z-index: 60;
transform-origin: left center;
animation: loader-line 6s linear;
animation-delay: .1s
}
.hero-banner .loader-line.active:before {
transform-origin: left center;
animation: loader-line-2 6s linear;
animation-delay: .1s
}
.hero-banner .controller {
display: block
}
@media (min-width: 740px) {
.hero-banner .page-hero {
position: relative
}
.hero-banner .page-hero .swiper-pagination-bullet {
margin: 0;
width: 100%
}
}
@media (min-width: 1100px) {
.hero-banner:before, .hero-banner:after {
content: "";
position: absolute;
height: 100%;
background-color: #0f56a1;
z-index: 15;
top: 0;
pointer-events: none
}
.hero-banner:before {
width: 33.34%;
left: 0;
transition: bottom 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, left 0.8s cubic-bezier(0.77, 0, 0.175, 1) 0.3s, margin 0.3s cubic-bezier(0.77, 0, 0.175, 1) 0.3s, right 0.6s cubic-bezier(0.77, 0, 0.175, 1) 0.6s
}
.hero-banner:after {
width: 66.66%;
background-color: #2c2c2c;
left: 33.33%;
transition: bottom 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, right 0.3s cubic-bezier(0.77, 0, 0.175, 1) 0.3s, margin 0.3s cubic-bezier(0.77, 0, 0.175, 1) 0.3s, left 0.6s cubic-bezier(0.77, 0, 0.175, 1) 0.6s
}
}
.hero-banner .controller {
position: absolute;
right: 8%;
top: 50%;
z-index: 99;
width: 50px;
transform: translateY(-50%);
background: #000000ab;
padding-top: 20px;
padding-bottom: 20px;
}
@media (min-width: 0) and (max-width: 979px) {
.hero-banner .controller {
right: 0;
top: 30%
}
}
@media (min-width: 740px) and (max-width: 979px) {
.hero-banner .controller {
right: 35px;
top: 30%
}
}
.hero-banner.loaded .btn-scrolldown {
transform: rotate(-90deg) translate(50%, -100%);
opacity: 1
}
@media (min-width: 0) and (max-width: 979px) {
.mobile .hero-banner .btn-scrolldown {
display: none
}
}
@media (min-width: 980px) {
.mobile .hero-banner .btn-scrolldown {
transform: rotate(-90deg) translate(20%, -100%);
opacity: 1
}
}
.next {
background-color: #2c2c2c;
display: flex;
position: absolute;
bottom: 0;
left: 0;
z-index: 900
}
.next:before {
content: "";
margin: 0 -10px 0 0;
position: absolute;
top: 0;
right: 100%;
bottom: 100%;
left: 0;
background-color: #0f56a1;
z-index: 10;
transition: bottom 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, right 0.3s cubic-bezier(0.77, 0, 0.175, 1) 0.3s, margin 0.3s cubic-bezier(0.77, 0, 0.175, 1) 0.3s, left 0.6s cubic-bezier(0.77, 0, 0.175, 1) 0.6s;
pointer-events: none
}
.next>div {
width: 180px;
font-weight: bold
}
@media (min-width: 1780px) {
.next>div {
width: 200px
}
}
@media (min-width: 1780px) {
.next>div {
width: 220px
}
}
.next .text {
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between
}
.next .text strong {
color: #c6c6c6
}
@media (min-width: 980px) {
.next .text {
font-size: .875rem
}
.next .text .num {
font-size: 1rem
}
}
@media (min-width: 1300px) {
.next .text {
font-size: .9375rem
}
.next .text .num {
font-size: 1.125rem
}
}
@media (min-width: 1780px) {
.next .text {
padding: 20px 30px;
font-size: 1.125rem
}
.next .text .num {
font-size: 1.25rem
}
}
@media (min-width: 0) and (max-width: 979px) {
.next {
display: none
}
}
@keyframes bgIn {
0% {
transform: translateY(-20%)
}
100% {
transform: translateY(0)
}
}
@keyframes bgOut {
0% {
}
100% {
}
}
@keyframes scrolldown {
0% {
transform: translateY(-50px);
opacity: 0
}
50% {
transform: translateY(-50px);
opacity: 0
}
100% {
transform: translateY(0);
opacity: 1
}
}
@keyframes cprt {
0% {
transform: translate(-50px, 200%) rotate(-90deg);
opacity: 0
}
60% {
transform: translate(-50px, 200%) rotate(-90deg);
opacity: 0
}
100% {
transform: translate(0, 200%) rotate(-90deg);
opacity: 0.2
}
}
@keyframes loader-line {
0% {
transform: scaleX(0);
opacity: 1
}
100% {
transform: scaleX(1);
opacity: 1
}
}
@keyframes loader-line-2 {
0% {
transform: scaleX(0);
opacity: 1
}
100% {
transform: scaleX(1);
opacity: 1
}
}
.num-intro {
color: #fff;
position: relative;
z-index: 2;
padding: 60px 35px 35px;
background:#2c2c2c;
}
.num-intro .text span {
font-size: .75em;
margin-bottom: 40px;
display: block
}
.num-intro .text .title {
font-size: 1.625em;
color: #0f56a1;
font-weight: bold;
line-height: 1.25em;
display: block;
margin-bottom: 50px
}
@media (min-width: 740px) {
.num-intro {
padding: 60px 70px 60px
}
.num-intro .text span {
font-size: .875em
}
.num-intro .text .title {
font-size: 2.125em
}
}
@media (min-width: 980px) {
.num-intro {
display: flex;
padding-top: 15vh;
padding-bottom: 10vh
}
.num-intro .text {
transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translateX(-50px);
opacity: 0
}
.num-intro .text span {
font-size: .9375em
}
}
@media (min-width: 1100px) {
.num-intro {
max-width: 80%;
margin: 0 0 0 14%;
padding: 60px 0 0
}
.num-intro .text span {
font-size: 1em
}
.num-intro .text .title {
font-size: 2.5em
}
}
@media (min-width: 1300px) {
.num-intro {
max-width: 72%;
margin: 0 0 0 18%;
padding: 60px 0 20px
}
}
@media (min-width: 1780px) {
.num-intro {
margin: 0 auto;
max-width: 80%;
padding: 100px 0 40px;
}
.num-intro .text .title {
font-size: 3.125em
}
}
.idx-num {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
flex: auto
}
@media (min-width: 980px) {
.idx-num {
margin-left: 15%
}
}
.idx-num li {
flex: 1;
list-style: none;
}
@media (min-width: 1100px) {
.idx-num li {
transform: translateX(-50px);
transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
opacity: 0
}
.idx-num li:nth-of-type(1) {
transition-delay: .1s
}
.idx-num li:nth-of-type(2) {
transition-delay: .25s
}
.idx-num li:nth-of-type(3) {
transition-delay: .4s
}
}
.idx-num p {
color: #8f8f8f;
line-height: 1.5em
}
.idx-num strong {
color: #fff;
font-size: 2.125em
}
@media (min-width: 740px) {
.idx-num strong {
font-size: 2.75em
}
}
@media (min-width: 980px) {
.idx-num strong {
font-size: 3em
}
}
@media (min-width: 1300px) {
.idx-num strong {
font-size: 3.25em
}
}
@media (min-width: 1780px) {
.idx-num strong {
font-size: 3.75em
}
}
.idx-application {
position: relative
}
@media (min-width: 0) and (max-width: 739px) {
.idx-application {
background: #f6f6f6 url("../images/index/idx-map.png") no-repeat center top;
background-size: 100% auto
}
}
@media (min-width: 740px) {
.idx-application {
background: #2c2c2c url("../images/index/idx-map-lg.png") no-repeat center top;
background-size: 100% auto
}
}
@media (min-width: 980px) {
.idx-application:after {
content: "";
display: block;
width: 100%;
background-color: #f6f6f6;
height: 18vh;
position: absolute;
left: 0;
bottom: 0;
z-index: 1
}
}
@media (min-width: 740px) {
.idx-application .swiper-slide {
width: 27.75%;
transition: all .4s ease
}
.idx-application .swiper-slide .left .text strong {
display: block;
height: 3.2em;
line-height: 1.5em;
color: #fff;
}
}
@media (min-width: 740px) {
.idx-application .swiper-slide-next {
width: 50%
}
.idx-application .swiper-slide-next .idx-a-item .right {
visibility: visible;
pointer-events: auto;
opacity: 1
}
.idx-application .swiper-slide-next .idx-a-item .left img {
filter: grayscale(0)
}
.idx-application .swiper-slide-next .idx-a-item .left .text {
background-color: #0f56a1;
color: #2c2c2c
}
.idx-application .swiper-slide-next .idx-a-item .left .text .fz-B {
}
.idx-application .swiper-slide-next .idx-a-item .left .text:before {
transform: translate(0, -50%);
opacity: 1
}
}
@media (min-width: 740px) and (max-width: 1099px) {
.idx-application .swiper-slide-next .idx-a-item .right p {
line-height: 1.5em
}
}
.idx-a-item {
position: relative;
transition: all .4s ease;
display: block
}
.idx-a-item .left {
transition: all .4s ease
}
.idx-a-item .left img {
transition: all .4s ease
}
@media (min-width: 740px) {
.idx-a-item .left img {
filter: grayscale(100%)
}
}
.idx-a-item .left .text {
background-color: #0f56a1;
padding: 40px 20px;
position: relative;
transition: all .4s ease
}
.idx-a-item .left .text .fz-B {
color: #fff
}
@media (min-width: 740px) {
.idx-a-item .left .text {
background-color: #2c2c2c;
background-color: #000;
color: #fff
}
}
@media (min-width: 1100px) {
.idx-a-item .left .text {
padding: 30px 40px
}
}
@media (min-width: 1780px) {
.idx-a-item .left .text {
padding: 40px 50px
}
}
.idx-a-item .left .text:before {
content: attr(data-num);
display: block;
font-size: 2.5em;
position: absolute;
right: 35px;
top: 0;
line-height: 0.9em;
font-weight: bold;
color: #f1f1f1;
transform: translate(0, -50%);
text-shadow: 0px 5px 6px #00000096;
}
@media (min-width: 740px) {
.idx-a-item .left .text:before {
right: 50px;
transform: translate(-100%, -50%);
opacity: 0;
transition: all .4s ease;
transition-delay: 0.1s;
filter: grayscale(100%)
}
}
@media (min-width: 1100px) {
.idx-a-item .left .text:before {
font-size: 3.75em
}
}
@media (min-width: 1780px) {
.idx-a-item .left .text:before {
font-size: 4.375em
}
}
@media (min-width: 0) and (max-width: 739px) {
.idx-a-item .left .fz-B {
display: none
}
}
@media (min-width: 740px) {
.idx-a-item .left {
width: 25vw
}
}
.idx-a-item .right .fz-B {
display: block
}
@media (min-width: 0) and (max-width: 739px) {
.idx-a-item .right .fz-B {
padding-top: 1em
}
}
@media (min-width: 740px) {
.idx-a-item .right {
padding: 0 0 0 0;
position: absolute;
right: 0;
top: 0;
width: 40%;
transition: all .4s ease;
opacity: 0;
visibility: hidden
}
.idx-a-item .right .fz-B {
color: #fff;
display: block
}
.idx-a-item .right p {
color: #8f8f8f;
font-size: .9375rem
}
}
@media (min-width: 980px) {
.idx-a-item .right {
padding: 0 0 0 0
}
}
@media (min-width: 1780px) {
.idx-a-item .right {
padding: 40px 0 0 0
}
.idx-a-item .right p {
font-size: 1rem
}
}
@media (min-width: 1300px) {
.idx-a-prev {
left: 5% !important
}
}
@media (min-width: 1780px) {
.idx-a-prev {
width: 80px !important;
height: 80px !important
}
}
@media (min-width: 1300px) {
.idx-a-next {
right: 5% !important
}
}
@media (min-width: 1780px) {
.idx-a-next {
width: 80px !important;
height: 80px !important
}
}
.application-slide-wrap {
padding: 35px;
position: relative;
transition: all .3s ease
}
.application-slide-wrap.switch {
opacity: 0
}
@media (min-width: 740px) {
.application-slide-wrap {
padding: 0 0 50px 10%
}
}
.application-slide-wrap .swiper-container {
padding-bottom: 0;
z-index: 3
}
@media (min-width: 740px) {
.application-slide-wrap .swiper-container {
padding-bottom: 0
}
}
.application-slide-wrap [class^="swiper-button-"] {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #0f56a1;
top: 18%
}
.application-slide-wrap [class^="swiper-button-"]:after {
content: "";
display: block;
width: 24px;
height: 24px;
content: "";
display: inline-block;
vertical-align: middle;
background-image: url("../index_files/iconset.svg");
background-size: auto 100%;
background-position: 4.08% 0
}
.application-slide-wrap .swiper-button-prev {
left: 35px;
transform: translateX(-50%) !important
}
.application-slide-wrap .swiper-button-next {
right: 35px;
transform: translateX(50%) !important
}
.btn-scrolldown {
display: block;
position: absolute;
color: #2c2c2c;
font-size: .9375em;
display: flex;
align-items: center;
left: 2%;
bottom: 0;
z-index: 9;
cursor: pointer
}
.btn-scrolldown:before {
content: "";
display: block;
width: 40px;
height: 2px;
background-color: #2c2c2c
}
@media (min-width: 0) and (max-width: 739px) and (orientation: landscape) {
.btn-scrolldown {
left: auto;
right: 8%
}
.btn-scrolldown span {
display: none
}
}
@media (min-width: 1300px) {
.btn-scrolldown {
font-size: 1rem;
left: 3%
}
}
.btn-scrolldown span {
margin-left: 20px
}
@media (min-width: 0) and (max-width: 739px) {
.btn-scrolldown span {
font-size: 0
}
}
.btn-scrolldown:hover .scrolldown {
transform: scale(1.25)
}
.idx-news {
background-color: #f6f6f6;
position: relative;
overflow: hidden
}
@media (min-width: 740px) {
.idx-news:before {
content: "SUCCESS";
color: #efefef;
font-weight: bold;
font-size: 14vw;
position: absolute;
line-height: 0.8em;
transform: rotate(90deg) translate(92%, -40%);
line-height: 1em;
right: 13%;
top: 0;
opacity: 0;
transform-origin: right top;
transition: all .7s ease
}
}
.idx-news .title {
font-weight: bold;
text-align: center;
display: block;
font-size: 1.625em;
color: #2c2c2c
}
@media (min-width: 0) and (max-width: 739px) {
.idx-news .title {
margin-bottom: 20px;
text-align: left
}
}
@media (min-width: 740px) {
.idx-news .title {
font-size: 2.5em
}
}
@media (min-width: 1300px) {
.idx-news .title {
font-size: 2.875em
}
}
@media (min-width: 1780px) {
.idx-news .title {
font-size: 3.125em
}
}
.idx-news .title:before {
content: "";
display: block
}
@media (min-width: 0) and (max-width: 739px) {
.idx-news .title:before {
width: 100%;
height: 1px;
margin: 0 auto;
border-top: 1px solid #d4d4d4;
margin-bottom: 30px
}
}
@media (min-width: 740px) {
.idx-news .title:before {
width: 1px;
height: 80px;
margin: 0 auto;
border-left: 1px solid #000
}
}
@media (min-width: 740px) {
.idx-news-item-wrap {
width: 80%;
max-width: 1170px;
margin: 0 auto
}
}
.idx-news-item {
display: block;
position: relative
}
@media (min-width: 1100px) {
.idx-news-item {
transform: translateX(-50px);
transition: all 0.7s cubic-bezier(0.215, 0.61, 0.355, 1);
opacity: 0
}
.idx-news-item:nth-of-type(1) {
transition-delay: .1s
}
.idx-news-item:nth-of-type(2) {
transition-delay: .25s
}
.idx-news-item:nth-of-type(3) {
transition-delay: .4s
}
.idx-news-item:before {
content: "";
display: block;
height: 3px;
width: 75%;
background-color: #0f56a1;
position: absolute;
bottom: 0;
right: 0;
transform: scaleY(0);
transform-origin: right bottom;
transition: all .3s ease
}
.idx-news-item:hover:before {
transform: scaleY(1)
}
}
.idx-news-item ul {
display: block;
padding: 10px 0
}
@media (min-width: 980px) {
.idx-news-item ul {
display: flex;
align-items: center;
border-bottom: 1px solid #d4d4d4;
padding-top: 20px;
padding-bottom: 20px
}
}
@media (min-width: 1300px) {
.idx-news-item ul {
padding-top: 30px;
padding-bottom: 30px
}
}
@media (min-width: 1780px) {
.idx-news-item ul {
padding-top: 35px;
padding-bottom: 35px
}
}
.idx-news-item li {
display: block;
color: #2c2c2c
}
.idx-news-item li.tag {
color: #7c7c7c
}
.idx-news-item li:nth-of-type(1) {
font-weight: bold
}
@media (min-width: 0) and (max-width: 739px) {
.idx-news-item li {
font-size: .875rem
}
.idx-news-item li:nth-of-type(2) {
padding-bottom: 6px;
border-bottom: 1px solid #d4d4d4;
margin-bottom: 10px
}
.idx-news-item li.tag {
font-size: .75rem
}
}
@media (min-width: 740px) and (max-width: 979px) {
.idx-news-item li {
font-size: 1rem
}
.idx-news-item li:nth-of-type(2) {
padding-bottom: 10px;
border-bottom: 1px solid #d4d4d4
}
.idx-news-item li.tag {
font-size: .875rem
}
}
@media (min-width: 980px) {
.idx-news-item li {
line-height: 1.25em
}
.idx-news-item li.fz-C {
margin-bottom: 0 !important
}
.idx-news-item li:nth-of-type(1) {
width: 25%;
font-size: 1.25em
}
.idx-news-item li:nth-of-type(2) {
width: 55%;
flex: auto;
padding-right: 50px
}
.idx-news-item li:nth-of-type(3) {
width: 20%;
text-align: right
}
}
@media (min-width: 1780px) {
.idx-news-item li:nth-of-type(1) {
font-size: 1.5em
}
}
.idx-icon .page-idx-icon {
position: static;
margin-top: 10px
}
.idx-icon .page-idx-icon span {
display: inline-flex
}
@media (min-width: 980px) {
.idx-icon .page-idx-icon {
display: none
}
}
.idx-icon .idx-icon-slide {
padding-bottom: 20px
}
@media (min-width: 740px) {
.idx-icon {
width: 80%;
max-width: 1170px;
margin: 80px auto 0
}
}
@media (min-width: 1100px) {
.idx-icon {
transform: translateX(-60px);
transition: all 0.7s cubic-bezier(0.215, 0.61, 0.355, 1);
opacity: 0;
transition-delay: 0.5s
}
}
.idx-icon .swiper-slide {
display: flex;
align-items: center;
justify-content: center
}
.idx-icon img {
display: block;
width: 100%;
margin: 0 auto;
height: auto;
}
@media (min-width: 0) and (max-width: 739px) {
.idx-icon img {
width: 70%;
margin: 0 auto
}
}
#wafter {
position: absolute;
width: 100%;
height: 500px;
overflow: hidden;
background-color: #f6f6f6;
left: 0;
position: absolute;
z-index: 1
}
@media (min-width: 1100px) {
.loaded.hero-banner:before {
margin-right: 0;
right: 0;
bottom: 0;
left: 100%
}
.loaded.hero-banner:after {
margin-right: 0;
right: 0;
bottom: 0;
left: 100%
}
.loaded.hero-banner .swiper-slide-active {
background-color: #fff;
opacity: 1;
visibility: visible;
transition: opacity 0.2s, visibility 0s;
transition-delay: 0.1s;
pointer-events: auto
}
.loaded.hero-banner .swiper-slide-active .title {
opacity: 1;
transform: translateX(0);
transition: transform .8s ease .1s, opacity .6s ease .1s
}
.loaded.hero-banner .swiper-slide-active .subtitle {
opacity: 1;
transform: translateX(0);
transition: transform .8s ease .25s, opacity .6s ease .25s
}
.loaded.hero-banner .swiper-slide-active .desc {
opacity: 1;
transform: translateX(0);
transition: transform .8s ease .4s, opacity .6s ease .4s
}
.loaded.hero-banner .swiper-slide-active .link {
opacity: 1;
transform: translateX(0);
transition: transform .8s ease .6s, opacity .6s ease .6s
}
.loaded.hero-banner .swiper-slide-active .hero-img-holder {
transition: transform .9s ease 0s, opacity .9s ease 0s;
opacity: 1;
transform: translateX(0)
}
.loaded.hero-banner .swiper-slide-active .next:before {
margin-right: 0;
right: 0;
bottom: 0;
left: 100%
}
.loaded.hero-banner .swiper-slide-active .bg {
z-index: 10
}
.loaded.hero-banner .swiper-slide-active:before {
opacity: 1;
transform: translateX(0);
transition: transform .8s ease .2s, opacity .6s ease .2s
}
}
@media (min-width: 1100px) and (min-width: 980px) {
.loaded.hero-banner .swiper-slide-active:before {
transform: translateX(-30%)
}
}
@media (min-width: 1100px) and (min-width: 1300px) {
.loaded.hero-banner .swiper-slide-active:before {
transform: translateX(-25%)
}
}
@media (min-width: 1100px) and (min-width: 1780px) {
.loaded.hero-banner .swiper-slide-active:before {
transform: translateX(-20%)
}
}
@media (min-width: 1100px) {
.loaded .num-intro .text {
transform: translateX(0);
opacity: 1
}
.loaded .idx-num-item {
transform: translateX(0);
opacity: 1
}
.loaded.idx-news:before {
transform: rotate(90deg) translate(92%, -15%);
opacity: 1
}
.loaded .idx-news-item {
transform: translateX(0);
opacity: 1
}
.loaded .idx-icon {
transform: translateX(0);
opacity: 1
}
}
.normal-banner {
margin-bottom: 100px
}
.normal-banner.mgb-0 {
margin-bottom: 50px
}
@media (min-width: 980px) {
.normal-banner {
display: flex;
margin-bottom: 40px;
margin-top: 100px;
}
.normal-banner.mgb-0 {
margin-bottom: 0
}
}
@media (min-width: 1300px) {
.normal-banner {
margin-bottom: 60px;
margin-top: 130px;
}
}
@media (min-width: 1780px) {
.normal-banner {
margin-bottom: 90px;
margin-top: 130px;
}
}
.normal-banner .text {
background-color: #0f56a1;
display: flex;
align-items: center;
justify-content: flex-start;
color: #2c2c2c
}
@media (min-width: 0) and (max-width: 575px) {
.normal-banner .text {
max-width: 85%
}
}
.normal-banner .text:before {
content: attr(data-text);
display: block;
font-size: 6em;
color: #dd0113;
font-weight: bold;
z-index: 1;
line-height: 1em;
left: 0;
margin-left: -20%
}
@media (min-width: 0) and (max-width: 979px) {
.normal-banner .text {
position: absolute;
bottom: 0;
left: 0;
transform: translateY(60px);
z-index: 2;
padding: 0 20px
}
}
@media (min-width: 980px) {
.normal-banner .text {
flex: auto;
width: 30%;
position: relative;
overflow: hidden
}
.normal-banner .text:before {
font-size: 15vw;
position: absolute;
top: -0.14em;
left: -18%;
margin-left: 0;
line-height: 0.85em
}
}
@media (min-width: 1300px) {
.normal-banner .text:before {
font-size: 16vw
}
}
.normal-banner .text-content {
padding-left: 10px
}
@media (min-width: 980px) {
.normal-banner .text-content {
margin: 12vw 0 0 4vw;
position: absolute;
left: 0;
top: 0;
padding: 0
}
}
@media (min-width: 0) and (max-width: 979px) {
.normal-banner .space, .normal-banner .gallery {
z-index: 1
}
.normal-banner .space .swiper-slide, .normal-banner .gallery .swiper-slide {
background-position: right center;
background-repeat: no-repeat;
background-size: cover
}
}
@media (min-width: 980px) {
.normal-banner .space, .normal-banner .gallery {
flex: auto;
width: 70%
}
}
.normal-banner .deco-en {
font-size: 1.5em;
font-weight: bold;
line-height: 1.25em
}
@media (min-width: 980px) {
.normal-banner .deco-en {
font-size: 2em;
color: #fff;
}
}
@media (min-width: 1780px) {
.normal-banner .deco-en {
font-size: 2.8125em
}
}
.normal-banner .title {
font-size: .9375rem;
color: #ffffff;
font-weight: bold
}
@media (min-width: 740px) {
.normal-banner .title {
font-size: 1rem
}
}
@media (min-width: 1100px) {
.normal-banner .title {
font-size: 1.25rem
}
}
@media (min-width: 1300px) {
.normal-banner .title {
font-size: 1.375rem
}
}
@media (min-width: 1780px) {
.normal-banner .title {
font-size: 1.5rem
}
}
.normal-banner .page-banner {
width: 40px;
left: auto;
bottom: auto;
right: 0;
top: 50%;
text-align: center;
transform: translateY(-50%)
}
@media (min-width: 740px) {
.normal-banner .page-banner {
width: 50px;
right: 20px
}
}
.page-about {
background-color: #f6f6f6
}
.about .section {
padding-bottom: 40px;
margin-bottom: 40px
}
@media (min-width: 0) and (max-width: 979px) {
.about .section:last-of-type {
border-bottom: none
}
}
@media (min-width: 1300px) {
.about .section {
padding-bottom: 60px;
margin-bottom: 60px
}
}
.about .section>.fz-C {
border-bottom: 1px solid #d4d4d4;
padding-bottom: .75em
}
@media (min-width: 1300px) {
.about .section>.fz-C {
margin-bottom: 40px
}
}
@media (min-width: 1780px) {
.about .section>.fz-C {
margin-bottom: 65px
}
}
@media (min-width: 740px) {
.about .section .text.short {
width: 60%;
padding-right: 50px
}
}
@media (min-width: 1780px) {
.about .section .text.short {
padding-right: 100px
}
}
.about .section p {
color: #6f6f6f
}
@media (min-width: 0) and (max-width: 739px) {
.about .swiper-button-next {
justify-content: flex-end
}
}
@media (min-width: 0) and (max-width: 739px) {
.about .swiper-button-prev {
justify-content: flex-start
}
}
.edit-row {
padding-top: 10px
}
@media (min-width: 740px) {
.edit-row {
padding-top: 80px
}
}
@media (min-width: 1780px) {
.edit-row {
padding-top: 140px
}
}
.edit-row .desc {
color: #6f6f6f;
font-weight: normal;
font-size: .9375rem
}
@media (min-width: 1100px) {
.edit-row .desc.half {
max-width: 60%
}
}
@media (min-width: 1300px) {
.edit-row .desc {
font-size: 1rem
}
.edit-row .desc.half {
max-width: 50%
}
}
@media (min-width: 0) and (max-width: 979px) {
.edit-row .left-area {
border-bottom: none !important;
padding-bottom: 0.5em;
margin-bottom: 0.75em
}
}
@media (min-width: 980px) {
.edit-row .left-area {
text-align: left
}
}
.about-first .edit-row {
padding-top: 10px
}
@media (min-width: 740px) {
.about-first .edit-row {
padding-top: 0
}
}
@media (min-width: 1780px) {
.about-first .edit-row {
padding-top: 0
}
}
.heart-item {
padding-bottom: 40px;
position: relative
}
@media (min-width: 740px) {
.heart-item .link {
position: absolute;
bottom: 0
}
}
@media (min-width: 0) and (max-width: 739px) {
.about .switch-slide {
border-bottom: none;
margin-bottom: 25px
}
}
.about .switch-slide .swiper-slide {
width: auto
}
.about .switch-slide .swiper-slide a, .about .switch-slide .swiper-slide .switch-item {
margin-left: 25px;
cursor: pointer
}
@media (min-width: 0) and (max-width: 739px) {
.about .switch-slide .swiper-slide a, .about .switch-slide .swiper-slide .switch-item {
margin: 0;
text-align: center;
width: 100%;
font-size: 1.125rem;
line-height: 55px;
height: 55px;
display: inline-block;
vertical-align: top
}
.about .switch-slide .swiper-slide a span, .about .switch-slide .swiper-slide .switch-item span {
line-height: 1.25em;
height: 55px;
display: inline-block;
vertical-align: top
}
}
@media (min-width: 740px) {
.about .switch-slide .swiper-slide a, .about .switch-slide .swiper-slide .switch-item {
margin-left: 35px
}
}
@media (min-width: 1300px) {
.about .switch-slide .swiper-slide a, .about .switch-slide .swiper-slide .switch-item {
margin-left: 40px
}
}
@media (min-width: 1780px) {
.about .switch-slide .swiper-slide a, .about .switch-slide .swiper-slide .switch-item {
margin-left: 50px
}
}
.about .switch-slide .swiper-slide a:last-of-type:before, .about .switch-slide .swiper-slide .switch-item:last-of-type:before {
display: block
}
.about .switch-slide .swiper-slide a:before, .about .switch-slide .swiper-slide .switch-item:before {
content: "" !important
}
.about .switch-slide .swiper-slide:first-of-type a, .about .switch-slide .swiper-slide:first-of-type .switch-item {
margin-left: 0
}
.about .switch-slide .swiper-slide:last-of-type a:before, .about .switch-slide .swiper-slide:last-of-type .switch-item:before {
display: none
}
.about .switch-slide .swiper-slide.active a:after, .about .switch-slide .swiper-slide.active .switch-item:after {
transform: scaleX(1)
}
@media (min-width: 0) and (max-width: 739px) {
.core {
padding-bottom: 0 !important;
margin-bottom: 0 !important
}
}
@media (min-width: 740px) {
.core .core-prev {
width: 60px;
height: 60px;
left: auto;
right: 40px;
top: 11px;
background-color: #f6f6f6;
position: absolute !important
}
.core .core-next {
width: 60px;
height: 60px;
left: auto;
right: -20px;
top: 11px;
background-color: #f6f6f6;
position: relative !important
}
.core .core-next:before {
content: "";
display: block;
width: 1px;
height: 50%;
position: absolute;
left: 0;
top: 25%;
border-left: 1px solid #d4d4d4
}
}
@media (min-width: 1300px) {
.core .core-prev {
width: 70px;
height: 70px;
right: 50px
}
.core .core-next {
width: 70px;
height: 70px
}
}
@media (min-width: 0) and (max-width: 739px) {
.core-content-slide .arrows {
display: none
}
}
@media (min-width: 740px) {
.core-content-slide .arrows {
position: absolute;
right: 0;
top: 0;
transform: translateY(0);
bottom: auto;
z-index: 80
}
}
.core-content-slide .content {
width: 100%;
margin: 0 0 0;
position: relative;
height: 100%;
padding-bottom: 25px
}
@media (min-width: 740px) {
.core-content-slide .content {
max-width: 70%
}
}
@media (min-width: 980px) {
.core-content-slide .content {
max-width: 60%
}
}
@media (min-width: 1780px) {
.core-content-slide .content {
max-width: 50%
}
}
@media (min-width: 740px) {
.core-content-slide .page-core {
position: absolute;
right: 0;
top: 40px;
left: auto;
bottom: auto;
width: auto
}
}
@media (min-width: 1100px) {
.core-content-slide .page-core {
top: 50px
}
}
@media (min-width: 1300px) {
.core-content-slide .page-core {
top: 60px
}
}
@media (min-width: 1780px) {
.core-content-slide .page-core {
top: 100px
}
}
.core-slide {
border-bottom: 2px solid #2c2c2c;
padding-bottom: 0;
margin-bottom: 50px
}
.core-slide .core-content-prev {
left: 0;
top: 50%;
transform: translateY(-50%)
}
@media (min-width: 740px) {
.core-slide .core-content-prev {
display: none
}
}
.core-slide .core-content-next {
right: 0;
top: 50%;
transform: translateY(-50%)
}
@media (min-width: 740px) {
.core-slide .core-content-next {
display: none
}
}
@media (min-width: 0) and (max-width: 739px) {
.core-slide {
border-bottom: none;
margin-bottom: 0
}
}
.core-slide .content {
text-align: center;
width: 100%;
margin: 0;
position: relative;
height: 100%
}
@media (min-width: 1300px) {
.core-slide .content {
max-width: 70%
}
}
.core-slide .content:after {
content: "";
position: absolute;
bottom: 0;
right: auto;
left: 0;
width: 100%;
background-color: #0f56a1;
top: auto;
bottom: 0;
transform: scaleX(0);
border-radius: 0;
transition: all .35s ease
}
@media (min-width: 740px) {
.core-slide .content:after {
height: 5px
}
}
@media (min-width: 1300px) {
.core-slide .content:after {
height: 7px
}
}
@media (min-width: 0) and (max-width: 739px) {
.core-slide .img-100 img {
max-width: 72px;
margin: 0 auto
}
}
.core-slide .swiper-slide {
display: flex;
cursor: pointer
}
.core-slide .swiper-slide img {
transition: all .35s ease;
transform: scale(0.6);
opacity: 0.4;
filter: grayscale(100%);
width: 88%;
margin: 0 auto
}
.core-slide .swiper-slide:hover .content:after, .core-slide .swiper-slide:active .content:after {
transform: scaleX(1)
}
.core-slide .swiper-slide:hover img, .core-slide .swiper-slide:active img {
transform: scale(1);
filter: grayscale(0);
opacity: 1
}
.core-slide .swiper-slide:hover .fz-C, .core-slide .swiper-slide:active .fz-C {
color: #2c2c2c
}
.core-slide .fz-C {
line-height: 1.5em;
margin-top: 0.75em;
color: #d6d3d3;
transition: all .35s ease
}
@media (min-width: 0) and (max-width: 739px) {
.core-slide .fz-C {
display: inline-block;
border-bottom: 6px solid #0f56a1
}
}
.core-slide .swiper-wrapper {
display: flex;
align-items: stretch
}
.core-slide .swiper-wrapper .swiper-slide {
height: auto
}
.core-slide .swiper-slide-thumb-active .content:after {
transform: scaleX(1)
}
.core-slide .swiper-slide-thumb-active .fz-C {
color: #2c2c2c
}
.core-slide .swiper-slide-thumb-active img {
transform: scale(1);
filter: grayscale(0);
opacity: 1
}
.first-place {
padding-top: 1em;
border-top: 1px solid #d4d4d4 !important
}
@media (min-width: 0) and (max-width: 739px) {
.first-place {
margin-bottom: 0 !important;
padding-bottom: 20px !important
}
}
@media (min-width: 740px) {
.first-place {
padding-top: 40px
}
}
.first-place .fz-C {
border: none !important;
margin-bottom: 1em !important
}
@media (min-width: 0) and (max-width: 979px) {
.first-place .banner-slide {
padding-bottom: 55px
}
.first-place .banner-slide .page-banner {
justify-content: center;
display: flex
}
}
@media (min-width: 980px) {
.first-place .banner-slide {
padding-bottom: 0
}
.first-place .banner-slide .page-banner {
position: absolute;
right: 0;
left: auto;
width: 50px;
transform: translateY(-50%);
top: 50%;
bottom: auto
}
}
.arrows-wrap {
position: relative;
z-index: 9;
text-align: right
}
@media (min-width: 740px) {
.arrows-wrap {
max-width: 50%;
float: right
}
}
.edit-block {
position: relative
}
.edit-block img {
line-height: 0;
margin: 0;
display: block;
height: auto;
width: 100%
}
@media (min-width: 980px) {
.edit-block img {
width: 125%
}
}
.edit-block .text {
background-color: #fff
}
@media (min-width: 740px) {
.edit-block .text {
position: absolute;
padding: 30px 50px 0 0;
bottom: 0;
left: 0
}
}
@media (min-width: 1780px) {
.edit-block .text {
padding: 60px 100px 0 0
}
}
.year-slide {
padding-bottom: 10px
}
@media (min-width: 0) and (max-width: 739px) {
.year-slide {
padding-bottom: 25px
}
}
@media (min-width: 740px) {
.year-slide {
padding-right: 120px
}
}
.year-slide:after {
content: "";
display: block;
width: 100%;
height: 1px;
border-bottom: 1px solid #d6d3d3;
position: absolute
}
@media (min-width: 0) and (max-width: 739px) {
.year-slide:after {
display: none
}
}
.year-slide .swiper-wrapper {
display: flex;
justify-content: space-between
}
.year-slide .swiper-slide {
height: 55px;
text-align: center;
padding: 0;
position: relative;
cursor: pointer;
font-weight: bold;
transition: all .35s ease
}
@media (min-width: 740px) {
.year-slide .swiper-slide {
height: 60px
}
}
@media (min-width: 1300px) {
.year-slide .swiper-slide {
height: 70px
}
}
.year-slide .swiper-slide .fz-B {
line-height: 35px;
margin-bottom: 0;
color: #d6d3d3;
transition: all .3s ease
}
@media (min-width: 740px) {
.year-slide .swiper-slide .fz-B {
line-height: 40px
}
}
@media (min-width: 1300px) {
.year-slide .swiper-slide .fz-B {
line-height: 50px
}
}
.year-slide .swiper-slide:after {
content: "";
left: 50%;
display: block;
width: 10px;
height: 10px;
background-color: #ccc;
position: absolute;
bottom: 0;
border-radius: 50%;
transition: all .3s ease;
transform: translateY(50%)
}
.year-slide .swiper-slide:hover {
color: #0f56a1
}
.year-slide .swiper-slide:hover:after {
background-color: #0f56a1
}
@media (min-width: 0) and (max-width: 575px) {
.year-slide .swiper-slide .fz-B {
font-size: 2.125rem;
color: #0f56a1
}
.year-slide .swiper-slide:after {
background-color: #0f56a1;
width: 2.25em;
border-radius: 0;
left: 50%;
height: 6px;
transform: translate(-50%, 0)
}
}
.year-slide .swiper-slide.swiper-slide-thumb-active {
font-size: 2.125rem
}
@media (min-width: 740px) {
.year-slide .swiper-slide.swiper-slide-thumb-active {
font-size: 2.75rem
}
}
@media (min-width: 1100px) {
.year-slide .swiper-slide.swiper-slide-thumb-active {
font-size: 3rem
}
}
@media (min-width: 1300px) {
.year-slide .swiper-slide.swiper-slide-thumb-active {
font-size: 3.5rem
}
}
@media (min-width: 1780px) {
.year-slide .swiper-slide.swiper-slide-thumb-active {
font-size: 3.75rem
}
}
.year-slide .swiper-slide.swiper-slide-thumb-active .fz-B {
font-size: 2.125rem;
color: #0f56a1
}
@media (min-width: 740px) {
.year-slide .swiper-slide.swiper-slide-thumb-active .fz-B {
font-size: 2.75rem
}
}
@media (min-width: 1100px) {
.year-slide .swiper-slide.swiper-slide-thumb-active .fz-B {
font-size: 3rem
}
}
@media (min-width: 1300px) {
.year-slide .swiper-slide.swiper-slide-thumb-active .fz-B {
font-size: 3.5rem
}
}
@media (min-width: 1780px) {
.year-slide .swiper-slide.swiper-slide-thumb-active .fz-B {
font-size: 3.75rem
}
}
.year-slide .swiper-slide.swiper-slide-thumb-active:after {
background-color: #0f56a1;
width: 2.25em;
border-radius: 0;
left: 50%;
height: 6px;
transform: translate(-50%, 0)
}
.year-slide .swiper-button-prev {
position: absolute;
left: 0
}
.year-slide .swiper-button-next {
position: absolute;
right: 0
}
@media (min-width: 0) and (max-width: 739px) {
.year-slide .year-content-next, .year-slide .year-content-prev {
width: 55px;
height: 55px;
top: 11px
}
}
@media (min-width: 740px) {
.year-slide .year-content-prev {
width: 60px;
height: 60px;
left: auto;
right: 40px;
top: 11px;
background-color: #f6f6f6
}
.year-slide .year-content-next {
width: 60px;
height: 60px;
left: auto;
right: -20px;
top: 11px;
background-color: #f6f6f6
}
.year-slide .year-content-next:before {
content: "";
display: block;
width: 1px;
height: 50%;
position: absolute;
left: 0;
top: 25%;
border-left: 1px solid #d4d4d4
}
}
@media (min-width: 1300px) {
.year-slide .year-content-prev {
width: 70px;
height: 70px;
right: 50px
}
.year-slide .year-content-next {
width: 70px;
height: 70px
}
}
.about-arrow {
width: 55px;
height: 55px
}
@media (min-width: 740px) {
.about-arrow {
width: 60px;
height: 60px
}
}
@media (min-width: 1300px) {
.about-arrow {
height: 70px;
right: 70px
}
}
@media (min-width: 0) and (max-width: 739px) {
.csr-tab-slide .swiper-slide a, .csr-tab-slide .swiper-slide .switch-item, .video-slide .swiper-slide a, .video-slide .swiper-slide .switch-item {
padding: 0 55px
}
.csr-tab-slide .swiper-slide a:before, .csr-tab-slide .swiper-slide a:after, .csr-tab-slide .swiper-slide .switch-item:before, .csr-tab-slide .swiper-slide .switch-item:after, .video-slide .swiper-slide a:before, .video-slide .swiper-slide a:after, .video-slide .swiper-slide .switch-item:before, .video-slide .swiper-slide .switch-item:after {
display: none !important
}
.csr-tab-slide .swiper-slide a span, .csr-tab-slide .swiper-slide .switch-item span, .video-slide .swiper-slide a span, .video-slide .swiper-slide .switch-item span {
position: relative
}
.csr-tab-slide .swiper-slide a span:after, .csr-tab-slide .swiper-slide .switch-item span:after, .video-slide .swiper-slide a span:after, .video-slide .swiper-slide .switch-item span:after {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background-color: #0f56a1;
bottom: 0;
transform: scaleX(1);
border-radius: 0;
transition: all .35s ease;
height: 6px
}
}
.csr-tab-slide .csr-content-prev, .csr-tab-slide .video-prev, .video-slide .csr-content-prev, .video-slide .video-prev {
left: 0;
top: 11px
}
@media (min-width: 740px) {
.csr-tab-slide .csr-content-prev, .csr-tab-slide .video-prev, .video-slide .csr-content-prev, .video-slide .video-prev {
display: none
}
}
.csr-tab-slide .csr-content-next, .csr-tab-slide .video-next, .video-slide .csr-content-next, .video-slide .video-next {
right: 0;
top: 11px
}
@media (min-width: 740px) {
.csr-tab-slide .csr-content-next, .csr-tab-slide .video-next, .video-slide .csr-content-next, .video-slide .video-next {
display: none
}
}
.year-content-slide p {
color: #6f6f6f
}
.year-content-slide .text {
color: #6f6f6f
}
@media (min-width: 0) and (max-width: 739px) {
.year-content-slide .text {
padding-top: 25px
}
}
@media (min-width: 740px) {
.year-content-slide {
padding-top: 40px
}
.year-content-slide .text {
padding-right: 120px
}
}
@media (min-width: 1300px) {
.year-content-slide {
padding-top: 60px
}
.year-content-slide .text {
padding-right: 140px
}
}
.heart .fz-C {
margin-bottom: 0;
line-height: 1.5em;
margin-top: 30px
}
@media (min-width: 1300px) {
.heart .fz-C {
padding-top: 40px
}
}
.heart>.fz-C {
margin-bottom: 0;
margin-top: 0
}
@media (min-width: 0) and (max-width: 739px) {
.heart>.fz-C {
border-bottom: 1px solid #d4d4d4;
margin-bottom: 30px
}
}
@media (min-width: 1300px) {
.heart>.fz-C {
padding-top: 0
}
}
.heart h6 {
font-size: .875rem;
line-height: 1.5em;
padding-bottom: 30px;
display: block
}
@media (min-width: 1300px) {
.heart h6 {
font-size: 1rem;
padding-bottom: 40px
}
}
.crm .fz-C {
padding-top: 1em;
border: none !important;
border-top: 1px solid #d4d4d4 !important;
margin-bottom: 0.5em !important
}
@media (min-width: 740px) {
.dept-slide {
overflow: visible
}
}
.btn-next-dept {
position: relative !important;
right: auto
}
.btn-next-dept:before {
content: "";
display: block;
width: 1px;
height: 50%;
position: absolute;
left: 0;
top: 25%;
border-left: 1px solid #d4d4d4
}
.management {
position: relative
}
@media (min-width: 0) and (max-width: 739px) {
.management {
padding-bottom: 10px !important;
margin-bottom: 0 !important
}
}
@media (min-width: 980px) {
.management:before {
content: "";
display: block;
height: 100%;
position: absolute;
background-color: #f6f6f6;
width: 35vw;
transform: translateX(-100%);
z-index: 10
}
}
.feature-slide .arrows, .dept-slide .arrows {
position: absolute;
right: 0;
bottom: 0
}
@media (min-width: 0) and (max-width: 739px) {
.feature-slide .arrows, .dept-slide .arrows {
position: static !important;
margin: 20px auto !important;
text-align: center;
justify-content: center
}
}
@media (min-width: 740px) {
.dept-slide {
min-height: 64vw
}
}
@media (min-width: 980px) {
.dept-slide {
min-height: 50vw
}
}
@media (min-width: 1100px) {
.dept-slide {
min-height: 38vw
}
}
@media (min-width: 1300px) {
.dept-slide {
min-height: 35vw
}
}
.dept-item {
background-color: #2c2c2c
}
@media (min-width: 740px) {
.dept-item {
width: 42vw;
min-width: 45vw
}
}
@media (min-width: 980px) {
.dept-item {
width: 35vw;
min-width: 35vw
}
}
@media (min-width: 1100px) {
.dept-item {
width: 26vw;
min-width: 26vw
}
}
@media (min-width: 1300px) {
.dept-item {
width: 24vw;
min-width: 24vw
}
}
.dept-item .text {
padding: 40px 35px;
position: relative
}
.dept-item .text:after {
content: attr(data-num);
color: #efefef;
font-size: 3.5em;
font-weight: bold;
position: absolute;
right: 35px;
top: 0;
text-align: right;
line-height: 0.9em;
transform: translateY(-50%)
}
@media (min-width: 1300px) {
.dept-item .text:after {
right: 35px;
font-size: 3.75em
}
}
@media (min-width: 1780px) {
.dept-item .text:after {
right: 50px;
font-size: 4.375em
}
}
@media (min-width: 740px) {
.dept-item .text {
padding: 35px 35px 25px
}
}
@media (min-width: 1300px) {
.dept-item .text {
padding: 50px 35px 40px
}
}
@media (min-width: 1780px) {
.dept-item .text {
padding: 60px 50px 50px
}
}
.dept-item .fz-B {
color: #fff;
margin-bottom: 0
}
.dept-item .desc {
color: #fff;
border-top: 1px solid transparent;
padding-top: 0;
padding-bottom: 0;
max-height: 0;
overflow: hidden;
transition: all .45s ease
}
.dept-item:nth-of-type(2n+2) {
background-color: #0f56a1
}
.dept-item:nth-of-type(2n+2) .fz-B {
color: #2c2c2c
}
.dept-item:nth-of-type(2n+2) .desc {
color: #2c2c2c;
border-top: 1px solid transparent
}
.dept-item.swiper-slide-active:nth-of-type(2n+2) .desc {
border-color: #2c2c2c;
color: #2c2c2c
}
.dept-item.swiper-slide-active .fz-B {
margin-bottom: 0
}
@media (min-width: 740px) {
.dept-item.swiper-slide-active .fz-B {
padding-bottom: 25px
}
}
@media (min-width: 1300px) {
.dept-item.swiper-slide-active .fz-B {
padding-bottom: 40px
}
}
@media (min-width: 1780px) {
.dept-item.swiper-slide-active .fz-B {
padding-bottom: 50px
}
}
.dept-item.swiper-slide-active .desc {
padding-top: 1.25em;
max-height: 300px;
border-color: #fff;
color: #fff;
transition: all .5s ease-in
}
.arrows {
display: flex
}
.arrows .swiper-button-prev, .arrows .swiper-button-next {
position: static;
margin: 0;
display: flex;
justify-content: center;
align-items: center
}
@media (min-width: 1100px) {
.section {
transform: translateX(-60px);
opacity: 0;
transition: all 0.7s cubic-bezier(0.215, 0.61, 0.355, 1)
}
}
.section.loaded {
transform: translateX(0);
opacity: 1
}
.csr-content-slide .content {
color: #6f6f6f;
padding-bottom: 40px
}
@media (min-width: 980px) {
.csr-content-slide .content {
max-width: 60%
}
}
@media (min-width: 1780px) {
.csr-content-slide .content {
max-width: 50%
}
}
.csr-tab-slide .swiper-slide-thumb-active a:after, .csr-tab-slide .swiper-slide-thumb-active .switch-item:after {
transform: scaleX(1)
}
.csr-gallery {
position: relative
}
.csr-gallery .gallery-o-holder {
position: relative
}
@media (min-width: 0) and (max-width: 1099px) {
.csr-gallery .controller {
display: none
}
}
@media (min-width: 1100px) {
.csr-gallery .controller {
position: absolute;
right: 40px;
top: 55%;
z-index: 11;
transform: translateY(-50%)
}
.csr-gallery .controller .swiper-count span {
font-size: .9375rem
}
}
@media (min-width: 1300px) {
.csr-gallery .controller {
right: 80px
}
}
@media (min-width: 1780px) {
.csr-gallery .controller {
right: 120px
}
.csr-gallery .controller .swiper-count span {
font-size: 1rem
}
}
@media (min-width: 0) and (max-width: 1099px) {
.csr-gallery .text {
color: #666666;
font-size: .8125rem;
padding-top: 20px
}
}
@media (min-width: 740px) and (max-width: 1099px) {
.csr-gallery .text {
font-size: .875rem
}
}
@media (min-width: 1100px) {
.csr-gallery .text {
padding: 50px 30% 40px 40px;
position: absolute;
left: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(44, 44, 44, 0), rgba(44, 44, 44, 0.7));
color: #fff
}
}
@media (min-width: 1300px) {
.csr-gallery .text {
padding: 50px 40% 40px 40px
}
}
@media (min-width: 1300px) {
.csr-gallery .text {
padding: 60px 50% 50px 50px
}
}
.csr-gallery .swiper-pagination {
display: block;
position: static
}
.csr-gallery .swiper-pagination span {
display: inline-flex
}
@media (min-width: 1100px) {
.csr-gallery .swiper-pagination {
display: none
}
}
@media (min-width: 0) and (max-width: 1099px) {
.csr-gallery-thumb-wrap .swiper-button-prev, .csr-gallery-thumb-wrap .swiper-button-next {
display: none
}
}
@media (min-width: 1100px) {
.csr-gallery-thumb-wrap {
padding-left: 50px;
padding-right: 50px;
position: relative
}
.csr-gallery-thumb-wrap .swiper-button-prev {
left: 0;
transform: translateY(-27%)
}
.csr-gallery-thumb-wrap .swiper-button-next {
right: 0;
transform: translateY(-27%)
}
}
@media (min-width: 1300px) {
.csr-gallery-thumb-wrap {
padding-left: 60px;
padding-right: 60px
}
}
@media (min-width: 1780px) {
.csr-gallery-thumb-wrap {
padding-left: 70px;
padding-right: 70px
}
}
.csr-gallery-thumb {
margin-top: 20px
}
@media (min-width: 0) and (max-width: 1099px) {
.csr-gallery-thumb {
display: none
}
}
.csr-gallery-thumb .gallery-thumb-holder {
position: relative
}
.csr-gallery-thumb .gallery-thumb-holder:before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
border: 6px solid transparent;
transition: all .35s ease
}
@media (min-width: 1100px) {
.csr-gallery-thumb .gallery-thumb-holder:before {
border-width: 8px
}
}
@media (min-width: 1300px) {
.csr-gallery-thumb .gallery-thumb-holder:before {
border-width: 10px
}
}
.csr-gallery-thumb .swiper-slide {
cursor: pointer
}
.csr-gallery-thumb .csr-active .gallery-thumb-holder:before, .csr-gallery-thumb .swiper-slide-thumb-active .gallery-thumb-holder:before {
border-color: #0f56a1
}
.prd-ov-wrap {
padding-top: 50px;
padding-bottom: 50px
}
@media (min-width: 576px) {
.prd-ov-wrap.row {
margin-left: -10px;
margin-right: -10px
}
.prd-ov-wrap.row [class^="col-"] {
padding-left: 10px;
padding-right: 10px
}
}
@media (min-width: 740px) {
.prd-ov-wrap {
padding-top: 50px;
padding-bottom: 60px
}
}
@media (min-width: 1300px) {
.prd-ov-wrap {
padding-left: 4vw;
padding-right: 4vw
}
}
.prd-ov-item {
margin-bottom: 50px
}
@media (min-width: 576px) {
.prd-ov-item {
position: relative
}
.prd-ov-item .link {
position: absolute;
bottom: 0
}
}
@media (min-width: 740px) {
.prd-ov-item {
margin-bottom: 60px
}
}
@media (min-width: 1300px) {
.prd-ov-item {
margin-bottom: 70px
}
}
@media (min-width: 1780px) {
.prd-ov-item {
margin-bottom: 100px
}
}
.prd-ov-item .fz-C {
margin-top: 1em
}
.prd-ov-item ul {
display: block;
margin-bottom: 20px
}
@media (min-width: 576px) {
.prd-ov-item ul {
max-width: 70%
}
}
@media (min-width: 740px) {
.prd-ov-item ul {
margin-bottom: 40px
}
}
@media (min-width: 1300px) {
.prd-ov-item ul {
margin-bottom: 55px
}
}
@media (min-width: 1780px) {
.prd-ov-item ul {
margin-bottom: 70px
}
}
.prd-ov-item li {
border-bottom: 1px solid #d6d3d3;
color: #6f6f6f;
position: relative;
display: block
}
.prd-ov-item li:before {
content: "";
display: block;
width: 6px;
height: 6px;
background-color: #919191;
transition: all .35s ease;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%) rotate(-45deg)
}
.prd-ov-item li:last-of-type {
border-bottom: none
}
.prd-ov-item li a {
display: block;
padding-top: 5px;
padding-bottom: 5px;
color: #6f6f6f;
transition: all .35s ease;
padding-left: 1.25em
}
@media (min-width: 1100px) {
.prd-ov-item li:hover a {
color: #000
}
.prd-ov-item li:hover:before {
background-color: #000
}
}
.bg-line {
background-color: #f6f6f6
}
.bg-line .header.release {
background-color: transparent
}
.bg-line .header.release .container-max {
border-bottom: 1px solid #d4d4d4
}
@media (min-width: 740px) {
.bg-line {
background: url("../index_files/bg-line-md.svg") repeat-y;
background-size: 100% auto
}
}
@media (min-width: 1780px) {
.bg-line {
background: url("../index_files/bg-line.svg") repeat-y;
background-size: 100% auto
}
}
.bg-gray {
background-color: #f6f6f6
}
.bg-gray .header.release {
background-color: transparent
}
.bg-gray .header.release .container-max {
border-bottom: 1px solid #d4d4d4
}
.prd-series-wrap {
padding-top: 50px;
padding-bottom: 50px
}
@media (min-width: 576px) {
.prd-series-wrap.row {
margin-left: -30px;
margin-right: -30px
}
.prd-series-wrap.row [class^="col-"] {
padding-left: 30px;
padding-right: 30px
}
}
@media (min-width: 740px) {
.prd-series-wrap {
padding-top: 60px;
padding-bottom: 60px
}
}
.prd-series-item, .news-item {
margin-bottom: 50px
}
.prd-series-item .item-inner, .news-item .item-inner {
transition: all .35s ease;
display: block
}
@media (min-width: 1100px) {
.prd-series-item .text, .news-item .text {
transition: all .35s ease;
width: 88%;
margin: 1em auto 0
}
}
@media (min-width: 1300px) {
.prd-series-item .text, .news-item .text {
width: 86%
}
}
@media (min-width: 1780px) {
.prd-series-item .text, .news-item .text {
width: 84%
}
}
.prd-series-item .fz-C, .news-item .fz-C {
display: block;
line-height: 1.5em;
height: 6em
}
.prd-series-item .img-holder, .news-item .img-holder {
margin-bottom: 20px
}
@media (min-width: 1100px) {
.prd-series-item .img-holder, .news-item .img-holder {
width: 88%;
margin: 0 auto;
padding-top: 20px
}
}
@media (min-width: 1300px) {
.prd-series-item .img-holder, .news-item .img-holder {
width: 86%
}
}
@media (min-width: 1780px) {
.prd-series-item .img-holder, .news-item .img-holder {
width: 84%
}
}
.prd-series-item .btn-area, .news-item .btn-area {
background-color: #0f56a1;
display: flex;
position: relative
}
.prd-series-item .btn-area:after, .news-item .btn-area:after {
content: "";
display: block;
width: 1px;
height: 1.375em;
border-left: 1px solid #2c2c2c;
position: absolute;
left: 50%;
top: 50%;
transform: translateY(-50%)
}
.prd-series-item .btn-area .btn, .news-item .btn-area .btn {
display: block;
width: 50%;
text-align: center;
padding: 10px 0;
font-weight: bold;
color: #2c2c2c
}
@media (min-width: 0) and (max-width: 739px) {
.prd-series-item .btn-area .btn, .news-item .btn-area .btn {
line-height: 35px
}
}
@media (min-width: 1100px) {
.prd-series-item .btn-area .btn, .news-item .btn-area .btn {
transition: all .35s ease
}
.prd-series-item .btn-area .btn:hover, .news-item .btn-area .btn:hover {
background-color: #ffc819
}
}
@media (min-width: 1300px) {
.prd-series-item .btn-area .btn, .news-item .btn-area .btn {
font-size: 1.125em
}
}
@media (min-width: 1780px) {
.prd-series-item .btn-area .btn, .news-item .btn-area .btn {
padding: 25px 0;
font-size: 1.25em
}
}
@media (min-width: 1100px) {
.prd-series-item .btn-area, .news-item .btn-area {
visibility: hidden;
opacity: 0;
transition: all .35s ease;
transform: translateY(10px)
}
}
@media (min-width: 1100px) {
.prd-series-item .item-inner:hover, .news-item .item-inner:hover {
box-shadow: 0px 10px 39px -6px rgba(0, 0, 0, 0.3);
background-color: #fff
}
.prd-series-item .item-inner:hover .btn-area, .news-item .item-inner:hover .btn-area {
visibility: visible;
opacity: 1;
transform: translateY(0)
}
}
@media (min-width: 0) and (max-width: 739px) {
.prd-series-item {
border-bottom: 1px solid #d4d4d4;
padding-bottom: 30px
}
}
.prd-detail-banner {
position: relative
}
.prd-detail-banner:before {
content: "";
display: block;
width: 100%;
height: 80px;
background-color: #fff;
position: absolute;
left: 0;
bottom: 0;
z-index: 1
}
@media (min-width: 980px) {
.prd-detail-banner:before {
height: 35%
}
}
.prd-detail-banner:after {
content: "";
display: block;
width: calc(100% - 70px);
margin: 0 auto 40px;
height: 40px;
border-bottom: 2px solid #2c2c2c;
position: relative;
z-index: 5
}
@media (min-width: 980px) {
.prd-detail-banner:after {
display: none
}
}
.prd-detail-banner .container {
position: relative;
z-index: 2;
display: flex
}
@media (min-width: 0) and (max-width: 979px) {
.prd-detail-banner .container {
flex-direction: column-reverse
}
}
@media (min-width: 980px) {
.prd-detail-banner .container {
padding: 5vw 4vw;
align-items: flex-start
}
}
.prd-detail-banner .text {
margin-top: 50px
}
@media (min-width: 0) and (max-width: 739px) {
.prd-detail-banner .text {
margin-top: 20px
}
}
@media (min-width: 576px) and (max-width: 979px) {
.prd-detail-banner .text {
text-align: center
}
}
@media (min-width: 980px) {
.prd-detail-banner .text {
width: 32%;
margin-top: 0
}
}
@media (min-width: 1300px) {
.prd-detail-banner .text {
width: 28%
}
}
@media (min-width: 1780px) {
.prd-detail-banner .text {
width: 22%
}
}
@media (min-width: 0) and (max-width: 979px) {
.prd-detail-banner .gallery {
padding-top: 40px
}
}
@media (min-width: 980px) {
.prd-detail-banner .gallery {
width: 68%
}
}
@media (min-width: 1300px) {
.prd-detail-banner .gallery {
width: 72%
}
}
@media (min-width: 1780px) {
.prd-detail-banner .gallery {
width: 78%
}
}
.prd-detail-banner a {
display: inline-block;
background-color: #0f56a1;
line-height: 64px
}
@media (min-width: 1780px) {
.prd-detail-banner a {
line-height: 90px
}
}
@media (min-width: 0) and (max-width: 739px) {
.prd-detail-banner .fz-A {
font-size: 1.125rem
}
}
@media (min-width: 980px) {
.prd-detail-edit .container {
padding-left: 4vw;
padding-right: 4vw
}
}
.prd-b-slide .swiper-slide {
background-size: contain !important
}
@media (min-width: 0) and (max-width: 979px) {
.prd-b-slide .controller {
display: none
}
}
@media (min-width: 980px) {
.prd-b-slide .controller {
position: absolute;
right: 0;
top: 0;
z-index: 20
}
.prd-b-slide .controller .swiper-count {
flex-direction: row
}
.prd-b-slide .controller span {
font-size: 1rem;
color: #2c2c2c;
font-weight: bold
}
.prd-b-slide .controller span.line {
border: none;
border-bottom: 1px solid #2c2c2c;
height: 2px;
width: 3em;
margin: 0 10px
}
.prd-b-slide .controller span.swiper-idx-sum {
opacity: 0.5
}
}
@media (min-width: 1780px) {
.prd-b-slide .controller span.line {
width: 75px;
margin: 0 20px
}
}
.page-prd {
position: static
}
.page-prd .swiper-pagination-bullet {
display: inline-flex
}
.application-category>div {
margin-bottom: 20px
}
@media (min-width: 980px) {
.application-category>div {
margin-bottom: 50px
}
}
@media (min-width: 0) and (max-width: 979px) {
.application-category .app-nav-dekstop {
display: none
}
}
.application-category .app-nav-mobile {
height: 40px;
border-bottom: 2px solid #2c2c2c
}
@media (min-width: 980px) {
.application-category .app-nav-mobile {
display: none
}
}
.application-category a {
display: block;
line-height: 2em;
border-bottom: 1px solid #d4d4d4;
padding-top: 8px;
padding-bottom: 8px;
color: #6f6f6f;
position: relative;
transition: all .3s ease
}
.application-category a:after {
content: "";
display: block;
height: 4px;
width: 100%;
transition: all .3s ease;
transform: scaleX(0);
position: absolute;
left: 0;
bottom: 0;
background-color: #0f56a1;
transform-origin: left bottom
}
.application-category a.active, .application-category a:hover {
border-color: transparent
}
.application-category a.active:after, .application-category a:hover:after {
transform: scaleX(1)
}
@media (min-width: 0) and (max-width: 979px) {
.application-category .fz-C {
margin-bottom: 0
}
}
@media (min-width: 0) and (max-width: 979px) {
.media-header {
display: none
}
}
@media (min-width: 980px) {
.media-header {
display: flex;
align-items: center
}
.media-header .fz-C {
margin-bottom: 0
}
.media-header strong {
color: #9a9a9a
}
.media-header strong:before {
content: "";
display: inline-block;
width: 1px;
height: 20px;
border-left: 1px solid #9a9a9a;
margin: 0 15px;
vertical-align: middle;
opacity: 0.5
}
}
.media-pool {
overflow: hidden;
padding-top: 50px;
padding-bottom: 50px
}
@media (min-width: 1100px) {
.media-pool {
margin-right: -12px;
margin-left: -12px
}
}
@media (min-width: 1300px) {
.media-pool {
margin-right: -18px;
margin-left: -18px;
padding-top: 80px;
padding-bottom: 80px
}
}
.media-item {
position: relative;
margin-bottom: 50px
}
.media-item .content {
position: relative;
overflow: hidden;
display: block;
width: 100%;
padding-bottom: 100%;
transition: all .35s ease;
border: 1px solid #efefef
}
.media-item .content:after {
content: "";
display: block;
width: 100%;
height: 100%;
background-color: transparent;
z-index: 1;
position: absolute;
left: 0;
top: 0
}
.media-item .content:before {
width: 60px;
height: 60px;
transform: translate(-50%, -40%);
position: absolute;
left: 50%;
top: 50%;
transition: all .3s ease;
visibility: hidden;
opacity: 0;
z-index: 2;
content: "";
display: inline-block;
vertical-align: middle;
background-image: url("../index_files/iconset.svg");
background-size: auto 100%;
background-position: 32.65% 0;
z-index: 50
}
@media (min-width: 0) and (max-width: 1099px) {
.media-item .content:before {
visibility: visible;
opacity: 1
}
}
@media (min-width: 1300px) {
.media-item .content:before {
width: 72px;
height: 72px
}
}
@media (min-width: 1780px) {
.media-item .content:before {
width: 80px;
height: 80px
}
}
.media-item .img-holder {
display: block;
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
background-size: cover;
background-position: center center;
transition: all .35s ease
}
@media (min-width: 1100px) {
.media-item .img-holder {
filter: grayscale(100%)
}
}
.media-item .hover {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
color: #2c2c2c;
transition: all .4s ease;
padding: 20px 25px;
display: flex;
align-items: flex-end;
background-color: rgba(0, 0, 0, 0.3);
pointer-events: none;
z-index: 5
}
@media (min-width: 0) and (max-width: 1099px) {
.media-item .hover {
background-color: transparent;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5))
}
}
@media (min-width: 740px) and (max-width: 1099px) {
.media-item .hover {
padding: 15px 40px
}
}
@media (min-width: 1100px) {
.media-item .hover {
width: 100%;
height: 100%;
padding: 25px;
visibility: visible
}
}
@media (min-width: 1300px) {
.media-item .hover {
padding: 30px
}
}
@media (min-width: 1780px) {
.media-item .hover {
padding: 40px
}
}
.media-item .fz-C {
font-size: 1.125em;
color: #fff;
margin-bottom: 0;
line-height: 1.5em
}
.media-item .fz-C:before {
content: "";
display: block;
width: 25px;
height: 3px;
background-color: #0f56a1;
margin-bottom: 1em
}
@media (min-width: 740px) {
.media-item .fz-C:before {
width: 42px;
height: 5px
}
}
@media (min-width: 576px) and (max-width: 979px) {
.media-item {
flex: 0 0 50%;
max-width: 50%
}
}
@media (min-width: 576px) and (max-width: 1099px) {
.media-item {
width: 50%;
float: left;
padding: 6px
}
}
@media (min-width: 1100px) {
.media-item {
width: 33.33%;
float: left;
padding: 6px;
margin-bottom: 0
}
.media-item:nth-of-type(5n+4) {
width: 66.66%
}
.media-item:nth-of-type(5n+4) .content {
padding-bottom: calc(50% - 6px)
}
.media-item:hover .content:before {
visibility: visible;
opacity: 1;
transform: translate(-50%, -50%)
}
.media-item:hover .img-holder {
filter: grayscale(0)
}
}
.app-popup, .media-popup, .feature-popup, .success-popup {
background-color: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(7px);
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100vh;
overflow: hidden;
z-index: 299;
pointer-events: none;
visibility: hidden;
opacity: 0;
transition: all .35s ease;
transition-delay: 0s;
overflow-y: auto
}
.app-popup .container, .media-popup .container, .feature-popup .container, .success-popup .container {
position: relative;
overflow: hidden;
opacity: 0;
transition: all .55s ease;
width: 100%
}
@media (min-width: 0) and (max-width: 1099px) {
.app-popup .container, .media-popup .container, .feature-popup .container, .success-popup .container {
width: 100%;
height: 100vh;
padding-top: 50px;
padding-bottom: 60px
}
}
@media (min-width: 740px) and (max-width: 1099px) {
.app-popup .container, .media-popup .container, .feature-popup .container, .success-popup .container {
padding: 30px 72px
}
}
@media (min-width: 740px) and (max-width: 1099px) and (orientation: landscape) {
.app-popup .container, .media-popup .container, .feature-popup .container, .success-popup .container {
display: flex;
flex-direction: column;
justify-content: center
}
}
@media (min-width: 1100px) {
.app-popup .container, .media-popup .container, .feature-popup .container, .success-popup .container {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
padding-top: 50px;
padding-bottom: 50px
}
}
@media (min-width: 1780px) {
.app-popup .container, .media-popup .container, .feature-popup .container, .success-popup .container {
padding-top: 80px;
padding-bottom: 80px
}
}
.app-popup .popup-mask-close, .media-popup .popup-mask-close, .feature-popup .popup-mask-close, .success-popup .popup-mask-close {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
left: 0;
top: 0
}
.app-popup .close-popup, .media-popup .close-popup, .feature-popup .close-popup, .success-popup .close-popup {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 0;
line-height: 0;
transition: all .35s ease;
position: absolute;
right: 0;
top: 0;
z-index: 3
}
.app-popup .close-popup:after, .media-popup .close-popup:after, .feature-popup .close-popup:after, .success-popup .close-popup:after {
width: 64%;
height: 64%;
content: "";
display: inline-block;
vertical-align: middle;
background-image: url("../index_files/iconset.svg");
background-size: auto 100%;
background-position: 16.33% 0
}
.app-popup .close-popup:active, .app-popup .close-popup:hover, .media-popup .close-popup:active, .media-popup .close-popup:hover, .feature-popup .close-popup:active, .feature-popup .close-popup:hover, .success-popup .close-popup:active, .success-popup .close-popup:hover {
transform: scale(1.125)
}
@media (min-width: 740px) {
.app-popup .close-popup, .media-popup .close-popup, .feature-popup .close-popup, .success-popup .close-popup {
width: 60px;
height: 60px;
right: 5px;
top: 5px
}
}
@media (min-width: 1300px) {
.app-popup .close-popup, .media-popup .close-popup, .feature-popup .close-popup, .success-popup .close-popup {
width: 72px;
height: 72px
}
}
@media (min-width: 980px) {
.media-popup {
overflow-y: auto
}
}
@media (min-width: 1300px) {
.media-popup .popup-content {
margin: 0 auto
}
}
@media (min-width: 1780px) {
.media-popup .popup-content {
overflow: hidden;
margin: 0 auto
}
}
@media (min-width: 980px) {
.media-popup .container {
height: auto;
padding-top: 0 !important;
padding-bottom: 0 !important
}
}
.success-popup .container, .app-popup .container {
max-width: 800px
}
.success-popup .popup-content {
padding: 0;
display: block;
overflow: hidden;
position: relative;
margin: 0;
width: 100%
}
.success-popup .popup-content>div {
width: 100%;
display: block;
min-height: 200px;
background-color: #fff;
min-width: 100%;
display: flex;
align-items: center;
justify-content: center
}
.success-popup .icon {
margin-bottom: 20px
}
.success-popup .fz-C {
margin-bottom: 0;
padding-bottom: 0
}
.success-popup .container {
display: flex;
align-items: center;
justify-content: center
}
.popup-content {
background-color: #fff;
overflow: hidden;
position: relative;
max-width: 1010px;
width: 100%;
margin: 0 auto;
z-index: 5
}
.popup-content>div {
display: flex;
flex-direction: column;
position: relative
}
@media (min-width: 740px) {
.popup-content {
overflow-y: auto
}
}
@media (min-width: 1300px) {
.popup-content {
margin: 50px auto
}
}
@media (min-width: 1780px) {
.popup-content {
overflow-y: auto;
margin: 80px auto
}
}
.popup-content:before {
content: attr(data-num);
display: block;
font-size: 5.625em;
font-weight: bold;
color: #efefef;
position: absolute;
left: 0;
top: 0;
line-height: 0.9em;
transform: translate(-15%, -15%);
z-index: 2
}
@media (min-width: 740px) {
.popup-content:before {
font-size: 8em
}
}
@media (min-width: 980px) {
.popup-content:before {
font-size: 10em;
top: 80px
}
}
@media (min-width: 1780px) {
.popup-content:before {
font-size: 15.5em;
top: 150px;
transform: translate(-25%, -15%)
}
}
@media (min-width: 0) and (max-width: 979px) {
.popup-content .space {
order: 1;
background-color: #fff;
min-height: 86px;
width: 100%
}
}
@media (min-width: 740px) and (max-width: 979px) {
.popup-content .space {
min-height: 150px
}
}
@media (min-width: 980px) {
.popup-content .space {
display: none
}
}
.popup-content .gallery, .popup-content .video {
order: 2
}
.popup-content .text {
position: relative
}
.popup-content .text:before {
content: "";
display: block;
width: 5px;
height: 100%;
background-color: #0f56a1;
position: absolute;
left: 0
}
@media (min-width: 980px) {
.popup-content .text:before {
display: none
}
}
@media (min-width: 0) and (max-width: 979px) {
.popup-content .text {
order: 3;
padding: 35px 30px
}
}
@media (min-width: 980px) {
.popup-content .text {
order: 1;
padding: 80px 80px 80px 300px
}
}
@media (min-width: 1780px) {
.popup-content .text {
order: 1;
padding: 150px 200px 150px 400px
}
}
@media (min-width: 980px) {
.popup-content .article-inner-wrap {
border-left: 5px solid #0f56a1;
padding-left: 35px
}
.popup-content .article-inner-wrap p {
padding-bottom: 0
}
}
.feature-popup .arrows {
bottom: 0 !important
}
@media (min-width: 0) and (max-width: 979px) {
.feature-popup .arrows {
justify-content: center
}
}
@media (min-width: 980px) {
.feature-popup .arrows {
bottom: auto;
top: 80px;
position: absolute;
left: 80px;
height: 60px;
transform: translate(10%, 50%);
z-index: 105
}
}
@media (min-width: 1780px) {
.feature-popup .arrows {
top: 150px;
left: 150px;
height: 70px
}
}
.popup-content-wrap {
background-color: #fff;
overflow: hidden;
position: relative;
height: 100%;
width: 100%;
max-width: 1010px;
margin: 0 auto
}
@media (min-width: 980px) {
.popup-content-wrap {
margin: 50px auto
}
}
@media (min-width: 1780px) {
.popup-content-wrap {
margin: 80px auto
}
}
.popup-content-wrap .swiper-container {
height: 100%
}
.popup-content-wrap .popup-content {
height: 100%;
overflow-y: auto
}
@media (min-width: 980px) {
.popup-content-wrap .popup-content {
margin: 0
}
}
@media (min-width: 1780px) {
.popup-content-wrap .popup-content {
margin: 0
}
}
.show-popup {
overflow: hidden
}
.show-popup .media-popup {
pointer-events: auto;
visibility: visible;
opacity: 1;
transition-delay: 0.1s
}
.show-popup .media-popup .container {
transform: translateY(0);
opacity: 1;
transition-delay: 0.2s
}
.show-app {
overflow: hidden
}
.show-app .app-popup {
pointer-events: auto;
visibility: visible;
opacity: 1;
transition-delay: 0.1s
}
.show-app .app-popup .container {
transform: translateY(0);
opacity: 1;
transition-delay: 0.2s
}
.show-success {
overflow: hidden
}
.show-success .success-popup {
pointer-events: auto;
visibility: visible;
opacity: 1;
transition-delay: 0.1s
}
.show-success .success-popup .container {
transform: translateY(0);
opacity: 1;
transition-delay: 0.2s
}
.show-f1 {
overflow: hidden
}
.show-f1 .f1 {
pointer-events: auto;
visibility: visible;
opacity: 1;
transition-delay: 0.1s
}
.show-f1 .f1 .container {
transform: translateY(0);
opacity: 1;
transition-delay: 0.2s
}
.show-f2 {
overflow: hidden
}
.show-f2 .f2 {
pointer-events: auto;
visibility: visible;
opacity: 1;
transition-delay: 0.1s
}
.show-f2 .f2 .container {
transform: translateY(0);
opacity: 1;
transition-delay: 0.2s
}
.news-wrap {
padding-top: 50px;
padding-bottom: 50px
}
@media (min-width: 576px) {
.news-wrap.row {
margin-left: -25px;
margin-right: -25px
}
.news-wrap.row [class^="col-"] {
padding-left: 25px;
padding-right: 25px
}
}
@media (min-width: 740px) {
.news-wrap {
padding-top: 60px;
padding-bottom: 60px
}
}
@media (min-width: 0) and (max-width: 979px) {
.news-detail .sb {
display: none
}
}
@media (min-width: 980px) {
.news-detail .sb {
margin-top: 40px;
padding-left: 4vw;
padding-right: 4vw
}
}
@media (min-width: 1300px) {
.news-detail .sb {
margin-top: 60px
}
}
@media (min-width: 1780px) {
.news-detail .sb {
margin-top: 80px
}
}
.page-article {
position: static;
display: block;
margin-top: 10px
}
.page-article span {
display: inline-flex
}
.date-n-label {
font-size: .875em;
color: #999;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
border-top: 1px solid #d4d4d4;
padding-top: 5px
}
@media (min-width: 740px) {
.date-n-label {
letter-spacing: 1px;
padding-top: 10px
}
}
.date-n-label span {
display: block;
font-weight: bold;
color: #2c2c2c
}
.date-n-label span.date {
color: #6f6f6f;
font-weight: normal
}
.news-item .text {
width: 100%
}
@media (min-width: 0) and (max-width: 739px) {
.news-item .text .fz-C {
height: auto !important
}
}
@media (min-width: 740px) {
.news-item .text .fz-C {
height: 4.5em;
margin-bottom: 0
}
}
.news-item .text p {
display: block;
line-height: 1.5em;
height: 6em;
overflow: hidden;
color: #6f6f6f
}
@media (min-width: 0) and (max-width: 739px) {
.news-item .text p {
height: auto;
padding-bottom: 1em
}
}
@media (min-width: 1100px) {
.news-item .text {
padding: 25px 0
}
}
@media (min-width: 1300px) {
.news-item .text {
padding: 30px 0
}
.news-item .text p {
width: 240px
}
}
@media (min-width: 1780px) {
.news-item .text {
padding: 40px 0
}
.news-item .text p {
width: 320px
}
}
@media (min-width: 0) and (max-width: 739px) {
.news-item .date-n-label {
border-top: none !important;
padding-top: 0;
padding-bottom: 15px
}
}
@media (min-width: 740px) {
.news-item .date-n-label {
padding-bottom: 15px
}
}
@media (min-width: 1100px) {
.news-item .img-holder {
width: 100%;
padding-top: 0
}
}
@media (min-width: 1300px) {
.news-item .img-holder {
width: 100%
}
}
@media (min-width: 1780px) {
.news-item .img-holder {
width: 100%
}
}
.news-item .btn-area:after {
display: none
}
.news-item .btn-area .btn {
margin: 0 auto;
width: 100%
}
@media (min-width: 1100px) {
.news-item:hover .text {
padding: 25px 30px
}
}
@media (min-width: 1300px) {
.news-item:hover .text {
padding: 30px 40px
}
}
@media (min-width: 1780px) {
.news-item:hover .text {
padding: 40px 50px
}
}
@media (min-width: 0) and (max-width: 739px) {
.news-item {
border-bottom: 1px solid #d4d4d4
}
}
@media (min-width: 980px) {
.article-nav {
display: flex;
justify-content: flex-end;
padding-left: 60%
}
.article-nav>div {
width: 40%
}
}
@media (min-width: 1300px) {
.article-nav {
padding-left: 50%
}
.article-nav>div {
width: 50%
}
}
.article {
padding: 35px;
position: relative
}
.article .date-n-label {
line-height: 1em
}
.article .date-n-label .tag-wrap {
margin-left: 0;
border-right: 1px solid #e3e2e2;
margin-right: 25px
}
.article .date-n-label .tag-wrap a {
padding-right: 25px;
cursor: pointer
}
@media (min-width: 740px) {
.article .date-n-label {
font-size: .9375em
}
}
@media (min-width: 1300px) {
.article .date-n-label {
font-size: 1em
}
}
.article section:first-of-type {
margin-top: 35px
}
@media (min-width: 980px) {
.article section {
padding-bottom: 70px;
border-bottom: 1px solid #d4d4d4;
margin-bottom: 70px
}
.article section .fz-zh-C {
margin-bottom: 0.25em
}
.article section:first-of-type {
margin-top: 70px
}
.article section:last-of-type {
border-bottom: none
}
}
.article .fz-A {
margin-bottom: 0.5em
}
@media (min-width: 1780px) {
.article .fz-A {
font-size: 1.875em
}
}
@media (min-width: 980px) {
.article .social {
position: absolute;
right: 0;
top: 0
}
}
.article-detail-wrap+.btn-pd-back {
margin-bottom: 6vw
}
@media (min-width: 980px) {
.article-detail-wrap {
display: flex;
flex-direction: row-reverse;
padding-bottom: 60px
}
}
@media (min-width: 980px) {
.article-detail-wrap .gallery {
flex: 1;
max-width: 40%
}
}
@media (min-width: 1300px) {
.article-detail-wrap .gallery {
max-width: 50%
}
}
.article-detail-wrap .article .date-n-label {
padding-top: 20px
}
@media (min-width: 0) and (max-width: 979px) {
.article-detail-wrap .article {
padding: 30px 0
}
}
@media (min-width: 980px) {
.article-detail-wrap .article {
flex: 1;
max-width: 60%;
padding: 0 40px 0 0
}
}
@media (min-width: 1300px) {
.article-detail-wrap .article {
max-width: 50%;
padding: 0 60px 0 0
}
}
@media (min-width: 1780px) {
.article-detail-wrap .article {
padding: 0 80px 0 0
}
}
@media (min-width: 0) and (max-width: 739px) {
.article-detail-wrap .controller {
height: 50px
}
.article-detail-wrap .controller .swiper-count, .article-detail-wrap .controller .loader-line {
display: none
}
.article-detail-wrap .controller .swiper-pagination {
position: static;
margin-top: 10px
}
}
@media (min-width: 740px) {
.article-detail-wrap .controller {
border: none;
position: absolute;
right: 10%;
bottom: 5%;
z-index: 99;
width: 80%;
display: flex;
color: #fff;
align-items: center;
justify-content: space-between
}
.article-detail-wrap .controller .swiper-pagination {
display: none
}
.article-detail-wrap .controller .swiper-count, .article-detail-wrap .controller .space-line, .article-detail-wrap .controller .swiper-button-prev, .article-detail-wrap .controller .swiper-button-next {
position: static;
margin: 0;
color: #fff
}
.article-detail-wrap .controller .swiper-button-prev, .article-detail-wrap .controller .swiper-button-next {
width: 60px;
height: 100%
}
.article-detail-wrap .controller .swiper-button-prev.swiper-button-disabled, .article-detail-wrap .controller .swiper-button-next.swiper-button-disabled {
opacity: 0.4
}
.article-detail-wrap .controller .loader-line {
width: calc(100% - 240px);
position: relative
}
.article-detail-wrap .controller .loader-line:before, .article-detail-wrap .controller .loader-line:after {
content: "";
display: block;
position: absolute;
width: 100%;
border-top: 1px solid rgba(51, 51, 51, 0.9);
height: 1px;
border-radius: 2px;
z-index: 2
}
.article-detail-wrap .controller .loader-line:before {
z-index: 4;
border-top-color: #fff;
opacity: 0;
transform-origin: left center;
animation: loader-line 6s linear;
animation-delay: .1s
}
.article-detail-wrap .controller .loader-line.active:before {
transform-origin: left center;
animation: loader-line-2 6s linear
}
}
@media (min-width: 1780px) {
.article-detail-wrap .controller {
right: 15%;
width: 70%
}
}
@keyframes loader-line {
0% {
transform: scaleX(0);
opacity: 1
}
100% {
transform: scaleX(1);
opacity: 1
}
}
@media (min-width: 0) and (max-width: 979px) {
.article-body {
flex-direction: column-reverse;
display: flex
}
}
@media (min-width: 980px) {
.article-body {
background: url("../index_files/bg-line.svg") repeat-y;
background-size: 100% auto;
padding-left: 4vw;
padding-right: 4vw;
padding-top: 30px
}
}
.article-nav {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0
}
@media (min-width: 0) and (max-width: 979px) {
.article-nav {
border-top: 1px solid #d4d4d4;
margin-top: 0
}
}
@media (min-width: 980px) {
.article-nav {
padding-bottom: 30px
}
}
.article-nav>div {
display: flex;
width: 100%;
justify-content: space-between;
height: 48px;
position: relative
}
.article-nav a {
font-weight: bold;
display: flex;
align-items: center;
transition: color .3s ease;
width: 50%;
padding-top: 10px;
padding-bottom: 10px
}
.article-nav a.n-prev {
position: absolute;
left: 0
}
.article-nav a.n-prev:before {
content: "";
display: inline-block;
vertical-align: middle;
background-image: url("../index_files/iconset.svg");
background-size: auto 100%;
background-position: 2.04% 0;
width: 20px;
height: 20px;
transform: rotate(-180deg);
margin-right: 5px
}
@media (min-width: 1300px) {
.article-nav a.n-prev:before {
width: 28px;
height: 28px
}
}
.article-nav a.n-next {
position: absolute;
right: 0;
text-align: right;
justify-content: flex-end
}
.article-nav a.n-next:after {
content: "";
display: inline-block;
vertical-align: middle;
background-image: url("../index_files/iconset.svg");
background-size: auto 100%;
background-position: 2.04% 0;
width: 20px;
height: 20px;
margin-left: 5px
}
@media (min-width: 1300px) {
.article-nav a.n-next:after {
width: 28px;
height: 28px
}
}
@media (min-width: 0) and (max-width: 575px) {
.article-nav a {
font-size: .875em
}
}
@media (min-width: 576px) and (max-width: 1099px) {
.article-nav a {
font-size: .9375em
}
}
@media (min-width: 1100px) {
.article-nav a:hover {
color: #0f56a1
}
}
.article-nav span {
display: block;
height: 1px;
border-top: 1px solid #00594E;
width: calc(100% - 200px)
}
@media (min-width: 576px) {
.article-nav span {
width: calc(100% - 240px)
}
}
@media (min-width: 1100px) {
.article-nav span {
width: calc(100% - 280px)
}
}
.article-footer {
padding-bottom: 35px;
justify-content: center;
display: flex
}
@media (min-width: 980px) {
.article-footer {
padding-bottom: 70px;
padding-top: 30px;
border-top: 1px solid #bbb
}
}
@media (min-width: 1780px) {
.article-footer {
padding-bottom: 100px;
padding-top: 70px
}
}
.careers {
padding-bottom: 40px
}
@media (min-width: 740px) {
.careers {
padding-bottom: 50px
}
}
@media (min-width: 1300px) {
.careers {
padding-bottom: 70px
}
}
@media (min-width: 1780px) {
.careers {
padding-bottom: 90px
}
}
.careers-info li {
display: block;
border-bottom: 1px solid #d4d4d4;
display: flex;
flex-direction: column;
position: relative;
font-weight: bold;
padding-left: 50px;
padding-top: 10px;
padding-bottom: 10px
}
.careers-info li.person {
padding-left: 0;
border-bottom: 1px solid #2c2c2c;
padding-bottom: 10px
}
@media (min-width: 740px) and (max-width: 1299px) {
.careers-info li {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 70px
}
}
@media (min-width: 740px) {
.careers-info li.person {
padding-bottom: 20px
}
}
@media (min-width: 1300px) {
.careers-info li {
padding-left: 20px;
flex-direction: row;
align-items: center;
min-height: 100px;
justify-content: flex-start
}
.careers-info li.person {
min-height: auto
}
}
@media (min-width: 1780px) {
.careers-info li {
min-height: 100px
}
.careers-info li.person {
min-height: auto
}
}
@media (min-width: 0) and (max-width: 1299px) {
.careers-info .img-100 {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%)
}
}
@media (min-width: 1300px) {
.careers-info .img-100 {
width: 80px
}
}
@media (min-width: 1780px) {
.careers-info .img-100 {
width: 15%
}
}
@media (min-width: 0) and (max-width: 979px) {
.careers-info .img-100 img {
max-width: 50px
}
}
@media (min-width: 980px) {
.careers-info .img-100 img {
max-width: 60px
}
}
@media (min-width: 0) and (max-width: 575px) {
.careers-info .field {
line-height: 1.5em
}
}
@media (min-width: 1300px) {
.careers-info .field {
width: 20%;
margin-left: 10%
}
}
@media (min-width: 1780px) {
.careers-info .field {
width: 25%;
margin-left: 20%
}
}
.careers-info .value {
color: #6f6f6f
}
@media (min-width: 0) and (max-width: 575px) {
.careers-info .value {
line-height: 1.5em
}
}
.careers-info .value a {
color: #6f6f6f;
transition: all .35s ease
}
.careers-info .value a:hover, .careers-info .value a:active {
color: #0f56a1
}
@media (min-width: 1300px) {
.careers-info .value {
flex: auto
}
}
@media (min-width: 740px) {
.careers-info .icon:before {
width: 42px;
height: 42px
}
}
@media (min-width: 1780px) {
.careers-info .icon:before {
width: 56px;
height: 56px
}
}
.careers-p {
color: #6f6f6f
}
.careers-p p {
color: #6f6f6f
}
@media (min-width: 0) and (max-width: 979px) {
.cart-list .fz-B, .contact-form .fz-B {
border-top: none !important
}
}
@media (min-width: 0) and (max-width: 979px) {
.cart-list .fz-B {
padding-bottom: 20px;
border-bottom: 1px solid #d4d4d4
}
}
.cart-list-wrap .btn-area {
border-top: 2px solid #000;
padding-top: 40px;
padding-bottom: 40px
}
@media (min-width: 0) and (max-width: 739px) {
.cart-list-wrap .btn-area {
text-align: center
}
}
@media (min-width: 740px) {
.cart-list-wrap .btn-area {
text-align: right
}
}
.cart-list-wrap .btn-area .link {
color: #0f56a1;
font-weight: bold;
font-size: 1rem
}
@media (min-width: 740px) {
.cart-list-wrap .btn-area .link {
font-size: 1.125rem
}
}
@media (min-width: 1300px) {
.cart-list-wrap .btn-area .link {
font-size: 1.375rem
}
}
.cart-list-item {
border-bottom: 1px solid #d4d4d4;
font-weight: bold
}
.cart-list-item:last-of-type {
border-bottom: none
}
.cart-list-item button {
font-size: 0;
margin: 0 auto;
display: block;
cursor: pointer
}
@media (min-width: 0) and (max-width: 739px) {
.cart-list-item {
border-bottom: 1px solid #d4d4d4;
margin-bottom: 20px;
padding-bottom: 20px
}
.cart-list-item li:nth-of-type(2) {
padding-top: 20px;
padding-bottom: 20px
}
}
@media (min-width: 740px) {
.cart-list-item {
align-items: center;
padding-top: 20px;
padding-bottom: 20px
}
.cart-list-item li:nth-of-type(2) {
padding-left: 40px
}
.cart-list-item li:nth-of-type(3) {
text-align: center
}
}
@media (min-width: 1300px) {
.cart-list-item {
font-size: 1.125rem
}
}
@media (min-width: 1780px) {
.cart-list-item {
font-size: 1.25rem
}
}
@media (min-width: 0) and (max-width: 739px) {
.cart-list-item.head {
display: none
}
}
@media (min-width: 740px) {
.cart-list-item.head {
padding-top: 0;
padding-bottom: 10px;
border-bottom: 2px solid #000
}
}
@media (min-width: 0) and (max-width: 979px) {
.contact-form {
background-color: #fff;
padding-top: 50px;
padding-bottom: 50px;
border-top: 1px solid #d4d4d4
}
}
@media (min-width: 980px) and (max-width: 1099px) {
.contact-form .right-area {
background-color: #fff;
padding-top: 50px;
padding-bottom: 50px
}
.contact-form .right-area .row {
margin-right: 0;
margin-left: 0
}
.contact-form .right-area .row [class^="col-"] {
padding-right: 60px;
padding-left: 60px
}
}
@media (min-width: 1100px) {
.contact-form .right-area {
background-color: #fff;
padding-top: 40px;
padding-bottom: 40px
}
.contact-form .right-area .row {
margin-right: 0;
margin-left: 0
}
.contact-form .right-area .row [class^="col-"] {
padding-right: 40px;
padding-left: 40px
}
.contact-form .right-area ul:nth-of-type(2) {
border-left: 1px solid #d4d4d4
}
}
@media (min-width: 1300px) {
.contact-form .right-area {
padding-top: 60px;
padding-bottom: 60px
}
.contact-form .right-area .row [class^="col-"] {
padding-right: 50px;
padding-left: 50px
}
}
@media (min-width: 1780px) {
.contact-form .right-area {
padding-top: 75px;
padding-bottom: 75px
}
.contact-form .right-area .row [class^="col-"] {
padding-right: 60px;
padding-left: 60px
}
}
.delete {
display: block;
width: 50px;
height: 50px;
border: none;
background: none;
transition: transform .25s ease
}
.delete:before {
width: 30px;
height: 30px;
content: "";
display: inline-block;
vertical-align: middle;
background-image: url("../index_files/iconset.svg");
background-size: auto 100%;
background-position: 8.16% 0;
transform: rotate(-45deg)
}
.delete:hover, .delete:active {
transform: scale(1.5)
}
.delete:hover:before, .delete:active:before {
background-size: auto 100%;
background-position: 10.2% 0;
transform: rotate(-45deg)
}
@media (min-width: 1300px) {
.contact .sb {
padding-left: 4vw;
padding-right: 4vw
}
}
@media (min-width: 740px) and (max-width: 1779px) {
.contact .sb {
margin-bottom: 40px
}
}
@media (min-width: 980px) {
.contact .sbb {
padding-left: 8vw;
padding-right: 8vw
}
}
.location-item {
border-bottom: 1px solid #000;
position: relative
}
.location-item:last-of-type {
border: none
}
@media (min-width: 0) and (max-width: 979px) {
.location-item .collection {
margin-bottom: 20px
}
}
@media (min-width: 0) and (max-width: 979px) {
.location-item {
padding-bottom: 60px;
margin-bottom: 50px
}
.location-item .map {
position: absolute;
bottom: 20px;
left: 0
}
.location-item img {
margin-bottom: 20px
}
}
@media (min-width: 576px) and (max-width: 979px) {
.location-item {
padding-left: 50%
}
.location-item img {
max-width: 80%
}
}
@media (min-width: 980px) {
.location-item {
display: flex
}
}
@media (min-width: 980px) {
.location-item .map {
position: absolute;
bottom: 35px
}
}
@media (min-width: 1300px) {
.location-item .map {
bottom: 50px
}
}
@media (min-width: 1780px) {
.location-item .map {
bottom: 70px
}
}
.location-item .map a {
display: block;
width: 50px;
height: 50px
}
.location-item .map a:hover .icon:before, .location-item .map a:active .icon:before {
background-size: auto 100%;
background-position: 42.86% 0
}
.location-item .map .icon:before {
width: 50px;
height: 50px
}
@media (min-width: 0) and (max-width: 979px) {
.location-item .map .icon:before {
background-size: auto 100%;
background-position: 42.86% 0;
width: 36px;
height: 36px
}
}
.location-item .fz-C {
margin-bottom: 0;
color: #2c2c2c
}
.location-item li {
display: block;
color: #6f6f6f
}
@media (min-width: 576px) and (max-width: 979px) {
.location-item li:first-of-type {
width: 50%;
position: absolute;
left: 0
}
}
@media (min-width: 980px) {
.location-item li {
padding: 35px 25px
}
.location-item li:nth-of-type(1) {
width: 30%
}
.location-item li:nth-of-type(2) {
width: 30%
}
.location-item li:nth-of-type(3) {
width: 40%
}
}
@media (min-width: 1100px) {
.location-item li {
padding: 35px 20px
}
.location-item li:nth-of-type(1) {
padding: 35px 40px
}
}
@media (min-width: 1300px) {
.location-item li {
padding: 50px 30px
}
.location-item li:nth-of-type(1) {
padding: 50px 60px
}
}
@media only screen and (min-width: 1400px) {
.location-item li {
padding: 50px 30px
}
.location-item li:nth-of-type(1) {
width: 24%;
padding: 50px 30px
}
.location-item li:nth-of-type(2) {
width: 22%
}
.location-item li:nth-of-type(3) {
width: 54%
}
.location-item li.nested {
display: flex
}
.location-item li.nested>div:first-of-type {
width: 46%
}
.location-item li.nested>div:nth-of-type(2) {
width: 54%
}
}
@media (min-width: 1780px) {
.location-item li {
padding: 70px 40px
}
.location-item li:nth-of-type(1) {
padding: 70px 80px
}
}
.mapping {
display: flex
}
.mapping .field {
color: #2c2c2c;
min-width: 60px;
font-weight: bold
}
.mapping .value {
flex: auto
}
@media (min-width: 0) and (max-width: 979px) {
.select2-container--default {
margin-bottom: 30px
}
}
@media (min-width: 576px) {
.select2-container--default {
max-width: 360px
}
}
@media (min-width: 1300px) {
.select2-container--default {
max-width: 420px
}
}
@media (min-width: 1780px) {
.select2-container--default {
max-width: 560px
}
}
.select2-container--default .select2-selection--single {
border: 2px solid #2c2c2c;
background-color: transparent;
font-size: 1rem;
height: 66px;
border-radius: 6px;
outline: none
}
.select2-container--default .select2-selection--single:before {
content: "";
display: block;
width: 2px;
height: 33px;
position: absolute;
right: 66px;
bottom: 0;
background-color: #2c2c2c
}
@media (min-width: 1780px) {
.select2-container--default .select2-selection--single:before {
height: 48px;
right: 96px
}
}
@media (min-width: 1780px) {
.select2-container--default .select2-selection--single {
height: 96px
}
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
font-size: 1rem;
line-height: 66px;
font-weight: bold;
padding-left: 0;
padding-left: 20px;
color: #959595
}
@media (min-width: 1780px) {
.select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 96px
}
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 66px;
width: 66px
}
@media (min-width: 1780px) {
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 96px;
width: 96px
}
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: #000 transparent transparent transparent
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #0f56a1;
transition: background-color .25s ease
}
.bg-global {
background: #f6f6f6 url("../images/contact/global.png") no-repeat center top;
background-size: 100% auto
}
.dist-wrap {
padding-top: 50px;
padding-bottom: 60px
}
@media (min-width: 1780px) {
.dist-wrap [class^="col-"] {
padding: 0 60px
}
}
@media (min-width: 740px) {
.dist-wrap {
padding-top: 60px;
padding-bottom: 60px
}
}
.grid-block {
display: flex;
flex-flow: column wrap;
border: 1px solid #000
}
.grid-block .dist-item {
width: 40%
}
.grid-block .dist-item:nth-of-type(2n+1) {
order: 1
}
.grid-block .dist-item:nth-of-type(2n+2) {
order: 2
}
.dist-item {
border-bottom: 1px solid #d4d4d4
}
.dist-item ul {
display: block;
background-color: #fff;
padding: 0 20px;
max-height: 0;
overflow: hidden;
transition: all .8s ease;
position: relative;
box-shadow: 0px 17px 29px -3px rgba(0, 0, 0, 0)
}
.dist-item ul:before {
content: "";
display: block;
width: 100%;
height: 3px;
position: absolute;
left: 0;
top: 0;
transform: scaleX(0);
transition: all .5s ease;
background-color: #0f56a1;
transform-origin: left top
}
@media (min-width: 740px) {
.dist-item ul {
padding: 0 40px
}
}
@media (min-width: 980px) {
.dist-item ul {
padding: 0 25px
}
}
@media (min-width: 1100px) {
.dist-item ul {
padding: 0 30px
}
}
@media (min-width: 1300px) {
.dist-item ul {
padding: 0 40px
}
}
@media (min-width: 1780px) {
.dist-item ul {
padding: 0 50px
}
}
.dist-item li {
border-bottom: 1px solid #d4d4d4;
padding: 10px 0;
display: flex;
color: #6f6f6f
}
.dist-item li:last-of-type {
border-bottom: none
}
@media (min-width: 1780px) {
.dist-item li {
padding: 30px 0
}
}
.dist-item .dist-header {
line-height: 70px;
position: relative;
cursor: pointer
}
.dist-item .dist-header:hover .fz-C, .dist-item .dist-header:active .fz-C {
color: #0f56a1
}
.dist-item .dist-header:hover:after, .dist-item .dist-header:active:after {
background-size: auto 100%;
background-position: 10.2% 0
}
.dist-item .dist-header:after {
content: "";
width: 20px;
height: 20px;
position: absolute;
right: 0;
top: 50%;
content: "";
display: inline-block;
vertical-align: middle;
background-image: url("../index_files/iconset.svg");
background-size: auto 100%;
background-position: 8.16% 0;
opacity: 0.5;
transform: translateY(-50%);
transition: transform .35s ease
}
@media (min-width: 740px) {
.dist-item .dist-header:after {
width: 24px;
height: 24px
}
}
.dist-item .dist-header .fz-C {
margin-bottom: 0;
transition: all .35s ease
}
@media (min-width: 1780px) {
.dist-item .dist-header {
line-height: 80px
}
}
.dist-item .field {
min-width: 80px;
color: #2c2c2c;
flex: auto
}
.dist-item .value {
flex: auto;
width: calc(100% - 80px);
word-wrap: break-word
}
.dist-item .value a {
transition: all .35s ease
}
.dist-item .value a:hover {
color: #0f56a1
}
.dist-item.active {
border-bottom: 1px solid transparent
}
.dist-item.active ul {
box-shadow: 0px 17px 29px -3px rgba(0, 0, 0, 0.2);
max-height: 600px
}
.dist-item.active ul:before {
transform: scaleX(1)
}
.dist-item.active .dist-header:after {
content: "";
display: inline-block;
vertical-align: middle;
background-image: url("../index_files/iconset.svg");
background-size: auto 100%;
background-position: 10.2% 0;
opacity: 1;
transform: translateY(-50%) rotate(-45deg)
}
@media (min-width: 0) and (max-width: 979px) {
.mobile .more {
color: #00594E
}
.mobile .more:after {
border-color: #00594E;
border-width: 3px
}
.mobile .btn-send {
background-color: #00594E
}
}
@media (min-width: 980px) {
.ie .nav-right {
position: absolute;
right: 0;
top: 44px
}
}
.ie .ducati {
transform: translate(-50%, -50%)
}
#sorryforie {
position: fixed;
width: 100%;
height: 100%;
z-index: 9999;
background-color: #000;
left: 0;
top: 0;
display: none;
color: #fff
}
#sorryforie.active {
display: block !important
}
#sorryforie>div {
width: 640px;
height: 300px;
border: 1px solid #6f6f6f;
border-radius: 5px;
position: absolute;
left: 50%;
top: 50%;
margin: -180px 0 0 -320px;
padding: 30px;
text-align: center;
display: block !important
}
#sorryforie p {
line-height: 1.75em;
font-size: 20px;
display: block !important;
color: #d4d4d4
}
#sorryforie .browser {
font-size: 0;
display: block !important
}
#sorryforie .browser img {
display: inline-block !important;
width: 70%;
height: auto;
border: none;
outline: none
}
#sorryforie .browser span {
color: #fff;
font-size: 14px;
display: block !important;
width: 100%;
text-align: center;
margin-top: 10px
}
#sorryforie .browser a {
display: inline-block !important;
width: 25%;
padding: 10px;
vertical-align: middle;
text-align: center;
transition: all .3s ease;
text-decoration: none;
margin-top: 10px
}
#sorryforie .browser a:hover span {
color: #fff
}
@media (max-width: 1000px) and (min-width: 700px) {
section table tr td {
width: auto;
}
section table tr {
width: 100%;
}
}
@media screen and (max-width: 700px) {
section table {
display: table;
width: 100% !important;
}
section table tr {
width: 100%;
}
section table tr td {
width: auto;
}
section iframe {
display: block;
width: 100%;
height: 50vw;
}
}
section {
width: 100% !important;
line-height: 2.1;
font-size: 14px;
text-align: justify;
color: #282828;
}
section iframe {
display: block;
width: 100%;
height: 50vw;
}
section ul {
padding: 0 2.08vw;
}
section ol {
padding: 0 2.08vw !important;
}
/* Ã¥ÂÂreset.css */
section div, section span, section applet, section object, section iframe, section h1, section h2, section h3, section h4, section h5, section h6, section p, section blockquote, section pre, section a, section abbr, section acronym, section address, section big, section cite, section code, section del, section dfn, section em, section img, section ins, section kbd, section q, section s, section samp, section small, section strike, section strong, section sub, section sup, section tt, section var, section b, section u, section i, section center, section dl, section dt, section dd, section ol, section ul, section li, section fieldset, section form, section label, section legend, section table, section caption, section tbody, section tfoot, section thead, section tr, section th, section td, section article, section aside, section canvas, section details, section embed, section figure, section figcaption, section footer, section header, section hgroup, section menu, section nav, section output, section ruby, section section, section summary, section time, section mark, section audio, section video {
margin: initial;
}
section h1 {
font-size: 2em;
margin: 0.67em 0;
}
section hr {
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;/* 2 */
}
section pre {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;/* 2 */
}
section a {
background-color: transparent;
}
section b, section strong {
font-weight: bolder;
}
section small {
font-size: 80%;
}
section sub, section sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
section sub {
bottom: -0.25em;
}
section sup {
top: -0.5em;
}
section img {
border-style: none;
width: 100%;
}
section button, section input, section optgroup, section select, section textarea {
font-family: inherit;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin: 0;/* 2 */
}
section button, section input {
/* 1 */
overflow: visible;
}
section button, section select {
/* 1 */
text-transform: none;
}
section button, section [type="button"], section [type="reset"], section [type="submit"] {
-webkit-appearance: button;
}
section fieldset {
padding: 0.35em 0.75em 0.625em;
}
section legend {
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
white-space: normal;/* 1 */
}
section progress {
vertical-align: baseline;
}
section textarea {
overflow: auto;
}
section details {
display: block;
}
section summary {
display: list-item;
}
.idx-icon .title {
margin-bottom:20px;
}
.idx-icon .title:before {
height: 0px;
}
.idx-icon2 {
}
.idex-partner {
background:#fff;
padding-top:1px;
padding-bottom:60px;
}
.index-about {
padding:80px 0px;
}
.about-content h2 {
font-weight:bold;
margin-bottom:20px;
display: block;
color: #0f56a1;
}
.index-about-words {
margin-right:40px;
display: flex;
flex-wrap: wrap;
height: 100%;
align-content: center;
}
.more-btn {
color:#fff;
background: #222;
display:inline-block;
font-size: 16px;
font-weight: bold;
border-radius:25px;
padding: 6px 30px;
transition: 0.3s;
margin-top: 15px;
}
a.more-btn:hover {
background: #0f56a1;
color:#fff;
}
.index-liucheng {
padding:70px 0px;
background-color: #f6f6f6;
}
.index-liucheng-title {
text-align:center;
font-weight:bold;
margin-bottom:50px;
}
.index-liucheng-title h2 {
font-weight:bold;
}
.index-liucheng-1 {
padding:20px;
background:#fff;
margin-bottom: 20px;
box-shadow: rgba(50, 26, 9, 0.04) 10px 10px 40px 0px;
}
.index-liucheng-2 {
position: relative;
overflow: hidden;
}
.index-liucheng-2 .num {
position: absolute;
z-index: 1;
background:#0f56a1;
width:120px;
height:120px;
transform: rotate(45deg);
margin-left: -60px;
margin-top: -60px;
}
.index-liucheng-2 .num-num {
position: absolute;
z-index: 2;
color:#fff;
font-size:25px;
font-weight:bold;
text-align: center;
margin: 5px 0px 0px 15px;
}
.index-liucheng-3 {
text-align: center;
padding: 10px 0px 0px;
font-size: 18px;
}
.jiantou {
position:absolute;
right:-20px;
top:35%;
z-index:2;
}
i.jiantou {
font-size:45px;
color:#0f56a1;
font-weight:bold;
}
.index-liucheng-content .col-lg-4:nth-child(3) .index-liucheng-1 .jiantou {
bottom: -30px;
top: auto;
right: 45%;
transform: rotate(90deg);
z-index: 2;
}
.index-liucheng-content .col-lg-4:nth-child(4) .index-liucheng-1 .jiantou {
bottom: -30px;
top: auto;
right: 45%;
transform: rotate(90deg);
z-index: 2;
}
.index-liucheng-content .col-lg-4:nth-child(5) .index-liucheng-1 .jiantou {
left: -18px;
right:auto;
transform: rotate(180deg);
z-index: 2;
}
.index-liucheng-content .col-lg-4:nth-child(6) .index-liucheng-1 .jiantou {
left: -18px;
right:auto;
transform: rotate(180deg);
z-index: 2;
}
.ab_page_ab {
padding: 0px 0 112px;
}
.mw_ser_area {
background: #F3F3F3;
padding: 92px 20px 83px 20px;
}
.aboutus {
display: flex;
flex-direction: column;
justify-content: center;
}
.ttin .txbdstitle {
font-weight: 700;
line-height: 1.2;
font-size:40px;
margin-bottom:50px;
}
.txbdcon .txbdsvtitle.txstcolor.hlight{ font-size: 18px;
line-height: 40px;}
.bread-crumb a {
color:#fff;
}
.bread-crumb {
display:flex;
font-size: 15px;
padding: 0px;
}
.bread-crumb li {
margin-right:10px;
}
.menu-second a:hover span {
color:#000;
}
@media (max-width:960px) {
.section.loaded {
margin-top: 0px;
}
}