@charset "UTF-8";
/* CSS Document */

/*HEAD  VISUAL*/
.service_contents .sect_title:after{
	content: "Main Service";
}
.sub_visual .sect_title{
	background-image: url( "../images/main_bg02.jpg");
}
/*MAIN CONTENTS
--------------------------------------------------*/
/* service */
.service_box{
	display: block;
	overflow: hidden;
}
.service_box #electronic,
.service_box #consult{
	position: relative;
}
.service_box div .text p:nth-child(1) span{
	display: block;
	padding-bottom: 5px;
	border-bottom: 2px #f29600 dashed;
}
.service_box #electronic .text p:nth-child(1) span{
	color: #e84653;
}
.service_box #consult .text  p:nth-child(1) span{
	color: #e84653;
}
.service_box div .text p:nth-child(2){
	line-height: 1.8;
}
/*MEDIA QUERIES
--------------------------------------------------*/
/*pc+tab*/
@media (min-width: 641px) {
	/*LAYOUT---------------------------*/
	.service_box div .text{
		width: 60%;
	}
	.service_box div .imgbox{
		width: 40%;
	}
	.service_box div .imgbox img{
		max-width: 460px;
	}
	.inview .text,
	.inview .imgbox{
        filter:alpha(opacity=0);
        -moz-opacity:0;
        -webkit-opacity:0;
        -o-opacity:0;
        -ms-opacity:0;
        opacity:0;
        -webkit-transition:all 0.8s ease-out;
        -moz-transition:all 0.8s ease-out;
        -ms-transition:all 0.8s ease-out;
        -o-transition:all 0.8s ease-out;
        transition:all 0.8s ease-out;
	}
	#electronic.inview .imgbox{
        -moz-transform: translate(640px,0);
        -webkit-transform: translate(640px,0);
        -o-transform: translate(640px,0);
        -ms-transform: translate(640px,0);
		transform: translate(640px,0);
	}
	#consult.inview .imgbox{
        -moz-transform: translate(-640px,0);
        -webkit-transform: translate(-640px,0);
        -o-transform: translate(-640px,0);
        -ms-transform: translate(-640px,0);
		transform: translate(-640px,0);
	}
	.active .text,
	#electronic.active .imgbox,
	#consult.active .imgbox{
        -moz-transform: translate(0,0);
        -webkit-transform: translate(0,0);
        -o-transform: translate(0,0);
        -ms-transform: translate(0,0);
		transform: translate(0,0);
        filter:alpha(opacity=100);
        -moz-opacity:1;
        -webkit-opacity:1;
        -o-opacity:1;
        -ms-opacity:1;
        opacity:1;
	}
	.service_box #electronic .text{
		float: left;
	}
	.service_box #consult .text{
		float: right;
	}
	.service_box #electronic .imgbox{
		float: right;
	}
	.service_box #consult .imgbox{
		float: left;
	}
}
/*smartphone*/
@media (max-width: 640px) {
/*MAIN THREE*/
	.service_box{
		padding-top: 25px;
		padding-bottom: 35px;
	}
    .service_box #consult{
		padding-top: 25px;
	}
	.service_box #consult{
		margin-bottom: 30px;
	}
	.service_box div .text{
		position: relative;
		z-index: 0;
        text-shadow: 1px 1px 2px #fff,-1px -1px 2px #fff;
		background: transparent;
	}
    .service_box div .text p:nth-child(1){
		text-align: center;
    }
    .service_box div .text p:nth-child(1) b{
        font-size: 16px;
    }
	.service_box div .imgbox{
        filter:alpha(opacity=25);
        -moz-opacity:0.25;
        -o-opacity:0.25;
        -ms-opacity:0.25;
        -webkit-opacity:0.25;
        opacity:0.25;
		position: absolute;
		top: 10%;
		left: 50%;
		transform: translate(-50%,0);
		width: 64%;
		z-index: -1;
	}
}
/*tablet*/
@media (min-width: 641px) and (max-width: 893px) {
    /* THREE */
	.service_box{
		padding-top: 30px;
		padding-bottom: 30px;
	}
	.service_box div .text{
		width: calc(60% - 15px);
	}
    .service_box div .text p{
		margin-top: 15px;
    }
    .service_box div .text b{
        font-size: 18px;
    }
    .service_box div .text p span{
	}
}
/*PC*/
@media (min-width: 894px) {
    /* THREE */
	.service_box{
		padding-top: 35px;
		padding-bottom: 35px;
	}
    .service_box div .text p{
		margin-top: 20px;
    }
    .service_box div .text b{
        font-size: 20px;
    }
    .service_box div .text p span{
        display: block;
	}
}