/* ==================================================
	공통이미지 조절
================================================== */

.img100 {
	width: 100%;
}

/* ==================================================
	공통사항
================================================== */

hr {
	margin: 20px 0;
	height: 1px;
	border: 0px solid #e7e7e7;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-width: 0 0 1px 0;
}

.blank {
	height: 20px;
	clear: both;
	display: block;
}

.l-line {
	height: 5px;
	background: url('../images/common/line_bg.png') repeat-x 0 0;
	overflow: hidden;
}


/* ==================================================
	아이콘
================================================== */
.con_title {
	position: relative;
	font-size: 18pt;
	font-weight: 500;
	color: #000000;
	padding-top: 10px;
}

.con_title:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 50px;
	height: 2px;
	background: #be0307;
}

.line_title {
	position: relative;
	font-size: 18pt;
	font-weight: normal;
	color: #000;
	padding-top: 10px;
	padding-bottom: 10px;
}

.line_title:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 20px;
	height: 5px;
	background: #b2b2b2;
}

.line_title:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 15px;
	height: 5px;
	background: #0a3c7a;
}

.l-list01 {
	font-size: 12pt;
	line-height: 1.5;
}

.l-list01 li:before {
	content: "";
	position: absolute;
	top: 12px;
	left: 0;
	width: 3px;
	height: 3px;
	background: #013a84;
}

.l-list01 li {
	position: relative;
	padding-left: 12px;
	margin: 3px 0;
	color: #666;
}

.width_line_list li:before {
	position: absolute;
	top: 12px;
	left: 0;
	content: "";
	display: block;
	width: 4px;
	height: 1px;
	background: #a0a0a0;
}

.width_line_list li {
	position: relative;
	padding-left: 14px;
	font-size: 15px;
	margin-bottom: 3px;
}

.width_line_list li:last-child {
	margin-bottom: 0;
}

.red_line {
	padding-left: 13px;
	background: url('../images/icon/red_line.png');
	background-repeat: no-repeat;
	background-position: 0 12px;
	color: #e72b4a;
	font-size: 13pt;
}

.sub_title {
	position: relative;
	padding-left: 15px;
	margin-bottom: 20px;
	font-size: 24px;
	line-height: 1.5;
	color: #333333;
	font-weight: 500;
}

.sub_title:before {
	background: url('../images/icon/tit_icon.png') no-repeat;
	width: 4px;
	height: 26px;
	margin-top: 5px;
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	display: inline-block;
}

/*** 모바일CSS ***/

@media all and (max-width:1023px) {
	.con_title {
		font-size: 16pt;
	}

	.sub_title {
		padding-left: 12px;
		margin-bottom: 15px;
		font-size: 20px;
	}

	.sub_title:before {
		background: url('../images/icon/tit_icon.png') no-repeat;
		background-size: 3px 20px;
		width: 3px;
		height: 20px;
	}
}

@media all and (max-width:640px) {
	.con_title {
		font-size: 13pt;
	}

	.con_title:before {
		width: 30px;
	}

	.l-list01 {
		font-size: 11pt;
	}
}

@media all and (max-width:450px) {
	.l-list01 {
		font-size: 10pt;
	}

	.l-list01 li:before {
		top: 10px;
	}
}


/* ==================================================
이미지 움직이는 효과
================================================== */

.over-cover {
	overflow: hidden;
	position: relative;
	display: inline-block;
	border: 1px solid #dbdbdb;
}

.over-cover img {
	width: 100%;
	height: 100%;
	-webkit-transition: all 0.5s linear;
	transition: all 0.5s linear;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
}

.over-cover:hover img {
	-webkit-transform: scale3d(1.2, 1.2, 1);
	transform: scale3d(1.2, 1.2, 1);
}

/* ==================================================
공통테이블
================================================== */

.sub_con {
	width: 100%;
	overflow: hidden;
	margin-top: 20px;
}

.subtable {
	border: 0;
	border-spacing: 0;
	background: #fff;
	border-top: 1px solid #222222;
	text-align: center;
}

.subtable caption {
	visibility: hidden;
	overflow: hidden;
	width: 1px;
	height: 1px;
	font-size: 0;
	line-height: 0;
}

.subtable thead tr th {
	padding: 13px 0;
	background-color: #e6e6e6;
	border-right: 1px solid #c7c7c7;
	border-top: 1px solid #c7c7c7;
	border-bottom: 1px solid #c7c7c7;
	color: #333;
	font-weight: bold;
}

.subtable thead tr th:last-child {
	border-right: 0;
}

.subtable tr td {
	padding: 13px 0;
	border-bottom: 1px solid #e1e1e1;
}

.subtable tr td.bg_gray {
	background: #f5f5f5;
	color: #222;
	font-weight: bold;
	border-left: 0;
}

.subtable tr td {
	border-left: 1px solid #e1e1e1;
	padding: 13px 0;
}

/*** 모바일CSS ***/

@media all and (max-width:800px) {
	.subtable {
		font-size: 10pt;
	}
}

@media all and (max-width:500px) {
	.subtable {
		font-size: 0.75em;
	}
}

/* ==================================================
	유튜브 영상
================================================== */
.youtubeWrap {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 35px;
	height: 0;
	overflow: hidden
}

.youtubeWrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1
}

.youtubeWrap .btn_prev,
.youtubeWrap .btn_next {
	display: inline-block;
	position: absolute;
	top: 50%;
	margin-top: -45px;
	z-index: 100;
	background: rgba(0, 0, 0, 0.6);
	color: #fff
}

.youtubeWrap .btn_prev {
	left: 0
}

.youtubeWrap .btn_next {
	right: 0
}

.youtubeWrap .btn_prev>img {
	float: left
}

.youtubeWrap .btn_next>img {
	float: right
}

.youtubeWrap .btn_prev>span,
.youtubeWrap .btn_next>span {
	display: inline-block;
	float: left;
	height: 90px;
	padding: 0 15px;
	margin: 20px 0;
	max-height: 50px;
	max-width: 180px;
	font-size: 16px;
	display: block;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	display: none;
}

.youtubeWrap .btn_prev:hover>span,
.youtubeWrap .btn_prev:focus>span,
.youtubeWrap .btn_next:hover>span,
.youtubeWrap .btn_next:focus>span {
	display: inline-block
}

.movieBox {
	overflow: hidden;
}

.movieBox li {
	position: relative;
	float: left;
	width: 50%;
	padding: 0 1%;
	margin-top: 25px;
}

.movieBox_100 {
	width: 100% !important;
}

.movieBox_33 {
	width: 33.33333333333333333333% !important;
}

/*** 모바일CSS ***/

@media all and (max-width:800px) {
	.movieBox_33 {
		width: 50% !important;
	}
}

/* ==================================================
	회사소개 - Overview
================================================== */

.overview {padding:50px 0 50px 40%; background:url("../images/about/overviewBg.jpg") 0 50% / auto 100% no-repeat;}
.overview ul {padding:50px 0 50px 50px; background:white;}
.overview li {position:relative; margin-bottom:15px; padding:0 0 15px 180px; border-bottom:1px solid #dddddd;}
.overview li:last-child {margin-bottom:0;}
.overview li em {position:absolute; left:0; top:0;}

@media all and (max-width:1020px) {

	.overview {padding:40px 0 40px 30%;}
	.overview ul {padding:40px 0 40px 40px;}
	.overview li {margin-bottom:12px;}

}

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

	.overview {padding:50vw 15px 0; background-size:100% auto; background-position:50% 0;}
	.overview ul {padding:25px 25px 0;}

}


/* ==================================================
	회사소개 - CEO인사말
================================================== */
.ceo_greeting {
	margin-top: 60px;
}

.ceo_greeting:after {
	content: '';
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.ceo_greeting .ceotext .img_box {
	text-align: right;
	margin-top: 30px;
	opacity: 0;
	transform: translateY(20px);
	-webkit-transform: translateY(20px);
	transition: all .6s .4s cubic-bezier(.71, .29, .27, .94);
	-webkit-transition: all .6s .4s cubic-bezier(.71, .29, .27, .94);
}

.ceo_greeting .ceotext.active .img_box {
	opacity: 1;
	transform: translateY(0);
	-webkit-transform: translateY(0);
}

.ceo_greeting .ceoImg {
	float: left;
	width: 48%;
	opacity: 0;
	transform: translateY(20px);
	-webkit-transform: translateY(20px);
	transition: all .6s cubic-bezier(.71, .29, .27, .94);
	-webkit-transition: all .6s cubic-bezier(.71, .29, .27, .94);
}

.ceo_greeting .ceoImg.active {
	opacity: 1;
	transform: translateY(0);
	-webkit-transform: translateY(0);
}

.ceo_greeting .ceoImg .img_box {
	position: relative;
}

.ceo_greeting .ceoImg .img_box img {
	max-width: 100%;
	box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.2);
}

.ceo_greeting .ceoImg .img_box:after {
	z-index: -1;
	content: '';
	position: absolute;
	width: 50%;
	height: 50%;
	background-color: #121b84;
	left: -90px;
	top: -90px;
	transition: all .6s .6s cubic-bezier(.71, .29, .27, .94);
	-webkit-transition: all .6s .6s cubic-bezier(.71, .29, .27, .94);
}

.ceo_greeting .ceoImg.active .img_box:after {
	left: -25px;
	top: -25px;
}

.ceo_greeting .ceotext {
	float: left;
	width: 50%;
	margin-left: 2%;
	padding-left: 40px;
	position: relative;
	padding-top: 48px;
	border-top: 1px solid #121b84;
	line-height: 1.7;
}

.ceo_greeting .ceotext:before {
	content: '';
	position: absolute;
	height: 3px;
	background-color: #121b84;
	left: 125px;
	top: -3px;
	right: 0
}

.ceo_greeting .ceotext:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 3px;
	top: -3px;
	right: 0;
	background-color: #fff;
	z-index: 10;
	transition: all .6s cubic-bezier(.71, .29, .27, .94);
	-webkit-transition: all .6s cubic-bezier(.71, .29, .27, .94)
}

.ceo_greeting .ceotext.active:after {
	width: 0;
}

.ceo_greeting .ceotext .ceotxt1 {
	opacity: 0;
	transform: translateY(20px);
	-webkit-transform: translateY(20px);
	transition: all .6s .4s cubic-bezier(.71, .29, .27, .94);
	-webkit-transition: all .6s .4s cubic-bezier(.71, .29, .27, .94);
}

.ceo_greeting .ceotext .ceotxt2 {
	opacity: 0;
	transform: translateY(20px);
	-webkit-transform: translateY(20px);
	transition: all .6s .8s cubic-bezier(.71, .29, .27, .94);
	-webkit-transition: all .6s .8s cubic-bezier(.71, .29, .27, .94);
}

.ceo_greeting .ceotext.active .ceotxt1 {
	opacity: 1;
	transform: translateY(0);
	-webkit-transform: translateY(0);
}

.ceo_greeting .ceotext.active .ceotxt2 {
	opacity: 1;
	transform: translateY(0);
	-webkit-transform: translateY(0);
}

.ceo_greeting .ceotext .ceotxt1 {
	font-size: 20pt;
	color: #121b84;
}

.ceo_greeting .ceotext .ceotxt1 span {
	font-weight: 600;
}

.ceo_greeting .ceotext .pceotxt {
	text-align: justify;
	line-height: 160%;
	margin-top: 20px;
	font-size: 12pt;
}

.ceo_greeting .ceotext p.sign {
	text-align: right;
	color: #333;
	font-size: 13pt;
	margin-top: 15px;
	line-height: 1;
}

.ceo_greeting .ceotext p.sign span {
	vertical-align: bottom;
	font-size: 16pt;
	font-weight: 600;
	margin-left: 6px;
}

/* 모바일CSS */

@media all and (max-width:800px) {
	.ceo_greeting {
		margin-top: 0;
	}

	.ceo_greeting .ceoImg {
		float: none;
		width: 100%;
	}

	.ceo_greeting .ceotext {
		float: none;
		width: 100%;
		margin-left: 0;
		padding-left: 0;
		margin-top: 30px;
		padding-top: 20px;
	}

	.ceo_greeting .ceoImg .img_box:after {
		display: none;
	}

	.ceo_greeting .ceotext .ceotxt1 {
		font-size: 16pt;
	}

	.ceo_greeting .ceotext .pceotxt {
		font-size: 11pt;
	}
}

@media all and (max-width:450px) {
	.ceo_greeting .ceotext .ceotxt1 {
		font-size: 15pt;
	}

	.ceo_greeting .ceotext p.sign {
		font-size: 11pt;
	}

	.ceo_greeting .ceotext p.sign span {
		font-size: 14pt;
	}
}


/* ==================================================
	회사소개 - 연혁
================================================== */



/* ==================================================
	회사소개 - 주요고객사
================================================== */
/*** 탑비주얼 ***/

.keyclients p {margin-bottom:40px; font-size:50px; font-weight:600; text-align:center; color:#121b84;}
.keyclients div {padding:50px; text-align:center; border:10px solid #efefef; border-radius:25px;}
.keyclients div img {width:100%; max-width:851px;}

@media all and (max-width:1020px) {

	.keyclients p {margin-bottom:30px; font-size:40px;}
	.keyclients div {padding:40px; border-width:6px; border-radius:20px;}

}

@media all and (max-width:640px) {

	.keyclients p {margin-bottom:20px; font-size:30px;}
	.keyclients div {padding:20px; border-width:3px; border-radius:10px;}

}

/* ==================================================
	회사소개 - 오시는 길
================================================== */

.map_size {
	width: 100%;
}

.map_con {
	position: relative;
	width: 100%;
	height: 520px;
}

.radius_border {
	border: 1px solid #919191;
	border-radius: 5px;
}

.custom_zoomcontrol {
	position: absolute;
	top: 20px;
	right: 10px;
	overflow: hidden;
	z-index: 1;
	background-color: #f5f5f5;
}

.custom_zoomcontrol span {
	display: block;
	text-align: center;
	cursor: pointer;
	padding: 10px 10px 5px 10px;
}

.custom_zoomcontrol span img {
	width: 15px;
	height: 15px;
	border: none;
}

.custom_zoomcontrol span:first-child {
	border-bottom: 1px solid #bfbfbf;
}

.map_info ul {
	text-align: center;
}

.map_info ul li b {
	display: inline-block;
	margin-right: 10px;
	font-size: 16px;
}

.map_info ul li p {
	display: inline-block;
	color: #777;
}

.map_info ul li {
	position: relative;
}

.map_info {
	padding: 20px 0;
	border-top: 2px solid #595656;
}

/*** 모바일CSS ***/

@media all and (min-width:950px) {
	.map_info ul {
		display: flex;
		align-items: stretch;
	}

	.map_info ul li {
		display: table-cell;
		flex-grow: 1;
		padding: 0 10px;
	}

	.map_info ul li:after {
		content: "";
		width: 1px;
		height: 15px;
		background: #ccc;
		right: 0;
		top: 50%;
		position: absolute;
		margin-top: -7px;
	}

	.map_info ul li:last-child:after {
		background: none;
	}
}

@media all and (max-width:949px) {
	.map_info ul li {
		margin-bottom: 5px;
	}

	.map_info ul li:last-child {
		margin-bottom: 0;
	}
}

@media all and (max-width:640px) {
	.map_con {
		height: 400px;
	}
}

/* ==================================================
	Business areas
================================================== */

.productsTab {display:flex; flex-wrap:wrap; width:100%; margin-bottom:50px; border-top:1px solid #dddddd; border-left:1px solid #dddddd;}
.productsTab a {display:flex; justify-content:center; align-items:center; width:25%; padding:10px 5px; text-align:center; background:#f8f8f8; border-bottom:1px solid #dddddd; border-right:1px solid #dddddd;}
.productsTab a.on {color:white; background:#121b84;}

.productsInfo h4 {margin-bottom:15px; font-size:40px; font-weight:600; color:#121b84;}
.productsInfo h5 {margin-bottom:15px; font-size:25px; font-weight:300; color:#629b10;}
.productsInfo table {width:100%; margin-bottom:20px; border-top:2px solid #121b84;}
.productsInfo th, .productsInfo td {padding:10px 5px; border-bottom:1px solid #dddddd; border-right:1px solid #dddddd;}
.productsInfo th:first-child {border-left:1px solid #dddddd;}
.productsInfo th {width:17%; background:#f0f1f9;}
.productsInfo td {width:33%; text-align:center;}
.productsInfo ul {display:flex; flex-wrap:wrap; margin-bottom:20px;}
.productsInfo li {position:relative; width:33.33%; margin-bottom:10px; padding:0 10px 0 15px;}
.productsInfo li::before {position:absolute; left:0; top:0; content:"·";}
.productsInfo p {margin-bottom:20px;}
.productsInfo .opt {margin-bottom:50px;}

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

	.productsTab {margin-bottom:40px;}

	.productsInfo h4 {margin-bottom:10px; font-size:35px;}
	.productsInfo h5 {margin-bottom:10px; font-size:20px;}
	.productsInfo .opt {margin-bottom:40px;}

}

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

	.productsTab {margin-bottom:30px;}
	.productsTab a {width:50%; padding:5px; font-size:13px;}

	.productsInfo h4 {margin-bottom:5px; font-size:30px;}
	.productsInfo h5 {font-size:16px;}
	.productsInfo th, .productsInfo td {padding:5px;}
	.productsInfo li {width:100%;}
	.productsInfo li:last-child {margin-bottom:0;}
	.productsInfo .opt {margin-bottom:30px;}

}


/* ==================================================
	커뮤니티 - Contact us
================================================== */
.contact{
	width:100%;
	margin-top:30px;
	background:url('../images/customer/contact_bg01.jpg') 0 center no-repeat;
	}
.contact .txt{
	padding:5% 3% 5% 48%;
	}
.contact h2{
	font-size:36px;
	color:#000;
	}
.contact .txt1{
	width:100%;
	font-size:13pt;
	line-height:32px;
	color:#333;
	padding:10px 0;
	border-bottom:1px solid #808080;
	}
.contact .txt2{
	margin:2% 0;
	}
.contact .txt2 li{
	font-size:16px;
	color:#333;
	line-height:48px;
	padding-left:46px;
	}
.contact .txt2 li.tel{background:url('../images/icon/ic_tel2.png') 0 50% no-repeat;}
.contact .txt2 li.fax{background:url('../images/icon/ic_fax2.png') 0 50% no-repeat;}
.contact .txt2 li.email{background:url('../images/icon/email_ic.png') 0 50% no-repeat;}
.contact .txt2 li.email a{
	color:#333;
	}
.contact .txt2 li.caddress {background:url('../images/icon/ic_add.png') 0 50% no-repeat;margin-top:1px;}
.contact .txt2 li.quality{background:url('../images/icon/ic_quality.png') 0 50% no-repeat;}
.contact .txt2 li.sales{background:url('../images/icon/ic_sales.png') 0 50% no-repeat;}
.contact .txt3 {
	padding-top: 1%;
	font-size: 18px;
	color: #333;
	}

/* 모바일 및 탭 */
@media screen and (max-width:800px){
	.contact{
		height:auto;background:none;
		}
	.contact .txt{padding:0;}
	.contact h2{
		font-size:18px;line-height:20px;
		}
	.contact .txt1{
		max-width:100%;
		font-size:14px;
		line-height:22px;
		padding:8px 0 10px 0;
		background:none;
		border-bottom:1px solid #aaaaac;
		}
	.contact .txt2{
		margin:10px 0;
		}
	.contact .txt2 li{
		font-size:14px;
		line-height:38px;
		padding-left:43px;
		}
	.contact .txt3{
		font-size:13px;color:#787878;
		}
}


/* ==================================================
	사이트맵
================================================== */

.sitemap {
	width: 100%;
	height: auto;
}

.sitemap:after {
	content: '';
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.sitemap .depth01 {
	float: left;
	width: 31.333333%;
	margin: 0 1%;
	padding-top: 10px;
	border-top: 2px solid #f57c00;
}

.sitemap div.depth01 {
	font-size: 15pt;
	color: #f57c00;
	font-weight: bold;
}

.sitemap .sub {
	border-top: 1px solid #ccc;
	margin-top: 10px;
	margin-bottom: 25px;
}

.sitemap ul.sub2 {
	padding-left: 14px;
}

.sitemap li.depth02 {
	padding: 8px 0;
	border-bottom: 1px dashed #ccc;
}

.sitemap li.depth02 a {
	font-size: 11pt;
	color: #222;
}

.sitemap .sub_m {
	padding-top: 4px;
}

.sitemap .sub_m li {
	background: url('../images/icon/ico_grayDot.png') no-repeat 0 18px;
	background-size: 3px;
	padding-left: 10px;
}

.sitemap .sub_m li a {
	font-size: 10pt;
	color: #949494;
	line-height: 160%;
	font-weight: normal;
}

.sitemap .sub_m .model {
	padding-left: 13px;
}

/*** 모바일CSS ***/

@media all and (max-width:750px) {
	.sitemap .depth01 {
		width: 96%;
		margin: 30px 2% 0 2%;
	}

	.sitemap div.m01 {
		margin-top: 0 !important;
	}
}