/*
	Copyright 2020 Raonbnp
	http://raonbnp.com, http://raonwebstore.com
*/
@charset "UTF-8";
@import '/_css/common.css'; /* front, admin 공통*/
@import '/_css/member.css'; /* front member 공통*/
@import '/_css/board.css'; /* front member 공통*/
@import 'loading.css';
@import 'fontSet.css';
@import 'basic.css';
@import 'layout.css';


#sub_wrap h3.sub_title{
	font-size:3.4rem;
	text-align:center;
	line-height:1.4;
	font-weight:300;
	position:relative;
	padding-top:9rem;
	margin-bottom:4rem;
}
#sub_wrap h3.sub_title.eng4{
	font-weight:700;
	letter-spacing:2px;
}
#sub_wrap h3.sub_title > span{
	font-weight:500;
	color:#f08711
}
#sub_wrap h3.sub_title::after{
	content:"";
	position:absolute;
	top:0;
	left:50%;
	border-right:1px solid #ccc;
	height:6rem;
}
#sub_wrap h4.sub_stitle{
	font-size:3rem;
	font-weight:500;
	padding-top:20px;
	position:relative;
}
#sub_wrap h4.sub_stitle > i{
	position:absolute;
	width:45px;
	height:7px;
	left:0;
	top:0;
	overflow:hidden;
}
#sub_wrap h4.sub_stitle > i::after{
	content:"";
	position:absolute;
	left:0;
	top:-55%;
	width:90%;
	height:230%;
	background:#ec6d01;
	transform:rotate(-30deg)
}
#sub_wrap h4.sub_stitle.b{
	padding-top:0;
	padding-bottom:25px;
}
#sub_wrap h4.sub_stitle.b > i{
	top:auto;
	bottom:0;
}

@media(max-width:991.98px){
	#sub_wrap h3.sub_title br{display:none !important;}
	#sub_wrap h3.sub_title{
		font-size:2.6rem;
		padding-top:7rem;
	}
	#sub_wrap h3.sub_title::after{
		height:5rem;
	}
	#sub_wrap h4.sub_stitle{
		font-size:2.4rem;
		padding-top:15px;
	}
	#sub_wrap h4.sub_stitle > i{
		width:35px;
		height:5px;
	}
}

.sub_tab_menu{margin-bottom:2.5rem;}
.sub_tab_menu > h4{display:none;}
.sub_tab_menu > ul{
	list-style:none;
	width:100%;
	table-layout:fixed;
	border-left:1px solid #ddd;
}
.sub_tab_menu > ul::after{
	content:"";
	display:block;
	clear:both;
}
.sub_tab_menu > ul > li{
	float:left;
	border:1px solid #ddd;
	border-left:0;
	width:25%;
	margin-top:-1px;
}
.sub_tab_menu > ul.li7 > li{
	width:14.28%;
}
.sub_tab_menu > ul > li:first-child{}
.sub_tab_menu > ul > li > a{
	display:block;
	padding:15px 0;
	text-align:center;
	text-decoration:none;
	color:#555;
	font-weight:300;
	font-size:1.6rem;
}
.sub_tab_menu > ul > li > a.active{
	background:#ec6d01;
	color:#fff;
	font-weight:400;
}
@media(min-width:768px){
	.sub_tab_menu > ul{
		display:block !important;
	}
}
@media(max-width:767.98px){
	.sub_tab_menu > h4{
		display:block;
		text-align:center;
		padding:15px 15px;
		font-size:1.8rem;
		position:relative;
		border:1px solid #ddd;
	}
	.sub_tab_menu > h4 > i{
		position:absolute;
		right:10px;
		top:50%;
		transform:translatey(-50%);
	}
	.sub_tab_menu > ul{
		display:none;
	}
	.sub_tab_menu > ul > li{
		display:block !important;
		float:none !important;
		width:100% !important;
	}
}


/*인사말*/
.company_wrap.greeting .visual{
	position:relative;
	background:url(../_img/sub/company_greeting_01.jpg) no-repeat center center / cover;
	height:440px;
}
.company_wrap.greeting .visual > div{
	position:absolute;
	top:50%;
	left:8rem;
	z-index:10;
	background:rgba(236,109,1,.8);
	color:#fff;
	padding:5rem 6rem;
	font-size:2.6rem;
	line-height:1.6;
	transform:translatey(-50%);

}
.company_wrap.greeting .sign{
	position:relative;
	padding-right:130px;
}
.company_wrap.greeting .sign img{
	position:absolute;
	right:0;
	top:50%;
	transform:translatey(-50%);
}
@media(max-width:767px){
	.company_wrap.greeting .visual{
		position:relative;
		background:url(../_img/sub/company_greeting_01.jpg) no-repeat center center / cover;
		height:auto;
		padding:20px 40px 20px 20px;
	}
	.company_wrap.greeting .visual > div{
		position:relative;
		top:0;
		left:0rem;
		transform:translatey(0%);
		font-size:2.2rem;
		padding:4rem 5rem;
	}
}
/*연혁*/
.company_wrap.history .history_img{
	position:relative;
	padding-right:100px
}
.company_wrap.history .history_img > div{
	height:50rem;
	position:relative;
}

.company_wrap.history .history_img > div > h5{
	position:absolute;
	left:0;
	width:100%;
	top:50%;
	transform:translatey(-50%);
	text-align:center;
	font-size:4rem;
	color:#fff;
	font-weight:600;
	z-index:2;
}
.company_wrap.history .history_img > div > h5 > p{
	font-size:2.4rem;
	opacity:.4;
	margin-bottom:10px;
}
.company_wrap.history .box {}
.company_wrap.history .box .year{
	font-size:4rem;
	font-weight:600;
	margin-bottom:1.5rem;
	margin-left:-4.5rem;
}
.company_wrap.history .box .year > span{
	color:#ef8813
}
.company_wrap.history .box  > ul{
	list-style:none;
	padding:0;
	margin:0;
	font-size:1.8rem;
	padding-left:0px;
	position:relative;

}
.company_wrap.history .box  > ul::after{
	content:"";
	position:absolute;
	border-left:1px solid #ddd;
	height:100%;
	bottom:10px;
	left:0px;
	z-index:-1;
}
.company_wrap.history .box  > ul > li{
	padding-left:30px;
	position:relative;
	margin-top:19px;
}
.company_wrap.history .box  > ul > li::after{
	content:"";
	position:absolute;
	width:10px;
	height:10px;
	border:2px solid #ef8813;
	background:#fff;
	border-radius:100%;
	left:-5px;
	top:1rem;
}
@media(max-width:991.98px){
	.company_wrap.history .history_img{
		padding-right:0;
	}
	.company_wrap.history .history_img > div > h5{
		font-size:3.4rem;
	}
	.company_wrap.history .history_img > div{
		height:30rem;
		margin-bottom:2rem;
	}
	.company_wrap.history .box .year {
		font-size: 3rem;
		font-weight: 600;
		margin-bottom: 1.5rem;
		margin-left: 0rem;
	}
	.company_wrap.history .box > ul{
		margin-left:2rem;
	}
}



.company_wrap.vision .vision{
	padding:8rem 0;
	position:relative;
}
.company_wrap.vision .vision::after{
	content:"";
	position:absolute;
	left:-100%;
	top:0;
	width:300%;
	height:100%;
	background:#f7f7f7;
	z-index:-1;
}
.company_wrap.vision .management{
	border:1px solid #ddd;
	padding:15rem 0;
	overflow:hidden;
	text-align:center;
}
.company_wrap.vision .management > div{
	height:35rem;
	width:35rem;
	position:relative;
	display:inline-block;
	border-radius:100%;
	z-index:1;
}
.company_wrap.vision .management > div::before{
	content:"";
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
	background:#fff;
	border-radius:100%;
	z-index:2;

}
.company_wrap.vision .management > div::after{
	content:"";
	position:absolute;
	width:110%;
	height:110%;
	left:50%;
	top:50%;
	transform:translate(-50%, -50%);
	border-radius:100%;
	z-index:1;
	opacity:.2
}

.company_wrap.vision .management > div:nth-child(1)::after,
.company_wrap.vision .management > div:nth-child(3)::after{
	background-image: linear-gradient(to top, #ef8c27, #f48231, #f8783b, #fb6e45, #fc644f);
}
.company_wrap.vision .management > div:nth-child(2)::after{
	background-image: linear-gradient(to top, #1e3b71, #21417a, #244684, #274c8d, #2a5297);
}
.company_wrap.vision .management > div:nth-child(2){
	z-index:20;
}
.company_wrap.vision .management > div:nth-child(1){
	margin-right:-3rem;
}
.company_wrap.vision .management > div:nth-child(3){
	margin-left:-3rem;
}

.company_wrap.vision .management > div > div{
	position:absolute;
	top:50%;
	transform:translatey(-50%);
	left:0;
	width:100%;
	z-index:3;
}

@media(max-width:991.98px){
	.company_wrap.vision .management{
		padding:8rem 0;
	}
	.company_wrap.vision .management > div{
		height:35rem;
		width:35rem;
		display:block;
		margin:0 auto !important;
	}


}


.company_wrap.network > .network_map{
	background:#3b3b3b;
	padding:11rem 0
}

.company_wrap.network > .network_map .word_map{
	position:relative;
}
.company_wrap.network > .network_map .word_map > p{
	position:absolute;
	color:#fff;
	font-family:'Play',sans-serif !important;
	font-size:16px;
}
.company_wrap.network > .network_map .word_map > p i{
	position:absolute;
	top:50%;
	transform:translatey(-50%);
	font-size:0;
}
.company_wrap.network > .network_map .word_map > p.l{
	padding-left:45px;
}
.company_wrap.network > .network_map .word_map > p.l i{
	left:0;
}
.company_wrap.network > .network_map .word_map > p.r{
	padding-right:45px;
}
.company_wrap.network > .network_map .word_map > p.r i{
	right:0;
}
.company_wrap.network > .network_map .word_map > p:nth-child(1){	left:43.5%;	top:41%;}
.company_wrap.network > .network_map .word_map > p:nth-child(2){	left:15.5%;	top:42%;}
.company_wrap.network > .network_map .word_map > p:nth-child(3){	left:40%;	top:49%;}
.company_wrap.network > .network_map .word_map > p:nth-child(4){	left:10.5%;	top:55.5%;}
.company_wrap.network > .network_map .word_map > p em{
	position:absolute;
	width:6px;
	height:6px;
	border-radius:100%;
	background:#fff;
	top:50%;
	transform:translatey(-50%);
}
.company_wrap.network > .network_map .word_map > p.l em{
	left:-83px;
}
.company_wrap.network > .network_map .word_map > p.r em{
	right:-83px;
}
.company_wrap.network > .network_map .word_map > p em::after,
.company_wrap.network > .network_map .word_map > p em::before{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	width:350%;
	height:350%;
	transform:translate(-50%, -50%);
	border:1px solid rgba(255,255,255,.8);
	border-radius:100%;
}
.company_wrap.network > .network_map .word_map > p em::before{
	width:600%;
	height:600%;
}
.company_wrap.network > .network_map .word_map > p:nth-child(1) em{
	background:#ec6d01
}
.company_wrap.network > .network_map .word_map > p:nth-child(1) em::after,
.company_wrap.network > .network_map .word_map > p:nth-child(1) em::before{
	border:1px solid #ec6d01
}


.company_wrap.network > .network_map .word_map > p > span{
	position:absolute;
	width:80px;
	border-top:1px solid rgba(255,255,255,.3);
	top:50%;
}
.company_wrap.network > .network_map .word_map > p.l > span{
	left:-80px;
}
.company_wrap.network > .network_map .word_map > p.r > span{
	right:-80px;
}
@media(max-width:1440px){
	#main_container > .sec02 .word_map{
		max-width:1200px;
		margin:0 auto;
	}
	.company_wrap.network > .network_map .word_map > p:nth-child(1){	left:44.5%;	top:41%;}
	.company_wrap.network > .network_map .word_map > p:nth-child(2){	left:12%;	top:42%;}
	.company_wrap.network > .network_map .word_map > p:nth-child(3){	left:41%;	top:49%;}
	.company_wrap.network > .network_map .word_map > p:nth-child(4){	left:7.5%;	top:55.5%;}
}
@media(max-width:1200px){
	.company_wrap.network > .network_map .word_map > p:nth-child(1){	left:46.5%;	top:40.5%;}
	.company_wrap.network > .network_map .word_map > p:nth-child(2){	left:5%;	top:42%;}
	.company_wrap.network > .network_map .word_map > p:nth-child(3){	left:43%;	top:48%;}
	.company_wrap.network > .network_map .word_map > p:nth-child(4){	left:.8%;	top:55%;}
}

.company_wrap.network > .network_map .word_map > p > span{
	position:absolute;
	width:80px;
	border-top:1px solid rgba(255,255,255,.3);
	top:50%;
}
.company_wrap.network > .network_map .word_map > p.l > span{
	left:-80px;
}
.company_wrap.network > .network_map .word_map > p.r > span{
	right:-80px;
}

.company_wrap.network > .office{}
.company_wrap.network > .office ul{
	list-style:none;
	margin:0;
	padding:0;
	font-size:1.6rem;
	font-weight:300;
}
.company_wrap.network > .office ul > li{
	position:relative;
	margin-top:15px;
	padding-left:150px;
}
.company_wrap.network > .office ul > li > span{
	position:absolute;
	left:0;
	font-weight:500;
	width:110px;
}
.company_wrap.network > .office ul > li > span::after{
	content:"";
	position:absolute;
	right:0;
	top:50%;
	height:16px;
	margin-top:-8px;
	border-right:1px solid #ddd;
}

/*연구개발*/
.rnd_wrap.certificate img{
	border:1px solid #ddd;
}



/*인재채용*/
.recruit_wrap.talent .visual{
	position:relative;
	padding-bottom:12rem;
}
.recruit_wrap.talent .visual:after{
	content:"";
	position:absolute;
	left:-100%;
	bottom:0;
	width:300%;
	height:60%;
	background:#f7f7f7;
	z-index:-1;
}

.recruit_wrap.job ul{
	list-style:none;
	border-top:2px solid #000;
	margin:0;
	padding:0;
}
.recruit_wrap.job ul > li{
	padding:4rem 0;
	padding-left:160px;
	border-bottom:1px solid #ddd;
	position:relative;
}
.recruit_wrap.job ul > li img{
	position:absolute;
	left:40px;
	top:50%;
	margin-top:-33px;
	width:67px;
}
.recruit_wrap.job ul > li > p:nth-of-type(1){
	font-size:1.8rem;
	margin-bottom:1.5rem;
	font-weight:500;
}
.recruit_wrap.job ul > li > p:nth-of-type(2){
	font-size:1.6rem;
	font-weight:300;
	color:#555;
}

.recruit_wrap.hr .box{
	margin-top:8rem;
	text-align:center;
}
.recruit_wrap.hr .box > ul{
	overflow:hidden;
	display:inline-block;
}
.recruit_wrap.hr .box > ul > li{
	float:left;
	width:38rem;
	height:38rem;
	border-radius:100%;
	background:rgba(232,233,235,.5);
	position:relative;
}
.recruit_wrap.hr .box > ul > li:nth-child(2){
	background:rgba(236,109,1,.1);
	z-index:10;
}
.recruit_wrap.hr .box > ul > li:nth-child(1){margin-right:-3rem}
.recruit_wrap.hr .box > ul > li:nth-child(3){margin-left:-3rem;}
.recruit_wrap.hr .box > ul > li > div{
	position:absolute;
	left:0;
	top:50%;
	width:100%;
	transform:translatey(-50%);
}
@media(max-width:1199.98px){
	.recruit_wrap.hr .box > ul > li{
		float:left;
		width:32rem;
		height:32rem;
		border-radius:100%;
		background:rgba(232,233,235,.5);
		position:relative;
	}
}
@media(max-width:991.98px){
	.recruit_wrap.hr .box > ul > li{
		float:left;
		width:26rem;
		height:26rem;
		border-radius:100%;
		background:rgba(232,233,235,.5);
		position:relative;
	}
}
@media(max-width:767.98px){
	.recruit_wrap.hr .box{
		margin-top:4rem;
	}
	.recruit_wrap.hr .box > ul > li{
		float:none;
		display:block;
		width:30rem;
		height:30rem;
		border-radius:100%;
		background:rgba(232,233,235,.5);
		position:relative;
		margin:0 auto !important;
	}
	.recruit_wrap.hr .box > ul > li:nth-child(2),
	.recruit_wrap.hr .box > ul > li:nth-child(3){
		margin-top:-20px !important;
	}
}



/*고객센터*/
.company_wrap.location .map_detail{
	display:none;
}
.company_wrap.location .map_detail > .map{
	height:360px;
}
.company_wrap.location .map_detail > .map .root_daum_roughmap {
	width:100% !important;
}
.company_wrap.location .map_view{
	position:absolute;
	right:15px;
	bottom:0px;
	background:#fff;
	border:1px solid #ddd;
	color:#666;
	padding:12px 25px;
}
.company_wrap.location .map_view:hover,
.company_wrap.location .map_view.active{
	border:1px solid #ec6d01;
	background:#ec6d01;
	color:#fff;
}