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

span.a_link_list:before {
	background: #2e2e2e url("/images/product/list_w.svg") no-repeat center;
	background-size: 13px 17px;
}


/* ----------------------------- */
/* common
/* ----------------------------- */
.p_line {
	padding-bottom: 3em;
	margin-bottom: 3em;
	border-bottom: 1px solid #cecece;
}

/* youtube */
.youtube-wrap {
	width: 100%;
	padding-top: 56.25%;
	height: 0;
	position: relative;
	overflow: hidden;
}
.youtube-wrap iframe,
.youtube-wrap object,
.youtube-wrap embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/* arw_link_black */
a.a_link_arw_black {
	display: flex;
	align-items: center;
	text-decoration: underline;
	text-underline-offset: 4px;
}

a.a_link_arw_black::before {
	content: "";
	display: block;
	width: 21px;
	height: 21px;
	margin-right: 7px;
	margin-bottom: -4px;
	border-radius: 50%;
	background: url("/images/product/arw_link_b.svg") no-repeat center/ 100% 100%;
}

/* col3 */
.item-col {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -10px;
}
.item-col .item {
	width: calc(50% - 20px);
	margin: 0 10px 2em;
}
.item-col .item h3 {
	padding-left: 0;
	padding-bottom: 0;
}
.item-col .item h3::before {
	display: none;
}

.item-col3 {
	display: flex;
	margin: 0 -10px;
}
.item-col3 .item {
	width: calc(33.33% - 20px);
	margin: 0 10px;
}
.item-col2 .item {
	width: calc(50% - 20px);
}

.box-img-list {
	text-align: center;
}
.box-img-list .ti {
	margin: 0.6em 0 0.2em;
	font-size: 1.8rem;
	font-family: "NotoSansMedium";
}

.box-list .item {
	display: flex;
	background-color: #f1f1f1;
	padding: 3em 2em;
	font-size: 1.8rem;
	font-family: "NotoSansMedium";
	text-align: center;
	justify-content: center;
	border-radius: 20px;
}
.box-list .item > div {
	display: flex;
	align-items: center;
	justify-content: center;
}
.box-list .item span {
	display: block;
	padding: 0.2em 0;
	font-size: 1.6rem;
	font-family: "NotoSansDemiLight";
}

/* p_basic_반대 */
.p_basic_reverse {
	display: flex;
}
.p_basic_reverse figure {
	width: 50%;
	margin-left: 4.1%;
}
.p_basic_reverse .p_con {
	width: 45.9%;
}
.p_basic_new {
	display: flex;
}
.p_basic_new figure {
	width: 34%;
	margin-right: 4.1%;
}
.p_basic_new .p_con {
	flex: 1;
}

/* common */
.ta-c {
	text-align: center;
}
.brd-radi20 {
	border-radius: 20px;
}

/* box-padding */
.twin-box {
	padding: 3em;
}

/* table_yellow */
table.tbl thead th.c-yel {
	background-color: #ffd702;
}
table.tbl tbody td.c-yel {
	background-color: #fff7cc;
}
table.tbl-ai {
	border-top-color: #1e1e1e;
}

/* color */
.tbl_info {
	margin-top: 0.5em;
	color: #6a6a6a;
	font-size: 1.4rem;
	text-align: left;
}

/* h2_styl arw */
.h-arw-bl {
	position: relative;
	display: flex;
	align-items: center;
	padding: 0.8em 1.2em;
	margin-bottom: 1.2em;
	font-size:2.4rem;
	font-family: "NotoSansMedium";
	background-color: #ffd702;
	border-radius: 10px;
}
.h-arw-bl::before {
	display: block;
	content: "";
	position: static;
	border-radius: 0;
	border: 0;
	width: 21px;
	height: 21px;
	margin-right: 0.4em;
	background:  url("/images/product/arw_ti.svg") no-repeat center / 100% 100%;
}
.c-bl2 {
	border: 2px solid #dbdbdb;
	background-color: #f0f0f0;
}

/* accordion */
.accordion {
	border: 2px solid #e0e7f9;
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 1em;
}
.accordion .acco_ti {
	display: flex;
	align-items: center;
	padding: 1em 1.5em;
	/* border: 2px solid #4169e1; */
	background-color: #e0e7f9;
	font-size: 2rem;
	font-family: "NotoSansMedium";
	cursor: pointer;
}
.accordion .acco_ti::after {
	content: "";
	display: block;
	width: 18px;
	height: 10px;
	margin-left: auto;
	background: url("/images/product/arw_acco.svg") no-repeat center / 100% 100%;
}
.accordion .acoo_cont {
	padding: 0 2em;
	opacity: 0;
	height: 0;
}
.accordion .acoo_cont h3 {
	font-size: 1.8rem;
	padding-left: 12px;
	padding-bottom: 0.3em;
}
.accordion .acoo_cont h3::before {
	top: 7px;
}
.accordion .acoo_cont .item {
	margin-bottom: 1.4em;
}
.accordion .acoo_cont .item:last-child {
	margin-bottom: 0;
}
.accordion.acoo-open .acco_ti::after {
	transform: rotate(-180deg);
}
.accordion.acoo-open .acoo_cont {
	padding: 2em;
	height: auto;
	opacity: 1;
}


/* t_bold */
.f_medium {
	font-family: "NotoSansMedium";
}

/* ----------------------------- */
/* iot_product_list
/* ----------------------------- */
table.tbl-pdf-list{
	text-align: center;
}
table.tbl-pdf-list tbody tr th {
	text-align: left;
}
a.i_pdfdown {
	display: block;
	position: relative;
	padding-left: 24px;
}
a.i_pdfdown::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 16px;
	height: 20px;
	background: url("/images/product/pdf2.svg") no-repeat center/ 100% 100%;
}
a.i_pdfdown .a-info {
	display: inline-block;
	padding: 0 4px;
	margin-left: 4px;
	background-color: #ffd702;
	color: #c4191f;
	font-size: 1.1rem;
	font-family: "NotoSansMedium";
	font-style: italic;
}
a.i_pdfdown .info-blue {
	background-color: #333;
	color: #fff;
}


/* ----------------------------- */
/* cnc link 추가
/* ----------------------------- */
.cnc-servo-youtube {
	max-width: 720px;
	display: flex;
	justify-content: center;
	margin: 0 auto;
}
.cnc-servo-youtube .item {
	width: 286px;
	text-align: center;
}
.cnc-servo-youtube .item:nth-child(2) {
	margin-left: auto;
}
.cnc-servo-youtube .item .item-top {
	padding: 1.5em 1em;
	margin-bottom: 1em;
	border: 1px solid #cecece;
	background-color: #f9f9f9;
	border-radius: 200px;
	font-size: 1.8rem;
}
.cnc-servo-youtube .item .btn-youtube-wrap {
	display: inline-block;
	margin-left: 0.5em;
}
.cnc-servo-youtube .item .btn-youtube {
	display: inline-block;
	padding: 3px 36px 4px 10px;
	margin-top: 0.5em;
	border: 1px solid #c4191f;
	border-radius: 100px;
	font-size: 1.4rem;
	background: url("/images/product/youtube.svg") no-repeat right 10px center/ 22px 15px;
	color: #c4191f;
}
/* ----------------------------- */
/* IoT
/* ----------------------------- */
.tech-iot-list-wrap{
	margin-bottom: 2em;
	border-bottom: 1px solid #cecece;
}
.tech-iot-list {
	display: flex;
	margin-bottom: 2em;
}
.tech-iot-list .item {
	/* width: 33.33%;
	padding: 0 10px; */
	width: 31.7%;
	margin: 0 0.8%;
}
.tech-iot-list .item figure {
	margin-bottom: 1em;
}
.link-box {
	margin-top: 1em;
}
.tech-iot-list .item .a_link_arw {
	font-size: 1.8rem;
}
.a_link_arw {
	display: flex;
	align-items: center;
}
.a_link_arw::before {
	display: block;
	content: "";
	width: 28px;
	height: 28px;
	margin-right: 10px;
	flex-shrink: 0;
	background: url("/images/product/link_arw.svg") no-repeat center/ 100% 100%;
}

/* link-list */
.link-list2 {
	margin-top: 2em;
}
.link-list2 > li  {
	margin-bottom: 0.4em;
}


/* ----------------------------- */
/* IoT-cont
/* ----------------------------- */
.ti-top-head {
	padding: 1.2em;
	margin-bottom: 3em;
	background-color: #1e1e1e;
	color: #fff;
	border-radius: 10px;
}
.ti-top-head div {
	text-align: center;
}
.ti-top-head div.ti-top-sub {
	font-size: 2.0rem;
}
.ti-top-head div.ti-top-main {
	font-size: 2.8rem;
	font-family: "NotoSansBold";
}


/* ----------------------------- */
/* twin
/* ----------------------------- */
/*tech-twin-col*/
.tech-twin-col {
	display: flex;
	margin-bottom: 80px;
}
.tech-twin-col .tw-ti {
	width: 45%;
	flex-shrink: 0;
	line-height: 1.6;
	font-size: 2.8rem;
	font-family: "NotoSansBold";
}


/* concept */

.tech-twin-concept {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 4em 1em;
	border-radius: 20px;
}
.tech-twin-concept .concept-cir {
	width: 230px;
	height: 152px;
	flex-shrink: 0;
	/* padding: 3em 4em; */
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #1e1e1e;
	border-radius: 50%;
	font-size: 2.0rem;
	font-family: "NotoSansBold";
}
.tech-twin-concept .concept-cont {
	display: flex;
	align-items: center;
	text-align: center;
}
.tech-twin-concept .concept-arw {
	display: flex;
	align-items: center;
	width: 16%;
	height: 1px;
	background-color: #1e1e1e;
}
.tech-twin-concept .concept-arw::after {
	content: "";
	display: block;
	width: 6px;
	height: 12px;
	margin-left: auto;
	flex-shrink: 0;
	background: url("/images/product/tech_twin_arw.png") no-repeat center/ 100% 100%;
}
.tech-twin-concept .concept-cont::after {
	width: 20px;
	height: 20px;
	background-color: #1e1e1e;
}
.tech-twin-concept .concept-cont .concept-cir {
	margin-left: 10px;
	border-color: #c4191f;
	background-color: #ffffff;
	font-size: 1.8rem;
	font-family: "NotoSansMedium";
}
/* twin-list */
.tech-twin-list {
	background-color: #ebebeb;
	padding: 4em 0;
	margin-bottom: -10.4167vw;
}
.tech-twin-list h2 {
	width: 100%;
	padding-left: 0;
}
.tech-twin-list h2::before {
	display: none;
}
.tech-twin-list-wrap {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -10px;
}
.tech-twin-list-wrap .cont {
	position: relative;
	display: flex;
	width: calc(50% - 20px);
	padding: 2.5em;
	margin: 0 10px 20px;
	background: #fff;
}
.tech-twin-list-wrap .cont .txt .new {
	align-self: flex-start;
	padding: 0 5px;
	/* background-color: #ffd702; */
	color: #c4191f;
	font-size: 1.4rem;
	font-family: "NotoSansMedium";
	font-style: italic;
}
.tech-twin-list-wrap .cont .txt {
	flex: 1;
	display: flex;
	flex-direction: column;
	margin-left: 1.2em;
}
.tech-twin-list-wrap .cont .txt h4 {
	margin-bottom: 0.5em;
	font-size: 2.0rem;
	font-family: "NotoSansMedium";
}
.tech-twin-list-wrap .cont .txt p {
	margin-bottom: 1em;
	color: #7c7c7c;
}
.tech-twin-list-wrap .cont .txt .a_link_arw_black {
	margin-top: auto;
	margin-left: auto;
}

/* ----------------------------- */
/* twin_ex
/* ----------------------------- */
.ex-sect {
	margin-bottom: 80px;
}
.ex-sect:last-child {
	margin-bottom: 100px;
}
.ti-top-head .ti-top-main-flex {
	display: flex;
	align-items: center;
	justify-content: center;
}
.ti-top-head div.ti-top-main .ex-head {
	display: flex;
	width: 60px;
	height: 38px;
	margin-right: 10px;
	background-color: #ffd702;
	color: #000000;
	border-radius: 10px;
	font-size: 2.0rem;
	justify-content: center;
	align-items: center;
	font-family: "NotoSansMedium";
}

.lh-170 {
	line-height: 1.7;
}
/* ex-head-cont */
.ex-head-cont {
	display: flex;
	margin-bottom: 50px;
	margin-top: 1em;
}
.ex-head-cont .cont {
	width: 620px;
	margin-top: 1em;
	margin-right: 1em;
}
.ex-head-cont .cont h2 {
	padding: 0;
	line-height: 1.5;
	margin-bottom: 1em;
	font-family: "NotoSansBold";
	/* font-size: 2.8; */
}
.ex-head-cont .cont h2 span {
	display: block;
}
.ex-head-cont .cont h2::before {
	display: none;
}
.ex-head-cont figure {
	margin-left: auto;
}

/* h-num-bl */
.h-num-bl {
	font-size: 2.8rem;
	padding: 0;
	margin-block: 1.4em 0.6em;
}
.h-num-bl::before {
	display: none;
}
.h-num-bl span {
	display: inline-flex;
	width: 40px;
	aspect-ratio: 1;
	margin-right: 0.7em;
	border-radius: 100px;
	background: #e4e4e4;
	align-items: center;
	justify-content: center;
	font-size: 2.1rem;
	line-height: 1;
	justify-self: flex-start;
}

/* h-num-bl-cont */
.h-num-bl-cont {
	display: flex;
}
.h-num-bl-cont figure {
	width: 40%;
	margin-left: 3em;
	flex-shrink: 0;
}
.h-num-bl-cont .h-num-bl {
	padding-right: 2em;
}

/* ex-list */
.tech-twin-ex-list {
	margin-bottom: 4em;
	padding-bottom: 2.8em;
	border-bottom: 2px solid #000;
}
.tech-twin-ex-list h2 {
	padding-bottom: 8px;
}
.tech-twin-ex-list-wrap .cont .txt p {
	margin-block: 7px 5px;
}




/* tablet */
@media screen and ( max-width:1024px) {
/* ----------------------------- */
/* common
/* ----------------------------- */

/* ----------------------------- */
/* twin
/* ----------------------------- */
.tech-twin-concept .concept-cir {
	width: 168px;
}

/* ----------------------------- */
	/* twin
	/* ----------------------------- */
	/* list */
	.tech-twin-list-wrap {
		display: block;
		margin: 0;
	}
	.tech-twin-list-wrap .cont {
		width: 100%;
		padding: 1.5em;
		margin: 0 0 20px;
	}
	.tech-twin-list-wrap .cont figure {
		width: 132px;
		flex-shrink: 0;
	}
	.tech-twin-list-wrap .cont .txt h4 {
		font-size: 1.6rem;
	}
}

/* Mobile */
@media screen and ( max-width:767px) {
	/* ----------------------------- */
	/* common
	/* ----------------------------- */
	/* col3 */
	.item-col3 {
		flex-wrap: wrap;
		justify-content: left;
	}
	.item-col3 .item {
		width: calc(50% - 20px);
		margin-bottom: 20px;
	}
	.box-list .item {
		padding: 1.5em 1em;
		font-size: 1.6rem;
	}

	.item-col3 {
		margin: 0 -10px;
	}
	.item-col3 .item {
		width: calc(50% - 10px);
		margin: 0 5px 10px;
	}
	.box-img-list .item {
		margin-bottom: 1.8em;
	}
	.box-img-list .ti {
		font-size: 1.6rem;
	}
	.box-list .item {
		font-size: 1.6rem;
	}
	.box-list .item span {
		font-size: 1.5rem;
	}

	/* p_basic_반대 */
	.p_basic_reverse {
		display: block;
	}
	.p_basic_reverse figure {
		width: 100%;
		margin-left: 0;
		text-align: center;
	}
	.p_basic_reverse .p_con {
		width: 100%;
		margin-bottom: 20px;
	}

	.p_basic_new {
		display: block;
	}
	.p_basic_new figure {
		width: 100%;
		margin-bottom: 10px;
		margin-right: 0;
		text-align: center;
	}

	/* box-padding */
	.twin-box {
		padding: 2em;
	}

	/* h2_styl arw */
	.h-arw-bl {
		font-size: 2rem;
		padding: 0.8em;
	}
	/* accordion */
	.accordion .acco_ti {
		padding: 1em 1.2em;
		font-size: 1.7rem;
	}
	.accordion .acoo_cont h3 {
		font-size: 1.6rem;
		padding-left: 10px;
	}
	.accordion .acoo_cont h3::before {
		top: 6px;
	}
	.accordion.acoo-open .acoo_cont {
		padding: 1.4em;
	}

	/* ----------------------------- */
	/* iot_product_list
	/* ----------------------------- */
	table.tbl-pdf-list tr {
		display: flex;
		flex-wrap: wrap;
		border-right: 1px solid #cecece;
	}
	table.tbl-pdf-list tr td,
	table.tbl-pdf-list tr th {
		flex: 1;
		border-right: 0;
	}
	table.tbl-pdf-list tr th:first-child  {
		flex: auto;
		width: 100%;
	}
	table.tbl-pdf-list tbody tr th:first-child {
		border-top: 1px solid #cecece;
	}


	/* ----------------------------- */
	/* cnc link 추가
	/* ----------------------------- */
	.cnc-servo-img {
		padding: 30px;
	}
	.tech-iot-list .item {
		width: 48.4%;
		margin: 0 0.8% 10px;
	}
	.cnc-servo-youtube .item {
		width: 48%;
	}
	.cnc-servo-youtube .item .item-top {
		font-size: 1.6rem;
		padding: 0.8em 1em;
	}
	.cnc-servo-youtube .item .btn-youtube-wrap {
		display: block;
		margin-left: 0;
	}

	/* ----------------------------- */
	/* IoT-cont
	/* ----------------------------- */
	.div.ti-top-sub {
		font-size: 1.6rem;
	}
	.div.ti-top-main {
		font-size: 2.2rem;
		font-family: "NotoSansBold";
	}

	/* ----------------------------- */
	/* twin
	/* ----------------------------- */
	/*tech-twin-col*/
	.tech-twin-col {
		display: block;
	}
	.tech-twin-col .tw-ti {
		width: 100%;
		margin-bottom: 1em;
		font-size: 2.2rem;
	}
	/* concept*/
	.tech-twin-concept {
		flex-wrap: wrap;
		padding: 2em 1em;
	}
	.tech-twin-concept > .concept-cir {
		width: 100%;
		height: auto;
		flex-direction: column;
		border-radius: 0;
		border: 0;
	}
	.tech-twin-concept .concept-cont {
		width: 90%;
		margin: 1em 5% 0;
	}
	.tech-twin-concept .concept-arw {
		display: none;
	}
	.tech-twin-concept .concept-cont .concept-cir {
		width: calc(50% - 10px);
		height: 120px;
		padding: 2em 1em;
		font-size: 1.6rem;
	}
	/* ----------------------------- */
	/* twin_ex
	/* ----------------------------- */
	.ti-top-head .ti-top-main-flex {
		flex-direction: column;
	}
	.ti-top-head div.ti-top-main .ex-head {
		width: 48px;
		height: 32px;
		border-radius: 6px;
		font-size: 1.8rem;
		margin-right: 0;
		margin-bottom: 4px;
	}

	/* ex-head-cont */
	.ex-head-cont {
		display: block;
	}
	.ex-head-cont .cont {
		width: 100%;
		margin-right: 0;
	}
	.ex-head-cont .cont h2 span {
		display: inline;
	}

	/* h-num-bl */
	.h-num-bl {
		font-size: 2.2rem;
	}
	.h-num-bl span {
		width: 34px;
		font-size: 1.8rem;
	}
	.h-num-bl-cont {
		display: block;
	}
	.h-num-bl-cont figure {
		width: 100%;
		margin-left: 0;
	}
	.h-num-bl-cont .h-num-bl {
		padding-right: 0;
	}
}
@media screen and ( max-width:480px) {
	/* ----------------------------- */
	/* twin
	/* ----------------------------- */
	/* list */
	.tech-twin-list-wrap .cont figure {
		width: 96px;
	}
	/* ----------------------------- */
	/* common
	/* ----------------------------- */
	.item-col,
	.item-col3 {
		display: block;
		width: 100%;
		margin: 0;
	}
	.item-col .item,
	.item-col3 .item {
		width: 100%;
		margin: 0 0 10px
	}
	.item-col .item {
		margin-bottom: 2em;
	}
	.box-img-list .item {
		margin-bottom: 1.8em;
	}

	/* ----------------------------- */
	/* twin
	/* ----------------------------- */
	/* list */
	.tech-twin-list-wrap .cont {
		display: block;
	}
	.tech-twin-list-wrap .cont figure {
		width: 60%;

	}
	.tech-twin-list-wrap .cont .txt {
		margin-left: 0;
		margin-top: 1em;
	}
}
@media screen and ( max-width:320px) {

}


/* ----------------------------- */
/* p_basic-new
/* ----------------------------- */
.p_basic-video {
	display: flex;
}
.p_basic-video .video-wrap {
	width: 43.2%;
}
.p_basic-video .p_con {
	margin-left: auto;
	width: 52.7%;
}
@media screen and ( max-width:768px) {
	.p_basic-video {
		display: block;
	}
	.p_basic-video .video-wrap {
		width: 100%;
		margin-bottom: 20px;
	}
	.p_basic-video .p_con {
		width: 100%;
	}
}

/* ----------------------------- */
/* ol-num
/* ----------------------------- */
.list_style_num {
	display: flex;
	flex-direction: column;
	gap: 8px;
	counter-reset: item;
}
.list_style_num li {
	display: flex;
	justify-content: flex-start;
	counter-increment: item;
}
.list_style_num li::before {
	content: counter(item, decimal-leading-zero);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-right: 8px;
	flex-shrink: 0;
	background-color: #e4e4e4;
	border-radius: 100px;
	font-size: 1.4rem;
	font-variant-numeric: tabular-nums; /* 숫자 폭 고정 */
}

/* ----------------------------- */
/* box-cont
/* ----------------------------- */
.box-cont-line {
	padding: 1em 1.5em;
	border: 1px solid #cecece;
	background-color: #f9f9f9;
}
.fabriqr-box {
	padding: 1.875em 2.5em;
	display: flex;
	align-items: center;
	gap: 1.4em;
}
.fabriqr-box img {
	width: 46px;
}
@media screen and ( max-width:768px) {
	.fabriqr-box {
		padding: 1.375em 2em;
		flex-direction: column;
		text-align: center;
	}
}