@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:2px dashed #ebebeb; 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; }
.cont_img_left40p{display:block; width:40%; float:left; margin:0 20px 20px 0; }

@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; }
	
}

.subBoxBgStyle {display:block; position:relative; overflow:hidden; margin:0 auto;}
.subBoxBgStyle .title {position:absolute; top:50px; padding:8px 20px; font-size:22px; margin-bottom:20px; line-height:1.3em; color:#fff;}

@media all and (max-width:600px)
{
	.subBoxBgStyle .title{position:absolute; top:20px; font-size:14px; color:#fff; }	
}


/* 도형 */
.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_list li:hover i{transform: scale(1.1);}


.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;}
}

/* 테이블 */
.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{color:#666; }
.basic_table table tfoot th{background:#fbfbfb; color:#999; text-align:center; }
.basic_table table tfoot td{background:#fbfbfb; color:#999; }

.basic_table table tbody .cont_text_02{ line-height:1.6em; color:#666; overflow:hidden; clear:both; padding-bottom:0px;}
.basic_table table tbody .cont_text_02 dl{ list-style:disc; }
.basic_table table tbody .cont_text_02 dt{ width:100%; padding:0px;}

@media all and (max-width:980px)
{
	.basic_table table tbody .cont_text_02{font-size:12px; line-height:1.4em; }
	
}

@media all and (max-width:600px)
{
	.basic_table table tbody .cont_text_02{font-size:12px; }
	
	
}

/* 메인 웹진형 코딩 박스 */
.MainBoxWebzineStyle{width:100%; max-width:1200px; margin:0 auto; text-align:center; padding:0 0 30px 0; overflow:hidden; word-break:keep-all;}
.MainBoxWebzineStyle li{display:block; padding:5px; width:25%; float:left; text-align:left; overflow:hidden;}
.MainBoxWebzineStyle li i{display:block; position:relative; overflow:hidden; margin:0 auto;}
.MainBoxWebzineStyle 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;}
.MainBoxWebzineStyle 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;}
.MainBoxWebzineStyle li strong{display:block; color:#000; font-size:18px; padding:15px 0;}
.MainBoxWebzineStyle li em{display:block; color:RGBA(0,0,0,0.5); font-size:14px; font-style:normal;}
.MainBoxWebzineStyle 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;}
.MainBoxWebzineStyle li:hover u{color:#000; width:100%;}
.MainBoxWebzineStyle li:hover i:after{border:10px solid RGBA(0,0,0,0.2);padding:10px;}
.MainBoxWebzineStyle li:hover i img{transform: scale(1.1);}

.MainBoxWebzineStyle2 li{width:50%;}	/* 메인 웹진형 코딩 박스 2단 구성 시 MainBoxWebzineStyle2 클래스 추가 */
.MainBoxWebzineStyle3 li{width:33.333%;}	/* 메인 웹진형 코딩 박스 3단 구성 시 MainBoxWebzineStyle3 클래스 추가 */
.MainBoxWebzineStyle4 li{width:25%;}		/* 메인 웹진형 코딩 박스 4단 구성 시 MainBoxWebzineStyle4 클래스 추가 */
.MainBoxWebzineStyle5 li{width:20%;}		/* 메인 웹진형 코딩 박스 5단 구성 시 MainBoxWebzineStyle5 클래스 추가 */

@media all and (max-width:980px)
{
	.MainBoxWebzineStyle li{padding:10px;}
	.MainBoxWebzineStyle li strong{font-size:16px;}
	.MainBoxWebzineStyle li em{font-size:12px;}
}
@media all and (min-width:800px)
{

	.MainBoxWebzineStyle2 li:nth-child(3),
	.MainBoxWebzineStyle2 li:nth-child(5),
	.MainBoxWebzineStyle2 li:nth-child(7),
	.MainBoxWebzineStyle2 li:nth-child(9){clear:both;}
	
	.MainBoxWebzineStyle3 li:nth-child(4),
	.MainBoxWebzineStyle3 li:nth-child(7),
	.MainBoxWebzineStyle3 li:nth-child(10),
	.MainBoxWebzineStyle3 li:nth-child(13){clear:both;}

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

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

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

	.MainBoxWebzineStyle2 li,
	.MainBoxWebzineStyle3 li,
	.MainBoxWebzineStyle4 li{width:100% !important; float:none; margin:0 auto;}
}

/* 서브 웹진형 코딩 박스 */
.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{display:block; padding-right:10px; 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 클래스 추가 */
.subBoxWebzineStyle2 li{width:50%; margin-bottom:10px;}		/* 서브 웹진형 코딩 박스 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{padding:0px;}
	.subBoxWebzineStyle li strong{font-size:16px;}
	.subBoxWebzineStyle li em{font-size:12px;}
}
@media all and (min-width:800px)
{

	.subBoxWebzineStyle2 li:nth-child(2){padding-left:10px; padding-right:0px; margin-bottom:0px;} /* 새로 추가 2022-05-02 */
	.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:100% !important; float:left;}
	.subBoxWebzineStyle li:nth-child(odd){clear:both;}

	.subBoxWebzineStyle2 li:nth-child(1){margin-bottom:30px;} /* 새로 추가 2022-05-02 */
	.subBoxWebzineStyle2 li,
	.subBoxWebzineStyle3 li,
	.subBoxWebzineStyle4 li{width:100% !important; float:none; margin:0 auto;}
}

/* 유튜브영상삽입 */
.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%;}


/* 기본컨텐츠 */
.WCMSScontWrap{width:100%; max-width:1200px; min-height:60px; margin:0 auto; text-align:center; padding:0 0 30px 0; overflow:hidden; word-break:keep-all;}
.WCMSScontWrap:after{content:'';display:block; clear:both; height:0px;}

.WCMSScont{width:100%; padding:10px;}
.WCMSScont img{max-width:100%;}
.contCol2 .WCMSScont{float:left; width:50%;}
.contCol3 .WCMSScont{float:left; width:33.3333333%;}
.contCol4 .WCMSScont{float:left; width:25%;}


.WCMSScont .WCMSScontT{font-size:18px; color:#333; padding:5px 0;}
.WCMSScont .WCMSScontC{font-size:14px; color:#777;padding-top:15px; line-height:1.6em;}

.contTxt2 .WCMSScont .WCMSScontT{font-size:24px;}
.contTxt2 .WCMSScont .WCMSScontC{font-size:16px;}
.contTxt3 .WCMSScont .WCMSScontT{font-size:32px;}
.contTxt3 .WCMSScont .WCMSScontC{font-size:20px;}

.WCMSScontWrap table{width:100%:}

.WCMSScontWrap.contAlign_Left .WCMSScont{text-align:left;}
.WCMSScontWrap.contAlign_Center .WCMSScont{text-align:center !important;}
.WCMSScontWrap.contAlign_Right .WCMSScont{text-align:right;}

.WCMSScontWrap .WCMSScont .WCMSScontT:after{content:''; display:block; width:15%; max-width:30px; height:1px; background:#ddd; clear:both;}
.WCMSScontWrap.contAlign_Left .WCMSScont .WCMSScontT:after{ margin-top:10px;}
.WCMSScontWrap.contAlign_Center .WCMSScont .WCMSScontT{border-left:0 !important;}
.WCMSScontWrap.contAlign_Center .WCMSScont .WCMSScontT:after{margin:10px auto 0; }
.WCMSScontWrap.contAlign_Right .WCMSScont .WCMSScontT:after{margin:10px 0 0 auto;}

.WCMSScontWrap .WCMSScontImg{margin-bottom:10px; display:block; overflow:hidden; position:relative;}
.WCMSScontWrap .WCMSScontImg > i{ filter:Alpha(opacity=0); opacity:0; -moz-opacity:0; display:block; width:40px; height:40px; position:absolute; z-index:99; left:50%; top:50%; margin:-20px auto auto -20px; text-align:center ;line-height:40px; background:RGBA(0,0,0,0.6); color:#fff; font-size:20px; border-radius:50%;  -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease; transition-duration: 0.3s; transition-timing-function: ease;}
.WCMSScontWrap .WCMSScontImg img{max-width:100%; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease; transition-duration: 0.3s; transition-timing-function: ease; display:block; margin:0 auto;    }
.WCMSScontWrap a:link:hover.WCMSScontImg img{transform: scale(1.08);}
.WCMSScontWrap a:link:hover.WCMSScontImg > i{ filter:Alpha(opacity=100); opacity:1; -moz-opacity:1; transform: rotate(360deg);}
.contCol1 .WCMSScontImg.imgAlign_left{max-width:50%; float:left; margin-right:15px;}
.contCol1 .WCMSScontImg.imgAlign_center{width:100%; text-align:center; }
.contCol1 .WCMSScontImg.imgAlign_right{max-width:50%; float:right; margin-left:15px;}

/* 이미지배너 */
.WCMSScontImgOutside{padding:0px !important;}
.WCMSScontImgOutside .WCMSScontWrap,
.WCMSScontImgOutside .WCMSScont,
.WCMSScontImgOutside .WCMSScontC,
.WCMSScontImgOutside .WCMSScontC a{padding:0px !important; margin:0px !important; background:#fff; position:relative;}
.WCMSScontImgOutside .WCMSScontC a b{font-size:26px; position:absolute; left:5%; top:50%; right:5%; text-align:center; margin-top:-18px;color:#fff;text-shadow:0px 0px 10px rgba(0,0,0,0.5),0px 0px 14px rgba(0,0,0,0.5),0px 0px 10px rgba(0,0,0,0.5);}
.WCMSScontImgOutside .WCMSScontC a b:after{content:'';display:block; background:#fff; height:1px; width:30px; margin:15px auto 0 auto;-webkit-transition-duration: 0.2s; -webkit-transition-timing-function: ease; transition-duration: 0.2s; transition-timing-function: ease;}
.WCMSScontImgOutside .WCMSScontC a:hover b:after{width:50px;}

.contImgRound  .WCMSScontC a{display:block; margin:0 auto 15px; width:70%; height:auto; background-size:cover; background-position:center center; overflow:hidden; border-radius:50%;}
.contImgRound  .WCMSScontC a b{display:block; width:100%;}
.contImgRound  .WCMSScontC a b img{display:block; width:100%; height:auto !important;filter:Alpha(opacity=0); opacity:0; -moz-opacity:0;}

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

	.WCMSScontSlideOutside .WCMSScontWrap ul.WCMSSsld li.WCMSSsldL > img{width:140%; max-width:140% !important;margin-left:-20%;}

	.WCMSScontImgOutside,
	.WCMSScontSlideOutside{padding:0 15px !important;}
	.WCMSScontImgOutside.contWide,
	.WCMSScontSlideOutside.contWide{padding:0 !important;}

	.WCMSScontMapOutside .WCMSScontWrap{padding:0px 15px ;}
	.WCMSScontMapOutside.contWide .WCMSScontWrap{padding:0px ;}

	#backspacer{top:50px;}
}

@media all and (max-width: 700px)
{	
	.contCol2 .WCMSScont{width:50%; margin-bottom:20px;}
	.contCol3 .WCMSScont{width:50%; margin-bottom:20px;}
	.contCol4 .WCMSScont{width:50%; margin-bottom:20px;}
	.contCol4 div:nth-child(odd).WCMSScont{clear:both;}

	.WCMSScontImgOutside .WCMSScontC a b{font-size:16px;}

	.WCMSScontButtonOutside .WCMSScontWrap a{font-size:14px;}

	.WCMSScontSlideOutside .WCMSScontWrap ul.WCMSSsld li.WCMSSsldL .WCMSScontS > div strong{font-size:20px;}
	.WCMSScontSlideOutside .WCMSScontWrap ul.WCMSSsld li.WCMSSsldL .WCMSScontS > div u{font-size:12px; padding-top:5px;}
	.WCMSScontSlideOutside .WCMSScontWrap ul.WCMSSsld li.WCMSSsldL .WCMSScontS > div u a{ font-size:11px; padding:8px 15px; margin-top:10px;line-height:1.6em;}
	.WCMSScontSlideOutside .WCMSScontWrap ul.WCMSSsld li.WCMSSsldL > img{width:200%; max-width:200% !important;margin-left:-50%;}

	.WCMSScontWrap ul.WCMSSsld li.WCMSSsldL .WCMSScontS > div strong{font-size:26px;}
	.WCMSScontWrap ul.WCMSSsld li.WCMSSsldL .WCMSScontS > div u{font-size:14px; padding-top:5px;}
	.WCMSScontWrap ul.WCMSSsld li.WCMSSsldL .WCMSScontS > div u a{ font-size:12px; padding:8px 15px; margin-top:10px; line-height:1.6em;}
	.WCMSScontWrap ul.WCMSSsld li.WCMSSsldL > img{width:200%; max-width:200% !important;margin-left:-50%;}
	
	.WCMSScont .WCMSScontT{font-size:15px;}
	.WCMSScont .WCMSScontC{font-size:12px;}

	.contTxt2 .WCMSScont .WCMSScontT{font-size:18px;}
	.contTxt2 .WCMSScont .WCMSScontC{font-size:14px;}
	.contTxt3 .WCMSScont .WCMSScontT{font-size:22px;}
	.contTxt3 .WCMSScont .WCMSScontC{font-size:16px;}
}