/**************** ROOT ****************//**************** ROOT ****************//**************** ROOT ****************/

:root {
    --white: hsla(0,0%,100%,1);     --black: hsla(0,0%,0%,1);       --black-6: hsla(0,0%,6%,1);     --black-12: hsla(0,0%,12%,1);

    --grey-18: hsla(0,0%,18%,1);    --grey-24: hsla(0,0%,24%,1);
    --grey-30: hsla(0,0%,30%,1);    --grey-36: hsla(0,0%,36%,1);    --grey-42: hsla(0,0%,42%,1);    --grey-48: hsla(0,0%,48%,1);
    --grey-54: hsla(0,0%,54%,1);    --grey-60: hsla(0,0%,60%,1);    --grey-66: hsla(0,0%,66%,1);    --grey-72: hsla(0,0%,72%,1);
    --grey-78: hsla(0,0%,78%,1);    --grey-84: hsla(0,0%,84%,1);    --grey-90: hsla(0,0%,90%,1);    --grey-92: hsla(0,0%,92%,1);
    --grey-94: hsla(0,0%,94%,1);    --grey-96: hsla(0,0%,96%,1);    --grey-98: hsla(0,0%,98%,1);

    --orange: hsla(36,100%,60%,1);
    --green: hsla(120,100%,42%,1);

}



/**************** BODY ****************//**************** BODY ****************//**************** BODY ****************/

body {min-width: 320px; font-family: 'Arial Hebrew', sans-serif; font-weight: 400; font-stretch: 100%; font-size: 16px; line-height: 1; color: var(--black-12); background-color: var(--white);}

.ccbox {width: 100%; height: auto; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: center;}
.cwbox {width: 100%; max-width: 1440px; padding: 0px 36px;}
.cwbox.mini {max-width: 1080px;}

#page {width: 100%; height: auto; background-color: transparent; overflow: hidden; z-index: 1;}
#content {width: 100%; background-color: transparent; z-index: 10;}

@media screen and (max-width: 1200px) {
    .cwbox {padding: 0px 24px;}
}

@media screen and (max-width: 800px) {
    .cwbox {padding: 0px 18px;}
}



/**************** HEADER ****************//**************** HEADER ****************//**************** HEADER ****************/

#header {width: 100%; height: 72px; background-color: var(--white); z-index: 15;}
#header .ccbox {height: 100%; background-color: var(--white); box-shadow: 0px 3px 15px 0px hsla(0,0%,0%,0.06); transition: box-shadow ease 240ms; z-index: 100;}
#header.open .ccbox {box-shadow: 0px 0px 0px 1px hsla(0,0%,90%,1);}
#header .cwbox {height: 100%;}

#header .logo {height: 100%; padding-bottom: 3px;}
#header .logo svg {display: block; height: 18px; aspect-ratio: 107 / 11; fill: var(--orange);}

#header .menu {height: 100%;}
#header .menu .item {height: 100%; margin: 0px 48px 0px 0px; padding: 3px 0px 0px 0px; font-weight: 400; font-size: 16px; color: var(--black-12); border-bottom: solid 3px transparent; transition: color ease 240ms, border-bottom-color ease 240ms;}
#header .menu .item:hover {color: var(--orange); border-bottom-color: var(--orange);}

#header .menu .select {height: 100%; position: relative;}
#header .menu .select .head {height: 100%;}
#header .menu .select .head button {height: 100%; padding: 0px; font-weight: 400; font-size: 16px; color: var(--black-12); transition: color ease 240ms}
#header .menu .select .head button > i {height: 15px; margin: 0px 12px 0px 0px;}
#header .menu .select .head button > i > svg {transform: rotate(90deg); fill: var(--black-12); transition: all ease 240ms;}
#header .menu .select .head button:hover {color: var(--orange);}
#header .menu .select .head button:hover > i > svg {fill: var(--orange);}
#header .menu .select.open .head button {color: var(--orange); border-bottom-color: var(--orange);}
#header .menu .select.open .head button > i > svg {transform: rotate(270deg); fill: var(--orange);}

#header .menu .select .drop {display: none; position: absolute; top: calc(100% - 12px); right: -18px; width: auto; min-width: 160px; padding: 15px 12px; background-color: var(--white); box-shadow: 0px 3px 15px hsla(0,0%,0%,0.06); border-radius: 12px;}
#header .menu .select .drop .flex {width: 396px;}
#header .menu .select .drop .option {display: block; width: 50%; padding: 9px 12px; font-weight: 400; font-size: 16px; white-space: nowrap; color: var(--black-12); transition: color ease 240ms;}
#header .menu .select .drop .option:hover {color: var(--orange);}

#header .menu-link {display: none; width: 42px; height: 42px; margin-top: 9px; border: solid 1px var(--orange); border-radius: 9px;}
#header .menu-link i {display: block; position: absolute; left: 10px; width: 20px; height: 2px; background: var(--black-12); border-radius: 2px; transition: all ease 300ms;}
#header .menu-link i:nth-child(1) {top: 10px;}
#header .menu-link i:nth-child(2) {top: 19px;}
#header .menu-link i:nth-child(3) {top: 28px;}

#header.open .menu-link i:nth-child(1) {top: 19px; left: 8px; width: 24px; transform: rotate(45deg);}
#header.open .menu-link i:nth-child(2) {opacity: 0;}
#header.open .menu-link i:nth-child(3) {top: 19px; left: 8px; width: 24px; transform: rotate(-45deg);}

#menu {position: fixed; top: -101%; right: 0px; width: 100%; height: 100%; padding-top: 61px; background-color: var(--white); transition: top ease 360ms; z-index: 50;}
#header.open #menu {top: 0%;}
#menu .main-box {width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto;}

#menu .item {width: 100%; border-bottom: solid 1px var(--grey-90);}
#menu .item .link {display: block; width: 100%; padding: 18px 18px; text-align: start; font-weight: 400; font-size: 16px; line-height: 20px; color: var(--black-12);}

#menu .slider {width: 100%;}
#menu .slider .head {width: 100%; height: auto; padding: 0px;}
#menu .slider .head button {width: 100%; height: 100%; padding: 18px 18px; font-weight: 400; font-size: 16px; line-height: 20px; color: var(--black-12); transition: color ease 240ms}
#menu .slider .head button > b {text-align: start;}
#menu .slider .head button > i {height: 15px; margin: 0px 12px 0px 0px;}
#menu .slider .head button > i > svg {transform: rotate(90deg); fill: var(--orange); transition: all ease 240ms;}
#menu .slider.open .head button {color: var(--orange);}
#menu .slider.open .head button > i > svg {transform: rotate(270deg); fill: var(--orange);}

#menu .slider .drop {display: none; width: 100%; padding: 12px 0px; background-color: var(--grey-96); border-top: solid 1px var(--grey-90);}
#menu .slider .drop .link {padding: 12px 18px; color: var(--black-12);}


@media screen and (max-width: 800px) {
    #header .logo {padding-bottom: 3px;}
    #header .logo svg {height: 18px;}
    #header {height: 60px;}
    #header .menu {display: none;}
    #header .menu-link {display: block;}
}



/**************** FOOTER ****************//**************** FOOTER ****************//**************** FOOTER ****************/

#footer {width: 100%; margin-top: 120px; background-color: var(--grey-96); z-index: 5;}

#footer .contacts {justify-content: space-between; width: 100%; padding: 36px 0px 30px 0px; border-bottom: solid 1px var(--grey-90); overflow: hidden;}

#footer .contacts .logo-box {width: auto; padding: 6px 0px 0px 0px;}
#footer .contacts .logo-box .logo {display: block; height: 16px; aspect-ratio: 107 / 11;}
#footer .contacts .logo-box .logo svg {display: block; width: 100%; height: 100%; fill: var(--orange);}
#footer .contacts .logo-box .slogan {margin-top: 10px; font-weight: 400; font-size: 16px; color: var(--black-12);}

#footer .contacts .contact {width: auto;}
#footer .contacts .contact .icon {width: 54px; height: 54px; background-color: var(--white); border-radius: 100%;}
#footer .contacts .contact .icon svg {display: block; aspect-ratio: 1 / 1; fill: var(--orange);}
#footer .contacts .contact.phone .icon svg {width: 21px; transform: scale(-1,1);}
#footer .contacts .contact.email .icon svg {width: 24px;}
#footer .contacts .contact .info {padding: 6px 21px 0px 0px;}
#footer .contacts .contact .info .label {font-weight: 400; font-size: 16px; color: var(--grey-54);}
#footer .contacts .contact .info .link {display: block; margin-top: 6px; font-weight: 700; font-size: 22px; line-height: 22px; text-align: right; color: var(--black-12); transition: color ease 240ms;}
#footer .contacts .contact.phone .info .link {font-size: 24px;}
#footer .contacts .contact .info .link:hover {color: var(--orange);}

#footer .links-wrapper.flex {flex-wrap: nowrap;}
#footer .links-box {padding: 33px 0px 48px 0px;}
#footer .links-box .link {width: 100%; padding: 9px 0px 9px 0px;}
#footer .links-box .link a {display: block; font-weight: 400; font-size: 16px; color: var(--black-12); transition: color ease 240ms;}
#footer .links-box .link a:hover {color: var(--orange);}

#footer .links-box.main {width: 33.333333%;}
#footer .links-box.side {width: 66.666666%;}
#footer .links-box.side .link {width: 33.333333%;}

@media screen and (max-width: 1500px) {
    #footer .links-box.main {width: 20%;}
    #footer .links-box.side {width: 66%;}
}

@media screen and (max-width: 1000px) {
    #footer {margin-top: 90px;}
    #footer .links-box.main {width: 25%;}
    #footer .links-box.side {width: 50%;}
    #footer .links-box.side .link {width: 50%;}
}

@media screen and (max-width: 750px) {
    #footer .contacts .logo-box {width: 100%; padding: 6px 0px 6px 0px;}
    #footer .contacts .contact {width: 100%; padding: 24px 0px 0px 0px;}
    #footer .links-box.main {width: 33.333333%;}
    #footer .links-box.side {width: 66.666666%;}
}

@media screen and (max-width: 600px) {
    #footer .links-wrapper.flex {flex-wrap: wrap;}
    #footer .links-box.main {width: 100%; padding-bottom: 9px;}
    #footer .links-box.main .link {width: 50%;}
    #footer .links-box.side {width: 100%; padding-top: 9px;}
}


/*** TRIANGLE ***/

#footer .triangle.top-left {
    position: absolute; bottom: 100%; right: calc(100% + 36px); width: 0px; height: 0px;
    border-left: solid 60px transparent; border-right: solid 240px transparent;
    border-top: solid 0px transparent; border-bottom: solid 120px var(--grey-96);
}
#footer .triangle.top-left .triangle.inside {
    position: absolute; top: -30px; right: -300px; width: 0px; height: 0px;
    border-left: solid 240px transparent; border-right: solid 0px transparent;
    border-top: solid 0px transparent; border-bottom: solid 120px var(--white);
}

#footer .triangle.top-right {
    position: absolute; bottom: 100%; left: calc(100% + 36px); width: 0px; height: 0px;
    border-left: solid 240px transparent; border-right: solid 60px transparent;
    border-top: solid 0px transparent; border-bottom: solid 120px var(--grey-96);
}

@media screen and (min-width: 2000px) {
    #footer .triangle {display: none !important;}
}

@media screen and (max-width: 1500px) {
    #footer .triangle {display: none !important;}
}


/*** FOOTER BOXES ***/

#footer .ui-boxes img {display: block; width: 100%; height: 100%;}
#footer .ui-boxes.footer-box {position: absolute; top: -30px; right: -60px; width: 60px; aspect-ratio: 7 / 8;}
#footer .ui-boxes.footer-box img {transform: scale(-1,1);}
#footer .ui-boxes.footer-boxes {position: absolute; top: 150px; left: -120px; width: 180px; aspect-ratio: 99 / 79;}

@media screen and (max-width: 1500px) {
    #footer .ui-boxes.footer-box {display: none;}
    #footer .ui-boxes.footer-boxes {top: 150px; left: 24px;}
}

@media screen and (max-width: 750px) {
    #footer .ui-boxes.footer-boxes {top: 24px; left: 18px; width: 150px;}
}

@media screen and (max-width: 400px) {
    #footer .ui-boxes.footer-boxes {width: 120px;}
}

@media screen and (max-width: 350px) {
    #footer .ui-boxes.footer-boxes {width: 90px;}
}



/**************** INDEX HERO ****************//**************** INDEX HERO ****************//**************** INDEX HERO ****************/

.index-hero {width: 100%; margin: 60px 0px 60px 0px;}

.index-hero .triangle {
    position: absolute; bottom: 0px; left: 50%; width: 50%; height: 50%;
    clip-path: polygon(0% 100%, 100% 100%, 100% 0%); background: linear-gradient(90deg, hsla(0,0%,96%,1) 0% , hsla(0,0%,96%,0.24) 100%);
}

.index-hero .cwbox.flex {flex-direction: row-reverse; align-items: stretch;}

.index-hero .content {width: 50%; padding: 60px 60px 60px 0px;}
.index-hero .content .title {width: 100%; font-weight: 700; font-size: 48px; line-height: 50px; color: var(--black-12);}
.index-hero .content .list {width: 100%; padding: 30px 0px 30px 0px; font-weight: 400; font-size: 24px; line-height: 28px; color: var(--black-12);}
.index-hero .content .list .item {padding: 0px 40px 12px 0px;}
.index-hero .content .list .item svg {display: block; position: absolute; right: 0px; top: 0px; width: 28px; height: 28px; fill: var(--orange);}
.index-hero .content .button-box {width: 100%;}
.index-hero .content .button {padding: 15px 36px; font-size: 24px; color: var(--black); background-color: var(--orange); border-radius: 9px;}
.index-hero .content .button svg.arr {display: block; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; fill: var(--black); transition: all ease 240ms;}

.index-hero .images {width: 50%;}
.index-hero .images img {display: block; position: absolute;}
.index-hero .images img.dots {top: 50%; left: 50%; width: 100%; aspect-ratio: 1004 / 589; transform: translate(-50%,-60%) scale(-1,1);}
.index-hero .images img.trucks {top: 50%; left: 50%; width: 120%; aspect-ratio: 1030 / 575; transform: translate(-50%,-55%) scale(-1,1);}

.index-hero .boxes-wrapper {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;}
.index-hero .boxes-wrapper .cwbox {width: 100%; height: 100%; position: relative;}
.index-hero .ui-boxes img {display: block; width: 100%; height: 100%;}
.index-hero .ui-boxes.hero-box {position: absolute; bottom: -30px; left: -60px; width: 60px; aspect-ratio: 20 / 23;}
.index-hero .ui-boxes.hero-boxes {position: absolute; top: -30px; right: -90px; width: 120px; aspect-ratio: 180 / 143;}
.index-hero .ui-boxes.hero-boxes img {transform: scale(-1,1);}


@media screen and (max-width: 1500px) {
    .index-hero {width: 100%; margin: 45px 0px 60px 0px;}
    .index-hero .content {width: 50%; padding: 60px 30px 60px 0px;}
    .index-hero .ui-boxes.hero-box {bottom: 0px; left: 30px; width: 48px;}
    .index-hero .ui-boxes.hero-boxes {top: 0px; right: 30px; width: 90px;}
}

@media screen and (max-width: 1300px) {
    .index-hero {width: 100%; margin: 30px 0px 60px 0px;}
    .index-hero .content {width: 50%; padding: 36px 24px 36px 0px;}
}

@media screen and (max-width: 800px) {
    .index-hero {width: 100%; margin: 30px 0px 120px 0px;}
    .index-hero .triangle {bottom: -45px; left: 0px; width: 100%; height: 300px;}
    .index-hero .cwbox.flex {flex-direction: row-reverse; align-items: flex-start;}
    .index-hero .content {width: 100%; padding: 30px 30px 45px 30px;}
    .index-hero .images {width: 100%;}
    .index-hero .images img.dots {position: relative; top: auto; left: auto; transform: translate(0%,0%) scale(-1,1);}
    .index-hero .images img.trucks {top: auto; bottom: 0px; transform: translate(-50%,5%) scale(-1,1);}
    .index-hero .ui-boxes.hero-box {bottom: -50px; left: auto; right: 24px; width: 36px; transform: translate(0%,0%) scale(-1,1);}
    .index-hero .ui-boxes.hero-boxes {top: auto; bottom: calc(100vw / 2); right: auto; left: 24px; width: 72px; transform: translate(0%,0%) scale(-1,1);}
}

@media screen and (max-width: 600px) {
    .index-hero .content {width: 100%; padding: 18px 0px 45px 0px;}
    .index-hero .content .title {font-size: 36px; line-height: 38px;}
    .index-hero .content .list {padding: 30px 0px 30px 0px; font-size: 20px; line-height: 24px;}
    .index-hero .content .list .item {padding: 0px 36px 12px 0px;}
    .index-hero .content .list .item svg {width: 24px; height: 24px; fill: var(--orange);}
}



/**************** MIDLINE ****************//**************** MIDLINE ****************//**************** MIDLINE ****************/

.midline {width: 100%; margin: 90px 0px 90px 0px;}

.midline .polygon-main {
    position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;
    clip-path: polygon(0% 0%, 50% 60px, 100% 0%, 100% 100%, 50% 100%, 0% 100%); background-color: hsla(42,100%,54%,1);
}

.midline .dots {position: absolute; width: 80px; aspect-ratio: 80 / 111; opacity: 0.6; overflow: hidden;}
.midline .dots svg {display: block; width: 100%; height: 100%; fill: var(--white);}
.midline .dots.top-right {top: 0px; right: 0px;}
.midline .dots.bottom-left {bottom: 55px; left: 0px;}

.midline .images {width: 50%;}
.midline .images img {display: block; position: absolute;}
.midline .images img.truck {bottom: 0px; left: calc(50% + 60px); height: 90%; aspect-ratio: 103 / 56; transform: translateX(-50%) scale(-1,1); filter: blur(3px);}
.midline .images img.man {bottom: 0px; left: calc(50% + 60px); height: 105%; aspect-ratio: 401 / 467; transform: translateX(-50%);}

.midline .content {width: 50%; padding: 120px 60px 90px 60px;}
.midline .content .text {width: 100%; max-width: 420px; font-weight: 700; font-size: 30px; line-height: 32px; color: var(--white);}
.midline .content .subtext {width: 100%; max-width: 480px; margin: 12px 0px 30px 0px; font-weight: 400; font-size: 16px; line-height: 20px; color: var(--white);}
.midline .content .button-box {width: 100%;}
.midline .content .button {padding: 15px 36px; font-size: 24px; color: var(--black-12); background-color: var(--white); border-radius: 9px;}
.midline .content .button svg.arr {display: block; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; fill: var(--black-12); transition: all ease 240ms;}

.midline .polygon-bottom {
    position: absolute; bottom: -30px; left: 0px; width: 100%; height: 90px;
    clip-path: polygon(0% 0%, 50% 60px, 100% 0%, 100% 100%, 50% 100%, 0% 100%); background-color: var(--white);
}
.midline .polygon-bottom-right {
    position: absolute; bottom: -60px; left: 50%; width: 50%; height: 120px;
    clip-path: polygon(100% 0%, 0% 60px, calc(100% - 60px) 100%, 100% 120px); background-color: var(--grey-96);
}

.midline .boxes-wrapper {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;}
.midline .boxes-wrapper .cwbox {width: 100%; height: 100%; position: relative;}
.midline .ui-boxes img {display: block; width: 100%; height: 100%;}
.midline .ui-boxes.midline-box {position: absolute; bottom: -30px; right: -75px; width: 90px; aspect-ratio: 20 / 23;}
.midline .ui-boxes.midline-boxes {position: absolute; top: -60px; left: -90px; width: 180px; aspect-ratio: 180 / 143;}
.midline .ui-boxes.midline-boxes img {transform: scale(-1,1);}

@media screen and (max-width: 1500px) {
    .midline .dots {width: 60px;}
    .midline .images img.truck {left: 50%; width: 100%; height: auto;}
    .midline .images img.man {left: 50%;}
    .midline .ui-boxes.midline-box {bottom: 0px; right: 30px; width: 60px;}
    .midline .ui-boxes.midline-boxes {top: -30px; left: 20px; width: 120px;}
    .midline .polygon-bottom-right {bottom: -30px; height: 90px; clip-path: polygon(100% 0%, 0% 60px, calc(100% - 60px) 100%, 100% 90px);}
}

@media screen and (max-width: 1200px) {
    .midline .images img.truck {width: 125%;}
}

@media screen and (max-width: 1000px) {
    .midline .images img.man {height: 90%;}
    .midline .content {width: 50%; padding: 120px 36px 90px 18px;}
}

@media screen and (max-width: 750px) {
    .midline .polygon-main {clip-path: polygon(0% 0%, 50% 30px, 100% 0%, 100% 100%, 50% 100%, 0% 100%);}
    .midline .dots {width: 48px;}
    .midline .dots.top-right {display: none;}
    .midline .dots.bottom-left {bottom: 290px; left: 0px;}
    .midline .cwbox.flex-istretch {flex-direction: column-reverse;}
    .midline .images {width: 100%; height: 360px;}
    .midline .images img.man {height: 100%;}
    .midline .content {width: 100%; padding: 84px 0px 48px 0px;}
    .midline .polygon-bottom {height: 60px; clip-path: polygon(0% 0%, 50% 30px, 100% 0%, 100% 100%, 50% 100%, 0% 100%);}
    .midline .polygon-bottom-right {bottom: -30px; height: 60px; clip-path: polygon(100% 0%, 0% 30px, calc(100% - 30px) 100%, 100% 60px);}
    .midline .ui-boxes.midline-box {bottom: -12px;}
    .midline .ui-boxes.midline-boxes {top: -22px; left: 12px; width: 90px;}
}


/**************** INDEX REVIEWS LIST ****************/

.index-reviews {width: 100%; margin: 90px 0px 90px 0px; padding: 36px 0px 60px 0px; background-color: var(--grey-96);}
.index-reviews .list-title {width: 100%; padding: 0px 0px 30px 0px; font-weight: 700; font-size: 36px; line-height: 38px; text-align: center; color: var(--black-12);}
.index-reviews .list-wrapper {margin: -18px;}
.index-reviews .review-pad {width: 33.3333%; padding: 18px;}
.index-reviews .review-pad:nth-child(4) {display: none;}
.index-reviews .review-box {width: 100%; margin-bottom: 18px; padding: 18px; background-color: var(--white); border-radius: 12px; box-shadow: 0px 3px 15px hsla(0,0%,0%,0.09);}
.index-reviews .review-box:last-child {margin-bottom: 0px;}
.index-reviews .review-box .top-line {width: 100%;}
.index-reviews .review-box .top-line .rating {height: 16px;}
.index-reviews .review-box .top-line .date svg {display: block; width: 16px; height: 16px; margin: -1px 0px 0px 9px; fill: var(--orange);}
.index-reviews .review-box .top-line .date .label {font-weight: 700; font-size: 16px; line-height: 16px; color: var(--black-12);}
.index-reviews .review-box .text {width: 100%; margin-top: 15px; font-weight: 400; font-size: 16px; line-height: 20px; color: var(--black-12);}


@media screen and (max-width: 1200px) {
    .index-reviews .list-wrapper {margin: -12px;}
    .index-reviews .review-pad {padding: 12px;}
}

@media screen and (max-width: 1000px) {
    .index-reviews .review-pad {width: 50%;}
    .index-reviews .review-pad:nth-child(4) {display: block;}
}

@media screen and (max-width: 800px) {
    .index-reviews .list-wrapper {margin: -12px;}
    .index-reviews .review-pad {padding: 12px;}
}

@media screen and (max-width: 600px) {
    .index-reviews .review-pad {width: 100%;}
}



/**************** CONTENT LIST ****************//**************** CONTENT LIST ****************//**************** CONTENT LIST ****************/

.content-list {width: 100%; padding: 0px 0px 0px 0px;}
.content-list .list-title {width: 100%; padding: 0px 0px 30px 0px; font-weight: 700; font-size: 36px; line-height: 38px; text-align: center; color: var(--black-12);}
.content-list .list-subtitle {width: 100%; margin: -12px 0px 30px 0px; font-weight: 400; font-size: 24px; line-height: 28px; text-align: center; color: var(--black-12);}
.content-list .list-wrapper {margin: -18px;}

.content-list .item-pad {width: 33.3333%; padding: 18px;}
.content-list .item {display: block; width: 100%; position: relative; box-sizing: border-box; overflow: hidden;}


@media screen and (max-width: 1200px) {
    .content-list .list-wrapper {margin: -12px;}
    .content-list .item-pad {padding: 12px;}
}

@media screen and (max-width: 800px) {
    .content-list .list-wrapper {margin: -9px;}
    .content-list .item-pad {padding: 9px;}
}

@media screen and (max-width: 600px) {
    .content-list .list-subtitle {font-size: 20px; line-height: 24px;}
}



/**************** HERO LIST ****************/

.content-list.hero-list .item {padding: 30px; background: linear-gradient(180deg, hsla(0,0%,96%,1) 0% , hsla(0,0%,96%,0) 100%); border-radius: 18px;}
.content-list.hero-list .item .image {width: 100%;}
.content-list.hero-list .item .image img {display: block; width: 90px; aspect-ratio: 1 / 1;}
.content-list.hero-list .item .info {width: 100%; text-align: center; box-sizing: border-box;}
.content-list.hero-list .item .info .title {padding: 12px 0px 12px 0px; font-weight: 700; font-size: 24px; line-height: 28px; color: var(--black-12);}
.content-list.hero-list .item .info .desc {font-weight: 400; font-size: 16px; line-height: 18px; color: var(--black-12);}

@media screen and (max-width: 600px) {
    .content-list.hero-list .item-pad {width: 100%;}
    .content-list.hero-list .item {padding: 18px;}
}



/**************** MOVERS LIST ****************/

.content-list.movers .item {padding: 18px; background-color: var(--white); border: solid 1px var(--orange); border-radius: 18px; transition: background-color ease 240ms;}
.content-list.movers .item:hover {background-color: var(--grey-96);}
.content-list.movers .image-box {width: 100%; flex-wrap: nowrap;}
.content-list.movers .image {flex: 0 0 auto; width: 90px; aspect-ratio: 1 / 1; background-color: var(--grey-96); border-radius: 12px; overflow: hidden;}
.content-list.movers .image img {display: block; width: 100%; height: 100%; object-fit: cover;}
.content-list.movers .info {flex: 1 1 auto; max-width: 100%; padding: 2px 18px 0px 0px;}
.content-list.movers .info .name {font-weight: 700; font-size: 24px; line-height: 28px; color: var(--black-12);}
.content-list.movers .info .data-line {width: 100%; margin: 12px 0px 0px 0px;}
.content-list.movers .info .data {margin: 0px 0px 0px 24px; font-size: 16px; line-height: 18px; color: var(--black-12);}
.content-list.movers .info .data .star {display: block; width: 16px; aspect-ratio: 1 / 1; margin-left: 6px; fill: var(--orange);}
.content-list.movers .info .data .rating {font-weight: 700;}
.content-list.movers .info .data .label {margin-left: 6px; color: var(--grey-60);}
.content-list.movers .info .data .value {font-weight: 700;}
.content-list.movers .about {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    width: 100%; margin-top: 18px; font-weight: 400; font-size: 14px; line-height: 18px; color: var(--black-12); overflow: hidden;
}


@media screen and (max-width: 1200px) {
    .content-list.movers .item-pad {width: 50%;}
}

@media screen and (max-width: 750px) {
    .content-list.movers .item-pad {width: 100%; padding: 12px;}
}



/**************** ARTICLES LIST ****************/

.content-list.articles .item {background-color: var(--white); box-shadow: 0px 3px 15px hsla(0,0%,0%,0.09); border-radius: 18px;}
.content-list.articles .item .image {width: 100%; aspect-ratio: 2 / 1; background-color: var(--grey-96);}
.content-list.articles .item .image img {display: block; width: 100%; height: 100%; object-fit: cover;}
.content-list.articles .item .info {width: 100%; padding: 18px; box-sizing: border-box;}
.content-list.articles .item .info .data-line {width: 100%; margin-bottom: 12px; font-weight: 400; font-size: 14px; color: var(--black-12);}
.content-list.articles .item .info .data-line .data-box {padding: 0px 0px 0px 30px;}
.content-list.articles .item .info .data-line .data-box.date svg {display: block; width: 12px; height: 12px; margin: 0px 0px 0px 9px; fill: var(--grey-60);}
.content-list.articles .item .info .data-line .data-box .label {margin-left: 4px; font-weight: 300; color: var(--grey-54);}
.content-list.articles .item .info .title {margin-bottom: 12px; font-weight: 700; font-size: 24px; line-height: 28px; color: var(--black-12);}
.content-list.articles .item .info .desc {font-weight: 400; font-size: 14px; line-height: 18px; color: var(--black-12);}

.content-list.articles.index .item-pad:nth-child(4) {display: none;}

@media screen and (max-width: 800px) {
    .content-list.articles .item-pad {width: 50%;}
    .content-list.articles.index .item-pad:nth-child(4) {display: block;}
    .content-list.articles .item .info .title {font-size: 24px; line-height: 28px;}
    .content-list.articles .item .info .desc {font-size: 14px; line-height: 18px;}
}

@media screen and (max-width: 600px) {
    .content-list.articles .item-pad {width: 100%;}
}



/**************** PAGE TITLE ****************//**************** PAGE TITLE ****************//**************** PAGE TITLE ****************/

.page-title {width: 100%; padding: 36px 0px 30px 0px;}

.page-title .crumbs {width: 100%; padding: 0px 0px 12px 0px;}
.page-title .crumbs .crumb {display: block; margin: 0px 0px 0px 12px; font-weight: 400; font-size: 16px; color: var(--orange);}
.page-title .crumbs .sep {display: block; font-weight: 700; font-size: 16px; color: var(--black-12);}

.page-title .title {width: 100%; font-weight: 700; font-size: 48px; line-height: 50px; color: var(--black-12);}
.page-title .subtitle {width: 100%; margin: 15px 0px 3px 0px; font-weight: 400; font-size: 20px; line-height: 24px; color: var(--black-12);}

.page-title .info {width: 100%; padding: 6px 0px 0px 0px; font-weight: 700; font-size: 16px; color: var(--black-12);}
.page-title .info .data-box {padding: 9px 0px 0px 48px;}
.page-title .info .data-box:last-child {padding: 9px 0px 0px 0px;}
.page-title .info .data-box.date svg {display: block; width: 14px; height: 14px; margin: 0px 0px 0px 12px; fill: var(--grey-60);}
.page-title .info .data-box .label {margin-left: 6px; font-weight: 300; color: var(--grey-54);}


@media screen and (max-width: 800px) {
    .page-title .title {font-size: 36px; line-height: 38px;}
    .page-title .subtitle {margin: 18px 0px 0px 0px; font-size: 16px; line-height: 20px; color: var(--black-12);}
}





/**************** ARTICLE CONTENT ****************//**************** ARTICLE CONTENT ****************//**************** ARTICLE CONTENT ****************/

.article {width: 100%; padding: 0px 0px 0px 0px; font-weight: 400; font-size: 16px; line-height: 20px; color: var(--black-12);}
.article .logo {width: 100%; aspect-ratio: 16 / 9; margin-bottom: 30px;}
.article .logo img {display: block; width: 100%; height: 100%; object-fit: cover;}
.article h2, .article h3, .article h4 {width: 100%; padding: 12px 0px 12px 0px; font-weight: 700; font-size: 20px; line-height: 24px;}
.article h2:first-child, .article h3:first-child, .article h4:first-child {padding: 0px 0px 12px 0px;}
.article p {width: 100%; padding: 0px 0px 12px 0px; box-sizing: border-box;}
.article a {font-weight: 700; color: var(--orange);}
.article b {font-weight: 700;}
.article strong {font-weight: 700;}
.article ul, .article ol {padding: 0px; list-style: none; box-sizing: border-box;}
.article li {width: 100%; padding: 0px 18px 12px 0px;}
.article li::after {content: '•'; display: block; position: absolute; top: 0px; right: 0px; font-weight: 700;}
.article img {display: block; width: 100%; height: auto;}
.article iframe {display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;}



/**************** MOVER PAGE ****************//**************** MOVER PAGE ****************//**************** MOVER PAGE ****************/

.page-title .mover-image-box {width: 100%; flex-direction: row-reverse; flex-wrap: nowrap;}
.page-title .mover-image-box .image {flex: 0 0 auto; width: 160px; aspect-ratio: 1 / 1; background-color: var(--grey-96); border-radius: 12px; overflow: hidden;}
.page-title .mover-image-box .image img {display: block; width: 100%; height: 100%; object-fit: cover;}
.page-title .mover-image-box .info {flex: 1 1 auto; max-width: 100%; padding: 0px 0px 0px 12px;}
.page-title .mover-image-box .info .crumbs {width: 100%; padding: 0px 0px 15px 0px;}
.page-title .mover-image-box .info h1 {font-weight: 700; font-size: 48px; line-height: 50px; color: var(--black-12);}
.page-title .mover-image-box .info .owner {margin-top: 12px; font-weight: 400; font-size: 24px; line-height: 28px; color: var(--black-12);}
.page-title .mover-image-box .info .rating {margin-top: 18px; height: 20px;}
.page-title .mover-image-box .info .rating .stars-line {height: 100%; margin: 0px 0px 0px 6px;}
.page-title .mover-image-box .info .rating .stars-line .star {margin: 0px 0px 0px 6px;}
.page-title .mover-image-box .info .rating .value {font-weight: 700; font-size: 24px; line-height: 24px; color: var(--black-12);}

@media screen and (max-width: 800px) {
    .page-title .mover-image-box .image {width: 90px;}
    .page-title .mover-image-box .info .crumbs {padding: 0px 0px 12px 0px;}
    .page-title .mover-image-box .info h1 {font-size: 36px; line-height: 38px;}
    .page-title .mover-image-box .info .owner {margin-top: 9px; font-size: 20px; line-height: 24px;}
    .page-title .mover-image-box .info .rating {margin-top: 12px;}
}


.mover-data-list {width: 100%;}
.mover-data-side.about {width: 50%; padding-left: 15px;}
.mover-data-side.reviews {width: 50%; padding-right: 15px;}
.mover-data-box {width: 100%; margin-bottom: 30px; padding: 18px; background-color: var(--grey-96);}
.mover-data-box:last-child {margin-bottom: 0px;}
.mover-data-box .title {width: 100%; padding: 0px 0px 15px 0px; font-weight: 700; font-size: 24px; line-height: 28px; color: var(--black-12);}
.mover-data-box .data-list {width: 100%;}
.mover-data-box .data-list .list-wrapper {margin: -6px;}
.mover-data-box .data-pad {width: 50%; padding: 6px;}
.mover-data-box .data-pad.w100pc {width: 100%;}
.mover-data-box .data-box {width: 100%; background-color: var(--white); border-radius: 12px; box-shadow: 0px 3px 15px hsla(0,0%,0%,0.03);}
.mover-data-box .data-box {flex-wrap: nowrap;}
.mover-data-box .data-box .icon {flex: 0 0 auto; width: 30px; height: 30px; margin: 12px; padding: 6px; background-color: var(--orange); border-radius: 100%; overflow: hidden;}
.mover-data-box .data-box .icon svg {display: block; width: 100%; height: 100%; fill: var(--white);}
.mover-data-box .data-box .value {flex: 1 1 auto; max-width: 100%; padding: 7px 0px 6px 12px; font-weight: 700; font-size: 16px; line-height: 20px; color: var(--black-12);}
.mover-data-box .data-box .value.text {padding: 13px 0px 12px 12px; font-weight: 400;}

.mover-data-box .review-box {width: 100%; margin-bottom: 18px; padding: 18px; background-color: var(--white); border-radius: 12px; box-shadow: 0px 3px 15px hsla(0,0%,0%,0.03);}
.mover-data-box .review-box:last-child {margin-bottom: 0px;}
.mover-data-box .review-box .top-line {width: 100%;}
.mover-data-box .review-box .top-line .rating {height: 16px;}
.mover-data-box .review-box .top-line .date svg {display: block; width: 16px; height: 16px; margin: -1px 0px 0px 9px; fill: var(--orange);}
.mover-data-box .review-box .top-line .date .label {font-weight: 700; font-size: 16px; line-height: 16px; color: var(--black-12);}
.mover-data-box .review-box .text {width: 100%; margin-top: 15px; font-weight: 400; font-size: 16px; line-height: 20px; color: var(--black-12);}

@media screen and (max-width: 600px) {
    .mover-data-side.about {width: 100%; padding-left: 0px; padding-bottom: 30px;}
    .mover-data-side.reviews {width: 100%; padding-right: 0px;}

    .mover-data-box {padding: 15px;}
    .mover-data-box .title {padding: 0px 0px 12px 0px; font-size: 20px; line-height: 24px;}
    .mover-data-box .data-list .list-wrapper {margin: -5px;}
    .mover-data-box .data-pad {padding: 5px;}
    .mover-data-box .data-box .icon {width: 26px; height: 26px; margin: 9px; padding: 4px;}
}

@media screen and (max-width: 400px) {
    .mover-data-box .data-box .value {padding: 5px 0px 4px 9px; font-size: 14px; line-height: 18px;}
    .mover-data-box .data-box .value.text {padding: 10px 0px 9px 9px; font-weight: 400;}
}



/**************** PAGE TEXT ****************//**************** CITY PAGE ****************//**************** CITY PAGE ****************/

.page-top-text {width: 100%; margin-bottom: 90px;}

.page-top-text .triangle {
    position: absolute; bottom: 0px; right: 35%; width: 65%; height: 50%;
    clip-path: polygon(0% 0%, 0% 100%, 100% 100%); background: linear-gradient(90deg, hsla(0,0%,96%,0.3) 0% , hsla(0,0%,96%,1) 100%);
}
.page-top-text .image {position: absolute; top: 0px; left: 0px; width: 60%; aspect-ratio: 103 / 56; transform: translateX(-11%);}
.page-top-text .image img {display: block; width: 100%; height: 100%;}
.page-top-text .text-box {width: 50%; min-height: 480px; padding: 36px 0px 30px 0px;}
.page-top-text .title {width: 100%; padding-bottom: 30px; font-weight: 700; font-size: 48px; line-height: 50px; color: var(--black-12);}
.page-top-text .image-mobile {display: none; width: 100%; aspect-ratio: 103 / 56; margin: -6% 0px 36px 0px;}
.page-top-text .image-mobile img {display: block; width: 100%; height: 100%;}

.page-bottom-text {width: 100%; margin-top: 90px;}
.page-bottom-text .article {padding: 60px 12% 60px 12%; background-color: var(--grey-96);}


@media screen and (max-width: 1000px) {
    .page-bottom-text .article {padding: 0px; background-color: transparent;}
}

@media screen and (max-width: 800px) {
    .page-top-text .triangle {position: absolute; bottom: 0px; right: 25%; width: 75%; height: 50%;}
    .page-top-text .text-box {width: 100%;}
    .page-top-text .title {font-size: 36px; line-height: 38px;}
    .page-top-text .image {display: none;}
    .page-top-text .image-mobile {display: block;}
}












/**************** FORMS ****************//**************** FORMS ****************//**************** FORMS ****************/

:root {
    --color-first: hhsla(0,0%,12%,1);
    --color-first-ulight: hsla(0,100%,100%,1);
    --color-second: hsla(36,100%,60%,1);
    --color-second-border: hsla(36,100%,60%,1);
    --color-black: hsla(0,0%,12%,1);
    --color-black-text-light: hsla(0,0%,24%,1);
    --color-white: hsla(0,0%,100%,1);
    --color-grey-bg-light: hsla(0,0%,96%,1);
    --color-grey-border: hsla(0,0%,78%,1);
    --color-grey-border-dark: hsla(0,0%,72%,1);
    --color-grey-text: hsla(0,0%,60%,1);
    --color-grey-text-light: hsla(0,0%,78%,1);
    --color-error-border: hsla(5,75%,75%,1);
    --color-error-text: hsla(5,90%,45%,1);
}



/**************** BTN ****************/

.form-box .btn {
    display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; flex-wrap: nowrap;
    -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; -webkit-align-content: center; align-content: center;
    position: relative; min-height: 54px; padding: 15px 18px 15px 18px; font-weight: 600; font-size: 24px; line-height: 24px; text-align: center;
    color: var(--color-first); background: var(--color-second); border-radius: 12px; cursor: pointer; transition: opacity linear 200ms;
}
.form-box .btn:hover {opacity: 0.84;}

.form-box .btn > svg {display: block; height: 24px; aspect-ratio: 1; fill: var(--color-first);}
.form-box .btn > b {display: block; font-weight: inherit; margin-bottom: 0px; margin-right: 0px;}
.form-box .btn > svg + b {margin-right: 9px;}
.form-box .btn > b + svg {margin-right: 9px;}
.form-box .btn svg.arr {display: block; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; fill: var(--black);}

.form-box .btn.w100pc {width: 100%;}



/**************** INPUTS, SELECTS, TEXTAREAS ****************/

.form-box .input input, .form-box .select select, .form-box .textarea textarea {
    display: block; width: 100%; height: 100%; font-family: 'Arial Hebrew', sans-serif; font-weight: 400; font-size: 16px; line-height: 20px; text-align: start; letter-spacing: 0px;
    color: var(--color-black); background-color: transparent; border: none; border-radius: 0px; outline: none;
}

.form-box .input {width: 100%; height: 54px; padding: 0px 0px 0px 0px; background-color: var(--white); box-shadow: 0px 3px 15px hsla(0,0%,0%,0.03); border: none; border-radius: 12px; overflow: hidden;}
.form-box .input:hover {background-color: var(--white)}
.form-box .input.focus {background-color: var(--white)}
.form-box .input input {padding: 1px 48px 0px 18px;}

.form-box .input input[type="date"] {position: relative;}
.form-box .input input[type="date"]::-webkit-calendar-picker-indicator {position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; width: auto; height: auto; color: transparent; background: transparent;}
.form-box .input input[type="date"]::-webkit-inner-spin-button {z-index: 1;}
.form-box .input input[type="date"]::-webkit-clear-button {z-index: 1;}

.form-box .input input::-webkit-input-placeholder {color: var(--color-grey-text-light); -webkit-text-fill-color: var(--color-grey-text-light); text-shadow: none; transition: all linear 60ms;}
.form-box .input input::placeholder {color: var(--color-grey-text-light); -webkit-text-fill-color: var(--color-grey-text-light); text-shadow: none; transition: all linear 60ms;}
.form-box .input input:focus::-webkit-input-placeholder {color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none; transition: all linear 60ms;}
.form-box .input input:focus::placeholder {color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none; transition: all linear 60ms;}

.form-box .select {width: 100%; height: 54px; padding: 0px 38px 0px 12px; background-color: transparent; border: solid 1px var(--color-grey-border); border-radius: 12px; overflow: hidden;}
.form-box .select:hover {border: solid 1px var(--color-grey-border-dark);}
.form-box .select.focus {border: solid 1px var(--color-second-border);}
.form-box .select select {padding: 1px 6px 0px 6px;}
.form-box .select select:invalid {color: var(--color-grey-text-light);}
.form-box .select option {padding: 0px 0px 0px 12px; font-weight: 400; color: var(--color-black); background-color: var(--color-white);}

.form-box .textarea {width: 100%; height: 96px; padding: 18px 0px 18px 0px; background-color: var(--white); box-shadow: 0px 3px 15px hsla(0,0%,0%,0.03); border: none; border-radius: 12px; overflow: hidden;}
.form-box .textarea:hover {background-color: var(--white)}
.form-box .textarea.focus {background-color: var(--white)}
.form-box .textarea textarea {padding: 1px 18px 0px 18px;}

.form-box .textarea textarea::-webkit-input-placeholder {color: var(--color-grey-text-light); -webkit-text-fill-color: var(--color-grey-text-light); text-shadow: none; transition: all linear 60ms;}
.form-box .textarea textarea::placeholder {color: var(--color-grey-text-light); -webkit-text-fill-color: var(--color-grey-text-light); text-shadow: none; transition: all linear 60ms;}
.form-box .textarea textarea:focus::-webkit-input-placeholder {color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none; transition: all linear 60ms;}
.form-box .textarea textarea:focus::placeholder {color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none; transition: all linear 60ms;}



/**************** FORM BOX ****************//**************** FORM BOX ****************//**************** FORM BOX ****************/

.form-box {width: 100%; background-color: var(--grey-96); border-radius: 0px; z-index: 2; overflow: hidden;}

.form-box .form-bg {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0.24; pointer-events: none;}
.form-box .form-bg svg.top {display: block; position: absolute; top: 0px; right: 0px; width: 100%; aspect-ratio: 2; transform: translate(55%,-52.5%) rotate(31deg);}
.form-box .form-bg svg.bottom {display: block; position: absolute; bottom: 0px; left: 0px; width: 100%; aspect-ratio: 2; transform: translate(-45%,45%) rotate(31deg);}
.form-box .form-bg svg.mini {display: block; position: absolute; top: 0px; right: 0px; width: 100%; aspect-ratio: 2; transform: translate(45%,-45%) rotate(31deg);}

.form-box .form-title {width: 100%; padding: 30px 36px 0px 36px;}
.form-box .form-title.mini {padding: 30px 36px 0px 36px; font-weight: 800; font-size: 18px; line-height: 24px; color: var(--color-first);}

.form-box .form-list {width: 100%; padding: 18px 18px 18px 18px;}
.form-box .form-item-pad {width: 50%; padding: 33px 18px 18px 18px;}
.form-box .form-item-pad.w100pc {width: 100%;}
.form-box .form-item-box {width: 100%;}

.form-box .form-item-box legend {display: block; position: absolute; top: -15px; right: -3px; height: 6px; padding: 0px 6px; font-weight: 600; font-size: 16px; line-height: 6px; color: var(--color-first); background-color: transparent;}

.form-box .form-item-box .form-icon {
    display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap;
    -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; -webkit-align-content: center; align-content: center;
    position: absolute; top: 18px; right: 18px; height: 18px; aspect-ratio: 1; pointer-events: none;
}
.form-box .form-item-box .form-icon.fix {top: 17px; height: 20px;}
.form-box .form-item-box .form-icon svg {display: block; height: 100%; aspect-ratio: 1; fill: var(--color-second); transform: scale(-1,1);}

.form-box .form-item-box .input.error {border: solid 1px var(--color-error-border);}
.form-box .form-item-box .input.error ~ legend {color: var(--color-error-text);}

.form-box .check-list {margin: -9px 0px -9px 0px;}
.form-box .check-box {padding: 9px 0px 9px 0px; user-select: none;}
.form-box .check-box .check {width: 18px; height: 18px; padding: 2px; background-color: var(--white); box-shadow: 0px 3px 15px hsla(0,0%,0%,0.03); border: none; border-radius: 4px; cursor: pointer;}
.form-box .check-box .check svg {display: block; width: 100%; height: 100%; fill: var(--color-second); opacity: 0;}
.form-box .check-box .name {height: 18px; padding: 0px 12px 0px 0px; font-weight: 600; font-size: 16px; line-height: 20px; color: var(--color-first); cursor: pointer;}
.form-box .check-box.sel .check svg {opacity: 1;}

.form-box .form-item-box .form-placeholder {width: 100%; height: 54px;}
.form-box .form-item-box .form-placeholder .text-box {
    position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; padding: 15px 18px 15px 18px;
    font-weight: 600; font-size: 16px; line-height: 24px; text-align: center;
}
.form-box .form-item-box .form-placeholder .text-box.error {color: var(--color-error-text);}
.form-box .form-item-box .form-placeholder .text-box.submit {color: var(--color-second);}

.form-box .form-item-box .form-placeholder.error-box {display: none;}

.form-box .form-item-box .form-placeholder.btn-box .text-box.submit {opacity: 0; pointer-events: none; transition: opacity linear 200ms;}

.form-box .form-item-box .form-placeholder.btn-box .sync {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity linear 200ms;}
.form-box .form-item-box .form-placeholder.btn-box .sync .flex-acenter {width: 100%; height: 100%;}
.form-box .form-item-box .form-placeholder.btn-box .sync svg {width: 48px; aspect-ratio: 1; fill: var(--color-second); animation: iso-sync 2000ms infinite linear;}

.form-box .form-item-box .form-placeholder.btn-box .btn {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}
.form-box .form-item-box .form-placeholder.btn-box .btn.mini {width: auto;}

.form-box .form-item-box .form-placeholder.btn-box.sync .sync {opacity: 1;}
.form-box .form-item-box .form-placeholder.btn-box.sync .btn {opacity: 0; pointer-events: none;}

.form-box .form-item-box .form-placeholder.btn-box.sync.submit .sync {opacity: 0;}
.form-box .form-item-box .form-placeholder.btn-box.sync.submit .btn {opacity: 0; pointer-events: none;}
.form-box .form-item-box .form-placeholder.btn-box.sync.submit .text-box.submit {opacity: 1;}

.form-box .form-item-sub {width: 100%; padding: 36px 0px 18px 0px; border: none;}
.form-box .form-item-sub .form-item-box {width: auto;}
.form-box .form-item-sub .form-item-box .input.number {width: 78px; height: 48px; padding: 0px 0px 0px 0px;}
.form-box .form-item-sub .form-item-box .input.number input {padding: 1px 18px 0px 12px;}
.form-box .form-item-sub .form-item-box .check-list {margin: -6px 24px -6px 0px;}
.form-box .form-item-sub .form-item-box .check-box {padding: 6px 0px 6px 0px;}


@media screen and (max-width: 660px){
    .form-box .form-list {width: 100%; padding: 6px 6px 6px 6px;}
    .form-box .form-item-pad {width: 100%;}
    .form-box .form-item-pad.mini {padding-top: 0px;}
    .form-box .form-item-sub {padding: 36px 0px 0px 0px;}
    .form-box .check-list {margin: -36px 18px -12px 0px;}
}