@charset "utf-8";
/* ================================================================== */
/* Name	: main.css
/* Script : Main CSS
/* Author : Design Geulggol
/* Date	: 2019-06-12
/* ================================================================== */


/* ----------------------------- */
/* Visual
/* ----------------------------- */
.vi01 {
	background-image: url('/images/main/visual03.jpg');
	background-position: top center;
	background-size: cover;
}

.vi02 {
	background-image: url('/images/main/visual01.jpg');
	background-position: top center;
	background-size: cover;
}

.vi03 {
	background-image: url('/images/main/visual02.jpg');
	background-position: top center;
	background-size: cover;
}

.vi04 {
	background-image: url('/images/main/visual04.jpg');
	background-position: top center;
	background-size: cover;
}

.vi05 {
	background-image: url('/images/main/visual05.jpg');
	background-position: top center;
	background-size: cover;
}

.visual {
	padding-top: 38%;
}

.v_ti {
	width: 1180px;
	position: absolute;
	top: 30%;
	left: 50%;
	margin-left: -590px;
	line-height: 380%;
}

.v_ti > span {
	position: relative;
	display: inline-block;
	margin-bottom: 27px;
	font-size: 2.8rem;
	color: #e5e5e5;
}

.v_ti > span:after {
	content: "";
	display: block;
	position: absolute;
	bottom: 18px;
	right: -55px;
	width: 37px;
	height: 1px;
	background: #fff;
}

.v_ti > strong {
	display: block;
	margin-top: 3px;
	font-size: 6.4rem;
	color: #fff;
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}

.v_ti strong strong {
	font-family: "NotoSansBold";
	color: #ffd702;

}

.v_nav {
	width: 1180px;
	position: absolute;
	left: 50%;
	margin-left: -590px;
	bottom: 35.8%;
	z-index: 99;
}

.v_nav span {
	display: inline-block;
	width: 48px;
	height: 2px;
	margin-right: 5px;
	background: #fff;
	opacity: 0.5;
}

.v_nav span.active, .v_nav span.swiper-pagination-bullet-active {
	height: 4px;
	opacity: 1;
}

.v_nav .swiper-pagination-bullet {
	border-radius: 0;

}

.arrow {
	width: 100%;
	position: absolute;
	top: 50%;
	left: 0;
	font-size: 1.4rem;
	color: #fff;
	font-family: "RobotoLight";
	text-align: center;
	z-index: 999;
	cursor: pointer;
}

.arrow img {
	width: 24px;
	margin-bottom: 21px;
}

.arrow span {
	display: block;
}

.arrow .prev,
.arrow .next {
	position: absolute;
	top: 0;
	margin-top: -20px;
}

.arrow .prev {
	left: 2.375%;
}

.arrow .next {
	right: 2.375%;
}

/*
@keyframes move-background {
	from {
		-webkit-transform: translate3d(0px, 0px, 0px);
	}
	to {
		-webkit-transform: translate3d(-1000px, 0px, 0px);
	}
}
@-webkit-keyframes move-background {
	from {
		-webkit-transform: translate3d(0px, 0px, 0px);
	}
	to {
		-webkit-transform: translate3d(-1000px, 0px, 0px);
	}
}

@-moz-keyframes move-background {
	from {
		-webkit-transform: translate3d(0px, 0px, 0px);
	}
	to {
		-webkit-transform: translate3d(-1000px, 0px, 0px);
	}
}

@-webkit-keyframes move-background {
	from {
		-webkit-transform: translate3d(0px, 0px, 0px);
	}
	to {
		-webkit-transform: translate3d(-1000px, 0px, 0px);
	}
}
*/

@keyframes move-background {
	from {
		-webkit-transform: scale(1);
	}
	to {
		-webkit-transform: scale(1.7);
	}
}

@-webkit-keyframes move-background {
	from {
		-webkit-transform: scale(1);
	}
	to {
		-webkit-transform: scale(1.7);
	}
}

@-moz-keyframes move-background {
	from {
		-webkit-transform: scale(1);
	}
	to {
		-webkit-transform: scale(1.7);
	}
}

@-webkit-keyframes move-background {
	from {
		-webkit-transform: scale(1);
	}
	to {
		-webkit-transform: scale(1.7);
	}
}

.visual_ani {
	-moz-animation: move-background 100s linear infinite;
	-ms-animation: move-background 100s linear infinite;
	-o-animation: move-background 100s linear infinite;
	-webkit-animation: move-background 100s linear infinite;
	animation: move-background 100s linear infinite;
}

.visual_scale {
	transform: scale(1.05) rotate(.001deg);
	z-index: 0;
	transition: transform 6000ms ease-in-out;
}

.main_visual_video {
	overflow: hidden;
	position: relative;
	z-index:-1;
}
.main_visual_video video {
	width:100%;
	height:100%;
}
.main_visual_video .v_ti {
	top: calc(50% - 80px);
	z-index: 20;
}
.video_bg {
	width:100%;
	height:100%;
	background:rgba(0,0,0, 0.5);
	position:absolute;
	top:0;
	left:0;
	z-index: 10;
}
	/* ----------------------------- */
/* product
/* ----------------------------- */
.product {
	width: 100%;
	position: relative;
	overflow: hidden;
	margin-top: -90px;
	z-index: 10;
}

.product .p_wrap {
	background: #ffd702;
	margin-top: 87px;
}

/* title */
.product .p_content {
	position: relative;
	padding: 63px 0 107px;
}

.product .p_content h2 {
	font-size: 3.6rem;
	font-family: "NotoSansMedium";
	color: #af0f28;
}

.product .p_content .count {
	padding: 26px 0 65px;
	color: #000;
}

.product .p_content .count span img {
	width: 10px;
	margin: 2px 6px 0 4px;
}

.product .p_content .count strong {
	font-size: 1.8rem;
	color: #af0f28;
}

.product .p_content .p_arrow span {
	display: block;
	width: 52px;
	height: 52px;
	float: left;
	margin-right: 10px;
	background: #fff url("/images/common/arrow_s1.png") no-repeat center;
	background-size: 5px;
	text-indent: -500000px;
	cursor: pointer;
}

.product .p_content .p_arrow span:nth-child(2) {
	transform: rotate(180deg);
}

/* content */
.product .p_list {
	width: 1300px;
	overflow: hidden;
	position: absolute;
	top: -47px; /* top: -87px;  */
	left: 260px;
}

.product .p_list ul {
	width: 1300px;
}

.product .p_list li {
	width: 360px;
	float: left;
}

.product .p_list li figure img {
	display: block;
}

.product .p_list li > div > span {
	display: block;
	width: 64px;
	height: 64px;
	position: absolute;
	top: 15px;
	right: -32px;
	border-radius: 50%;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.product .p_list li span.fa {
	background: #ffd702 url("/images/main/m_i_fa.svg") no-repeat center;
	background-size: 23px;
}

.product .p_list li span.rm {
	background: #ffd702 url("/images/main/m_i_rm.svg") no-repeat center;
	background-size: 24px;
}

.product .p_list li span.ro {
	background: #ffd702 url("/images/main/m_i_ro.svg") no-repeat center;
	background-size: 22px;
}
.product .p_list li span.te {
	background: #ffd702 url("/images/main/m_i_te.svg") no-repeat center;
	background-size: 28px;
}

.product .p_list li h3 {
	position: relative;
	background: #fff;
	font-size: 1.8rem;
}

.product .p_list li h3 a {
	display: block;
	padding: 30px 30px 29px;
}

.product .p_list li h3 a span {
	display: inline-block;
	width: 58px;
	position: absolute;
	top: 27px;
	right: 0;
	text-indent: -500000px;
	background: url("/images/main/p_more.png") no-repeat center;
	background-size: 18px;
}

.product .p_list li h3 span:before {
	content: "";
	display: block;
	position: absolute;
	top: -8px;
	left: 0;
	width: 1px;
	height: 44px;
	background: #d1d1d1;
}

/* ----------------------------- */
/* news
/* ----------------------------- */
.news {
	padding: 95px 0 92px;
	background: url("/images/main/news_bg.png") no-repeat bottom 70px left 49px;
}

.news h2 {
	position: relative;
	padding-bottom: 57px;
	font-size: 5.2rem;
	font-family: "NotoSansMedium";
	text-align: center;
}

.news h2 a {
	display: inline-block;
	position: absolute;
	top: 20px;
	right: 0;
	padding: 3px 40px 5px 18px;
	border-radius: 20px;
	background: #f9f9f9 url("/images/common/arrow_s2.png") no-repeat center right 17px;
	background-size: 5px;
	font-size: 1.6rem;
	font-family: "NotoSansDemiLight";
	border: 1px solid #cecece;
}

.news_img{
    position: relative;
    margin-bottom: 21px;
    padding-top: 66.5%;
    border: 1px solid #cecece;
    overflow: hidden;
}
.news_img img {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -50%;
}

/* news_new6 */
.news .news_list li {
	position: relative;
	width: 31.7%;
	margin: 0 0.8% 20px;
	padding: 23px 30px;
	float: left;
	border: 1px solid #d8d8d8;
	background: #fff;
	transition: 0.2s ease;
}
.news .news_list li.new:after {
	content: "";
	display: block;
	position: absolute;
	top: -1px;
	left: -1px;
	width: 58px;
	height: 58px;
	background: url("/images/common/new.png") no-repeat center;
}

.news .news_list li:hover {
	box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1);
	transition: 0.2s ease;
}

.news .news_list li .date {
	font-size: 1.4rem;
	color: #6c6c6c;
}

.news .news_list li h3 {
	padding: 5px 0 14px;
	font-size: 2.0rem;
	font-family: "NotoSansRegular";
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.news .news_list li h3 strong {
	display: inline-block;
	padding-right: 10px;
	color: #c4191f;
}

.news .news_list li p {
	margin-bottom: 56px;
	color: #8a8a8a;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.news .news_list li a span {
	display: block;
	font-size: 1.4rem;
	color: #242424;
}

.news .news_list li span img {
	width: 34px;
	margin-left: 16px;
}

/* .news .news_list li {
	width: 33.3%;
	float: left;
	padding: 23px 30px;
	border-left: 1px solid #d8d8d8;
}
.news .news_list li:first-child {
	border-left: 0;
}
.news .news_list li .date {
	font-size: 1.4rem;
	color: #6c6c6c;
}
.news .news_list li h3 {
	padding: 5px 0 14px;
	font-size: 2.0rem;
	font-family: "NotoSansRegular";
}
.news .news_list li h3 strong {
	display: inline-block;
	padding-right: 10px;
	color: #c4191f;
}
.news .news_list li p {
	height: 124px;
	margin-bottom: 56px;
	color: #8a8a8a;
	overflow: hidden;
	word-break: break-all;
}
.news .news_list li span a {
	display: block;
	font-size: 1.4rem;
	color: #242424;
}
.news .news_list li span img {
	width: 34px;
	margin-left: 16px;
} */

/* ----------------------------- */
/* first_service
/* ----------------------------- */
.first_service {
	padding: 86px 0 59px;
	background: url("/images/main/service_bg.jpg") no-repeat top center;
	background-size: cover;
	color: #fff;
	text-align: center;
}

.first_service div > p {
	width: 45%;
	margin: 0 auto;
	line-height: 120%;
	color: #d1d1d1;
}

.first_service h2 {
	display: inline-block;
	margin-left: 43px;
	margin-bottom: 40px;
}

.first_service h2 img {
	width: 605px;
}

.first_service .service_list {
	width: 85.3%;
	margin: 49px auto 65px;
}

.first_service .service_list li {
	position: relative;
	width: 20%;
	float: left;
	line-height: 130%;
}

.first_service .service_list li:before {
	content: "";
	display: block;
	width: 26px;
	height: 1px;
	position: absolute;
	top: 55px;
	left: -13px;
	background: #fff;
	background: rgba(255, 255, 255, 0.5);
}

.first_service .service_list li:first-child:before {
	display: none;
}

.first_service .service_list li div {
	width: 111px;
	height: 111px;
	line-height: 111px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: #000;
	background: rgba(0, 0, 0, 0.5);
}

.first_service .service_list li div img {
	vertical-align: middle;
}

.first_service .service_list li.s_i01 div img {
	width: 52px;
}

.first_service .service_list li.s_i02 div img {
	width: 56px;
}

.first_service .service_list li.s_i03 div img {
	width: 52px;
}

.first_service .service_list li.s_i04 div img {
	width: 34px;
}

.first_service .service_list li.s_i05 div img {
	width: 51px;
}

.first_service .service_list li p {
	width: 56%;
	margin: 0 auto;
}

.first_service a.more {
	display: block;
	width: 252px;
	height: 52px;
	line-height: 52px;
	padding: 0 30px;
	margin: 0 auto;
	border: 2px solid #fff;
	color: #fff;
	background: url("/images/common/arrow_g.png") no-repeat center right 30px;
	background-size: 25px;
	text-align: left;
}

/* ----------------------------- */
/* training
/* ----------------------------- */
.training {
	max-width: 1700px;
	margin: 188px auto 147px;
}

.training .t_img {
	position: relative;
	width: 51.2%;
	float: left;
}
.training .t_img figure {
	position: absolute;
	top: 0;
	left: 0;
}

.training .t_con {
	width: 48.8%;
	float: left;
	padding-left: 7.1%;
}

.training .t_con .t_info {
	float: right;
}

.training .t_con .t_info li {
	position: relative;
	float: left;
	padding: 0 27px 0 48px;
}

.training .t_con .t_info li.t_calendar:after {
	content: "";
	display: block;
	position: absolute;
	top: 7px;
	right: 0;
	width: 1px;
	height: 12px;
	background: #a3a3a3;
}

.training .t_con .t_info li.t_calendar {
	background: url("/images/main/calendar.svg") no-repeat left 23px top 6px;
	background-size: 16px;
}

.training .t_con .t_info li.t_download {
	background: url("/images/main/download.svg") no-repeat left 23px top 7px;
	background-size: 14px;
}

.training .t_con h2 {
	position: relative;
	display: inline-block;
	margin-top: 130px;
	font-size: 4.0rem;
	font-family: "NotoSansMedium";
}

.training .t_con h2:before {
	content: "";
	display: block;
	position: absolute;
	top: 29px;
	left: -53px;
	width: 23px;
	height: 3px;
	background: #000;
}

.training .t_con .t_s_ti {
	margin: 10px 0 34px;
	font-size: 2.2rem;
}

.training .t_con p {
	width: 80%;
	color: #686868;
}

.training .t_btn a {
	margin-top: 20px;
	padding: 7px 40px 7px 20px;
	display: inline-block;
	border-radius: 20px;
	background: #ffd702 url("/images/common/arrow_s2.png") no-repeat center right 20px;
	background-size: 5px;
	font-size: 1.8rem;
	font-family: "NotoSansRegular";
}

.training .t_con .t_tel {
	position: relative;
	padding-left: 48px;
	margin-top: 53px;
	font-size: 2.5rem;
	font-family: "RobotoRegular";
}

.training .t_con .t_tel:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 33px;
	height: 33px;
	background: #c4191f url("/images/main/tel.svg") no-repeat center;
	background-size: 17px;
	border-radius: 50%;
}

/* ----------------------------- */
/* technology
/* ----------------------------- */
.technology {
	padding: 53px 0;
	background: #eeeeee;
}

.technology li {
	width: 25%;
	float: left;
}

.technology li div {
	width: 202px;
	height: 202px;
	line-height: 202px;
	margin: 0 auto;
	border-radius: 50%;
	background: #fff;
	text-align: center;
}

.technology li div img {
	vertical-align: middle;
}

.technology li.iot div img {
	width: 138px;
}

.technology li.ai div img {
	width: 140px;
}

.technology li.qssr div img {
	width: 166px;
}

.technology li.field div img {
	width: 106px;
}

.technology li h3 {
	display: block;
	width: 168px;
	height: 45px;
	line-height: 39px;
	padding-left: 22px;
	margin: 25px auto 0;
	border: 3px solid #fff;
	border-radius: 23px;
	font-size: 1.8rem;
	background: url("/images/common/arrow_s2.png") no-repeat center right 13px;
	background-size: 5px;
}

/* ----------------------------- */
/* Responsive
/* -----------------------------
/* Layout Max Size : 1280px
/* Desktop Size	: 1024px < Screen <= 1280px
/* Tablet Size	: 1024px < Screen <= 768px
/* Mobile Size	: 767px < Screen
/* ----------------------------- */

@media screen and (max-width: 1440px) {
	/* ----------------------------- */
	/* Visual
	/* ----------------------------- */
	.visual {
		padding-top: 51vw;
	}

	.v_ti,
	.v_nav {
		padding-left: 150px;
	}

	/* ----------------------------- */
	/* training
	/* ----------------------------- */
	.training .t_con p span {
		display: none;
	}
}

@media screen and (max-width: 1280px) {
	/* ----------------------------- */
	/* Visual
	/* ----------------------------- */
	.visual {
		padding-top: 57.8125vw;
	}
	.v_ti {
		line-height: 360%;
	}
	.v_ti > strong {
		font-size: 5.2rem;
	}

	/* ----------------------------- */
	/* training
	/* ----------------------------- */
	.training {
		max-width: 1700px;
		margin: 100px auto 80px;
	}

	.training .t_img a {
		width: 248px;
		height: 85px;
		line-height: 85px;
		padding-left: 32px;
		background: #ffd702 url("/images/common/arrow_b.png") no-repeat center right 32px;
		background-size: 25px;
	}

	.training .t_con h2 {
		margin-top: 100px;
		font-size: 3.2rem;
	}

	.training .t_con h2:before {
		display: none;
	}

	.training .t_con p {
		width: 95%;
	}

	.training .t_con .t_tel {
		margin-top: 25px;
	}

}

@media screen and (max-width: 1100px) {
	/* ----------------------------- */
	/* Visual
	/* ----------------------------- */
	.v_ti,
	.v_nav {
		padding-left: 190px;
	}
}

/*  Tablet */
@media screen and (max-width: 1024px) {
	/* ----------------------------- */
	/* Visual
	/* ----------------------------- */
	.visual {
		padding-top: 72.2656vw;
	}

	/* ----------------------------- */
	/* product
	/* ----------------------------- */
	.product .p_list li > div > span {
		right: 15px;
	}

}

@media screen and (max-width: 960px) {

	/* ----------------------------- */
	/* Visual
	/* ----------------------------- */
	.vi01 {
		background-image: url('/images/main/visual03_t.jpg');
		background-size: cover;
	}

	.vi02 {
		background-image: url('/images/main/visual01_t.jpg');
		background-size: cover;
	}

	.vi03 {
		background-image: url('/images/main/visual02_t.jpg');
		background-size: cover;
	}
	.main_visual_video video {
		width: 960px;
		height: 100%;
		position:relative;
		margin:auto;
		left:50%;
		margin-left:-480px;
	}

	.v_ti {
		width: 100%;
		top: 32%;
		left: 0;
		margin-left: 0;
		text-align: center;
		padding-left: 0;
		line-height: 240%;
	}
	.v_ti > strong {
		font-size: 3.8rem;
	}

	.v_nav {
		width: 100%;
		left: 0;
		margin-left: 0;
		bottom: 35.8%;
		text-align: center;
		padding-left: 0;
	}

	.v_ti > span {
		display: block;
		width: 80%;
		margin: 15px auto 0;
		line-height: 120%;
		font-size: 2.2rem;
	}
	.v_ti > span:after {
		display: none;
	}

	/* ----------------------------- */
	/* news
	/* ----------------------------- */
	/* news_new6 */
	.news .news_list li {
		width: 48.4%;
		margin: 0 0.8% 20px;
		padding: 23px 30px;
	}

	.news .news_list li p {
		margin-bottom: 22px;
	}

	/* .news .news_list li {
	  width: 50%;
	  padding: 23px 30px;
	}
	.news .news_list li:last-child {
		display: none;
	} */
	/* ----------------------------- */
	/* first_service
	/* ----------------------------- */
	.first_service .service_list {
		width: 100%;
		margin: 29px auto 32px;
	}

	.first_service .service_list li p {
		width: 80%;
	}

	/* ----------------------------- */
	/* training
	/* ----------------------------- */
	.training {
		max-width: 96%;
		margin: 45px 3% 63px;
	}

	.training .t_img {
		width: 100%;
		float: none;
	}

	.training .t_img a {
		width: 252px;
		height: 68px;
		line-height: 68px;
		padding-left: 32px;
		margin: -34px auto 0;
		background: #ffd702 url("/images/common/arrow_b.png") no-repeat center right 32px;
		background-size: 25px;
		font-size: 1.8rem;
	}

	.training .t_con {
		width: 100%;
		padding-left: 0;
		text-align: center;
	}

	.training .t_con .t_info {
		width: 100%;
		float: none;
		margin-top: 20px;
	}

	.training .t_con .t_info li {
		position: relative;
		float: none;
		display: inline-block;
		padding: 0 24px 0 40px;
	}

	.training .t_con .t_info li.t_calendar {
		background: url("/images/main/calendar.svg") no-repeat left 18px top 5px;
		background-size: 16px;
	}

	.training .t_con .t_info li.t_download {
		background: url("/images/main/download.svg") no-repeat left 18px top 5px;
		background-size: 14px;
	}

	.training .t_con h2 {
		margin-top: 40px;
		font-size: 2.4rem;
	}

	.training .t_con .t_s_ti {
		margin: 5px 0 17px;
		font-size: 2.0rem;
	}

	.training .t_con p {
		width: 100%;
	}

	.training .t_con .t_tel {
		display: inline-block;
		padding-left: 40px;
		margin-top: 43px;
		font-size: 2.0rem;
	}

	.training .t_con .t_tel:before {
		width: 28px;
		height: 28px;
		background: #c4191f url("/images/main/tel.svg") no-repeat center;
		background-size: 14px;
	}
}

@media screen and (max-width: 768px) {

	/* ----------------------------- */
	/* Visual
	/* ----------------------------- */
	.vi01 {
		background-image: url('/images/main/visual03_m.jpg');
		background-size: cover;
	}

	.vi02 {
		background-image: url('/images/main/visual01_m.jpg');
		background-size: cover;
	}

	.vi03 {
		background-image: url('/images/main/visual02_m.jpg');
		background-size: cover;
	}

	.vi04 {
		background-image: url('/images/main/visual04_m.jpg');
		background-size: cover;
	}

	.vi05 {
		background-image: url('/images/main/visual05_m.jpg');
		background-size: cover;
	}
	.main_visual_video .v_ti {
		top: 35%;
		line-height: 240%;
	}
	.v_nav {
		bottom: 5%;
	}

	.v_nav span {
		width: 32px;
	}

	/* ----------------------------- */
	/* product
	/* ----------------------------- */
	/* title */
	.product .p_content {
		padding: 32px 0 52px;
	}

	.product .p_content h2 {
		width: 100%;
		font-size: 2.4rem;
		text-align: center;
	}

	.product .p_content .count {
		text-align: center;
		padding: 5px 0 13px;
	}

	.product .p_content .p_arrow {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.product .p_content .p_arrow span {
		width: 46px;
		height: 46px;
		float: left;
		margin-right: 0;
		position: absolute;
		top: 35px;
	}

	.product .p_content .p_arrow span:first-child {
		left: 7%;
	}

	.product .p_content .p_arrow span:last-child {
		right: 7%;
	}

	/* content */
	.product .p_list {
		width: 85%;
		margin: 0 auto;
		position: static;
	}

	.product .p_list li > div > span {
		width: 42px;
		height: 42px;
	}

	.product .p_list li span.fa {
		background: #ffd702 url("/images/main/m_i_fa.svg") no-repeat center;
		background-size: 17px;
	}

	.product .p_list li span.rm {
		background: #ffd702 url("/images/main/m_i_rm.svg") no-repeat center;
		background-size: 19px;
	}

	.product .p_list li span.ro {
		background: #ffd702 url("/images/main/m_i_ro.svg") no-repeat center;
		background-size: 17px;
	}

	.product .p_list li h3 a {
		padding: 18px 30px 17px;
	}

	.product .p_list li h3 a span {
		display: inline-block;
		width: 58px;
		position: absolute;
		top: 17px;
		right: 0;
		text-indent: -500000px;
		background: url("/images/main/p_more.png") no-repeat center;
		background-size: 18px;
	}

	.product .p_list li h3 span:before {
		top: -7px;
		height: 38px;
	}

	/* ----------------------------- */
	/* news
	/* ----------------------------- */
	.news {
		padding: 48px 0 26px;
	}

	.news h2 {
		padding-bottom: 20px;
		font-size: 2.4rem;
	}

	.news h2 a {
		top: 4px;
		font-size: 1.5rem;
	}

	.news .news_list li {
		width: 100%;
		margin: 0 0.8% 10px;
		padding: 20px 15px;
	}

	.news .news_list li h3 {
		padding: 3px 0 5px;
		font-size: 1.6rem;
	}

	.news .news_list li p {
		margin-bottom: 0;
	}

	.news .news_list li a span {
		position: absolute;
		top: 15px;
		right: 15px;
	}

	.news .news_list li a span strong {
		display: none;
	}

	/* ----------------------------- */
	/* first_service
	/* ----------------------------- */
	.first_service {
		padding: 53px 0 40px;
	}

	.first_service div > p {
		width: 80%;
	}

	.first_service h2 {
		margin-left: 43px;
		margin-bottom: 20px;
	}

	.first_service h2 img {
		width: 402px;
	}

	.first_service .service_list {
		font-size: 0;
		letter-spacing: -5px;
	}

	.first_service .service_list li {
		width: 30%;
		float: none;
		display: inline-block;
		vertical-align: top;
		font-size: 1.4rem;
		letter-spacing: 0;
	}

	.first_service .service_list li:before {
		display: none;
	}

	.first_service .service_list li div {
		width: 60px;
		height: 60px;
		line-height: 60px;
		margin: 0 auto 10px;
		background: rgba(0, 0, 0, 0.7);
	}

	.first_service .service_list li.s_i01 div img {
		width: 26px;
	}

	.first_service .service_list li.s_i02 div img {
		width: 28px;
	}

	.first_service .service_list li.s_i03 div img {
		width: 26px;
	}

	.first_service .service_list li.s_i04 div img {
		width: 17px;
	}

	.first_service .service_list li.s_i05 div img {
		width: 25px;
	}

	.first_service .service_list li p {
		width: 85%;
	}

	/* ----------------------------- */
	/* technology
	/* ----------------------------- */
	.technology {
		padding: 28px 0 0;
	}

	.technology li {
		width: 50%;
		margin-bottom: 30px;
	}

	.technology li div {
		width: 120px;
		height: 120px;
		line-height: 120px;
		margin: 0 auto;
	}

	.technology li.iot div img {
		width: 96px;
	}

	.technology li.ai div img {
		width: 98px;
	}

	.technology li.qssr div img {
		width: 100px;
	}

	.technology li.field div img {
		width: 74px;
	}

	.technology li h3 a {
		width: 90%;
		padding-left: 18px;
		margin: 15px auto 0;
		font-size: 1.6rem;
	}
}

/* Mobile */
@media screen and (max-width: 640px) {
	/* ----------------------------- */
	/* Visual
	/* ----------------------------- */
	.v_ti > span {
		font-size: 2.2rem;
		text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
	}

	.v_ti > strong {
		font-size: 4.2rem;
	}

	.arrow span {
		display: none;
	}
}

@media screen and (max-width: 460px) {
	/* ----------------------------- */
	/* Visual
	/* ----------------------------- */
	.v_ti > span {
		font-size: 1.7rem;
	}

	.v_ti > strong {
		font-size: 3.6rem;
	}

	.arrow img {
		width: 18px;
		margin-bottom: 21px;
	}

	/* ----------------------------- */
	/* news
	/* ----------------------------- */
	.news h2 a {
		display: block;
		position: static;
		width: 104px;
		margin: 10px auto 0;
	}
}