@import "../css/_root.css";



/*************************************************************************/
/*** START NAV_MAIN ******************************************************/
/*************************************************************************/

.nav_main {
	padding: 32px 0 0 0;
}
.nav_main a.link.ph {
	position: relative;
	float: left;
}
.nav_main a.link.ph .follow {
	position: absolute;
	top: -30px;
	left: -2px;
	width: 80px;
	height: 80px;
	opacity: 0;
	-webkit-transition: all var(--tr_speed_fast) linear;
	-moz-transition: all var(--tr_speed_fast) linear;
	-o-transition: all var(--tr_speed_fast) linear;
	transition: all var(--tr_speed_fast) linear;
}
.nav_main a.link.ph:hover {
	background-color: var(--color_light);
	color: var(--color_light);
}
.nav_main a.link.ph:hover .follow {
	opacity: 1;
}
.nav_main a.link.tg {
	float: right;
}

.nav_main .logo {
	margin: 0 auto;
}

.nav_main .menu_box {
	border-top: 2px solid var(--color_gray_100);
	border-bottom: 2px solid var(--color_gray_100);
	margin-top: 32px;
}
.nav_main .menu_box a {
	display: inline-block;
	text-align: center;
	padding: 14px 0;
}

.nav_main .tip_lead {
	display: none;
}


.modal.menu {
	background-color: var(--color_gray);
}
.modal .modal_header_wrap {
	background-color: var(--color_gray);
}
.modal.menu .modal_content_wrap {
	padding-top: 10%;
}
.modal.menu .link_box {
	width: 100%;
	text-align: center;
	margin-top: 48px;
}
.modal.menu .link_box a {
	color: var(--color_gray);
	text-decoration: none;
	text-shadow: var(--color_light) 1px 1px 0,
				 var(--color_light) -1px -1px 0,
				 var(--color_light) -1px 1px 0,
				 var(--color_light) 1px -1px 0;
}
.modal.menu .link_box a:hover {
	color: var(--color_light);
	background-color: transparent;
}

@media (max-width: 1399px) {
	//
}
@media (max-width: 1199px) {
	//
}
@media (max-width: 991px) {
	.nav_main {
		padding: 24px 0 0 0;
	}
	.nav_main .menu_box {
		display: none !important;
	}
	.nav_main .tip_lead {
		display: block;
		width: 100%;
		border-top: 2px solid var(--color_gray_100);
		border-bottom: 2px solid var(--color_gray_100);
		text-align: center;
		padding: 8px 0 8px 0;
		margin-top: 24px;
		cursor: pointer;
	}
}
@media (max-width: 767px) {
	//
}
@media (max-width: 575px) {
	.nav_main a.link.tg {
		font-size: 14px;
	}
	.nav_main a.link.ph {
		font-size: 14px;
	}
}

/*************************************************************************/
/*** END NAV_MAIN ********************************************************/
/*************************************************************************/



/*************************************************************************/
/*** START FOOTER ********************************************************/
/*************************************************************************/

.footer {
	background-color: var(--color_dark);
	padding: 168px 0 112px 0;
}
.footer .logo {
	margin: 0 auto;
}
.footer ul li {
    margin: 0 0 8px 0;
}
.footer ul.rl li {
	text-align: right;
}
.footer a {
	color: var(--color_light);
	-webkit-transition: all var(--tr_speed_fast) linear;
	-moz-transition: all var(--tr_speed_fast) linear;
	-o-transition: all var(--tr_speed_fast) linear;
	transition: all var(--tr_speed_fast) linear;
}
.footer a:hover {
	color: var(--color_dark);
	background-color: var(--color_accent);
}

.footer .copywriting {
	border-top: 2px solid var(--color_gray);
	padding: 16px 0 0 0;
	margin: 80px 0 0 0;
}
.footer .copywriting p {
	color: var(--color_gray_100);
    margin: 0 0 8px 0;
}

@media (max-width: 1399px) {
	//
}
@media (max-width: 1199px) {
	.footer {
		padding: 96px 0 72px 0;
	}
}
@media (max-width: 991px) {
	.footer {
		padding: 72px 0 56px 0;
	}
}
@media (max-width: 767px) {
	//
}
@media (max-width: 575px) {
	.footer .logo {
		margin: 0 auto 72px;
	}
	.footer ul li,
	.footer ul.rl li {
		text-align: center;
	}
}

/*************************************************************************/
/*** END FOOTER **********************************************************/
/*************************************************************************/



/*************************************************************************/
/*** START CONTACTS ******************************************************/
/*************************************************************************/

.contacts {
	background-color: var(--color_gray_100);
	padding: 112px 0;
}
.contacts .link_zone {
	position: relative;
}
.contacts .link_zone a {
	display: block;
	position: relative;
	width: auto;
	margin: 48px 0 0 0;
	z-index: 9;
	text-decoration: none;
	-webkit-transition: all var(--tr_speed_mid) ease-out;
	-moz-transition: all var(--tr_speed_mid) ease-out;
	-o-transition: all var(--tr_speed_mid) ease-out;
	transition: all var(--tr_speed_mid) ease-out;
}
.contacts .circle {
	--circle_size: 240px;
	width: var(--circle_size);
	height:  var(--circle_size);
	background-color: var(--color_accent);
	border-radius: 100%;
	position: absolute;
	top: -24px;
	left: calc((var(--circle_size) / 2) - (var(--circle_size) + 12px));
	-webkit-transition: all var(--tr_speed_mid) ease-out;
	-moz-transition: all var(--tr_speed_mid) ease-out;
	-o-transition: all var(--tr_speed_mid) ease-out;
	transition: all var(--tr_speed_mid) ease-out;
}

.contacts .link_zone a.tg:hover,
.contacts .link_zone a.wa:hover {
	background-color: transparent;
	color: var(--color_dark);
	text-decoration: underline;
}
.contacts .link_zone a.tg:hover ~ .circle {
	top: -84px;
}
.contacts .link_zone a.wa:hover ~ .circle {
	top: 28px;
}

@media (max-width: 1399px) {
	//
}
@media (max-width: 1199px) {
	.contacts {
		padding: 96px 0;
	}
	.contacts .link_zone {
		margin: 40px 0 0 0;
	}
	.contacts .link_zone a {
		margin: 32px 0 0 0;
	}
	.contacts .circle {
		--circle_size: 192px;
	}
}
@media (max-width: 991px) {
	.contacts {
		padding: 72px 0;
	}
}
@media (max-width: 767px) {
	.contacts .circle {
		--circle_size: 160px;
	}
}
@media (max-width: 575px) {
	//
}

/*************************************************************************/
/*** END CONTACTS ********************************************************/
/*************************************************************************/



/*************************************************************************/
/*** START BLOCK_CLOUD ***************************************************/
/*************************************************************************/

.block_cloud {
	float: left;
	border-top: 2px solid var(--color_gray_100);
	border-left: 2px solid var(--color_gray_100);
}
.block_cloud .cont_box {
	float: left;
	width: 33.33333%;
	height: auto;
	border-right: 2px solid var(--color_gray_100);
	border-bottom: 2px solid var(--color_gray_100);
	padding: 72px 88px;
}
.block_cloud .cont_box h3,
.block_cloud .cont_box .tip_lead {
	margin: 0 0 16px 0;
}

@media (max-width: 1399px) {
	.block_cloud .cont_box {
		padding: 48px 56px;
	}
}
@media (max-width: 1199px) {
	.block_cloud .cont_box {
		padding: 32px 40px;
	}
}
@media (max-width: 991px) {
	.block_cloud .cont_box {
		width: 100%;
		padding: 48px 56px;
	}
}
@media (max-width: 767px) {
	.block_cloud .cont_box {
		padding: 40px;
	}
}
@media (max-width: 575px) {
	//
}

/*************************************************************************/
/*** END BLOCK_CLOUD *****************************************************/
/*************************************************************************/









/*************************************************************************/
/*** START NAME **********************************************************/
/*************************************************************************/

.name {
	
}

@media (max-width: 1399px) {
	//
}
@media (max-width: 1199px) {
	//
}
@media (max-width: 991px) {
	//
}
@media (max-width: 767px) {
	//
}
@media (max-width: 575px) {
	//
}

/*************************************************************************/
/*** END NAME ************************************************************/
/*************************************************************************/