body{
	position: fixed;
	top: 0;
	left: 0;
	overflow: hidden;
}

:root{
	--fade: 70px;
}

.wrapper{
	width: 3840px;
	height: 100%;
	overflow: hidden;
	position: fixed;
	overflow: hidden;
	top: 0;
	left: 0;
	z-index: 100;
	display: flex;
	flex-direction: column;
	background: url(/static/img/view/front/interior/0.png) center top/cover;
	transition: background 0.5s;
}

.header{
	width: 100%;
	height: 256px;
	background: rgba(0, 0, 0, 0.66);
	position: relative;
}

.config_list{
	background: #e6e1dedb;
	margin: 0 110px 60px auto;
	width: 1424px;
	transition: border-radius 0.5s;
	position: relative;
	padding: 70px 50px;
	height: calc(100% - 541px);
}

.config_list[border="0"]{border-radius: 0 74px 74px 74px;}
.config_list[border="1"]{border-radius: 74px;}
.config_list[border="2"]{border-radius: 74px 0 74px 74px;}

.footer{
	height: 225px;
	/*background: rgba(0, 0, 0, 0.66);*/
	position: relative;
	display: flex;
	align-items: center;
}



.logo{
	width: 346px;
	height: 93px;
	background: url(/static/img/logo.png) center/auto no-repeat;
	position: absolute;
	top: 115px;
	left: 224px;
}

.header_menu{
	position: absolute;
	width: 1424px;
	height: 128px;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	bottom: 0;
	right: 110px;
	font-size: 30px;
	z-index: 10;
}

.header_menu_elem{
	color: #cacaca;
	padding: 0 30px;
	height: 128px;
	display: flex;
	align-items: center;
	cursor: pointer;
	transition: color 0.5s;
	user-select: none;
}

.header_menu_elem[active="1"]{
	color: #2f2323;
}

.header_menu_indicator_wrap{
	position: absolute;
	width: 1424px;
	height: 128px;
	z-index: 9;
	bottom: 0;
	right: 110px;
	overflow: hidden;
}
.header_menu_indicator{
	width: 240px;
	height: 128px;
	background: #e6e1dedb;
	position: relative;
	border-radius: 16px 16px 0 0;
	transition: transform 0.5s, width 0.3s;
}

.header_menu_indicator::before,
.header_menu_indicator::after{
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	width: 16px;
	height: 16px;
	background: #e6e1dedb;
}

.header_menu_indicator::before{
	left: -16px;
	mask: url(/static/img/mask.png) -16px 0px/ auto no-repeat;
	-webkit-mask: url(/static/img/mask.png) -16px 0px/ auto no-repeat;
}

.header_menu_indicator::after{
	right: -16px;
	mask: url(/static/img/mask.png) 0px 0px/ auto no-repeat;
	-webkit-mask: url(/static/img/mask.png) 0px 0px/ auto no-repeat;
}

.footer_menu{
	display: flex;
	align-items: center;
}

.footer_menu[type="view"]{
	font-size: 30px;
	margin: 0 0 0 220px;
}

.footer_menu_name{
	color: #cacaca;
	margin: 0 50px 0 0;
}

.footer_menu_button_list{
	display: flex;
	height: 78px;
	border-radius: 18px;
	overflow: hidden;
	position: relative;
	background: rgba(0,0,0,0.66);
}

.footer_menu_button{
	height: 78px;
	display: flex;
	align-items: center;
	justify-content: center;
	/*padding: 0 40px;*/
	color: #c0c0c0;
	cursor: pointer;
	user-select: none;
	position: relative;
	z-index: 1;
	transition: color 0.5s;
}

.footer_menu_button_list[view="front"] .footer_menu_button[view="front"],
.footer_menu_button_list[view="left"] .footer_menu_button[view="left"],
.footer_menu_button_list[view="right"] .footer_menu_button[view="right"]{
	color: #342d2d;
}

.footer_menu_button[view="front"]{width: 195px;}
.footer_menu_button[view="left"]{width: 189px;}
.footer_menu_button[view="right"]{width: 212px;}

.footer_menu_button_indicator{
	position: absolute;
	z-index: 0;
	height: 78px;
	transition: transform 0.5s, width 0.5s;
	background: #b9b8b8;
}

.footer_menu_button_list[view="front"] .footer_menu_button_indicator{
	width: 195px;
	transform: translateX(0px);
}

.footer_menu_button_list[view="left"] .footer_menu_button_indicator{
	width: 189px;
	transform: translateX(195px);
}

.footer_menu_button_list[view="right"] .footer_menu_button_indicator{
	width: 212px;
	transform: translateX(384px);
}

.footer_save_button{
	background: rgb(0 0 0 / 66%);
	width: 422px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0 110px 0 auto;
	cursor: pointer;
	height: 78px;
	border-radius: 18px;
}

.footer_save_button_text{
	text-align: center;
	color: #d1c9c6;
	font-size: 30px;
}

div[type="post"] > div[img="onix_0"]{background-image: url(/static/img/post/onix_0.png);}
div[type="post"] > div[img="onix_1"]{background-image: url(/static/img/post/onix_1.png);}
div[type="post"] > div[img="malakhit_0"]{background-image: url(/static/img/post/malakhit_0.png);}
div[type="post"] > div[img="malakhit_1"]{background-image: url(/static/img/post/malakhit_1.png);}
div[type="post"] > div[img="obsidian_0"]{background-image: url(/static/img/post/obsidian_0.png);}
div[type="post"] > div[img="obsidian_1"]{background-image: url(/static/img/post/obsidian_1.png);}
div[type="post"] > div[img="obsidian_2"]{background-image: url(/static/img/post/obsidian_2.png);}
div[type="indication"] > div[img="obsidian_0"]{background-image: url(/static/img/indication/obsidian_0.png);}
div[type="indication"] > div[img="malakhit_0"]{background-image: url(/static/img/indication/malakhit_0.png);}

[onix="0"]{background-image: url(/static/img/post/onix/0.png);}
[onix="1"]{background-image: url(/static/img/post/onix/1.png);}
[onix="2"]{background-image: url(/static/img/post/onix/2.png);}
[obsidian="0"]{background-image: url(/static/img/post/obsidian/0.png);}
[obsidian="1"]{background-image: url(/static/img/post/obsidian/1.png);}
[obsidian="2"]{background-image: url(/static/img/post/obsidian/2.png);}
[obsidian="3"]{background-image: url(/static/img/indication/obsidian/3.png);}
[malakhit="0"]{background-image: url(/static/img/post/malakhit/0.png);}
[malakhit="1"]{background-image: url(/static/img/post/malakhit/1.png);}
[malakhit="2"]{background-image: url(/static/img/post/malakhit/2.png);}
[malakhit="3"]{background-image: url(/static/img/post/malakhit/3.png);}
[malakhit="4"]{background-image: url(/static/img/indication/malakhit/4.png);}

[param="sul"][img="0"]{background-image: url(/static/img/card/sul/0.png);}
[param="cabin"][img="0"]{background-image: url(/static/img/card/cabin/0.png);}
[param="cabin"][img="1"]{background-image: url(/static/img/card/cabin/1.png);}
[param="cabin"][img="2"]{background-image: url(/static/img/card/cabin/2.png);}
[param="cabin"][img="3"]{background-image: url(/static/img/card/cabin/3.png);}
[param="cabin"][img="4"]{background-image: url(/static/img/card/cabin/4.png);}
[param="cabin"][img="5"]{background-image: url(/static/img/card/cabin/5.png);}
[param="cabin"][img="6"]{background-image: url(/static/img/card/cabin/6.png);}
[param="wall"][img="1"]{background-image: url(/static/img/card/wall/1.png);}
[param="wall"][img="2"]{background-image: url(/static/img/card/wall/2.png);}
[param="floor"][img="1"]{background-image: url(/static/img/card/floor/1.png);}
[param="floor"][img="2"]{background-image: url(/static/img/card/floor/2.png);}
[param="floor"][img="3"]{background-image: url(/static/img/card/floor/3.png);}
[param="planks"][img="1"]{background-image: url(/static/img/card/planks/1.png);}
[icon="planks"]{background-image: url(/static/img/card/icon/planks.png);}
[icon="wall"]{background-image: url(/static/img/card/icon/wall.png);}
[icon="floor"]{background-image: url(/static/img/card/icon/floor.png);}

.product_img[icon]{
	opacity: 0.567;
}

.config_win_wrap{
	position: relative;
	width: 100%;
	height: calc(100% - 250px);
	overflow: hidden;
}

.config_win_wrap_scroll{
	width: calc(100% + 50px);
	height: 100%;
	overflow: hidden auto;
	-webkit-mask-image: linear-gradient(to bottom, #ffffff 0, #fff var(--fade), #fff calc(100% - var(--fade)), transparent 100%);
}

.config_win_wrap_inner{
	width: calc(100% - 50px);
	position: relative;
}

.config_win,
.anim_view{
	position: absolute;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

.config_list[selected="post"] .config_win[type="post"],
.config_list[selected="indication"] .config_win[type="indication"],
.config_list[selected="portal"] .config_win[type="portal"],
.config_list[selected="cabin"] .config_win[type="cabin"],
.config_list[selected="interior"] .config_win[type="interior"],
.config_list[selected="sul"] .config_win[type="sul"],
.anim_view[hide="0"]{
	opacity: 1;
	visibility: visible;
	transition: opacity 0.5s, visibility 0s;
	z-index: 10;
}

.config_inner_win{
	position: absolute;
	display: grid;
	gap: 44px;
	grid-template-columns: repeat(3, 1fr);
	padding: 0 0 70px;
}

.product_card,
.section_card{
	background: rgba(246, 241, 238, 0.37);
	border-radius: 31px;
	width: 412px;
	height: 500px;
	overflow: hidden;
	user-select: none;
	transition: background 0.5s;
	cursor: pointer;
}
.config_win[type="post"][name="malakhit_0"] .product_card[name="malakhit_0"],
.config_win[type="post"][name="malakhit_1"] .product_card[name="malakhit_1"],
.config_win[type="post"][name="onix_0"] .product_card[name="onix_0"],
.config_win[type="post"][name="onix_1"] .product_card[name="onix_1"],
.config_win[type="post"][name="obsidian_0"] .product_card[name="obsidian_0"],
.config_win[type="post"][name="obsidian_1"] .product_card[name="obsidian_1"],
.config_win[type="post"][name="obsidian_2"] .product_card[name="obsidian_2"],
.config_win[type="indication"][name="malakhit_0"] .product_card[name="malakhit_0"],
.config_win[type="indication"][name="obsidian_0"] .product_card[name="obsidian_0"],
.config_win[type="cabin"][name="0"] .product_card[name="0"],
.config_win[type="cabin"][name="1"] .product_card[name="1"],
.config_win[type="cabin"][name="2"] .product_card[name="2"],
.config_win[type="cabin"][name="3"] .product_card[name="3"],
.config_win[type="cabin"][name="4"] .product_card[name="4"],
.config_win[type="cabin"][name="5"] .product_card[name="5"],
.config_win[type="cabin"][name="6"] .product_card[name="6"],
.config_inner_win[type="floor"][name="1"] .product_card[name="1"],
.config_inner_win[type="floor"][name="2"] .product_card[name="2"],
.config_inner_win[type="floor"][name="3"] .product_card[name="3"],
.config_inner_win[type="wall"][name="1"] .product_card[name="1"],
.config_inner_win[type="wall"][name="2"] .product_card[name="2"],
.config_inner_win[type="planks"][name="1"] .product_card[name="1"],
.product_card:hover{
	background: #ffffff;
}

.product_img{
	width: calc(100% - 100px);
	height: 292px;
	margin: 70px auto 0;
	position: relative;
	z-index: 0;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	transform: translateZ(0) scale(1);
	will-change: transform;
	backface-visibility: hidden;
	transform-origin: 50% 50%;
	contain: paint;
	transition: transform 0.5s;
}

.product_card:hover .product_img{
	transform: translateZ(0) scale(1.2);
}

.product_name{
	color: rgba(46, 34, 34, 0.38);
	position: relative;
	z-index: 1;
	font-size: 30px;
	padding: 0 32px;
	margin: 41px 0 0;
}

.product_desc{
	padding: 0 32px;
	font-size: 20px;
	color: #2e2222;
}

.configuration{

}

.configuration_del{
	height: 2px;
	background: linear-gradient(90deg, transparent, black, transparent);
}

.configuration_title{
	font-size: 30px;
	color: rgba(45, 37,37, 0.55);
	height: 90px;
	display: flex;
	align-items: center;
	padding: 0 53px;
}

.configuration_list{
	padding: 0 53px;
	display: flex;
	gap: 18px;
}

.configuration_list_elem{
	width: 142px;
	height: 154px;
	border-radius: 17px;
	padding: 17px;
	position: relative;
	background: rgba(246, 241, 238, 0.77);
}

.configuration_list_elem_remove{
	width: 22px;
	height: 22px;
	position: absolute;
	top: 9px;
	right: 9px;
	border-radius: 11px;
	background: rgba(255, 255, 255, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.configuration_list_elem_remove::before,
.configuration_list_elem_remove::after{
	content: '';
	width: 1px;
	height: 12px;
	position: absolute;
	background: #817b7a;
	transform: rotate(45deg);
}

.configuration_list_elem_remove::after{
	transform: rotate(-45deg);
}

.configuration_list_elem_img{
	width: 100%;
	height: 100%;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.section_back{
	position: absolute;
	font-size: 30px;
	padding-left: 40px;
	color: #363636;
	cursor: pointer;
}

.section_back::before,
.section_back::after{
	content: '';
	position: absolute;
	display: block;
	width: 20px;
	height: 2px;
	background: #363636;
	left: 6px;
	transform: rotate(45deg);
	top: 25px;
}

.section_back::after{
	transform: rotate(-45deg);
	top: 13px;
}