@charset "utf-8";

/* 테마/sub/서브페이지.php 에 사용되는 css를 추가 할 수 있습니다. */


/* ****************************************************************************************** */
/* sub section common */
.sub_sec{padding:0px 0 0px}
.sub_sec .title{padding-bottom:4rem; text-align:center;}
.sub_sec .title h3{padding-bottom:4px; letter-spacing:0.02em; text-transform:capitalize; font-size:36px; font-weight:400;}
.sub_sec .title h3 span{text-transform:uppercase;}
.sub_sec_con{}



/* ****************************************************************************************** */



/* hub.php - 나누리허브 소개 상단글영역*/
.hub_sec {margin-bottom: 50px;}
.hub_sec .title{padding-bottom:1rem; text-align:center;}
.hub_sec .title h3{padding-bottom:4px; letter-spacing:0.02em; text-transform:capitalize; font-size:36px; font-weight:400;}
.hub_sec .title h3 span{text-transform:uppercase;}


.hub_sec .title h4{padding-bottom:4px; letter-spacing:0.02em; text-transform:capitalize; font-size:30px; font-weight:400;}
.hub_sec .title h4 span{text-transform:uppercase; padding: 10px 40px; border: 2px solid #3D3D3D; border-radius:2rem;}


.hub_sec .topfont {letter-spacing:-0.04em; font-size:30px; font-weight:300; text-align: center; color: #6FC7DB; margin-bottom: 40px;line-height:120%}


.hub_sec .in{margin:auto; max-width: 1200px; text-align: center; padding-top: 50px;margin-bottom: 30px;}

.hub_sec ul {margin-top:30px; overflow:hidden; margin-bottom: 70px;}
.hub_sec ul li{ width:33.333%; text-align:center; float:left; display:block}
.hub_sec ul li .icon { display:inline-block; padding:30px}
.hub_sec ul li .icon i { color:#666}
.hub_sec ul li img {vertical-align:middle; transition:transform 500ms}
.hub_sec ul li:hover i{transform:rotateY(180deg); transition:transform 500ms}
.hub_sec ul li .box { padding:0 10px; display:block; background-color: #fafafa; margin-left: 5px}
.hub_sec ul li:last-child .box {border-right:0px; background-color: #eeeeee}
.hub_sec ul li dl dt {font-weight:bold; padding-bottom:5px; line-height:20px; color:#222; font-size:20px}
.hub_sec ul li dl dd {color:#555; font-size:15px; line-height:120%; padding-bottom:25px;}
.hub_sec ul li a {display:inline-block; margin-top:10px; border:1px #ddd solid; padding:0 20px; line-height:30px; color:#666;  transition: all .2s; background:#3D3D3D;color:#fff;}
.hub_sec ul li:hover a {background:#5bb6e2; color:#fff; transition: all .3s}











.hub_area_sec { background:#fafafa; background:url('../img/hub/list_back.png') 0 top ; margin-bottom: 60px;}
.hub_area_sec .box{margin:auto; max-width: 1200px; text-align: center; padding-top: 50px;margin-bottom: 30px;}

.hub_area_sec .box .pic {}

.hub_area_sec .txt {letter-spacing:-0.04em; font-size:20px; font-weight:300; text-align: center; color: #6FC7DB; margin-bottom: 40px; margin-top: 30px; line-height:120%;  }

.hub_area_sec .txt2 {letter-spacing:-0.04em; font-size:25px; font-weight:500; text-align: center; color: #000; margin-bottom: 40px;line-height:120%; }


/* hub.php - 나누리허브 운영도*/

.hub2_area_sec { background:#fafafa; background-color: #fafafa; padding-top: 50px; padding-bottom: 50px;}

.hub2_area_sec .title{padding-bottom:1rem; text-align:center;}
.hub2_area_sec .title h3{padding-bottom:4px; letter-spacing:0.02em; text-transform:capitalize; font-size:36px; font-weight:400;}
.hub2_area_sec .title h3 span{text-transform:uppercase;}


.hub2_area_sec .in{margin:auto; max-width: 1200px; text-align: center; padding-top: 50px;margin-bottom: 30px;}


.hub2_area_sec ul {margin-top:30px; overflow:hidden; margin-bottom: 70px;}
.hub2_area_sec ul li{ width:25%; text-align:center; float:left; display:block}
.hub2_area_sec ul li .icon { display:inline-block; padding:30px}
.hub2_area_sec ul li .icon i { color:#666}
.hub2_area_sec ul li img {vertical-align:middle; transition:transform 500ms}
.hub2_area_sec ul li:hover i{transform:rotateY(180deg); transition:transform 500ms}
.hub2_area_sec ul li .box {border-right:1px  #eaeaea solid; padding:0 10px; display:block}
.hub2_area_sec ul li:last-child .box {border-right:0px}
.hub2_area_sec ul li dl dt {font-weight:bold; padding-bottom:15px; line-height:20px; color:#222; font-size:20px}
.hub2_area_sec ul li dl dd {color:#555; font-size:15px; line-height:120%; padding-bottom:15px;}
.hub2_area_sec ul li a {display:inline-block; margin-top:20px; border:1px #ddd solid; padding:0 20px; line-height:30px; color:#666;  transition: all .2s}
.hub2_area_sec ul li:hover a {background:#2253b8; color:#fff; transition: all .3s}






















/* ****************************************************************************************** *
 * 1200px
 * ****************************************************************************************** */
@media screen and (max-width:1200px) {
	
	/* about */
	.about_contact_sec{padding:6rem 2rem;}

}
/* 1200px end */



/* ****************************************************************************************** *
 * 1024px
 * ****************************************************************************************** */
@media screen and (max-width:1024px) {
	
	/* about */
	.about_profile_sec > .inner{padding:0 24px;}

}
/* 1024px end */



/* ****************************************************************************************** *
 * 768px
 * ****************************************************************************************** */
@media screen and (max-width:768px) {
    
    
    /* hub.php - 허브소개 */
    .hub_area_sec .box .pic img{width:100%}
    .hub_sec .title h3{padding-bottom:4px; letter-spacing:0.02em; text-transform:capitalize; font-size:28px; font-weight:400;}
    .hub_sec .topfont {letter-spacing:-0.04em; font-size:20px; font-weight:300; text-align: center; color: #6FC7DB; margin-bottom: 40px;line-height:120%}
    
    
    .hub_area_sec .txt {letter-spacing:-0.04em; font-size:20px; font-weight:300; text-align: center; color: #6FC7DB; margin-bottom: 40px; margin-top: 30px; line-height:120%;  padding-left: 15px; padding-right: 15px}
    
    .hub_area_sec .txt2 {letter-spacing:-0.04em; font-size:25px; font-weight:500; text-align: center; color: #000; margin-bottom: 40px;line-height:120%; padding-left: 15px; padding-right: 15px}
	
    
    .hub2_area_sec .title h3{padding-bottom:4px; letter-spacing:0.02em; text-transform:capitalize; font-size:25px; font-weight:400;}
    
    
    .hub2_area_sec .in{margin:auto; max-width: 1200px; text-align: center; padding-top: 0px;margin-bottom: 0px;}
    
    
    
    .hub2_area_sec ul li{ width:100%; text-align:center; float:left; display:block}
.hub2_area_sec ul li .box { border-right:0; border-bottom:1px solid #ddd; padding-bottom:30px}
.hub2_area_sec ul {margin-top:0px; overflow:hidden; margin-bottom: 70px;}
.hub2_area_sec ul li:first-child{border-top:1px solid #ddd;}
    
    
    
	/* about.php - 회사소개 */
	.project_request_sec .about_phil li{width:calc(50%); margin:0 0 1rem; font-size:13px;}
	.project_request_sec .about_phil li .txt{padding:0 24px 24px;}
	.about_contact_sec{padding:4rem 2rem;}
	.about_intro_sec dl dt span{font-size:48px;}
	.about_intro_sec dl dd h2{font-size:32px;}
	.about_intro_sec dl dd div{padding-left:0;}
	.about_intro_sec dl dd p{width:100%; padding-left:0;}
	.about_intro_sec dl dd p:first-child{padding-bottom:1rem;}


	/* contact */
	.contact_sec .address_info{padding:1.5rem 1rem 1rem;}
	.contact_sec .address_info dl dt{margin-bottom:.5rem; font-size:14px;}
	.contact_sec .address_info dl dd{font-size:16px;}
	.contact_sec .contact_info dl dt{width:80px; height:80px;}
	.contact_sec .contact_info dl dd{width:calc(100% - 80px); padding-top:.25rem;}
    
    
    	/* 교육센터 */

    
    
    .edu_area_sec .topfont {letter-spacing:-0.04em; font-size:20px; font-weight:300; text-align: center; color: #6FC7DB; margin-bottom: 40px;line-height:120%}
    
    
    .edu_area_sec ul{margin:0 -16px; font-size:0;background:#fafafa;}
.edu_area_sec ul li{display:inline-block; width:calc(100%); font-size:15px; vertical-align: top;}
.edu_area_sec ul li *{-webkit-transition:all .3s ease-out; transition:all .3s ease-out;}
.edu_area_sec ul li:first-child{height:100%;background:#fafafa;overflow:hidden;}
.edu_area_sec ul li:last-child{padding: 40px 20px;}
.edu_area_sec ul li h4{font-size:20px; padding-top:0px; font-weight:300; color:#6FC7DB; line-height: 120%}
.edu_area_sec ul li h5{font-size:20px; padding-top:0px; font-weight:400; color:#6FC7DB; margin-bottom: 20px;}



.edu_area_sec ul li p{font-size: 16px;}

.edu_area_sec ul li img{width:100%; height:auto;}
    

.edu_area_sec {margin-bottom: 0px;}    
    
    
.edu2_area_sec ul li{ width:100%; text-align:center; float:left; display:block}
.edu2_area_sec ul li .box { border-right:0; border-bottom:1px solid #ddd; padding-bottom:30px}
.edu2_area_sec ul {margin-top:0px; overflow:hidden; margin-bottom: 70px;}
.edu2_area_sec ul li:first-child{border-top:1px solid #ddd;}
    
    
 
.business_type2 .business_info ul li.left_box { width:100%; height:auto; overflow:hidden; display: none}
.business_type2 .business_info ul li.right_box{position:relative; width:100%; padding: 20px}    

    
    .edu_type1 .tech { position:relative; padding-bottom:0px; margin-bottom: 0px}
   .edu_type1 .tech .img_box { display:block; position:relative; top:0; left:0; width:100%; padding:0; margin-bottom:40px; text-align: center}
		.edu_type1 .tech .img_box img { width:100%;}
		.edu_type1 .tech:before { left:20px; } /* 라인 */
		.edu_type1 .tech > div { margin-left:0; }
		.edu_type1 .tech > div:before {left:18px; }
		.edu_type1 .tech > div .year { top:0px; left:40px; font-size:0.9em;}
		.edu_type1 .tech > div ul li { font-size:0.9em;}
    
    
    

    
    
    .edu_type2 { padding-bottom: 30px; padding-left: 10px; padding-right: 10px}
    
    
    .hub_sec ul li{ width:100%; text-align:center; float:left; display:block}
    .hub_sec ul li .box { padding:0 10px; display:block; background-color: #fafafa; margin-left: 0px; margin-bottom: 10px;}
    .hub_sec .in{margin:auto; max-width: 1200px; text-align: center; padding-top: 0px;margin-bottom: 30px;}
    

}
/* 768px end */



/* ****************************************************************************************** *
 * 767px
 * ****************************************************************************************** */
@media screen and (max-width:767px) {

	/* about.php - 회사소개 */
	.about_profile_sec > .inner{padding:0 20px;}
	.about_profile_sec dl{padding:10px 15px;}
	.about_profile_sec dl dt, 
	.about_profile_sec dl dd{float:none; width:100%; margin-left:0; padding:5px 0; text-align:left;}
	

	/* contact */
	.contact_sec .address_info{padding:1.5rem;}
	.contact_sec .address_info dl{width:100%;}
	.contact_sec .address_info dl:nth-child(1){padding-bottom:.5rem;}
	.contact_sec .address_info dl dt{margin-bottom:0; padding:0; border:0; font-size:14px;}
	.contact_sec .address_info dl dd{font-size:14px;}

	.contact_sec .contact_info dl{width:100%;}
	.contact_sec .contact_info dl dt{width:60px; height:60px; font-size:16px;}
	.contact_sec .contact_info dl dd{width:calc(100% - 60px); padding-left:.5rem;}
	.contact_sec .contact_info dl dd p{display:inline; font-size:13px;}
	.contact_sec .contact_info dl dd p:nth-of-type(1){padding-right:8px;}
	.contact_sec .contact_info dl dt i {font-size:18px;}


	/* work */
	.work_area_sec ul li{width:calc(100% - 32px);}
	.process_sec{background:#f7f7f7;}
	.project_request_sec{padding:4rem 20px;}


}
/* 767px end */





/* ****************************************************************************************** *
 * 480px
 * ****************************************************************************************** */
@media screen and (max-width:480px) {
	
	/* sub section common */
	.sub_sec .title{padding:0 1rem 3rem;}	
	.sub_sec .title h3{letter-spacing:0; font-size:28px;}
	.sub_sec .title p{display:inline;}

	/* about */
	.about_intro_sec dl dt span{font-size:36px;}	

	/* work */
	.work_area_sec ul li > div:last-child{padding:1.5rem 0 2rem;}
	.project_request_sec > .inner{padding:0 15px;}

}
/* 480px end */





/* ****************************************************************************************** *
 * 320px
 * ****************************************************************************************** */
@media screen and (max-width:320px) {
	
	/* contact */
	.contact_sec .contact_info dl dt{display:none;}
	.contact_sec .contact_info dl dd{width:100%; padding:0;}

}
/* 320px end */