@charset "utf-8";

/* 공통 */
html,body { height:100%; }
#sub_wrap { position:relative; }

/* 상단이미지 */
#sub_img { margin:0 auto; height:280px; overflow:hidden;}
#sub_img.sub1_img_bg { background:#06183c url('../images/common/cau_sVisual_01.jpg') no-repeat center top; background-size:cover; }
#sub_img.sub2_img_bg { background:#235395 url('../images/common/cau_sVisual_02.jpg') no-repeat center top; background-size:cover; }
#sub_img.sub3_img_bg { background:#000 url('../images/common/cau_sVisual_03.jpg') no-repeat center top; background-size:cover; }
#sub_img.sub4_img_bg { background:#241319 url('../images/common/cau_sVisual_06.jpg') no-repeat center top; background-size:cover; }
#sub_img.sub5_img_bg { background:#241319 url('../images/common/cau_sVisual_07.jpg') no-repeat center top; background-size:cover; }
#sub_img.subprivacy_img_bg { background:#241319 url('../images/common/cau_sVisual_04.jpg') no-repeat center top; background-size:cover; }


.slogan_wrap { position:relative; width:var(--max-width); margin:0 auto; text-align:center; }
.slogan1 { position:absolute; left:0px; top:150px; margin-top:100px; opacity:0; width:100%; 
font-size:40px; line-height:1.1; color:#fff; }
.slogan2 { position:absolute; left:0px; top:200px; margin-top:100px; opacity:0; width:100%; 
font-size:17px; line-height:1.5; color:rgba(255,255,255,0.7); }

/* 컨텐츠 전체 */
#contents_wrap { width:var(--max-width); margin:0 auto; position:relative; } 

/* 홈페이지 경로표시 =================================================================================================== */
/* 전체 */
#page-wrap { 
	height:60px; 
	background:#ed6d00;
	position:absolute;
	top:-80px;
	left:0;
}

/* LEVEL 1, 2 공통 스타일 */
ul.dropdown { position:relative; z-index:10; background:#fff; }
ul.dropdown li { float:left; height:60px; line-height:60px; padding:0 20px; background:url('../images/common/location_arrow.gif') no-repeat left center; }
ul.dropdown li a { color:#fff; display:block; padding:0 10px 0 15px; font-size:15px; }

/* HOME 버튼 */
ul.dropdown li.depth-1 { background:none; padding-left:7px; padding-right:0px; }
ul.dropdown li.depth-1 a { display:block; width:60px; height:60px; line-height:67px; text-align:center; padding:0;}
ul.dropdown li.depth-1 a i { font-size:20px; color:#fff; }

/* LEVEL 1 메뉴 가로넓이가 넓게 설정 */
ul.dropdown li.depth-2 { background:url('../images/common/location_arrow.gif') no-repeat left center; }
ul.dropdown li.depth-2 a { font-weight:400 }

/* LEVEL 2 메뉴 가로넓이가 넓게 설정 */
ul.dropdown li.depth-3 { background:url('../images/common/location_arrow.gif') no-repeat left center; }
ul.dropdown li.depth-3 a { color:#fffaa3; font-weight:500; } 

/* 컨텐츠 타이틀 */
#contents_wrap .con_title { overflow:hidden; padding:75px 0 10px;}
#contents_wrap .con_title h3 { display:block; text-align:center; padding-bottom:25px; font-size:35px; font-weight:600; color:#000; }
#contents_wrap .con_title span { font-size:16px; color:#080808 }
#contents_wrap .con_title span.hit { margin-left:20px; background:url('../images/contents/icon_hit.png') no-repeat 0 center; padding-left:25px }

/* 실제 컨텐츠 영역 */
#contents_wrap .con_area { min-height:500px; padding:40px 0 100px 0; }

/* 컨텐츠 내용 공통 */
#contents_wrap .con_area .img { text-align:center }
#contents_wrap .con_area .img img { max-width:100%; }
#contents_wrap .con_area .b_tit { padding:20px; background:#eef6ff; font-size:24px; line-height:1.4; font-weight:600; color:#166adc; }
#contents_wrap .con_area h3.colorTit { 
	position:relative;
	font-size:32px; 
	line-height:1.4; 
	color:#ed5400;
    font-family: 'GmarketSansBold';
}
#contents_wrap .con_area h4.tit { position:relative; padding-left:25px; margin:45px 0 20px; font-size:22px; line-height:1.4; 
font-weight:500; color:#000 }
#contents_wrap .con_area h4.tit:before { position:absolute; left:0; top:7px; content:''; 
width:8px; height:8px; border-radius:100%; border:4px solid #166adc }
#contents_wrap .con_area h4.tit.ntop { margin-top:0 }
#contents_wrap .con_area h4.tit b.stxt { font-size:16px; color:#166adc }

#contents_wrap .con_area h4.tit2 { margin:25px 0 10px; font-size:20px; line-height:1.3; font-weight:500; color:#166adc }
#contents_wrap .con_area h4.tit2 i { color:#166adc }

#contents_wrap .con_area h5.stit { position:relative; padding-left:13px; margin:30px 0 20px; font-size:18px; line-height:1.4; 
font-weight:500; color:#166adc }
#contents_wrap .con_area h5.stit:before { position:absolute; left:0; top:4px; content:'';
width:4px; height:18px; border-radius:4px; background:#166adc }

#contents_wrap .con_area .box { padding:20px; background:#f5f5f5; }
#contents_wrap .con_area .list li { position:relative; padding-left:10px; }
#contents_wrap .con_area .list li:before { position:absolute; left:0; top:8px; content:''; 
width:4px; height:4px; border-radius:4px; background:#166adc }
#contents_wrap .con_area .mtop { margin-top:50px !important }
.conTitle {
	font-size:19px;
	font-family: 'Nanum Square-b';
	color:#333;
}
.conTitle_s {
	font-size:17px;
	font-family: 'Nanum Square-b';
	color:#333;
}

/* ============================================================================================================================================================== */

@media (max-width:1340px) {
	.slogan_wrap { width:var(--max-width-l); }
}

@media (max-width:1240px) {
	.slogan_wrap { width:var(--max-width-m); }
}

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

	/* 상단이미지 */
	#sub_img { height:150px; }
	.slogan_wrap { width:100%; }

	#contents_wrap .con_area .b_tit { font-size:20px; }
	#contents_wrap .con_area h4.tit { font-size:18px; }
	#contents_wrap .con_area h4.tit2 { font-size:16px; }
	#contents_wrap .con_area h4.tit:before { top:5px; }
	#contents_wrap .con_area h5.stit { font-size:15px; margin:20px 0 20px; }
	#contents_wrap .con_area h5.stit:before { top:4px; height:15px; }
	#contents_wrap .con_area p { font-size:13px }

	#contents_wrap .con_area h3.colorTit { 
		font-size:26px; 
	}

	/* 상단이미지 */
	.slogan1 { position:absolute; top:50px; margin-top:0; font-size:26px;}
	.slogan2 { position:absolute; top:85px; margin-top:0; font-size:14px;}

}

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

	#contents_wrap .con_area h4.tit { margin:25px 0 10px; font-size:16px; }
	#contents_wrap .con_area h4.tit2 { font-size:14px; }
	#contents_wrap .con_area .b_tit { font-size:18px; }

	#contents_wrap .con_area h3.colorTit { 
		font-size:20px; 
	}

	/* 상단이미지 */
	.slogan1 { font-size:26px;}
	.slogan2 { font-size:12px;}

}

/* 탭버튼 */
.tab_box { margin-top:50px; text-align:center; overflow:hidden; }
.tab_box ul {
	margin:50px auto 30px;
}
.tab_box li { 
	display:inline-block;
}
.tab_box li a {
	height:50px; 
	line-height:50px; 
	padding:0 30px; 
	font-size:18px; 
	text-align:center; 
	color:#000;
	display:block; 
}
.tab_box li a:hover { border-bottom:2px solid #ed6d00;}
.tab_box li.active a { 
	color:#f1412a;
	background:url('/images/contents/rg_tabBg.png') no-repeat right 0;
}
.tab_box.stab_box {
	margin-top:20px;
}
.tab_box.stab_box ul {
	overflow:hidden;
	text-align:center;
}
.tab_box.stab_box li {
	width:auto;
	display:inline-block;
	float:none;
}
.tab_box.stab_box li:first-child {
	margin-left:0;
}
.tab_box.stab_box li a {
	width: 100%;
	height:40px; 
	line-height:40px;
	color:#333;
	background:#efefef;
	padding:0 20px;
	font-weight:400; 
	border-radius:20px;
	border:none;
	display:block;
}
.tab_box.stab_box li a:hover { }
.tab_box.stab_box li.active a { 
	color:#fff; 
	background:#24419f;
}


/* ============================================================================================================================================================== */

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

	#contents_wrap { width:var(--max-width-l); }

}

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

	#contents_wrap { width:var(--max-width-m); }
}

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

	#page-wrap { display:none; }
	#sub_img { padding-top: 70px; height:200px; }


	#contents_wrap { width:var(--max-width-s); }

	#contents_wrap .con_title { padding:56px 0 10px }
	#contents_wrap .con_title h3 { font-size:30px; line-height:30px; }
	#contents_wrap .con_area { width:100%; padding:30px 0 30px 0; }
	
	.tab_box ul {
		margin:0px auto 20px;
	}
	.tab_box li a {
		height:40px; 
		line-height:40px; 
		padding:0 15px; 
		font-size:16px; 
	}
	.tab_box li.active a { 
		background-size:10px 10px;
	}

	
}

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


	.tab_box li a { 
		font-size:15px; 
	}
	.tab_box li.active a { 
		background-size:8px 8px;
	}


}

@media screen and (max-width:685px) { 
	.tab_box li a { 
		padding:0 10px;  
	}


}

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

	#contents_wrap { width:var(--max-width-xs); }

	#contents_wrap .con_title h3 { font-size:20px; line-height:20px; }
	#contents_wrap .con_area { padding:10px 0 30px 0; }

	
	.tab_box { margin-top:20px; }

	.tab_box li a {		
		height: 30px;
		line-height:1.3; 
		font-size:13px; 
	}
	

}

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

}