/* /common/css/r_sub.css */

@import url(/common/css/sub.css);

/* ##################################### 반응형 영역 ###################################### */
/* ======================================================================================= */
@media all and (max-width: 1280px) {
	/* ======================================================================================= */
		/* container 좌우여백 */
		#contents {
			width: 100%;
			padding: 0 2rem 6rem 2rem;
		}
		#contents .contents_area {
			width: 100%;
		}

	/* ############################ 회사소개 /company/overview.php ############################# */
	.overview .txt {
		width: 85%;
	}	
	.overview .imgBox {
		margin-bottom: 5rem;
	}

	/* ############################# 인사말 /company/greeting.php ############################## */
	.greeting .txt {
		width: 85%;
	}

	/* ############################# 연혁 /company/history.php ############################## */
	/* 히스토리 영역 */
	.history .history_wrap {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-direction: column;
	}
	.history .history_wrap > ul {
		width: 60%;
		margin-bottom: 5rem;
	}
	.history .history_wrap .detail h1::after {
		display: none;
	}	
	.history .history_wrap .detail ul li:nth-child(1) {
		width: 6rem;
	}


}
	
	
	
/* ======================================================================================= */
@media all and (max-width:1024px) {
/* ======================================================================================= */
	/* 레프트 메뉴 */
	.lnb {
		float: none;
		display: none;
	}
	/* 콘텐츠영역 가로사이즈 설정 */
	.contentArea {
		float: none;	
		width: 100%;
	}

	/* ########################### 오시는길 /company/location.php ############################ */
	/* 회사 정보 */
	.location .txt .company_info .info {	
		width: 100%;
	}
	/* 교통 정보 */
	.location .traffic_info ul {
		width: 90%;
		margin-bottom: 5rem;
	}	
}



/* 서브페이지 /common/css/sub.css */
/* ======================================================================================= */
@media all and (max-width:767px) {
/* ======================================================================================= */
	/* container 좌우여백 */
	#contents {
		padding: 0 1.5rem 5rem 1.5rem;
	}

	/* 서브 비쥬얼 타이틀 */
	#sub_visual .visual_title h1 {font-size: 3.2rem;}
	#sub_visual .visual_title p {font-size: 1.8rem;}
	
	/* 게시판 타이틀 */
	#contents h3.title_name {font-size: 2.8rem}

	/* ############################ 회사소개 /company/overview.php ############################# */
	.overview .imgBox {
		height: 60.4vw;
	}	
	.overview .txt {
		width: 98%;
	}	

	/* ############################# 인사말 /company/greeting.php ############################## */
	.greeting .imgBox {
		height: 52.5vw;
	}		

	/* ########################### 오시는길 /company/location.php ############################ */
	.location .root_daum_roughmap {
		height: 40rem;
	}
	/* 회사 정보 */
	.location .txt {
		width: 100%;
	}	
	/* 교통 정보 */
	.location .traffic_info {
		flex-wrap: wrap;
	}	
}



/* ======================================================================================= */
@media all and (max-width:568px) {
/* ======================================================================================= */	
	/* 서브 비쥬얼 영역 */
	#sub_visual {height: 25rem;}

	.subtop_company{background:linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url('/mobile/img/sub_bg_company.png') center bottom 0 no-repeat; background-size: cover;}
	.subtop_product{background:linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url('/mobile/img/sub_bg_product.png') center bottom 0 no-repeat; background-size: cover;}
	.subtop_consult{background:linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url('/mobile/img/sub_bg_consult.png') center bottom 0 no-repeat; background-size: cover;}
	.subtop_location{background:linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url('/mobile/img/sub_bg_location.png') center bottom 0 no-repeat; background-size: cover;}
	.subtop_community{background:linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url('/mobile/img/sub_bg_community.png') center bottom 0 no-repeat; background-size: cover;}
	.subtop_customer{background:linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url('/mobile/img/sub_bg_customer.png') center bottom 0 no-repeat; background-size: cover;}
	.subtop_shop{background:linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url('/mobile/img/sub_bg_shop.png') center bottom 0 no-repeat; background-size: cover;}
	.subtop_member{background:linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url('/mobile/img/sub_bg_member.png') center bottom 0 no-repeat; background-size: cover;}
	.subtop_search{background:linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url('/mobile/img/sub_bg_community.png') center bottom 0 no-repeat; background-size: cover;}

    /* 서브 비주얼 타이틀 */
	#sub_visual .visual_title {height: 25rem;}
	#sub_visual .visual_title h1 {font-size: 28px;}
    #sub_visual .visual_title p {font-size: 17px;}

	/* 서브 메뉴 */
	.visual_title #sub-header ul li a {height: 40px; line-height: 40px;} 	
}



/* ======================================================================================= */
@media all and (max-width:480px) {
/* ======================================================================================= */
	#contents {
		padding: 0 1.5rem 4rem 1.5rem;
	}

	/* ############################ 회사소개 /company/overview.php ############################# */
	.overview .txt h1 {font-size: 2.5rem;}
	.overview .txt ul li {
		float: none;	
	}	
	/* ############################# 연혁 /company/history.php ############################## */
	/* 히스토리 영역 */
	.history .history_wrap > ul {
		width: 90%;
	}
	.history .history_wrap .detail ul li:nth-child(1) {
		width: 5rem;
	}

	/* ########################### 오시는길 /company/location.php ############################ */
	.location .root_daum_roughmap {
		height: 35rem;
	}
	/* 회사 정보 */
	.location .txt .company_info p.main_txt {
		width: 8rem;
	}
	.location .txt.company_info p.sub_txt {
		width: calc(100% - 8rem);
	}	
	/* 교통 정보 */
	.location .traffic_info li .ico {
		width: 3.5rem;
		height: 3.5rem;
	}	
}



/* ======================================================================================= */
@media all and (max-width:319px) {
/* ======================================================================================= */	
	/* 서브 비쥬얼 타이틀 */
	#sub_visual .visual_title h1 {font-size: 8.8vw;}
	#sub_visual .visual_title p {font-size: 5vw;}

	/* 게시판 타이틀 */
	#contents h3.title_name {font-size: 7.7vw;}

	/* 서브 메뉴 */
	.visual_title #sub-header ul li {font-size: 14px;} 

	/* ############################ 회사소개 /company/overview.php ############################# */
	.overview .txt h1 {font-size: 2.3rem;}

	/* ############################# 연혁 /company/history.php ############################## */
	/* 히스토리 영역 */
	.history .history_wrap > ul {
		width: 95%;
	}
}