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

/*************************************************************************/
/*** START INDEX COVER ***************************************************/
/*************************************************************************/

.index_cover {
	padding: 168px 0;
}

.top_cont_box {
	background-image: url('../img/top_img.png');
	background-position: center;
	background-size: cover;
}
.top_cont_box .wrapper {
	width: 100%;
	background-color: var(--color_overlay);
	padding: 296px 0 56px 0;
}
.top_cont_box .wrapper .tip_lead {
	color: var(--color_light);
}

@media (max-width: 1399px) {
	//
}
@media (max-width: 1199px) {
	.index_cover {
		padding: 120px 0;
	}
	.top_cont_box .wrapper {
		padding: 256px 0 56px 0;
	}
}
@media (max-width: 991px) {
	.index_cover p {
		margin: 40px 0 0 0;
	}
	.top_cont_box .wrapper {
		padding: 200px 0 40px 0;
	}
	.top_cont_box .wrapper .tip_lead {
		margin: 0 0 32px 0;
	}
}
@media (max-width: 767px) {
	.index_cover {
		padding: 56px 0;
	}
	.index_cover p {
		margin: 24px 0 0 0;
	}
	.top_cont_box .wrapper {
		padding: 160px 0 40px 0;
	}
	.top_cont_box .wrapper .mrbutton {
		margin: 32px 0 0 0;
	}
}
@media (max-width: 575px) {
	//
}

/*************************************************************************/
/*** END INDEX COVER *****************************************************/
/*************************************************************************/



/*************************************************************************/
/*** START FEATURES ******************************************************/
/*************************************************************************/

.features {
	padding-top: var(--desktop_space);
}
.features h2 {
	margin: 0 0 8px 0;
}
.features p.title {
	margin: 0 0 16px 0;
}
.features .string_wrap {
	margin: 0 0 8px 0;
}
.features .string_wrap b {
	display: block;
	width: 40px;
}
.features .string_wrap i {
	display: block;
	width: 16px;
}
.features .string_wrap p {
	display: block;
	margin: 0;
}

.features .num_zone {
	margin: 72px 0 0 0;
}
.features .fea_wrap .tip_display span {
	color: var(--color_accent);
}
.features .fea_wrap p {
	padding: 8px 112px 0 0;
}

@media (max-width: 1399px) {
	.features .fea_wrap p {
		padding: 8px 64px 0 0;
	}
}
@media (max-width: 1199px) {
	.features {
		padding-top: var(--tablet_h_space);
	}
	.features .fea_wrap p {
		padding: 0 80px 0 0;
	}
}
@media (max-width: 991px) {
	.features {
		padding-top: var(--tablet_v_space);
	}
	.features h2 {
		margin: 0 0 32px 0;
	}
	.features .fea_wrap p {
		padding: 16px 16px 0 0;
	}
}
@media (max-width: 767px) {
	.features .num_zone {
		margin: 32px 0 0 0;
	}
	.features .string_wrap {
		margin: 0 0 16px 0;
	}
	.features .fea_wrap {
		margin: 40px 0 0 0;
	}
	.features .fea_wrap p {
		padding: 8px 0 0 0;
	}
}
@media (max-width: 575px) {
	//
}

/*************************************************************************/
/*** END FEATURES ********************************************************/
/*************************************************************************/



/*************************************************************************/
/*** START PORTFOLIO *****************************************************/
/*************************************************************************/

.index_port {
	padding-top: var(--desktop_space);
	overflow: hidden;
}
.index_port.des {
	display: block;
}
.index_port.tab {
	display: none;
}
.index_port h2 {
	margin: 0 0 56px 0;
}

.index_port .case_box {
	width: 984px;
	height: 504px;
	background-position: center;
	background-size: cover;
	margin: 0 24px 0 0;
}
.index_port .case_box a {
	display: block;
	background-color: var(--color_overlay);
	text-decoration: none;
	width: 100%;
	height: 100%;
	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;
}
.index_port .case_box a .tip_lead {
	width: 100%;
	color: var(--color_accent);
	padding: 16px;
}
.index_port .case_box a .tip_display {
	width: 100%;
	color: var(--color_light);
	padding: 0 16px;
}

.index_port .case_box:hover a {
	opacity: 1;
}

.index_port .mrbutton {
	margin: 56px 0 0 0;
}

@media (max-width: 1399px) {
	.index_port .case_box {
		width: 840px;
		height: 432px;
	}
}
@media (max-width: 1199px) {
	.index_port {
		padding-top: var(--tablet_h_space);
	}
	.index_port .case_box {
		width: 616px;
		height: 312px;
	}
	.index_port .case_box a {
		opacity: 1;
	}
}
@media (max-width: 991px) {
	.index_port.des {
		display: none;
	}
	.index_port.tab {
		display: block;
	}
	.index_port {
		padding-top: var(--tablet_v_space);
	}
	.index_port .case_box {
		width: 100%;
		height: 336px;
		margin: 0 0 24px 0;
	}
	.index_port .mrbutton {
		margin: 32px 0 0 0;
	}
}
@media (max-width: 767px) {
	.index_port .case_box {
		height: 272px;
	}
}
@media (max-width: 575px) {
	.index_port .case_box {
		height: 200px;
	}
}

/*************************************************************************/
/*** END PORTFOLIO *******************************************************/
/*************************************************************************/



/*************************************************************************/
/*** START DEVELOPMENT ***************************************************/
/*************************************************************************/

.development {
	background-color: var(--color_gray);
	margin-top: var(--desktop_space);
	padding: 112px 0;
}
.development h2 {
	color: var(--color_light);
}
.development .orbit_wrap {
	position: relative;
	margin: -112px 0 0 0;
}
.development .orbit_wrap img {
	width: 100%;
	height: auto;
}
.development .orbit_wrap h3 {
	position: absolute;
	color: var(--color_light);
}
.development .orbit_wrap h3.r {
	top: 168px;
	right: 164px;
	transform: rotate(-26deg);
    -webkit-transform: rotate(-26deg);
    -o-transform: rotate(-26deg);
    -moz-transform: rotate(-26deg);
}
.development .orbit_wrap h3.s {
	top: 408px;
	right: 214px;;
	transform: rotate(-9deg);
    -webkit-transform: rotate(-9deg);
    -o-transform: rotate(-9deg);
    -moz-transform: rotate(-9deg);
}
.development .orbit_wrap h3.p {
	bottom: 80px;
	right: 514px;
	transform: rotate(16deg);
    -webkit-transform: rotate(16deg);
    -o-transform: rotate(16deg);
    -moz-transform: rotate(16deg);
}

@media (max-width: 1399px) {
	.development .orbit_wrap h3.r {
		top: 128px;
		right: 114px;
	}
	.development .orbit_wrap h3.s {
		top: 348px;
		right: 204px;
	}
	.development .orbit_wrap h3.p {
		bottom: 68px;
		right: 434px;
	}
}
@media (max-width: 1199px) {
	.development {
		margin-top: var(--tablet_h_space);
		padding: 96px 0;
	}
	.development .orbit_wrap {
		margin: -96px 0 0 0;
	}
	.development .orbit_wrap h3.r {
		top: 112px;
		right: 104px;
	}
	.development .orbit_wrap h3.s {
		top: 285px;
		right: 158px;
	}
	.development .orbit_wrap h3.p {
		bottom: 52px;
		right: 344px;
	}
}
@media (max-width: 991px) {
	.development {
		margin-top: var(--tablet_v_space);
		padding: 72px 0;
	}
	.development .orbit_wrap {
		margin: -72px 0 0 0;
	}
	.development .orbit_wrap h3.r {
		top: 88px;
		right: 88px;
	}
	.development .orbit_wrap h3.s {
		top: 222px;
		right: 118px;
	}
	.development .orbit_wrap h3.p {
		bottom: 44px;
		right: 284px;
	}
}
@media (max-width: 767px) {
	.development .orbit_wrap h3.r {
		top: 56px;
		right: 48px;
	}
	.development .orbit_wrap h3.s {
		top: 160px;
		right: 82px;
	}
	.development .orbit_wrap h3.p {
		bottom: 28px;
		right: 190px;
	}
	.development .mrbutton {
		margin: 32px 0 0 0;
	}
}
@media (max-width: 575px) {
	.development h3 {
		font-size: 18px;
		line-height: 18px;
	}
	.development .orbit_wrap {
		margin: 0;
	}
	.development .orbit_wrap h3.r {
		top: 20%;
		right: 8%;
	}
	.development .orbit_wrap h3.s {
		top: 55%;
		right: 16%;
	}
	.development .orbit_wrap h3.p {
		bottom: 11%;
		right: 34%;
	}
}

/*************************************************************************/
/*** END DEVELOPMENT *****************************************************/
/*************************************************************************/



/*************************************************************************/
/*** START EDUCATION *****************************************************/
/*************************************************************************/

.education {
	position: relative;
/* 	margin-top: var(--desktop_space); */
	padding-top: var(--desktop_space);
	padding-bottom: var(--desktop_space);
	overflow: hidden;
}
.education h2 {
	margin: 0 0 104px 0;
}

.education .ed_zone {
	text-decoration: none;
}
.education .ed_zone .img_box {
	position: relative;
	background-position: center;
	background-size: cover;
}
.education .ed_zone .img_box::before { 
	content: ""; 
	display: block; 
	padding-top: 56%;
}
.education .ed_zone .img_box a {
	position: absolute;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--color_overlay);
	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;
}
.education .ed_zone .img_box a img {
	width: auto;
	height: calc(50% - 16px);
	position: absolute;
	right: 8px;
	bottom: 8px;
}
.education .ed_zone .img_box a:hover {
	opacity: 1;
}

.education .ed_zone .ed_name {
	display: block;
	-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;
}
.education .ed_zone.ez_main .ed_name {
	padding: 16px 0;
}
.education .ed_zone.ez_sec .ed_name {
	padding: 8px 0;
}
.education .ed_zone .ed_name:hover {
	background-color: var(--color_dark);
	color: var(--color_accent);
}
.education .ed_zone.ez_main .ed_name:hover {
	padding: 16px;
}
.education .ed_zone.ez_sec .ed_name:hover {
	padding: 8px;
}

.education .mrbutton {
	margin: -60px 0 0 0;
}

.education .band_box {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.education .band {
	position: absolute;
	left: 50%;
	width: 3488px;
	text-align: center;
	background-color: var(--color_dark);
	padding: 24px 0;
}
.education .band h3 {
	float: left;
	display: block;
	color: var(--color_accent);
	margin: 0 32px;
}
.education .band.mrf {
	top: 240px;
	transform: rotate(-11deg) translateX(-50%);
}
.education .band.mrl {
	bottom: -80px;
	transform: rotate(10deg) translateX(-50%);
}


@media (max-width: 1399px) {
	//
}
@media (max-width: 1199px) {
	.education {
/* 		margin-top: var(--tablet_h_space); */
		padding-top: var(--tablet_h_space);
		padding-bottom: var(--tablet_h_space);
	}
	.education h2 {
		margin: 0 0 56px 0;
	}
	.education .ed_zone.ez_main p {
		padding: 8px 0;
	}
	.education .ed_zone.ez_main:hover p {
		padding: 8px;
	}
	.education .mrbutton {
		margin: 32px 0 0 0;
	}
	
	.education .band.mrf {
		top: 60px;
		transform: rotate(-11deg) translateX(-50%);
	}
	.education .band.mrl {
		bottom: -80px;
		transform: rotate(10deg) translateX(-50%);
	}
}
@media (max-width: 991px) {
	.education {
/* 		margin-top: var(--tablet_v_space); */
		padding-top: var(--tablet_v_space);
		padding-bottom: var(--tablet_v_space);
	}
	.education .ed_zone.ez_main p {
		margin: 0 0 32px 0;
	}
	
	.education .band.mrf {
		top: -760px;
		transform: rotate(-40deg) translateX(-50%);
	}
	.education .band.mrl {
		bottom: -750px;
		transform: rotate(30deg) translateX(-50%);
	}
	
	.education .band.mrf {
		top: 60px;
		transform: rotate(-11deg) translateX(-50%);
	}
	.education .band.mrl {
		bottom: -1850px;
		transform: rotate(50deg) translateX(-50%);
	}
}
@media (max-width: 767px) {
	.education .ed_zone.ez_sec p {
		margin: 0 0 32px 0;
	}
	.education .mrbutton {
		margin: 0;
	}
	
	.education .band.mrf {
		top: -2010px;
		transform: rotate(-57deg) translateX(-90%);
	}
	.education .band.mrl {
		bottom: -2130px;
		transform: rotate(56deg) translateX(-71%);
	}
}
@media (max-width: 575px) {
	.education .band.mrf {
		top: -2710px;
		transform: rotate(-63deg) translateX(-90%);
	}
	.education .band.mrl {
		bottom: -2520px;
		transform: rotate(59deg) translateX(-71%);
	}
}

/*************************************************************************/
/*** END EDUCATION *******************************************************/
/*************************************************************************/



/*************************************************************************/
/*** START INDEX ABOUT ***************************************************/
/*************************************************************************/

.index_about {
	background-color: var(--color_gray_100);
/* 	margin-top: var(--desktop_space); */
	padding: 112px 0;
}
.index_about .ava_box {
	width: 100%;
	height: 392px;
	background-position: center;
	background-size: cover;
}
.index_about p {
	margin: -228px 0 72px 0;
}

@media (max-width: 1399px) {
	.index_about p {
		margin: -228px 0 72px 0;
	}
}
@media (max-width: 1199px) {
	.index_about {
/* 		margin-top: var(--tablet_h_space); */
		padding: 96px 0;
	}
}
@media (max-width: 991px) {
	.index_about {
/* 		margin-top: var(--tablet_v_space); */
		padding: 72px 0;
	}
	.index_about .ava_box {
		margin: 72px 0 0 0;
	}
	.index_about p {
		margin: 188px 0 72px 0;
	}
}
@media (max-width: 767px) {
	.index_about .ava_box {
		height: 264px;
		margin: 64px 0 0 0;
	}
	.index_about p {
		margin: 32px 0 24px 0;
	}
}
@media (max-width: 575px) {
	.index_about .ava_box {
		height: 200px;
		margin: 40px 0 0 0;
	}
}

/*************************************************************************/
/*** END INDEX ABOUT *****************************************************/
/*************************************************************************/



/*************************************************************************/
/*** START PUBLIC ********************************************************/
/*************************************************************************/

.public {
	margin-top: var(--desktop_space);
}

.public_links {
	margin: 112px 0 0 0;
}
.public_links a {
	display: block;
	width: 100%;
	text-decoration: none;
	border-top: 2px solid var(--color_gray);
	padding: 48px 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;
}
.public_links a img {
	float: right;
	width: 72px;
	height: 72px;
}

.public_links a p {
	float: left;
	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;
}
.public_links a:hover {
	background-color: var(--color_accent);
}
.public_links a:hover p {
	color: var(--color_dark);
	text-shadow: var(--color_accent) 1px 1px 0,
				 var(--color_accent) -1px -1px 0,
				 var(--color_accent) -1px 1px 0,
				 var(--color_accent) 1px -1px 0;
}

@media (max-width: 1399px) {
	//
}
@media (max-width: 1199px) {
	.public {
		margin-top: var(--tablet_h_space);
	}
	.public_links a {
		padding: 40px 0;
	}
	.public_links a img {
		width: 56px;
		height: 56px;
	}
}
@media (max-width: 991px) {
	.public {
		margin-top: var(--tablet_v_space);
	}
	.public h2 {
		margin: 0 0 40px 0;
	}
	.public_links {
		margin: 104px 0 0 0;
	}
	.public_links a {
		padding: 32px 0;
	}
}
@media (max-width: 767px) {
	.public h2 {
		margin: 0 0 24px 0;
	}
	.public_links {
		margin: 80px 0 0 0;
	}
	.public_links a img {
		width: 40px;
		height: 40px;
	}
}
@media (max-width: 575px) {
	.public_links a img {
		display: none;
	}
}

/*************************************************************************/
/*** END PUBLIC **********************************************************/
/*************************************************************************/




/************************************************************************************************************/
/***|------------------------------|*************************************************************************/
/***|                              |*************************************************************************/
/***|        PORTFOLIO PAGE        |*************************************************************************/
/***|                              |*************************************************************************/
/***|------------------------------|*************************************************************************/
/************************************************************************************************************/

/*************************************************************************/
/*** START PORTFOLIO *****************************************************/
/*************************************************************************/

.port_cover {
	padding-top: var(--desktop_space);
}
.port_cover ul li {
    margin: 0 0 16px 0;
}


.main_case {
	padding: 128px 0;
}
.main_case .main_case_box {
	width: 100%;
	height: 504px;
	background-position: center;
	background-size: cover;
}
.main_case .main_case_box a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--color_overlay);
	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;
}
.main_case .main_case_box a img {
	width: auto;
	height: calc(50% - 16px);
	position: absolute;
	right: 8px;
	bottom: 8px;
}
.main_case .main_case_box a:hover {
	opacity: 1;
}
.main_case .info_zone {
	width: 100%;
	height: 504px;
}
.main_case .info_zone h2 a {
	text-decoration: none;
}
.main_case .info_zone h2 a:hover {
	text-decoration: underline;
}
.main_case .info_zone .mrbutton {
	width: 100%;
}


.sec_cases {
	margin: 0 0 112px 0;
}
.sec_cases .sec_cases_box {
	width: 100%;
	height: 368px;
	background-position: center;
	background-size: cover;
}
.sec_cases .sec_cases_box a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--color_overlay);
	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;
}
.sec_cases .sec_cases_box a img {
	width: auto;
	height: calc(50% - 16px);
	position: absolute;
	right: 8px;
	bottom: 8px;
}
.sec_cases .sec_cases_box a:hover {
	opacity: 1;
}
.sec_cases .info_zone h3 {
	margin: 16px 0;
}
.sec_cases .info_zone h3 a {
	text-decoration: none;
}
.sec_cases .info_zone h3 a:hover {
	text-decoration: underline;
}

@media (max-width: 1399px) {
	.main_case {
		padding: 96px 0;
	}
	.main_case .main_case_box {
		height: 400px;
	}
	.main_case .info_zone {
		height: 400px;
	}
	.sec_cases {
		margin: 0 0 88px 0;
	}
	.sec_cases .sec_cases_box {
		height: 280px;
	}
}
@media (max-width: 1199px) {
	.port_cover {
		padding-top: var(--tablet_h_space);
	}
	.main_case h2 {
		padding: 16px 0;
	}
	.main_case .info_zone {
		height: auto;
	}
	.sec_cases {
		margin: 0 0 48px 0;
	}
	.sec_cases .sec_cases_box {
		height: 200px;
	}
	.sec_cases .info_zone h3 {
		margin: 8px 0;
	}
}
@media (max-width: 991px) {
	.port_cover {
		padding-top: var(--tablet_v_space);
	}
	.port_cover ul {
		margin: 40px 0 0 0;
	}
	.main_case .main_case_box {
		height: 368px;
	}
	.sec_cases {
		margin: 0;
	}
	.sec_cases .sec_cases_box {
		height: 368px;
	}
	.sec_cases .info_zone h3 {
		margin: 8px 0 48px 0;
	}
}
@media (max-width: 767px) {
	.port_cover {
		padding: 56px 0;
	}
	.port_cover ul {
		margin: 24px 0 0 0;
	}
	.main_case {
		padding: 24px 0 96px 0;
	}
	.main_case .main_case_box {
		height: 280px;
	}
	.sec_cases .sec_cases_box {
		height: 280px;
	}
}
@media (max-width: 575px) {
	.main_case {
		padding: 24px 0 64px 0;
	}
	.main_case .main_case_box,
	.sec_cases .sec_cases_box {
		position: relative;
		height: auto;
	}
	.main_case .main_case_box::before,
	.sec_cases .sec_cases_box::before {
		content: ""; 
		display: block; 
		padding-top: 50%;
	}
}

/*************************************************************************/
/*** END PORTFOLIO *************••****************************************/
/*************************************************************************/




/************************************************************************************************************/
/***|--------------------------------|***********************************************************************/
/***|                                |***********************************************************************/
/***|        DEVELOPMENT PAGE        |***********************************************************************/
/***|                                |***********************************************************************/
/***|--------------------------------|***********************************************************************/
/************************************************************************************************************/



/*************************************************************************/
/*** START DEV COVER & ADVANT ********************************************/
/*************************************************************************/

.dev_cover {
	margin-top: var(--desktop_space);
}

.advant {
	margin-top: var(--desktop_space);
}
.advant .d-lg-flex {
	position: relative;
	height: 424px;
}
.advant p.tip_lead {
	position: relative;
	z-index: 9;
}
.advant .img_box {
	position: absolute;
	right: 12px;
	bottom: 0;
	width: 984px;
	height: 100%;
	background-position: center;
	background-size: cover;
}
.advant p.tip_display {
	color: var(--color_light);
	text-align: right;
	margin: 128px 0;
}


@media (max-width: 1399px) {
	.advant .img_box {
		width: 840px;
	}
}
@media (max-width: 1199px) {
	.dev_cover {
		margin-top: var(--tablet_h_space);
	}
	.advant {
		margin-top: var(--tablet_h_space);
	}
	.advant .d-lg-flex {
		height: 336px;
	}
	.advant .img_box {
		width: 696px;
	}
	.advant p.tip_display {
		margin: 96px 0;
	}
}
@media (max-width: 991px) {
	.dev_cover {
		margin-top: var(--tablet_v_space);
	}
	.advant {
		margin-top: var(--tablet_v_space);
	}
	.dev_cover ul {
		margin: -96px 0 0 0;
	}
	.dev_cover ul li {
		text-align: right;
		margin: 0 0 16px 0;
	}
	.advant .d-lg-flex {
		height: auto;
	}
	.advant p.tip_lead {
		margin: 40px 0 0 0
	}
	.advant .img_box {
		position: relative;
		display: block;
		right: 0;
		width: 100%;
		height: 344px;
	}
}
@media (max-width: 767px) {
	.dev_cover ul {
		margin: 40px 0 0 0;
	}
	.dev_cover ul li {
		float: left;
		width: auto;
		text-align: left;
		margin: 0 40px 16px 0;
	}
	.advant .img_box {
		height: 248px;
	}
	.advant p.tip_display {
		margin: 56px 0;
	}
}
@media (max-width: 575px) {
	.dev_cover ul li {
		margin: 0 24px 16px 0;
	}
	.advant .img_box {
		height: auto;
	}
	.advant .img_box::before { 
		content: ""; 
		display: block; 
		padding-top: 48%;
	}
}

/*************************************************************************/
/*** END DEV COVER & ADVANT **********************************************/
/*************************************************************************/



/*************************************************************************/
/*** START PLAN **********************************************************/
/*************************************************************************/

.plan {
	background-color: var(--color_gray);
	margin-top: var(--desktop_space);
	padding: 112px 0;
}
.plan h2 {
	color: var(--color_light);
}

@media (max-width: 1399px) {
	//
}
@media (max-width: 1199px) {
	.plan {
		margin-top: var(--tablet_h_space);
		padding: 96px 0;
	}
}
@media (max-width: 991px) {
	.plan {
		margin-top: var(--tablet_v_space);
		padding: 72px 0;
	}
}
@media (max-width: 767px) {
	//
}
@media (max-width: 575px) {
	//
}

/*************************************************************************/
/*** END PLAN ************************************************************/
/*************************************************************************/



/*************************************************************************/
/*** START SERVICE *******************************************************/
/*************************************************************************/

.service {
	margin-top: var(--desktop_space);
	margin-bottom: var(--tablet_h_space);
}
.service .cont_wrap {
	float: left;
	width: 100%;
	height: auto;
	border-top: 2px solid var(--color_gray);
	margin-top: 56px;
}
.service .cont_wrap .cont_box {
	float: left;
	width: 26%;
	border-right: 2px solid var(--color_gray);
	padding: 48px 24px 0;
}
.service .cont_wrap .cont_box:first-child,
.service .cont_wrap .cont_box:last-child {
	width: 24%;
}
.service .cont_wrap .cont_box:first-child {
	padding: 48px 24px 0 0;
}
.service .cont_wrap .cont_box:last-child {
	border: none;
	padding: 48px 0 0 24px;
}
.service .cont_wrap .cont_box .img_box {
	width: 100%;
	height: 368px;
	margin: 24px 0 16px 0;
	background-position: center;
	background-size: cover;
}
.service .cont_wrap .cont_box .img_box a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--color_overlay);
	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;
}
.service .cont_wrap .cont_box .img_box a img {
	width: calc(50% - 16px);
	height: auto;
	position: absolute;
	right: 8px;
	bottom: 8px;
}
.service .cont_wrap .cont_box .img_box a:hover {
	opacity: 1;
}
.service .cont_wrap .cont_box a {
	float: right;
}


.service .cont_wrap .cont_box .img_box a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--color_overlay);
	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;
}
.service .cont_wrap .cont_box .img_box a img {
	width: calc(50% - 16px);
	height: auto;
	position: absolute;
	right: 8px;
	bottom: 8px;
}
.service .cont_wrap .cont_box .img_box a:hover {
	opacity: 1;
}


.service p.tip_display {
	color: var(--color_light);
	text-align: right;
	margin: 128px 0;
}

.service .first_line .tip_display {
	display: block;
	width: 100%;
	text-align: right;
}
.service .first_line .tip_display span {
	color: var(--color_accent);
}
.service .first_line .tip_lead {
	margin: 0 0 8px 0;
}
.service .sec_line {
	padding: 80px 0;
}
.service h3 {
	margin: 0 0 32px 0;
}
.service .criterion .tip_lead {
	margin: 0 0 8px 0;
}

@media (max-width: 1399px) {
	.service .cont_wrap .cont_box .img_box {
		height: 328px;
	}
}
@media (max-width: 1199px) {
	.service {
		margin-top: var(--tablet_h_space);
		margin-bottom: var(--tablet_h_space);
	}
	.service .cont_wrap .cont_box {
		padding: 32px 16px 0;
	}
	.service .cont_wrap .cont_box:first-child {
		padding: 32px 16px 0 0;
	}
	.service .cont_wrap .cont_box:last-child {
		padding: 32px 0 0 16px;
	}
	.service .cont_wrap .cont_box .img_box {
		height: 272px;
		margin: 16px 0 8px 0;
	}
	
	.service p.tip_display {
		margin: 96px 0;
	}
}
@media (max-width: 991px) {
	.service {
		margin-top: var(--tablet_v_space);
		margin-bottom: var(--tablet_v_space);
	}
	.service .cont_wrap .cont_box .img_box {
		height: 200px;
	}
	
	.service .criterion {
		margin: 0 0 56px 0;
	}
}
@media (max-width: 767px) {
	.service .cont_wrap {
		border-top: none;
		border-left: 2px solid var(--color_gray);
	}
	.service .cont_wrap .cont_box {
		width: 100%;
		border-right: none;
		border-bottom: 2px solid var(--color_gray);
		padding: 32px 16px 0;
	}
	.service .cont_wrap .cont_box:first-child,
	.service .cont_wrap .cont_box:last-child {
		width: 100%;
	}
	.service .cont_wrap .cont_box:first-child {
		padding: 32px 16px 0 0;
	}
	.service .cont_wrap .cont_box:last-child {
		padding: 32px 0 0 16px;
	}
	.service .cont_wrap .cont_box .img_box {
		height: 272px;
		margin: 16px 0 8px 0;
	}
	
	.service p.tip_display {
		margin: 56px 0;
	}
	
	.service .first_line .tip_lead {
		margin: 0;
	}
	.service .sec_line {
		padding: 80px 0 40px 0;
	}
	.service .sec_line .tip_lead {
		margin: 0 0 40px 0;
	}
}
@media (max-width: 575px) {
	.service .cont_wrap .cont_box {
		padding: 40px 0 40px 56px;
	}
	.service .cont_wrap .cont_box:first-child {
		padding: 0 0 40px 56px;
	}
	.service .cont_wrap .cont_box:last-child {
		padding: 40px 0 0 56px;
	}
	.service .cont_wrap .cont_box .img_box {
		position: relative;
		height: auto;
	}
	.service .cont_wrap .cont_box .img_box {
		content: ""; 
		display: block; 
		padding-top: 125%;
	}
	
	.service .first_line .tip_display {
		text-align: left;
		margin: 40px 0 24px 0;
	}
	.service .sec_line {
		padding: 40px 0;
	}
	.service h3 {
		margin: 0 0 40px 0;
	}
	.service .criterion {
		margin: 0 0 32px 0;
	}
	.service .mrbutton {
		margin: 8px 0 0 0;
	}
}

/*************************************************************************/
/*** END SERVICE *********************************************************/
/*************************************************************************/




/************************************************************************************************************/
/***|--------------------------|*****************************************************************************/
/***|                          |*****************************************************************************/
/***|        ABOUT PAGE        |*****************************************************************************/
/***|                          |*****************************************************************************/
/***|--------------------------|*****************************************************************************/
/************************************************************************************************************/



/*************************************************************************/
/*** START ABOUT COVER ***************************************************/
/*************************************************************************/

.about_cover {
	margin-top: var(--desktop_space);
}
.about_cover .tip_display {
	color: var(--color_light);
}

.a_info {
	margin-top: var(--desktop_space);
}

.a_info .ava_box {
	height: 392px;
	background-position: center;
	background-size: cover;
}

@media (max-width: 1399px) {
	.a_info .ava_box {
		height: 336px;
	}
}
@media (max-width: 1199px) {
	.about_cover {
		margin-top: var(--tablet_h_space);
	}
	
	.a_info {
		margin-top: var(--tablet_h_space);
	}
	.a_info .ava_box {
		height: 296px;
	}
	.a_info .tip_lead {
		margin-bottom: 32px;
	}
}
@media (max-width: 991px) {
	.about_cover {
		margin-top: var(--tablet_v_space);
	}
	
	.a_info {
		margin-top: 56px;
	}
	.a_info .ava_box {
		height: 272px;
	}
	.a_info .tip_lead {
		margin-bottom: 24px;
	}
}
@media (max-width: 767px) {
	.a_info .ava_box {
		height: 216px;
	}
}
@media (max-width: 575px) {
	.about_cover .tip_display {
		margin-top: 24px;
	}
	
	.a_info .ava_box {
		width: 100%;
		height: auto;
		margin-bottom: 32px;
	}
	.a_info .ava_box::before {
		content: ""; 
		display: block; 
		padding-top: 100%;
	}
}

/*************************************************************************/
/*** END ABOUT COVER *****************************************************/
/*************************************************************************/



/*************************************************************************/
/*** START SKILL *********************************************************/
/*************************************************************************/

.skill {
	background-color: var(--color_gray);
	margin-top: var(--desktop_space);
	padding: 112px 0;
}
.skill h2 {
	color: var(--color_light);
}

.skill .cicle_zone {
	position: relative;
	height: 504px;
	margin-top: 56px;
}
.skill .cicle_zone .c1,
.skill .cicle_zone .c2,
.skill .cicle_zone .c3,
.skill .cicle_zone .c4,
.skill .cicle_zone .c5 {
	position: absolute;
	left: 0;
	border-radius: 100%;
	border: 2px solid var(--color_accent);
	background-color: transparent;
}
.skill .cicle_zone .c1 {
	--c_size: 296px;
	top: calc(50% - (var(--c_size) / 2));
	width: var(--c_size);
	height: var(--c_size);
	animation: 			circleSlide_H 7s linear infinite;
	-webkit-animation:  circleSlide_H 7s linear infinite;
	
}
.skill .cicle_zone .c2 {
	--c_size: 360px;
	top: calc(50% - (var(--c_size) / 2));
	width: var(--c_size);
	height: var(--c_size);
	animation: 			circleSlide_H 17s linear infinite;
	-webkit-animation:  circleSlide_H 17s linear infinite;
}
.skill .cicle_zone .c3 {
	--c_size: 400px;
	top: calc(50% - (var(--c_size) / 2));
	width: var(--c_size);
	height: var(--c_size);
	animation: 			circleSlide_H 9s linear infinite;
	-webkit-animation:  circleSlide_H 9s linear infinite;
}
.skill .cicle_zone .c4 {
	--c_size: 448px;
	top: calc(50% - (var(--c_size) / 2));
	width: var(--c_size);
	height: var(--c_size);
	animation: 			circleSlide_H 24s linear infinite;
	-webkit-animation:  circleSlide_H 24s linear infinite;
}
.skill .cicle_zone .c5 {
	--c_size: 504px;
	top: calc(50% - (var(--c_size) / 2));
	width: var(--c_size);
	height: var(--c_size);
	animation: 			circleSlide_H 11s linear infinite;
	-webkit-animation:  circleSlide_H 11s linear infinite;
}

.skill .line {
	border-bottom: 2px solid var(--color_light);
	margin-top: -168px;
}
.skill .line p {
	color: var(--color_light);
}

@media (max-width: 1399px) {
	.skill .cicle_zone {
		height: 480px;
	}
	.skill .cicle_zone .c1 {
		--c_size: 272px;
	}
	.skill .cicle_zone .c2 {
		--c_size: 336px;
	}
	.skill .cicle_zone .c3 {
		--c_size: 376px;
	}
	.skill .cicle_zone .c4 {
		--c_size: 424px;
	}
	.skill .cicle_zone .c5 {
		--c_size: 480px;
	}
	.skill .line {
		margin-top: -192px;
	}
}
@media (max-width: 1199px) {
	.skill {
		margin-top: var(--tablet_h_space);
		padding: 96px 0;
	}
	.skill .cicle_zone {
		height: 400px;
	}
	.skill .cicle_zone .c1 {
		--c_size: 192px;
	}
	.skill .cicle_zone .c2 {
		--c_size: 256px;
	}
	.skill .cicle_zone .c3 {
		--c_size: 296px;
	}
	.skill .cicle_zone .c4 {
		--c_size: 344px;
	}
	.skill .cicle_zone .c5 {
		--c_size: 400px;
	}
	.skill .line {
		margin-top: -168px;
	}
}
@media (max-width: 991px) {
	.skill {
		margin-top: var(--tablet_v_space);
		padding: 72px 0;
	}
}
@media (max-width: 767px) {
	.skill .cicle_zone {
		height: 440px;
	}
	.skill .cicle_zone .c1,
	.skill .cicle_zone .c2,
	.skill .cicle_zone .c3,
	.skill .cicle_zone .c4,
	.skill .cicle_zone .c5 {
		top: 0;
	}
	.skill .cicle_zone .c1 {
		--c_size: 96px;
		left: calc(70% - (var(--c_size) / 2));
		animation: 			circleSlide_V 7s linear infinite;
		-webkit-animation:  circleSlide_V 7s linear infinite;
	}
	.skill .cicle_zone .c2 {
		--c_size: 160px;
		left: calc(70% - (var(--c_size) / 2));
		animation: 			circleSlide_V 17s linear infinite;
		-webkit-animation:  circleSlide_V 17s linear infinite;
	}
	.skill .cicle_zone .c3 {
		--c_size: 200px;
		left: calc(70% - (var(--c_size) / 2));
		animation: 			circleSlide_V 9s linear infinite;
		-webkit-animation:  circleSlide_V 9s linear infinite;
	}
	.skill .cicle_zone .c4 {
		--c_size: 280px;
		left: calc(70% - (var(--c_size) / 2));
		animation: 			circleSlide_V 24s linear infinite;
		-webkit-animation:  circleSlide_V 24s linear infinite;
	}
	.skill .cicle_zone .c5 {
		--c_size: 304px;
		left: calc(70% - (var(--c_size) / 2));
		animation: 			circleSlide_V 11s linear infinite;
		-webkit-animation:  circleSlide_V 11s linear infinite;
	}
	.skill .line {
		border-bottom: none;
		border-left: 2px solid var(--color_light);
		margin-top: -440px;
		padding-left: 8px;
	}
	.skill .line p {
		width: 100%;
		color: var(--color_light);
		margin-bottom: 80px;
	}
	.skill .line p:last-child {
		margin-bottom: 0;
	}
}
@media (max-width: 575px) {
	.skill .cicle_zone .c1 {
		--c_size: 56px;
		left: calc(70% - (var(--c_size) / 2));
	}
	.skill .cicle_zone .c2 {
		--c_size: 80px;
		left: calc(70% - (var(--c_size) / 2));
	}
	.skill .cicle_zone .c3 {
		--c_size: 104px;
		left: calc(70% - (var(--c_size) / 2));
	}
	.skill .cicle_zone .c4 {
		--c_size: 136px;
		left: calc(70% - (var(--c_size) / 2));
	}
	.skill .cicle_zone .c5 {
		--c_size: 160px;
		left: calc(70% - (var(--c_size) / 2));
	}
}

/*************************************************************************/
/*** END SKILL ***********************************************************/
/*************************************************************************/



/*************************************************************************/
/*** START THANKTH *******************************************************/
/*************************************************************************/

.thankth {
	margin-top: var(--desktop_space);
}
.thankth .block_cloud {
	margin-top: 56px;
}

@media (max-width: 1399px) {
	//
}
@media (max-width: 1199px) {
	.thankth {
		margin-top: var(--tablet_h_space);
	}
}
@media (max-width: 991px) {
	.thankth {
		margin-top: var(--tablet_v_space);
	}
}
@media (max-width: 767px) {
	//
}
@media (max-width: 575px) {
	//
}

/*************************************************************************/
/*** END THANKTH *********************************************************/
/*************************************************************************/



/*************************************************************************/
/*** START STORY *********************************************************/
/*************************************************************************/

.story_title {
	margin-top: var(--desktop_space);
}
.story_body {
	margin-top: var(--desktop_space);
	margin-bottom: var(--desktop_space);
}
.story_title h2 {
	color: var(--color_light);
}

@media (max-width: 1399px) {
	//
}
@media (max-width: 1199px) {
	.story_title {
		margin-top: var(--tablet_h_space);
	}
	.story_body {
		margin-top: var(--tablet_h_space);
		margin-bottom: var(--tablet_h_space);
	}
}
@media (max-width: 991px) {
	.story_title {
		margin-top: var(--tablet_v_space);
	}
	.story_body {
		margin-top: var(--tablet_v_space);
		margin-bottom: var(--tablet_v_space);
	}
}
@media (max-width: 767px) {
	.story_body .p_last {
		margin: 32px 0 0 0;
	}
}
@media (max-width: 575px) {
	.story_body .p_last,
	.story_body p {
		margin: 0 0 32px 0;
	}
}

/*************************************************************************/
/*** END STORY ***********************************************************/
/*************************************************************************/



/*************************************************************************/
/*** START WELCOME_BV ****************************************************/
/*************************************************************************/

.welcome_bv {
	background-color: var(--color_gray);
	margin-top: var(--desktop_space);
	padding: 112px 0 0 0;
}
.welcome_bv h2,
.welcome_bv .tip_display {
	color: var(--color_light);
}
.welcome_bv .tip_display {
	margin: 48px 0 96px 0;
}
.welcome_bv img {
	float: right;
	width: 72%;
	height: auto;
	margin-top: -80px; 
}

@media (max-width: 1399px) {
	//
}
@media (max-width: 1199px) {
	.welcome_bv {
		margin-top: var(--tablet_h_space);
		padding: 96px 0 0 0;
	}
}
@media (max-width: 991px) {
	.welcome_bv {
		margin-top: var(--tablet_v_space);
		padding: 72px 0 0 0;
	}
	.welcome_bv .tip_display {
		margin: 48px 0 32px 0;
	}
	.welcome_bv img {
		width: 100%;
		margin-top: 56px; 
	}
}
@media (max-width: 767px) {
	.welcome_bv .tip_display {
		margin: 32px 0 56px 0;
	}
}
@media (max-width: 575px) {
	//
}

/*************************************************************************/
/*** END WELCOME_BV ******************************************************/
/*************************************************************************/



/*************************************************************************/
/*** START RESUME ********************************************************/
/*************************************************************************/

.resume {
	margin-top: var(--desktop_space);
}
.resume .cont_zone {
	margin-top: 56px;
	padding-top: 24px;
	padding-bottom: 16px;
	border-top: 2px solid var(--color_gray);
}
.resume .cont_zone .position {
	margin: 8px 0 16px 0;
}
.resume .cont_zone .data {
	padding-bottom: 40px;
}

@media (max-width: 1399px) {
	//
}
@media (max-width: 1199px) {
	.resume {
		margin-top: var(--tablet_h_space);
	}
	.resume .cont_zone .data {
		margin-top: 8px;
	}
	.resume .cont_zone .position {
		margin: 4px 0 11px 0;
	}
}
@media (max-width: 991px) {
	.resume {
		margin-top: var(--tablet_v_space);
	}
	.resume .cont_zone .position {
		margin: 4px 0 16px 0;
	}
}
@media (max-width: 767px) {
	.resume {
		margin-bottom: var(--tablet_v_space);
	}
	.resume .cont_zone .position {
		margin: 24px 0 8px 0;
	}
	.resume .cont_zone {
		padding-bottom: 0;
	}
}
@media (max-width: 575px) {
	//
}

/*************************************************************************/
/*** END RESUME **********************************************************/
/*************************************************************************/











/* ———> */



/*************************************************************************/
/*** 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 ************************************************************/
/*************************************************************************/