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

:root {
    --color-pink: hsla(350,86%,62%,1);
    --color-blue: hsla(198,76%,52%,1);
    --color-yellow: hsla(50,100%,60%,1);
    --color-yellow-text-light: hsla(50,100%,72%,1);
    --color-black: hsla(0,0%,12%,1);
    --color-white: hsla(0,0%,100%,1);
    
    
    --color-second-border: hsla(50,90%,45%,1);
    --color-black-text-light: hsla(0,0%,24%,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);
    --color-accessibility-bg: hsla(0,0%,0%,1) !important;
    --color-accessibility-text: hsla(60,100%,50%,1) !important;
}



/**************** MAIN ****************//**************** MAIN ****************//**************** MAIN ****************/
/**************** MAIN ****************//**************** MAIN ****************//**************** MAIN ****************/
/**************** MAIN ****************//**************** MAIN ****************//**************** MAIN ****************/

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

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

#body {background: url('../images/main-bg.webp'); background-repeat: repeat; background-size: 600px; background-position: center;}

#body .scwbox {width: 100%; max-width: 1600px; margin: 0px auto; padding-left: 60px; padding-right: 60px;}


@media screen and (max-width: 1400px){
    #body .scwbox {padding-left: 36px; padding-right: 36px;}
}

@media screen and (max-width: 660px){
    #body .scwbox {padding-left: 18px; padding-right: 18px;}
}



/**************** HEADER FOOTER ****************//**************** HEADER FOOTER ****************//**************** HEADER FOOTER ****************/
/**************** HEADER FOOTER ****************//**************** HEADER FOOTER ****************//**************** HEADER FOOTER ****************/
/**************** HEADER FOOTER ****************//**************** HEADER FOOTER ****************//**************** HEADER FOOTER ****************/

.logo-main-box .logo {display: block; position: relative; width: 192x; height: 60px; transform: translate(-1%,0%);}
.logo-main-box .logo img {display: block; width: 100%; height: 100%;}

.contacts-main-box {padding: 0px 0px 0px 0px;}
.contacts-main-box .phone {display: block; position: relative;}
.contacts-main-box .phone .content {position: relative; padding: 16px 24px 16px 24px; z-index: 2;}
.contacts-main-box .phone .content svg {display: block; width: 28px; height: 28px; fill: var(--color-white);}
.contacts-main-box .phone .content .text {display: block; padding: 3px 0px 0px 15px; font-weight: 600; font-size: 24px; line-height: 24px; color: var(--color-black);}
.contacts-main-box .phone .bg {display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1;}
.contacts-main-box .phone .bg svg {display: block; width: 100%; height: 100%; fill: var(--color-yellow);}
.contacts-main-box .phone.white .content svg {fill: var(--color-yellow);}
.contacts-main-box .phone.white .bg svg {fill: var(--color-white);}

.contacts-main-box .icons-box {padding: 0px 0px 0px 3px;}
.contacts-main-box .icon-lnk {display: block; position: relative; width: 60px; height: 60px; margin: 0px 0px 0px 30px;}
.contacts-main-box .icon-lnk .icon-bg {display: block; width: 100%; height: 100%; fill: var(--color-blue);}
.contacts-main-box .icon-lnk.whatsapp .icon-bg {fill: #25D366;}
.contacts-main-box .icon-lnk.telegram .icon-bg {fill: var(--color-blue);}
.contacts-main-box .icon-lnk.accessibility .icon-bg {fill: var(--color-pink);}
.contacts-main-box .icon-lnk .icon-icon {display: block; position: absolute; width: 48px; height: 48px; top: 50%; left: 50%; transform: translate(-50%,-50%); fill: var(--color-white);}
.contacts-main-box .icon-lnk.accessibility .icon-icon {width: 26px; height: 26px;}

.hf-box#footer {padding: 12px 0px 0px 0px;}
.hf-box#footer .footer-content {width: 100%; padding: 36px 0px 36px 0px; background-color: var(--color-yellow); z-index: 2;}
.hf-box#footer .footer-bg {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1;}
.hf-box#footer .footer-bg svg {display: block; position: absolute; top: 0px; width: 60%; aspect-ratio: 63 / 8; fill: var(--color-yellow);}
.hf-box#footer .footer-bg svg.bg1 {left: -5%;}
.hf-box#footer .footer-bg svg.bg2 {right: -5%;}


@media screen and (max-width: 1400px){
    .logo-main-box .logo {width: 152px; height: 48px;}
    
    .contacts-main-box .phone .content {padding: 12px 18px 12px 18px;}
    .contacts-main-box .phone .content svg {width: 24px; height: 24px;}
    .contacts-main-box .phone .content .text {padding: 3px 0px 0px 12px; font-size: 20px; line-height: 20px;}
    .contacts-main-box .icon-lnk {width: 48px; height: 48px; margin: 0px 0px 0px 24px;}
    .contacts-main-box .icon-lnk .icon-icon {width: 36px; height: 36px;}
    .contacts-main-box .icon-lnk.accessibility .icon-icon {width: 20px; height: 20px;}
    
    .hf-box#header {padding: 30px 0px 30px 0px;}
    .hf-box#header .logo-main-box .lang-box {padding: 0px 0px 0px 120px;}
    .hf-box#header .logo-main-box .lang-box .lang-lnk {width: 48px; height: 48px;}
    .hf-box#header .logo-main-box .lang-box .lang-lnk span {top: 17px; font-size: 16px; line-height: 16px;}

    .hf-box#footer {padding: 6px 0px 0px 0px;}
    .hf-box#footer .footer-content {padding: 24px 0px 24px 0px;}
    .hf-box#footer .footer-bg svg {width: 60%;}
    .hf-box#footer .footer-bg svg.bg1 {left: -5%;}
    .hf-box#footer .footer-bg svg.bg2 {right: -5%;}
}

@media screen and (max-width: 760px){
    .hf-box#header .logo-main-box {width: 100%; padding: 0px 0px 36px 0px; -webkit-justify-content: space-between; justify-content: space-between;}
    .hf-box#header .logo-main-box .lang-box {padding: 0px 0px 0px 0px;}
    .hf-box#header .contacts-main-box {width: 100%; -webkit-justify-content: center; justify-content: center;}
    .hf-box#header .contacts-main-box .icons-box {padding: 0px 0px 0px 48px;}
}

@media screen and (max-width: 660px){
    .logo-main-box .logo {width: 115px; height: 36px;}
    .contacts-main-box .phone .content {padding: 9px 27px 9px 21px;}
    .contacts-main-box .phone .content svg {width: 18px; height: 18px;}
    .contacts-main-box .phone .content .text {padding: 2px 0px 0px 12px; font-size: 16px; line-height: 16px;}
    .contacts-main-box .icon-lnk {width: 36px; height: 36px; margin: 0px 0px 0px 15px;}
    .contacts-main-box .icon-lnk .icon-icon {width: 30px; height: 30px;}
    .contacts-main-box .icon-lnk.accessibility .icon-icon {width: 16px; height: 16px;}
    
    .hf-box#footer {position: fixed; bottom: 0px; left: 0px; width: 100%; padding: 6px 0px 0px 0px; z-index: 100;}
    .hf-box#footer .footer-content {padding: 15px 0px 15px 0px;}
    .hf-box#footer .footer-content .logo-main-box {display: none;}
    .hf-box#footer .footer-content .contacts-main-box {width: 100%; -webkit-justify-content: space-between; justify-content: space-between;}
    .hf-box#footer .footer-content .contacts-main-box .phone .content {padding: 10px 12px 10px 12px;}
    .hf-box#footer .footer-bg svg {width: 120%;}
    .hf-box#footer .footer-bg svg.bg1 {left: -10%;}
    .hf-box#footer .footer-bg svg.bg2 {right: -10%;}
}









/**************** MAIN PROMO ****************//**************** MAIN PROMO ****************//**************** MAIN PROMO ****************/

#main-promo {padding: 60px 0px 90px 0px;}

#main-promo .main-promo-flex {-webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: stretch; align-items: stretch;}
#main-promo .promo-side {padding: 0px 120px 0px 0px; width: auto; max-width: 100%; -webkit-flex: 1 1 auto; flex: 1 1 auto; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: space-between; justify-content: space-between;}
#main-promo .promo-side-header {width: 100%;}

#main-promo .promo-side .logo-main-box {width: 100%; padding: 0px 0px 60px 0px;}
#main-promo .promo-side .logo-main-box .lang-box {padding: 0px 0px 0px 0px;}
#main-promo .promo-side .logo-main-box .lang-box .lang-lnk {display: block; position: relative; width: 60px; height: 60px;}
#main-promo .promo-side .logo-main-box .lang-box .lang-lnk svg {display: block; width: 100%; height: 100%; fill: var(--color-white); transform: rotate(90deg);}
#main-promo .promo-side .logo-main-box .lang-box .lang-lnk.rotate {margin: 0px 0px 0px -3px;}
#main-promo .promo-side .logo-main-box .lang-box .lang-lnk.rotate svg {transform: rotate(270deg);}
#main-promo .promo-side .logo-main-box .lang-box .lang-lnk.sel svg {fill: var(--color-yellow);}
#main-promo .promo-side .logo-main-box .lang-box .lang-lnk span {display: block; position: absolute; top: 21px; left: 1px; width: 100%; font-weight: 600; font-size: 20px; line-height: 20px; text-align: center; color: var(--color-black);}

#main-promo .promo-text-box {width: 100%; padding: 0px 0px 48px 0px;}
#main-promo .promo-text-line {width: 100%; padding: 0px 0px 12px 0px;}
#main-promo .promo-text-line .line-box {width: auto;}
#main-promo .promo-text-line .line-content {height: 60px; padding: 16px 48px 24px 24px; font-weight: 800; font-size: 30px; line-height: 30px; color: var(--color-white); z-index: 2;}
#main-promo .promo-text-line .line-bg {display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1;}
#main-promo .promo-text-line .line-bg svg {display: block; position: absolute; top: 0px; height: 100%; fill: var(--color-pink);}
#main-promo .promo-text-line .line-bg .first {left: 0px; width: 60px;}
#main-promo .promo-text-line .line-bg .second {left: 0px; width: 100%;}

#main-promo .promo-side-images {width: 100%;}
#main-promo .promo-side-images img {display: block; width: 100%;}

@media screen and (max-width: 1400px){
    #main-promo {padding: 36px 0px 72px 0px;}
    #main-promo .promo-side {padding: 0px 60px 0px 0px;}
    #main-promo .promo-side .logo-main-box .lang-box {padding: 0px 0px 0px 0px;}
    #main-promo .promo-side .logo-main-box .lang-box .lang-lnk {width: 48px; height: 48px;}
    #main-promo .promo-side .logo-main-box .lang-box .lang-lnk span {top: 17px; font-size: 16px; line-height: 16px;}

    #main-promo .promo-text-box {width: 100%; padding: 0px 0px 48px 0px;}
    #main-promo .promo-text-line {width: 100%; padding: 0px 0px 12px 0px;}
    #main-promo .promo-text-line .line-box {width: auto;}
    #main-promo .promo-text-line .line-content {height: 48px; padding: 13px 48px 11px 24px; font-size: 24px; line-height: 24px;}
    #main-promo .promo-text-line .line-bg .first {left: 0px; width: 48px;}
    #main-promo .promo-text-line .line-bg .second {left: 0px; width: 100%;}
    #main-promo .promo-side-images {max-width: 600px;}
}

@media screen and (max-width: 1100px){
    #main-promo .main-promo-flex {-webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: stretch; align-items: stretch;}
    #main-promo .promo-side {width: 100%; padding: 0px 0px 0px 0px;}
    #main-promo .promo-side-images {position: absolute; bottom: 0px; right: 0px; width: 40%; max-width: 420px;}
}

@media screen and (max-width: 760px){
    #main-promo .promo-side-images {position: absolute; bottom: 0px; right: 0px; width: 33%;}
}

@media screen and (max-width: 660px){
    #main-promo {padding: 24px 0px 60px 0px;}
    #main-promo .promo-side .logo-main-box {width: 100%; padding: 0px 0px 36px 0px;}
    #main-promo .promo-side .logo-main-box .lang-box .lang-lnk {width: 36px; height: 36px;}
    #main-promo .promo-side .logo-main-box .lang-box .lang-lnk span {top: 12px; font-size: 14px; line-height: 14px;}
    #main-promo .promo-text-box {width: 100%; padding: 0px 0px 24px 0px;}
    #main-promo .promo-text-line {width: 100%; -webkit-justify-content: center; justify-content: center;}
    #main-promo .promo-text-line .line-content {height: 48px; padding: 14px 36px 14px 18px; font-weight: 800; font-size: 20px; line-height: 20px;}
    #main-promo .contacts-main-box {width: 100%; -webkit-justify-content: center; justify-content: center;}
    #main-promo .promo-side-images {position: relative; bottom: auto; right: auto; width: 100%; padding: 36px 0px 0px 0px; max-width: 800px;}
}



/**************** FORM ****************//**************** FORM ****************//**************** FORM ****************/

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

.input {width: 100%; height: 60px; padding: 0px 0px 0px 0px; background-color: transparent; overflow: hidden;}
.input .icontent {width: 100%; height: 100%; z-index: 2;}
.input .ibg {display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1;}
.input .ibg .top {display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 50%; fill: var(--color-white);}
.input .ibg .bottom {display: block; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 50%; fill: var(--color-white); transform: rotate(180deg);}
/*
.input:hover .ibg .top {fill: var(--color-yellow);}
.input:hover .ibg .bottom {fill: var(--color-yellow);}
.input.focus .ibg .top {fill: var(--color-yellow);}
.input.focus .ibg .bottom {fill: var(--color-yellow);}
*/
.input input {padding: 1px 18px 0px 54px;}

.input input[type="date"] {position: relative;}
.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;}
.input input[type="date"]::-webkit-inner-spin-button {z-index: 1;}
.input input[type="date"]::-webkit-clear-button {z-index: 1;}

.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;}
.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;}
.input input:focus::-webkit-input-placeholder {color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none; transition: all linear 60ms;}
.input input:focus::placeholder {color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none; transition: all linear 60ms;}

.textarea {width: 100%; height: 108px; padding: 18px 0px 18px 0px; background-color: transparent; border-radius: 0px; overflow: hidden;}
.textarea .icontent {width: 100%; height: 100%; z-index: 2;}
.textarea .ibg {display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1;}
.textarea .ibg .top {display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 50%; fill: var(--color-white);}
.textarea .ibg .bottom {display: block; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 50%; fill: var(--color-white); transform: rotate(180deg);}
/*
.textarea:hover {border: solid 1px var(--color-grey-border-dark);}
.textarea.focus {border: solid 1px var(--color-second-border);}
*/
.textarea textarea {padding: 1px 18px 0px 18px;}

.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;}
.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;}
.textarea textarea:focus::-webkit-input-placeholder {color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none; transition: all linear 60ms;}
.textarea textarea:focus::placeholder {color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none; transition: all linear 60ms;}


@media screen and (max-width: 1400px){
    .input {height: 48px;}
    .input input {padding: 1px 18px 0px 48px;}
    .textarea {height: 84px;}
    .textarea textarea {padding: 0px 18px 0px 18px;}
}



/**************** MAIN PROMO FORM ****************//**************** MAIN PROMO FORM ****************//**************** MAIN PROMO FORM ****************/

#main-promo .form-side {width: 660px;}
#main-promo .form-box {width: 100%;}
#main-promo .form-box .form-content {width: 100%; z-index: 2;}
#main-promo .form-box .form-bg {display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}
#main-promo .form-box .form-bg-top {display: block; position: absolute; top: 0px; left: 0px; width: 100%;}
#main-promo .form-box .form-bg-bottom {display: block; position: absolute; bottom: 0px; left: 0px; width: 100%; transform: rotate(180deg);}
#main-promo .form-box .form-bg-center {display: block; position: absolute; top: 30px; bottom: 30px; left: 0px; width: 100%;}

#main-promo .form-box .form-title-box {width: 100%; padding: 36px 36px 0px 36px;}
#main-promo .form-box .form-title {width: auto;}
#main-promo .form-box .form-title-content {height: 66px; padding: 20px 66px 26px 66px; font-weight: 800; font-size: 30px; line-height: 30px; color: var(--color-black); z-index: 2;}
#main-promo .form-box .form-title-bg {display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; fill: var(--color-yellow); z-index: 1;}

#main-promo .form-box .form-list {width: 100%; padding: 18px 18px 18px 18px;}
#main-promo .form-box .form-item-pad {width: 50%; padding: 18px 18px 18px 18px;}
#main-promo .form-box .form-item-pad.w100pc {width: 100%;}
#main-promo .form-box .form-item-pad.address {width: 70%;}
#main-promo .form-box .form-item-pad.floor {width: 30%;}
#main-promo .form-box .form-item-pad.elevator {width: auto;}
#main-promo .form-box .form-item-pad.plaster {width: auto; padding: 18px 0px 18px 0px;}
#main-promo .form-box .form-item-pad.furniture {width: auto;}

#main-promo .form-box .form-item-box {width: 100%;}

#main-promo .form-box .form-item-box legend {display: block; position: absolute; top: -5px; left: 12px; height: 6px; padding: 0px 6px; font-weight: 600; font-size: 16px; line-height: 6px; color: var(--color-first); background-color: var(--color-white);}

#main-promo .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: 20px; left: 18px; height: 20px; aspect-ratio: 1; pointer-events: none; z-index: 2;
}
#main-promo .form-box .form-item-box .form-icon.fix {top: 17px; height: 20px;}
#main-promo .form-box .form-item-box .form-icon svg {display: block; height: 100%; aspect-ratio: 1; fill: var(--color-yellow);}

#main-promo .form-box .form-item-box .input.error .ibg .top {fill: var(--color-pink);}
#main-promo .form-box .form-item-box .input.error .ibg .bottom {fill: var(--color-pink);}

#main-promo .form-box .form-item-box .input.error ~ legend {color: var(--color-error-text);}

#main-promo .form-box .check-list-flex {width: 100%; z-index: 2;}
#main-promo .form-box .check-list {margin: -9px 0px -9px 0px;}
#main-promo .form-box .check-box {padding: 9px 0px 9px 0px; user-select: none;}
#main-promo .form-box .check-box .check {width: 18px; height: 18px; padding: 2px; border: solid 2px hsla(50,100%,72%,1); border-radius: 0px; cursor: pointer;}
#main-promo .form-box .check-box .check svg {display: block; position: absolute; top: 50%; left: 50%; width: 200%; height: 200%; transform: translate(-50%,-60%); fill: var(--color-yellow); opacity: 0;}
#main-promo .form-box .check-box .name {height: 18px; padding: 0px 0px 0px 12px; font-weight: 600; font-size: 16px; line-height: 20px; color: var(--color-white); cursor: pointer;}
#main-promo .form-box .check-box.sel .check {background-color: var(--color-white); border: solid 2px var(--color-white);}
#main-promo .form-box .check-box.sel .check svg {opacity: 1;}

#main-promo .form-box .submit-btn .btn-content {padding: 17px 30px 19px 30px; font-weight: 800; font-size: 24px; line-height: 24px; text-align: center; color: var(--color-white); z-index: 2;}
#main-promo .form-box .submit-btn .btn-bg {display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; fill: var(--color-pink); z-index: 1;}

#main-promo .form-or-box {padding: 24px 0px 24px 0px; font-weight: 800; font-size: 30px; line-height: 30px; color: var(--color-black); text-align: center;}
#main-promo .form-or-box span {color: var(--color-yellow);}

#main-promo .form-box .form-title-mini {padding: 36px 36px 0px 36px; font-weight: 800; font-size: 20px; line-height: 28px; color: var(--color-white); text-align: center;}


@media screen and (max-width: 1400px){
    #main-promo .form-side {width: 600px;}
    #main-promo .form-box .form-title-box {width: 100%; padding: 30px 30px 0px 30px;}
    #main-promo .form-box .form-title-content {height: 54px; padding: 14px 54px 16px 54px; font-weight: 800; font-size: 24px; line-height: 30px; color: var(--color-black); z-index: 2;}

    #main-promo .form-box .form-list {padding: 15px 15px 15px 15px;}
    #main-promo .form-box .form-item-pad {padding: 15px 15px 15px 15px;}
    #main-promo .form-box .form-item-pad.w100pc {width: 100%;}
    #main-promo .form-box .form-item-pad.address {width: 70%;}
    #main-promo .form-box .form-item-pad.floor {width: 30%;}
    #main-promo .form-box .form-item-pad.elevator {width: auto;}
    #main-promo .form-box .form-item-pad.plaster {width: auto; padding: 15px 0px 15px 0px;}
    #main-promo .form-box .form-item-pad.furniture {width: auto;}

    #main-promo .form-box .form-item-box .form-icon {top: 15px; left: 18px; height: 18px; aspect-ratio: 1; pointer-events: none; z-index: 2;}
    #main-promo .form-box .check-box .name {font-size: 14px;}

    #main-promo .form-box .submit-btn .btn-content {padding: 13px 24px 15px 24px; font-size: 20px; line-height: 20px;}

    #main-promo .form-or-box {padding: 24px 0px 24px 0px; font-size: 24px; line-height: 24px;}

    #main-promo .form-box .form-title-mini {padding: 30px 30px 0px 30px; font-size: 16px; line-height: 22px;}
}

@media screen and (max-width: 1100px){
    #main-promo .form-side {width: 100%; padding: 60px 0px 0px 0px;}
}

@media screen and (max-width: 660px){
    #main-promo .form-box .form-item-pad {width: 100% !important; padding: 15px 15px 15px 15px !important;}
    #main-promo .form-box .textarea {height: 108px;}
}



/**************** ADVANTAGES ****************//**************** ADVANTAGES ****************//**************** ADVANTAGES ****************/

#advantages {width: 100%; padding: 90px 0px 42px 0px;}
#advantages .dash-box {padding: 0px 0px 0px 10%;}
#advantages .advpad {width: 33.333333%; padding: 0px 0px 48px 0px;}
#advantages .advbox {width: 100%; -webkit-flex-wrap: nowrap; flex-wrap: nowrap;}
#advantages .advbox .icon {width: 90px; height: 90px;}
#advantages .advbox .icon .icon-bg {display: block; width: 100%; height: 100%; fill: var(--color-blue);}
#advantages .advbox .icon .icon-icon {display: block; position: absolute; width: 48px; height: 48px; top: 50%; left: 50%; transform: translate(-50%,-50%); fill: var(--color-white);}
#advantages .advbox .icon .icon-icon.map {width: 34px; height: 60px;}
#advantages .advbox .text {padding: 0px 0px 0px 24px; font-weight: 600; font-size: 20px; line-height: 28px; color: var(--color-pink); -webkit-flex: 1 1 auto; flex: 1 1 auto;}


@media screen and (max-width: 1400px){
    #advantages .advbox .icon {width: 72px; height: 72px;}
    #advantages .advbox .icon .icon-icon {width: 36px; height: 36px;}
    #advantages .advbox .icon .icon-icon.map {width: 24px; height: 48px;}
    #advantages .advbox .text {padding: 0px 0px 0px 24px; font-size: 16px; line-height: 24px;}
}

@media screen and (max-width: 1200px){
    #advantages .dash-box {padding: 0px 0px 0px 5%;}
}

@media screen and (max-width: 960px){
    #advantages .dash-box {padding: 0px 0px 0px 10%;}
    #advantages .advpad {width: 50%;}
}

@media screen and (max-width: 760px){
    #advantages .dash-box {padding: 0px 0px 0px 5%;}
}

@media screen and (max-width: 660px){
    #advantages {width: 100%; padding: 12px 0px 12px 0px;}
    #advantages .advpad {padding: 0px 0px 36px 0px;}
}

@media screen and (max-width: 560px){
    #advantages .dash-box {padding: 0px 0px 0px 25%;}
    #advantages .advpad {width: 100%;}
}

@media screen and (max-width: 460px){
    #advantages .dash-box {padding: 0px 0px 0px 16%;}
}

@media screen and (max-width: 400px){
    #advantages .dash-box {padding: 0px 0px 0px 12%;}
}


/**************** PAINT PROMO PRICE ****************//**************** PAINT PROMO PRICE ****************//**************** PAINT PROMO PRICE ****************/

#paint-promo-price {width: 100%; padding: 90px 0px 90px 0px;}
#paint-promo-price .promo-price-box {width: 100%;}
#paint-promo-price .content {width: 100%; padding: 120px 50% 90px 10%; font-weight: 800; font-size: 30px; line-height: 40px; text-align: center; color: var(--color-white); z-index: 2;}
#paint-promo-price .content sup {vertical-align: super; font-size: 16px;}
#paint-promo-price .content .text {padding: 0px 0px 30px 0px;}
#paint-promo-price .content .price-box {width: 100%;}
#paint-promo-price .content .price-content {padding: 8px 30px 12px 30px; z-index: 2;}
#paint-promo-price .content .price-bg {display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; fill: var(--color-yellow); z-index: 1;}

#paint-promo-price .content img {display: block; position: absolute; width: 21%; aspect-ratio: 1 / 1; height: auto; border-radius: 20px; overflow: hidden; box-shadow: 0px 0px 36px 0px hsla(0,0%,0%,0.12);}
#paint-promo-price .content img.img01 {top: -9%; right: 24%; transform: rotate(-15deg);}
#paint-promo-price .content img.img02 {top: -9%; right: 6%; transform: rotate(15deg);}
#paint-promo-price .content img.img03 {bottom: -18%; right: 15%; transform: rotate(0deg);}

#paint-promo-price .bg {display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; fill: var(--color-blue); z-index: 1;}


@media screen and (max-width: 1400px){
    #paint-promo-price .content {padding: 90px 50% 60px 10%; font-size: 24px; line-height: 32px;}
    #paint-promo-price .content sup {vertical-align: super; font-size: 14px;}
    #paint-promo-price .content .text {padding: 0px 0px 24px 0px;}
    #paint-promo-price .content .price-content {padding: 9px 24px 12px 24px;}
}

@media screen and (max-width: 960px){
    #paint-promo-price .content {padding: 90px 30% 60px 12%; text-align: start;}
    #paint-promo-price .content .price-box {-webkit-justify-content: flex-start; justify-content: flex-start;}
    #paint-promo-price .content .price {transform: translate(-1%,0%);}
    #paint-promo-price .content img.img01 {top: -6%; right: 9%; transform: rotate(0deg);}
    #paint-promo-price .content img.img02 {top: 18%; right: 0%; transform: rotate(0deg);}
    #paint-promo-price .content img.img03 {bottom: -3%; right: 15%; transform: rotate(0deg);}
}

@media screen and (max-width: 660px){
    #paint-promo-price {overflow: hidden;}
    #paint-promo-price {width: 100%; padding: 42px 0px 12px 0px;}
    #paint-promo-price .content {padding: 90px 33% 60px 0%; font-size: 20px; line-height: 28px;}
    #paint-promo-price .content sup {vertical-align: super; font-size: 14px;}
    #paint-promo-price .content .text {padding: 0px 0px 24px 0px;}
    #paint-promo-price .content .price-content {padding: 6px 18px 9px 18px;}
    #paint-promo-price .bg {left: -50%; width: 200%;}
}

@media screen and (max-width: 560px){
    #paint-promo-price .content img {width: 30%;}
    #paint-promo-price .content img.img01 {top: 0%; right: 3%;}
    #paint-promo-price .content img.img02 {top: 24%; right: -6%;}
    #paint-promo-price .content img.img03 {bottom: -3%; right: 9%;}
}

@media screen and (max-width: 460px){
    #paint-promo-price .content img {width: 36%;}
    #paint-promo-price .content img.img01 {top: 0%; right: -3%;}
    #paint-promo-price .content img.img02 {top: 30%; right: -12%;}
    #paint-promo-price .content img.img03 {bottom: -3%; right: 0%;}
}



/**************** PAINT PROMO LIST ****************//**************** PAINT PROMO LIST ****************//**************** PAINT PROMO LIST ****************/

#paint-promo-list {width: 100%; padding: 90px 0px 90px 0px;}

#paint-promo-list .title-box {width: 100%; padding: 0px 0px 60px 0px;}
#paint-promo-list .title {width: auto;}
#paint-promo-list .title .content {height: 90px; padding: 33px 90px 27px 90px; font-weight: 800; font-size: 30px; line-height: 30px; color: var(--color-black); z-index: 2;}
#paint-promo-list .title .bg {display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; fill: var(--color-yellow); z-index: 1;}

#paint-promo-list .margin-box {margin: -36px;}
#paint-promo-list .pppad {width: 33.333333%; padding: 36px;}
#paint-promo-list .ppbox {width: 100%;}
#paint-promo-list .ppbox .content {z-index: 2;}
#paint-promo-list .ppbox .content .icon {width: 100%; padding: 48px 0px 0px 0px;}
#paint-promo-list .ppbox .content .icon svg {display: block; width: 120px; aspect-ratio: 1 / 1; fill: var(--color-white);}
#paint-promo-list .ppbox .content .text {padding: 18px 0px 66px 0px; font-weight: 800; font-size: 24px; line-height: 24px; text-align: center; color: var(--color-white);}
#paint-promo-list .ppbox .bg {display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; fill: var(--color-pink); transform: rotate(180deg) scale(-1,1); z-index: 1;}


@media screen and (max-width: 1400px){
    #paint-promo-list .title-box {padding: 0px 0px 48px 0px;}
    #paint-promo-list .title .content {height: 66px; padding: 24px 66px 18px 66px; font-size: 24px; line-height: 24px;}
    #paint-promo-list .margin-box {margin: -24px;}
    #paint-promo-list .pppad {padding: 24px;}
    #paint-promo-list .ppbox .content .icon {padding: 42px 0px 0px 0px;}
    #paint-promo-list .ppbox .content .icon svg {width: 90px;}
    #paint-promo-list .ppbox .content .text {padding: 18px 0px 60px 0px; font-size: 20px; line-height: 20px;}
}

@media screen and (max-width: 960px){
    #paint-promo-list .title-box {padding: 0px 0px 48px 0px;}
    #paint-promo-list .pppad {width: 50%; padding: 24px;}
}

@media screen and (max-width: 660px){
    #paint-promo-list {width: 100%; padding: 90px 0px 30px 0px;}
    #paint-promo-list .title-box {padding: 0px 0px 36px 0px;}
    #paint-promo-list .title .content {height: 60px; padding: 21px 48px 19px 48px; font-size: 20px; line-height: 20px;}
    #paint-promo-list .margin-box {margin: 0px 0px -24px 0px;}
    #paint-promo-list .pppad {width: 100%; padding: 0px 24px 24px 24px; }
    #paint-promo-list .ppbox {max-width: 300px;}
    #paint-promo-list .ppbox .content .icon {padding: 36px 0px 0px 0px;}
    #paint-promo-list .ppbox .content .icon svg {width: 66px;}
    #paint-promo-list .ppbox .content .text {padding: 18px 0px 48px 0px; font-size: 16px; line-height: 16px;}
}



/**************** OTHER ****************//**************** OTHER ****************//**************** OTHER ****************/

#other {width: 100%; padding: 90px 0px 90px 0px;}

#other .other-box {width: 100%; overflow: hidden;}
#other .other-content {z-index: 2;}
#other .title-box {width: 100%; padding: 60px 0px 48px 0px;}
#other .title {width: auto;}
#other .title .content {height: 90px; padding: 33px 90px 27px 90px; font-weight: 800; font-size: 30px; line-height: 30px; color: var(--color-white); z-index: 2;}
#other .title .bg {display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; fill: var(--color-blue); z-index: 1;}

#other .other-bg {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1;}
#other .other-bg .bg-top {position: absolute; top: 0px; left: 0px; width: 100%; height: 30px; overflow: hidden;}
#other .other-bg .bg-top svg {display: block; position: absolute; top: 0px; width: 60%; aspect-ratio: 63 / 8; fill: var(--color-yellow);}
#other .other-bg .bg-top svg.bg1 {left: -5%;}
#other .other-bg .bg-top svg.bg2 {right: -5%;}
#other .other-bg .bg-center {position: absolute; top: 30px; bottom: 30px; left: 0px; width: 100%; height: auto; background-color: var(--color-yellow);}
#other .other-bg .bg-bottom {position: absolute; bottom: 0px; left: 0px; width: 100%; height: 30px; overflow: hidden;}
#other .other-bg .bg-bottom svg {display: block; position: absolute; bottom: 0px; width: 60%; aspect-ratio: 63 / 8; fill: var(--color-yellow); transform: rotate(180deg);}
#other .other-bg .bg-bottom svg.bg1 {left: -5%;}
#other .other-bg .bg-bottom svg.bg2 {right: -5%;}

#other .other-list {padding: 0px 0px 84px 0px;}
#other .margin-box {margin: -24px;}
#other .opad {width: 33.333333%; padding: 24px;}
#other .obox {width: 100%;}
#other .obox img {display: block; width: 100%;}
#other .obox .name-box {position: absolute; bottom: 36px; right: -6px; width: 100%;}
#other .obox .name {width: auto;}
#other .obox .name-content {padding: 18px 48px 14px 48px; font-weight: 600; font-size: 20px; line-height: 26px; text-align: right; color: var(--color-white);z-index: 2;}
#other .obox .name-bg {display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; fill: var(--color-pink); z-index: 1;}


@media screen and (max-width: 1400px){
    #other .title-box {padding: 48px 0px 36px 0px;}
    #other .title .content {height: 66px; padding: 24px 66px 18px 66px; font-size: 24px; line-height: 24px;}
    #other .other-list {padding: 0px 0px 60px 0px;}
    #other .margin-box {margin: -18px;}
    #other .opad {padding: 18px;}
}

@media screen and (max-width: 1160px){
    #other .opad {width: 50%;}
}

@media screen and (max-width: 860px){
    #other .obox .name-content {padding: 15px 36px 11px 36px; font-size: 18px; line-height: 24px;}
}

@media screen and (max-width: 660px){
    #other {width: 100%; padding: 48px 0px 30px 0px;}
    
    #other .opad {width: 100%;}
    #other .obox .name-content {padding: 18px 48px 14px 48px; font-weight: 600; font-size: 20px; line-height: 26px; text-align: right; color: var(--color-white);z-index: 2;}

    #other .other-bg .bg-top svg {display: block; position: absolute; top: 0px; width: 120%; aspect-ratio: 63 / 8; fill: var(--color-yellow);}
    #other .other-bg .bg-top svg.bg1 {left: -10%;}
    #other .other-bg .bg-top svg.bg2 {right: -10%;}
    #other .other-bg .bg-bottom svg {display: block; position: absolute; bottom: 0px; width: 120%; aspect-ratio: 63 / 8; fill: var(--color-yellow); transform: rotate(180deg);}
    #other .other-bg .bg-bottom svg.bg1 {left: -10%;}
    #other .other-bg .bg-bottom svg.bg2 {right: -10%;}
}





/**************** REVIEWS ****************//**************** REVIEWS ****************//**************** REVIEWS ****************/

#reviews {width: 100%; padding: 90px 0px 90px 0px;}

#reviews .title-box {width: 100%; padding: 0px 0px 60px 0px;}
#reviews .title {width: auto;}
#reviews .title .content {height: 90px; padding: 33px 90px 27px 90px; font-weight: 800; font-size: 30px; line-height: 30px; color: var(--color-black); z-index: 2;}
#reviews .title .bg {display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; fill: var(--color-yellow); z-index: 1;}

#reviews .margin-box {margin: -24px;}
#reviews .rpad {width: 33.333333%; padding: 24px;}
#reviews .rbox {width: 100%;}

#reviews .rbox .content {width: 100%; padding: 168px 30px 30px 30px; z-index: 2;}
#reviews .rbox .content .top-bg {display: block; position: absolute; top: 24px; left: 12%; width: 84%; height: 90px; fill: var(--color-pink);}
#reviews .rbox .content .top-text {position: absolute; top: 48px; left: 160px;}
#reviews .rbox .content .top-text .name {padding: 0px 0px 9px 0px; font-weight: 600; font-size: 24px; line-height: 24px; color: var(--color-white);}
#reviews .rbox .content .top-text .data {font-weight: 400; font-size: 16px; line-height: 16px; color: var(--color-white);}
#reviews .rbox .content .photo-box {position: absolute; top: 20px; left: 20px; width: 126px; height: 126px; padding: 12px;}
#reviews .rbox .content .photo-bg {display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; fill: var(--color-blue); z-index: 1;}
#reviews .rbox .content .photo {display: block; position: relative; width: 100%; height: 100%; border-radius: 100%; z-index: 2;}
#reviews .rbox .content .stars {position: absolute; top: 120px; left: 160px;}
#reviews .rbox .content .stars svg {display: block; width: 24px; height: 24px; margin: 0px 0px 0px 0px; fill: var(--color-yellow);}
#reviews .rbox .content .text {font-weight: 400; font-size: 16px; line-height: 24px; color: var(--color-black);}

#reviews .rbox .bg {display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}
#reviews .rbox .bg-top {display: block; position: absolute; top: 0px; left: 0px; width: 100%;}
#reviews .rbox .bg-bottom {display: block; position: absolute; bottom: 0px; left: 0px; width: 100%; transform: rotate(180deg);}
#reviews .rbox .bg-center {display: block; position: absolute; top: 30px; bottom: 30px; left: 0px; width: 100%;}


@media screen and (max-width: 1400px){
    #reviews .title-box {padding: 0px 0px 60px 0px;}
    #reviews .title .content {height: 66px; padding: 24px 66px 18px 66px; font-size: 24px; line-height: 24px;}
    #reviews .margin-box {margin: -18px;}
    #reviews .rpad {padding: 18px;}
    #reviews .rbox .content {padding: 150px 24px 21px 24px;}
    #reviews .rbox .content .top-bg {height: 84px;}
    #reviews .rbox .content .top-text {position: absolute; top: 48px; left: 150px;}
    #reviews .rbox .content .top-text .name {padding: 0px 0px 9px 0px; font-size: 20px; line-height: 20px;}
    #reviews .rbox .content .top-text .data {font-size: 14px; line-height: 14px;}
    #reviews .rbox .content .text {font-weight: 400; font-size: 14px; line-height: 20px;}
    #reviews .rbox .content .photo-box {top: 20px; left: 20px; width: 114px; height: 114px; padding: 12px;}
    #reviews .rbox .content .stars {top: 114px; left: 150px;}
    #reviews .rbox .content .stars svg {width: 20px; height: 20px;}
}

@media screen and (max-width: 1200px){
    #reviews .rpad {width: 50%;}
}

@media screen and (max-width: 660px){
    #reviews {width: 100%; padding: 30px 0px 30px 0px;}
    #reviews .title-box {padding: 0px 0px 36px 0px;}
    #reviews .title .content {height: 60px; padding: 21px 48px 19px 48px; font-size: 20px; line-height: 20px;}
    #reviews .rpad {width: 100%;}
    #reviews .rbox .content .top-bg {top: 21px; left: 9%; width: 87%; height: 78px;}
    #reviews .rbox .content .top-text {position: absolute; top: 41px; left: 120px;} 
    #reviews .rbox .content .photo-box {top: 18px; left: 18px; width: 90px; height: 90px; padding: 9px;}
    #reviews .rbox .content .stars {top: 120px; left: 20px;}
}







/**************** ABOUT ****************/

#about {width: 100%; padding: 36px 0px 36px 0px;}

#about .about-box {width: 100%;}
#about .about-content {padding: 0px 0px 0px 30%; z-index: 2;}
#about .about-bg {display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1;}
#about .about-bg .bg-top {display: block; position: absolute; top: 0px; left: 0px; width: 100%;}
#about .about-bg .bg-center {display: block; position: absolute; top: 60px; bottom: 0px; left: 0px; width: 100%;}

#about .title-box {width: 100%; padding: 48px 48px 0px 48px;}
#about .title {width: auto;}
#about .title .content {height: 90px; padding: 33px 78px 27px 60px; font-weight: 800; font-size: 30px; line-height: 30px; color: var(--color-black); z-index: 2;}
#about .title .bg {display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; fill: var(--color-pink); z-index: 1;}
#about .text-box {width: 100%; padding: 36px 48px 36px 48px; font-weight: 400; font-size: 16px; line-height: 24px; color: var(--color-black);}
#about .text-box p {padding: 0px 0px 12px 0px;}

#about .photo-box {position: absolute; bottom: 0px; right: 70%; width: 36%;}
#about .photo-box img {display: block; width: 100%;}


@media screen and (max-width: 1400px){
    #about .title .content {height: 66px; padding: 24px 66px 18px 66px; font-size: 24px; line-height: 24px;}
}

@media screen and (max-width: 960px){
    #about .about-content {padding: 0px 0px 0px 0px;}
    #about .photo-box {display: none;}
}

@media screen and (max-width: 660px){
    #about {width: 100%; padding: 36px 0px 0px 0px;}
    #about .about-bg .bg-center {display: block; position: absolute; top: 30px; bottom: 0px; left: 0px; width: 100%;}
    #about .title-box {padding: 24px 24px 0px 24px; -webkit-justify-content: center; justify-content: center;}
    #about .title .content {height: 60px; padding: 21px 48px 19px 48px; font-size: 20px; line-height: 20px;}
    #about .text-box {width: 100%; padding: 24px 24px 12px 24px; font-weight: 400; font-size: 14px; line-height: 20px; color: var(--color-black);}
    #about .text-box p {padding: 0px 0px 12px 0px;}
}













/**************** PAYMENT METHODS ****************//**************** PAYMENT METHODS ****************//**************** PAYMENT METHODS ****************/

#payment-methods {width: 100%; padding: 48px 0px 48px 0px;}
#payment-methods img {display: block; height: 60px; margin: 0px 30px;}


@media screen and (max-width: 1400px){
    #payment-methods {padding: 36px 0px 36px 0px;}
    #payment-methods img {height: 48px; margin: 0px 24px;}
}

@media screen and (max-width: 960px){
    #payment-methods img {height: 42px;}
}

@media screen and (max-width: 660px){
    #payment-methods {padding: 36px 12px 84px 12px;}
    #payment-methods img {height: 36px; margin: 0px 24px 24px 24px;}
}