@charset "utf-8"; 
/* copyright(c) WEBsiting.co.kr */

/* 텍스트 */
.h2_title{padding:8px 20px; border-left:5px solid #000; font-size:22px; margin-bottom:20px; line-height:1.3em; color:#000; }
.h3_title{padding:8px 20px; border-left:5px solid #999; font-size:18px; margin-bottom:20px; line-height:1.3em; color:#333; }
.h2_title_center{text-align:center; font-size:30px; padding:8px 20px; margin-bottom:30px; line-height:1.3em; color:#000; }
.h2_title_center small{display:block; font-size:20px; font-weight:normal; color:#999; line-height:1.3em; padding:15px 0;}
.h2_title_center:after{content:'';display:block; width:100px; height:3px; background:#efefef; margin:15px auto;}

.cont_text{font-size:14px; line-height:1.6em; color:#666; overflow:hidden; clear:both; padding-bottom:15px; }
.cont_text_info{font-size:14px; line-height:1.6em; color:#666; overflow:hidden; padding:20px; border:5px solid #efefef; clear:both; margin-bottom:15px; }
.cont_text_important{padding:8px 20px; border-left:5px solid #efefef; font-size:16px; color:#53803c; line-height:1.3em; }

.cont_img_right50p{display:block; width:50%; float:right; margin:0 0 20px 20px; }
.cont_img_left50p{display:block; width:50%; float:left; margin:0 20px 20px 0; }

.hrDline{display:block; width:100%; border:0px; border-top:2px dashed #efefef; clear:both; height:30px; margin-top:30px;}

@media all and (max-width:980px)
{
	.h2_title{font-size:18px; padding:5px 15px; border-left:3px solid #000; }
	.h3_title{font-size:15px; padding:5px 15px; border-left:2px solid #999; }

	.cont_text{font-size:13px; line-height:1.4em; }
	.cont_text_info{font-size:13px; line-height:1.4em; }
	.cont_text_important{font-size:14px; padding:5px 15px; border-left:2px solid #ddd; }
	
}

@media all and (max-width:600px)
{
	.h2_title_center{font-size:20px; }
	.h2_title_center small{font-size:13px; font-weight:normal; }

	.cont_text{font-size:12px; }
	.cont_text_info{font-size:12px; }
	.cont_text_important{font-size:13px; }
	
}


/* 서브 핑크블로썸 원형아이콘 박스 */
.figure_list{width:100%; max-width:1200px; margin:0 auto; text-align:center; padding:0; overflow:hidden;}
.figure_list li{display:block; padding:20px 10px; width:25%; float:left;}
.figure_list li i{display:block; margin:0 auto 5px; border-radius:50%; font-size:50px; width:150px; height:150px; line-height:150px; background:RGBA(0,0,0,0.05); color:#000; -webkit-transition-duration: 0.4s; -webkit-transition-timing-function: ease; transition-duration: 0.4s; transition-timing-function: ease;}
.figure_list li strong{display:block; color:#222; font-size:20px; padding:5px 0;}
.figure_list li span{display:block; color:#999; font-size:14px; font-style:normal; padding:5px 0;}
.figure_list li:hover i{transform: scale(1.1) rotate(360deg);}


.figure_list2 li{width:50%;}		/* 메인 핑크블로썸 원형아이콘 박스 2단 구성 시 figure_list2 클래스 추가 */
.figure_list3 li{width:33.333%;}	/* 메인 핑크블로썸 원형아이콘 박스 3단 구성 시 figure_list3 클래스 추가 */
.figure_list4 li{width:25%;}		/* 메인 핑크블로썸 원형아이콘 박스 4단 구성 시 figure_list4 클래스 추가 */
.figure_list5 li{width:20%;}		/* 메인 핑크블로썸 원형아이콘 박스 5단 구성 시 figure_list5 클래스 추가 */

@media all and (max-width:980px)
{
	.figure_list li i{width:100px; height:100px; line-height:100px; font-size:36px;}
	.figure_list li strong{font-size:16px;}
	.figure_list li em{font-size:12px;}
}
@media all and (min-width:800px)
{
	.figure_list2 li:nth-child(3),
	.figure_list2 li:nth-child(5),
	.figure_list2 li:nth-child(7),
	.figure_list2 li:nth-child(9){clear:both;}
	
	.figure_list3 li:nth-child(4),
	.figure_list3 li:nth-child(7),
	.figure_list3 li:nth-child(10),
	.figure_list3 li:nth-child(13){clear:both;}

	.figure_list4 li:nth-child(5),
	.figure_list4 li:nth-child(9),
	.figure_list4 li:nth-child(13),
	.figure_list4 li:nth-child(17){clear:both;}

	.figure_list5 li:nth-child(6),
	.figure_list5 li:nth-child(11),
	.figure_list5 li:nth-child(16),
	.figure_list5 li:nth-child(21){clear:both;}
	.figure_list5 li i{width:120px; height:120px; line-height:120px; font-size:36px;}
	.figure_list5 li strong{font-size:16px;}
	.figure_list5 li span{font-size:13px;}
}
@media all and (max-width:800px)
{
	.figure_list li{width:50%; float:left;}
	.figure_list li i{width:100px; height:100px; line-height:100px; font-size:36px;}
	.figure_list li strong{font-size:14px;}
	.figure_list li span{font-size:12px;}
	.figure_list li:nth-child(odd){clear:both;}
}

/* 서브 핑크블로썸 웹진형 코딩 박스 */
.subBoxWebzineStyle{width:100%; max-width:1200px; margin:0 auto; text-align:center; padding:0 0 30px 0; overflow:hidden; word-break:keep-all;}
.subBoxWebzineStyle li{display:block; padding:20px; width:25%; float:left; text-align:left; overflow:hidden;}
.subBoxWebzineStyle li i{display:block; position:relative; overflow:hidden; margin:0 auto;}
.subBoxWebzineStyle li i:after{content:'';border:1px solid RGBA(0,0,0,0.0)display:block; position:absolute; left:0px; right:0px; top:0px; bottom:0px;border:0px; -webkit-transition-duration: 0.4s; -webkit-transition-timing-function: ease; transition-duration: 0.4s; transition-timing-function: ease;}
.subBoxWebzineStyle li i img{display:block; width:100%; margin:0 auto; -webkit-transition-duration: 0.4s; -webkit-transition-timing-function: ease; transition-duration: 0.4s; transition-timing-function: ease;}
.subBoxWebzineStyle li strong{display:block; color:#000; font-size:18px; padding:15px 0;}
.subBoxWebzineStyle li em{display:block; color:RGBA(0,0,0,0.5); font-size:14px; font-style:normal;}
.subBoxWebzineStyle li u{display:block; clear:both; float:left; width:106px; text-decoration:none; margin-top:15px; border-top:1px solid #ddd; color:#999; padding:10px 15px;-webkit-transition-duration: 0.4s; -webkit-transition-timing-function: ease; transition-duration: 0.4s; transition-timing-function: ease;}
.subBoxWebzineStyle li:hover u{color:#000; width:100%;}
.subBoxWebzineStyle li:hover i:after{border:10px solid RGBA(0,0,0,0.2);padding:10px;}
.subBoxWebzineStyle li:hover i img{transform: scale(1.1);}

.subBoxWebzineStyle2 li{width:50%;}		/* 서브 핑크블로썸 웹진형 코딩 박스 2단 구성 시 subBoxWebzineStyle2 클래스 추가 */
.subBoxWebzineStyle3 li{width:33.333%;}	/* 서브 핑크블로썸 웹진형 코딩 박스 3단 구성 시 subBoxWebzineStyle3 클래스 추가 */
.subBoxWebzineStyle4 li{width:25%;}		/* 서브 핑크블로썸 웹진형 코딩 박스 4단 구성 시 subBoxWebzineStyle4 클래스 추가 */
.subBoxWebzineStyle5 li{width:20%;}		/* 서브 핑크블로썸 웹진형 코딩 박스 5단 구성 시 subBoxWebzineStyle5 클래스 추가 */

@media all and (max-width:980px)
{
	.subBoxWebzineStyle li{padding:10px;}
	.subBoxWebzineStyle li strong{font-size:16px;}
	.subBoxWebzineStyle li em{font-size:12px;}
}
@media all and (min-width:800px)
{
	.subBoxWebzineStyle2 li:nth-child(3),
	.subBoxWebzineStyle2 li:nth-child(5),
	.subBoxWebzineStyle2 li:nth-child(7),
	.subBoxWebzineStyle2 li:nth-child(9){clear:both;}
	
	.subBoxWebzineStyle3 li:nth-child(4),
	.subBoxWebzineStyle3 li:nth-child(7),
	.subBoxWebzineStyle3 li:nth-child(10),
	.subBoxWebzineStyle3 li:nth-child(13){clear:both;}

	.subBoxWebzineStyle4 li:nth-child(5),
	.subBoxWebzineStyle4 li:nth-child(9),
	.subBoxWebzineStyle4 li:nth-child(13),
	.subBoxWebzineStyle4 li:nth-child(17){clear:both;}

	.subBoxWebzineStyle5 li:nth-child(6),
	.subBoxWebzineStyle5 li:nth-child(11),
	.subBoxWebzineStyle5 li:nth-child(16),
	.subBoxWebzineStyle5 li:nth-child(21){clear:both;}
}
@media all and (max-width:800px)
{
	.subBoxWebzineStyle li strong{font-size:14px;}
	.subBoxWebzineStyle li em{font-size:12px;}

	.subBoxWebzineStyle li{width:50% !important; float:left;}
	.subBoxWebzineStyle li:nth-child(odd){clear:both;}

	.subBoxWebzineStyle2 li,
	.subBoxWebzineStyle3 li{width:100% !important; float:none;}
}



/* 테이블 */
.basic_table{width:100%; overflow:auto;}
.basic_table table{width:100%; border:1px solid #ddd; border-top:3px solid #ddd; border-collapse:collapse; border-spacing:0; }
.basic_table table th,
.basic_table table td{border:1px solid #ddd; padding:8px; }
.basic_table table thead th{background:#ededed; padding:15px 8px; color:#000;  text-align:center; }
.basic_table table thead td{background:#ededed; padding:15px 8px; color:#000; text-align:center; }
.basic_table table tbody th{background:#f5f5f5; color:#666; text-align:center; }
.basic_table table tbody td{background:#ffffff; color:#666; }
.basic_table table tfoot th{background:#fbfbfb; color:#999; text-align:center; }
.basic_table table tfoot td{background:#fbfbfb; color:#999; }

/* 유튜브영상삽입 */
.youtube_area{position:relative;overflow:hidden;width:100%;padding-bottom:56.25%;clear:both;margin-bottom:10px;}
.youtube_area iframe{position:absolute; left:0px;right:0px;top:0px;bottom:0px;width:100%;height:100%;}

<style>
	/* 그누보드 내용관리등 에디터로 입력할 경우  여기서부터 */
	.fc_pointer {color:#1F88E5; }
	.daon_content_wrap{width:100%; min-width:320px; max-width:1200px; margin:0 auto;}
	.daon_page_title{width:100%; margin-bottom:70px;}
	.daon_page_title h1{width:100%; margin:0 auto; text-align:center; font-size:2.5em; font-weight:600;}
	.daon_page_title h1:after {content:""; clear:both; display:block; width:30px; margin:10px auto; border:1px solid #000;}
	.daon_page_title h2{width:100%; margin:0 auto; text-align:center; font-size:1.2em; color:#666; margin-top:20px; }


	.business_type4 {width:100%; max-width:1200px;  margin:0 auto;}
	.business_type4:after{ content:""; display:block; clear:both;}
	.business_type4 .business_info { position:relative; width:100%; height:400px; margin:150px auto; background:none;}
	.business_type4 .business_info:after{ content:""; display:block; clear:both;}
	.business_type4 .business_info:first-child {margin-top:0px;}
	.business_type4 .business_info .img_left { position:absolute; left:0; top:0; width:650px; height:400px; background:blue; }
	.business_type4 .business_info .img_left img{ width:100%; height:100%;}
	.business_type4 .business_info .img_right { position:absolute; right:0; top:0; width:650px; height:400px; background:blue; }
	.business_type4 .business_info .img_right img{ width:100%; height:100%;}
	.business_type4 .business_info .con_box { position: absolute; right:0; top:25%; width:55%; height:350px; background:rgba(255,255,255,1); box-shadow:10px 10px 5px rgba(0,0,0,0.04); }
	.business_type4 .business_info .con_box .txt_area {padding:10%; }
	.business_type4 .business_info .con_box .txt_area:before { display: block; content: ''; position: absolute; left: -80px; top:23%;  width:20%; height:1px; background:#000;}
	.business_type4 .business_info .con_box .txt_area em { position:relative; display:block; vertical-align:middle; color:#ddd;  font-size:3em;}
	.business_type4 .business_info .con_box .txt_area strong {display:block; color:#333;  font-size:1.5em; font-weight: 600;  line-height:1.5em; margin:30px 0 20px 0;}
	.business_type4 .business_info .con_box .txt_area p.box_txt {display:block; color:#555; font-size:1em;  font-weight: 300;  line-height:1.5em; text-align:justify;  }
	.business_type4 .business_info .type_other { position: absolute; left: 0; top:25%; width:55%; height:350px; background:rgba(255,255,255,1);  box-shadow:10px 10px 5px rgba(0,0,0,0.04); }
	.business_type4 .business_info .type_other .txt_area:before {display:none;}
	.business_type4 .business_info .type_other .txt_area:after { display: block; content: ''; position: absolute; right:-80px; top:23%; width:20%; height:1px; background:#000; }


	@media screen and (max-width:992px){
		
		.daon_content_wrap{width:100%;}
		.daon_page_title{margin-bottom:50px;}	
		.daon_page_title h1{font-size:2em;}
		.daon_page_title h2{font-size:1em;}
		.daon_s_tit{font-size:1.2em;}

	}

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

		.business_type4 .business_info { height:auto; margin:50px auto;}
		.business_type4 .business_info .img_left { position:relative; width:100%; height:auto;  background:#000; }
		.business_type4 .business_info .img_left img{ height:auto;}
		.business_type4 .business_info .img_right { position:relative; width:100%; height:auto;  background:#000; }
		.business_type4 .business_info .img_right img{ height:auto;}
		.business_type4 .business_info .con_box { position:relative; width:90%; left:50%; top:-50px; margin-left:-45%; height:auto; }
		.business_type4 .business_info .con_box .txt_area:before { display: none;}
		.business_type4 .business_info .type_other .txt_area:after {display:none;}
		.business_type4 .business_info .con_box .txt_area{padding:15px;}
		.business_type4 .business_info .con_box .txt_area strong{font-size:1.2em;}

	}
	/*  여기까지 코드를 복사하여 공통 css파일 최하단에 추가합니다. */
</style>
<style>
	/* 그누보드 내용관리등 에디터로 입력할 경우  여기서부터 */
	.fc_pointer {color:#BC0000; }
	.daon_content_wrap{width:100%; min-width:320px; max-width:100%; margin:0 auto;}
	.daon_page_title{width:100%; margin-bottom:70px;}
	.daon_page_title h1{width:100%; margin:0 auto; text-align:center; font-size:2.5em; font-weight:600;}
	.daon_page_title h1:after {content:""; clear:both; display:block; width:30px; margin:10px auto; border:1px solid #000;}
	.daon_page_title h2{width:100%; margin:0 auto; text-align:center; font-size:1.2em; color:#666; margin-top:20px; }

	
	.vision_type4 {width:100%; min-width:320px;  margin:0 auto; }
	.vision_type4:after{content:""; clear:both; display:block;}
	.vision_type4 h2.title {text-align:center; font-size:2em; font-weight:400; color:#333; line-height:1.2em; margin-bottom:40px; }
	.vision_type4 h2.title i{color:#aaa;}

	.vision_type4 .vision_area4 { width:100%; padding:0;  text-align: center; margin-top:50px; overflow:hidden;}
	.vision_type4 .vision_area4::after {content:'';display:table; clear:both;}
    .vision_type4 .vision_area4 li {display:inline-block; padding:0; margin-left:-20px;}
    .vision_type4 .vision_area4 li:first-child {margin-left: 0;} 
    .vision_type4 .vision_area4 .i_box {position:relative; display:inline-block; padding-top:30%; width:15rem; height:15rem; text-align:center; background:rgba(43,129,208,0.9); border-radius:100%; box-sizing: border-box;}
    .vision_type4 .vision_area4 li:nth-child(2n) .i_box {background: rgba(137,137,137,0.65);}
	.vision_type4 .vision_area4 .i_box i {display: inline-block; padding:0; margin:0; font-size:3em; color:#fff;}
    .vision_type4 .vision_area4 .i_box strong {display:block; margin-top:10%; font-size:2em; color:#fff; font-weight:500; letter-spacing:-0.03em;}	

	.vision_type4 .con_bg{ width:100%; max-width:100%; margin:60px auto; background:#fcfcfc;}
    .vision_type4 .con_txt { width:100%; max-width:1200px; margin:60px auto; }
	.vision_type4 .con_txt:after{ content:""; display:block; clear:both;}
	.vision_type4 .con_box { float:left; width:49.5%; height:150px; ; margin:25px 0; text-align:left; overflow:hidden; border-right:1px solid #ddd; }
	.vision_type4 .con_box:nth-child(2n){border-right:0px;}
	.vision_type4 .con_box:after{ content:""; display:block; clear:both;}
	.vision_type4 .con_box .icon { float:left; width:15%; text-align:center; }
	.vision_type4 .con_box .icon i {width:50px; height:50px; line-height:50px; text-align:center; color:#8BCE7B; font-size:2em; }
	.vision_type4 .con_box .info { float:left; width:80%;}
	.vision_type4 .con_box .info .txt_tit { font-size:1.5em; }
	.vision_type4 .con_box .info .txt_list { font-size:1em; color:#777; line-height:1.6em; margin-top:20px; }


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

		.daon_content_wrap{width:100%;}
		.daon_page_title{margin-bottom:50px;}	
		.daon_page_title h1{font-size:2em;}
		.daon_page_title h2{font-size:1em;}

		.vision_type4 h2.title { font-size:1.5em; }
		.vision_type4 span.stitle{font-size:1em; width:90%;}

	}

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

		.vision_type4 .vision_area4 li {float:left; width:50%; padding:0; margin:0; margin-bottom:5%; }
		.vision_type4 .vision_area4 li:nth-child(even) {margin-left: 0;} 
		.vision_type4 .vision_area4 li:last-child {margin-bottom:0;}
		.vision_type4 .vision_area4 .i_box {  padding-top:25%; }
		.vision_type4 .vision_area4 .i_box strong { font-size:2em;}

		.vision_type4 .con_box { float:left; width:100%; height:auto; padding-bottom:50px; padding-left:0px;  border-bottom:1px solid #ddd; border-right:0px;}
		.vision_type4 .con_box:last-child { border-bottom:0;}
	
	}


	@media screen and (max-width: 480px) {		
		
		.vision_type4 h2.title br{ display:inline !important; }
		.vision_type4 .vision_area4 li { width:100%; }
		.vision_type4 .vision_area4 .i_box {padding-top:12%; width:12rem; height:12rem; }
		.vision_type4 .vision_area4 .i_box strong { font-size:1.5em;}

	}/*  여기까지 코드를 복사하여 공통 css파일 최하단에 추가합니다. */
</style>