/**/

.ss-hero::before,
.ss-hero::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.ss-hero::before {
    background: #424242;
    opacity: 35%;
}

.ss-hero::after {
    width: calc(100% - min(1.750vw, 28px));
    height: 40%;
    left: min(0.875vw, 14px);
    top: min(0.875vw, 14px);
    background: linear-gradient(180deg, #000, transparent);
    opacity: 59%;
}

.ss-tagline {
    position: absolute;
    left: 50%;
    top: calc(51% + 5px);
    transform: translate(-50%, -50%);
    width: 90%;
    z-index: 2;
    pointer-events: none;
}

.ss-tagline h1 {
    font-family: var(--font-family-title);
    font-size: clamp(26px, 4.375vw, 70px);
    line-height: 1.15;
    letter-spacing: 0.005em;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
}
.ss-tagline h2 {
    margin-top: 15px;
    font-family: var(--font-family-title);
    font-size: 18px;
    line-height: 1.15;
    letter-spacing: 0.005em;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
}

.ss-overlay {
    position: absolute;
    z-index: 1;
    width: min(100%, 1600px);
    left: 50%;
    top: calc(51% + 5px);
    transform: translate(-50%, -50%);
    opacity: 30%;
    pointer-events: none;
}

.ss-scroll {
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translateX(-50%);
    z-index: 2;
}

.ss-scroll a {
    font-size: 10px;
    letter-spacing: 0.21em;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
}

.ss-scroll a:hover {
    opacity: 0.75;
}

.ss-scroll a::before,
.ss-scroll a::after {
    position: absolute;
    content: "";
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    pointer-events: none;
}

.ss-scroll a::before {
    width: 1px;
    height: 16px;
    top: -26px;
}

.ss-scroll a::after {
    width: 4px;
    height: 9px;
    bottom: -18px;
    border-radius: 100%;
}

/**/
/**/

.hp-wc {
    /* height: 748px; */
    margin-top: clamp(40px, 5.5vw, 88px);
    padding-top: clamp(40px, 5.5vw, 71px);
}

.hp-wc::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 80%;
    pointer-events: none;
}

.wc-wrap {
    width: 1468px;
    width: 91.75%;
    margin: auto;
    padding-right: 98px;
    padding-right: 6.125vw;
    background: #fff;
}

.wc-left {
    width: 866px;
    width: calc(100% - min(36.788321167883%, 504px));
    padding-top: 93px;
    padding-top: min(6.7883211678832%, 93px);
    padding-left: 121px;
    padding-left: 8.8321167883212%;
    padding-right: 50px;
    padding-right: 3.6496350364963%;
    padding-bottom: 40px;
    padding-bottom: min(2.9197080291971%, 40px);
}

.wc-title {}

.wc-title .site-title h2 {
    /* letter-spacing: 0.15em; */
    padding-left: min(2.3125vw, 28px);
}

.wc-desc {
    padding-top: 18px;
    padding-left: max(2vw, 24px);
    padding-right: max(2vw, 24px);
}

.wc-desc p {
    font-size: clamp(12px, 1.05vw, 14.05px);
    letter-spacing: 0.05em;
    line-height: 1.7;
    color: #565656;
    padding-bottom: clamp(18px, 1.8vw, 26px);
}

.wc-right {
    width: min(36.788321167883%, 504px);
}

.wc-img {
    margin-top: max(-2vw, -32px);
}

.wc-img::before {
    content: "";
    position: absolute;
    width: 287px;
    width: 56.94%;
    height: 501px;
    height: 79.14691943128%;
    background: var(--primary);
    right: clamp(-30px, -2vw, -15px);
    bottom: clamp(-30px, -2vw, -15px);
}

.wc-btn {
    padding: 5px max(2vw, 24px);
}

.wc-btn .site-btn {
    width: clamp(160px, 13.75vw, 189px);
    margin-right: 18px;
}

/**/
/**/


.hp-fc {
    padding: 49px 0;
    overflow: hidden;
}

.fc-wrap {}

.fc-title {
    letter-spacing: 0.12em;
    margin-left: min(3.375vw, 54px);
    padding: clamp(30px, 4vw, 64px) 0;
}

.fc-title .site-title {
    margin: auto;
}

.fc-list {
    width: calc(100% + 2px);
    margin-left: -1px;
    padding: 18px 0;
}

.fc-item {
    width: 50%;
    padding: 1px;
}

.fc-item>a {
    position: relative;
    display: block;
    outline: none;
    border: none;
    background: #808080;
}

.fc-item>a::before,
.fc-item>a::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 100%;
    height: clamp(80px, 21.146953405018%, 118px);
    background: #fff;
    z-index: 1;
    pointer-events: none;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.fc-item>a:hover::before {
    height: 0;
}

.fc-item>a::after {
    opacity: 0;
    background: linear-gradient(180deg, transparent, #000);
    height: 60%;
}

.fc-item>a:hover::after {
    opacity: 80%;
}

.fc-img {}

.fc-img img,
.fc-img canvas {
    min-height: 270px;
}

.fc-label {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: min(5.56%, 31px);
    transform: translateX(-50%);
    width: 90%;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.fc-item>a:hover .fc-label {
    bottom: min(9.3189964157706%, 52px);
}

.fc-label span {
    display: block;
    font-family: var(--font-family-title);
    font-size: clamp(24px, 2.167vw, 30px);
    line-height: 1.2;
    letter-spacing: 0.115em;
    color: var(--primary);
    text-align: center;
    text-transform: uppercase;
    padding-bottom: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.fc-item>a:hover .fc-label span {
    color: #fff;
    padding-bottom: 16px;
}

.fc-label .site-btn {
    height: 0;
    opacity: 0;
    pointer-events: none;
    border-color: #fff;
    color: #fff;
    /* width: 251px; */
    margin: auto;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.fc-item>a:hover .fc-label .site-btn {
    height: 52px;
    opacity: 1;
    pointer-events: auto;
}

.fc-label .site-btn:hover {
    border-color: var(--primary);
}

.fc-btn {}

.fc-btn .site-btn {
    width: clamp(290px, 25vw, 329px);
    margin: auto;
}

/**/
/**/

.hp-fl {
    padding: clamp(40px, 7.5vw, 113px) 0;
}

.fl-wrap {
    width: min(90%, 1334px);
    width: 83.375%;
    margin: auto;
}

.fl-title {
    padding: 0 2.8125vw;
}

.fl-list {
    padding-top: 17px;
    padding-left: 1px;
}

.fl-item {
    width: 584px;
    width: 43.810952738185%;
}

.fl-item:first-child,
.fl-item:last-child {
    width: 749px;
    width: 56.189047261815%;
}

.fl-item:first-child {
    margin-top: min(5.9264816204051%, 79px);
}

.fl-item:nth-child(3) {
    margin-top: min(6.1515378844711%, 82px);
}

.fl-item:nth-child(2),
.fl-item:nth-child(3) {
    z-index: 1;
}

.fl-item>a {
    position: relative;
    display: block;
    outline: none;
    border: none;
    background: #808080;
}

.fl-item:nth-child(2)>a::before,
.fl-item:nth-child(3)>a::before {
    content: "";
    position: absolute;
    background: var(--primary);
    top: clamp(-30px, -2vw, -15px);
    pointer-events: none;
    z-index: -1;
}

.fl-item:nth-child(2)>a::before {
    width: 200px;
    width: 34.246575342466%;
    height: 361px;
    height: 66.360294117647%;
    left: clamp(-30px, -2vw, -15px);
}

.fl-item:nth-child(3)>a::before {
    width: 467px;
    width: 79.965753424658%;
    height: 337px;
    height: 61.948529411765%;
    right: clamp(-30px, -2vw, -15px);
}


.fl-img {
    position: relative;
}


.fl-img::before,
.fl-img::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1;
    pointer-events: none;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.fl-img::before {
    height: 45%;
    background: linear-gradient(180deg, transparent, #000);
    opacity: 60%;
}

.fl-img::after {
    height: 100%;
    background: var(--primary);
    opacity: 0;
}

.fl-item>a:hover .fl-img::after {
    opacity: 80%;
}

.fl-item:first-child .fl-logo,
.fl-item:last-child .fl-logo {
    max-width: 40%;
}

.fl-logo {
    position: absolute;
    left: 49%;
    top: calc(40% + 3px);
    transform: translate(-50%, -50%);
    filter: brightness(0) invert(1);
    opacity: 0;
    z-index: 1;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.fl-item>a:hover .fl-logo {
    opacity: 13%;
}

.fl-label {
    position: absolute;
    left: clamp(24px, 2.5vw, 39px);
    bottom: clamp(15px, 1.5vw, 21px);
    z-index: 1;
    color: #fff;
    width: calc(100% - clamp(50px, 5vw, 78px));
}

.fl-price {
    position: relative;
    font-size: clamp(20px, 1.83vw, 25px);
    letter-spacing: 0.06em;
    padding: 16px 0;
}

.fl-price::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 57px;
    height: 1px;
    background: #fff;
    opacity: 50%;
    z-index: 1;
}

.fl-address {
    position: relative;
    font-family: var(--font-family-title);
    font-size: clamp(14px, 1.33vw, 18px);
    letter-spacing: 0.079em;
    text-transform: uppercase;
    padding: 16px 0;
}

.fl-address::before,
.fl-address::after {
    content: "";
    position: absolute;
    background: #fff;
    right: 1px;
    bottom: 25px;
    width: 23px;
    height: 1px;
}

.fl-address::after {
    transform: rotate(90deg);
}

.fl-btn {
    width: 749px;
    width: 56.189047261815%;
    position: absolute;
    right: -1px;
    bottom: 31px;
    bottom: calc(3% - 10px);
}

.fl-btn::before {
    position: absolute;
    content: "";
    right: clamp(362px, 31.491935483871vw, 416px);
    top: 52%;
    transform: translateY(-50%);
    background: #b5b5b5;
    height: 1px;
    width: 305px;
    width: 40.720961281709%;
    width: 59%;
    right: max(37%, 236px);
}

.fl-btn .site-btn {
    /* width: 251px; */
    /* margin-right: 39px; */
}

/**/
/**/

.hp-test {
    padding-top: min(1.25vw, 20px);
}

.test-wrap {
    width: 1466px;
    width: 91.625%;
    /* height: 734px; */
    background: var(--primary);
    margin: auto;
    margin-right: 0;
    padding-top: 90px;
    padding-top: min(5.625%, 90px);
}

.test-left {
    width: min(39.836289222374%, 584px);
    padding-left: 96px;
    padding-left: 6.5484311050477%;
    z-index: 1;
}

.test-img img,
.test-img canvas {
    min-height: 465px;
}

.test-right {
    padding-left: 129px;
    padding-left: 8.7994542974079%;
    padding-top: 20px;
    padding-top: min(1.25vw, 20px);
    padding-right: 129px;
    padding-right: 8.7994542974079%;
    padding-bottom: min(7.8125vw, 125px);
    width: 882px;
    width: 60.163710777626%;
}

.test-right.no-photo {
    width: 100%;
}

.review-widget>div>div {
    flex-wrap: wrap;
}

.test-title {}

.test-title .site-title h2 {
    padding-left: min(2.3125vw, 28px);
    letter-spacing: 0.18em;
}

.test-item {
    padding-left: 33px;
    padding-left: 5.2884615384615%;
    padding-top: clamp(16px, 2.6vw, 41px);
    padding-bottom: clamp(16px, 2.6vw, 41px);
}

.test-item p {
    font-family: var(--font-family-title);
    font-size: clamp(16px, 1.5vw, 20px);
    letter-spacing: 0.077em;
    line-height: 1.4;
    color: #fff;
    padding-bottom: clamp(20px, 1.8vw, 26px);
}

.test-btn {
    padding-right: 4px;
    margin-top: min(1.375vw, 22px);
}

.test-btn::before {
    position: absolute;
    content: "";
    right: clamp(362px, 31.491935483871vw, 416px);
    top: 51%;
    transform: translateY(-50%);
    background: #2d537c;
    height: 1px;
    width: 305px;
}

.test-btn .site-btn {
    /* width: 251px; */
    /*margin-right: 38px;*/
}

.test-arrows {
    display: none;
}

.test-arrows .slick-arrow img {}

.test-google {
    padding: 20px 0;
}

.test-google .review-widget>div>div>div {
    width: calc(100% / 3) !important;
}

/**/
/**/

.hp-sm {
    padding: 95px 0 190px;
    padding: clamp(60px, 6.5vw, 95px) 0;
}

.hp-sm::before {
    position: absolute;
    content: "";
    width: 222px;
    width: 13.875%;
    height: 1208px;
    height: 100%;
    top: 0;
    right: 0;
    background: var(--primary);
    pointer-events: none;
}

.sm-wrap {
    width: min(90%, 1356px);
    width: 84.75%;
    margin: auto;
}

.sm-title {
    padding-left: 3.5vw;
}

.sm-title .site-title {
    margin: auto;
}

.sm-title .site-title h2 {
    padding-left: min(2.3125vw, 28px);
}

.sm-list {
    padding: clamp(35px, 3.5vw, 51px) 0;
}

.sm-item {
    width: calc(100% / 3);
    padding: 12px 11.5px;
}

.sm-item>a {
    position: relative;
    display: block;
    outline: none;
    border: none;
    background: #808080;
}

.sm-img {
    position: relative;
}

.sm-img::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1;
    pointer-events: none;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    height: 100%;
    background: var(--primary);
    opacity: 0;
}

.sm-item>a:hover .sm-img::after {
    opacity: 80%;
}

.sm-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    filter: brightness(0) invert(1);
    opacity: 0;
    z-index: 1;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.sm-item>a:hover .sm-logo {
    opacity: 13%;
}

.sm-btn {}

.sm-btn .site-btn {
    width: clamp(250px, 25vw, 329px);
    margin: 1px auto;
}

/**/
/**/

.hp-cta {
    padding-top: 13px;
    padding-bottom: clamp(70px, 8.0625vw, 129px);
    overflow: hidden;
}

.hp-cta::before {
    position: absolute;
    content: "";
    width: 13.875%;
    height: min(6vw, 94px);
    top: 0;
    right: 0;
    background: var(--primary);
    pointer-events: none;
}

.cta-wrap {}

.cta-list {
    width: calc(100% + 2px);
    margin-left: -1px;
}

.cta-item {
    width: calc(100% / 6);
    padding: 1px;
}

.cta-item:nth-child(even) {
    margin-top: min(7.7403245942572%, 124px);
}

.cta-item>a {
    position: relative;
    display: block;
    outline: none;
    border: none;
    background: #808080;
}

.cta-item>a::before,
.cta-item>a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.cta-item>a::before {
    background: linear-gradient(90deg, transparent, #000);
    opacity: 45%;
    left: auto;
    right: 0;
    width: 90%;
}

.cta-item>a::after {
    background: var(--primary);
    opacity: 0;
}

.cta-item>a:hover::after {
    opacity: 80%;
}

.cta-img {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.cta-item>a:hover .cta-img {
    filter: grayscale(1);
}

.cta-img img,
.cta-img canvas {
    min-height: 410px;
}

.cta-logo {
    position: absolute;
    left: 50%;
    top: 6%;
    transform: translateX(-50%);
    filter: brightness(0) invert(1);
    opacity: 0;
    width: 162px;
    z-index: 2;
    max-width: 63%;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.cta-item>a:hover .cta-logo {
    opacity: 13%;
}

.cta-label {
    position: absolute;
    color: #fff;
    letter-spacing: 0.087em;
    bottom: 30px;
    bottom: 4.3165467625899%;
    right: 17px;
    right: 6.4150943396226%;
    z-index: 2;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.cta-label span {
    font-family: var(--font-family-title);
    font-size: clamp(20px, 1.83vw, 25px);
    letter-spacing: 0.087em;
    display: block;
}

.cta-label strong {
    font-size: clamp(24px, 2.167vw, 30px);
    text-transform: uppercase;
    white-space: nowrap;
    letter-spacing: 0.087em;
    display: block;
    padding: 0 7px;
}

/* FAQs */
.faq-title .site-title {
    margin: 0 auto;
}
#hp-faq .aios-faqs-default__item {
    background: none;
}
#hp-faq .aios-faqs-default__title {
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.025em;
    text-transform: none;
}
#hp-faq .aios-faqs-default__text p {
    margin: 0;
    font-size: clamp(12px, 1.05vw, 14.05px);
    letter-spacing: 0.05em;
    line-height: 1.7;
    color: #565656;
}


/**/

@media only screen and (max-width: 991px) {
    .ss-hero::after {
        width: 100%;
        left: 0;
        top: 0;
    }

    .ss-tagline {
        top: 50%;
    }

    .hp-wc {
        margin-top: 0;
        padding-top: clamp(0px, 5.5vw, 71px);
    }

    .wc-wrap {
        width: 90%;
        padding: 0;
    }

    .wc-left {
        width: 100%;
        padding: 40px 0;
    }

    .wc-title .site-title {
        margin: auto;
    }

    .wc-desc {
        padding: 18px 6vw 0;
    }

    .wc-desc p {
        font-size: 13px;
        text-align: center;
    }

    .wc-btn {
        padding: 20px 0;
        justify-content: center;
        gap: 10px;
    }

    .wc-btn .site-btn {
        margin: 0;
    }

    .wc-right {
        width: min(95%, 400px);
        margin: auto;
    }

    .fc-title {
        margin: 0;
    }

    .fl-wrap {
        width: 90%;
    }

    .fl-title {
        padding: 0;
        padding-bottom: 30px;
    }

    .fl-title .site-title {
        margin: auto;
    }

    .fl-address {
        font-size: clamp(11px, 1.33vw, 18px);
    }

    .fl-btn {
        bottom: 0;
    }

    .test-wrap {
        width: 100%;
        padding: 40px 5vw;
    }

    .test-left {
        width: min(100%, 400px);
        padding: 0;
        margin: auto;
    }

    .test-right {
        width: 100%;
        padding: 60px 0 30px;
    }

    .test-title .site-title {
        margin: auto;
    }

    .test-item {
        padding: 30px 0;
    }

    .test-item p {
        text-align: center;
        font-size: 17px;
    }

    .test-btn {
        margin: 20px auto;
        width: 100%;
        justify-content: center;
    }

    .test-btn::before {
        display: none;
    }

    .test-arrows {
        order: -1;
        width: 100%;
        justify-content: center;
        margin-bottom: 30px;
    }

    .test-btn .site-btn {
        margin: 0;
    }

    .sm-wrap {
        width: 90%;
    }

    .sm-item {
        padding: 8px;
    }
}


/* Galaxy Tab 3(portrait) | Galaxy S5(landscape) */
@media only screen and (max-width: 767px) {
    .fc-item {
        width: 100%;
    }

    .fl-item {
        width: 100% !important;
        margin: 0 !important;
        padding: 1px;
    }

    .fl-item:nth-child(2)>a::before,
    .fl-item:nth-child(3)>a::before {
        display: none;
    }

    .fl-img canvas,
    .fl-img img {
        max-height: 400px;
        min-height: 265px;
    }

    .fl-img::before {
        height: 60%;
    }

    .fl-price {
        font-size: 22px;
        text-align: center;
    }

    .fl-price::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .fl-address {
        font-size: 16px;
        text-align: center;
        padding-bottom: 35px;
    }

    .fl-address::before,
    .fl-address::after {
        bottom: 8px;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }

    .fl-address::after {
        transform: translateX(-50%) rotate(90deg);
    }

    .fl-logo {
        top: 32%;
        max-width: 26% !important;
    }

    .fl-btn {
        position: relative;
        right: auto;
        bottom: auto;
        margin: 30px auto;
        width: 100%;
        justify-content: center;
    }

    .fl-btn::before {
        display: none;
    }

    .fl-arrows {
        order: -1;
        width: 100%;
        justify-content: center;
        margin-bottom: 30px;
    }

    .fl-btn .site-btn {
        margin: 0;
    }

    .sm-item {
        width: 50%;
        padding: 6px;
    }

    .cta-item {
        width: calc(100% / 3);
        margin: 0 !important;
    }

    .cta-img img,
    .cta-img canvas {
        max-height: 500px;
    }

    .test-google .review-widget>div>div>div {
        width: 100% !important;
        flex: initial !important;
    }
}


@media only screen and (max-width: 400px) {
    .ss-tagline h1 {
        font-size: 20px;
    }
    .ss-tagline h2 {
        font-size: 12px;
        line-height: 1;
    }
    .sm-item {
        width: 100%;
        padding: 4px 0;
    }

    .cta-item {
        width: 50%;
    }
}

/* Galaxy S5(portrait) | iPod Touch(landscape) | iPod Touch(portrait) */