@charset "utf-8";

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

/* 컨텐츠 전체 */
#contents_wrap { padding-top:156px; }

/* 상단이미지 */
#sub_img { padding-top:100px; height:400px; }
#sub_img.sub01_img_bg { background:url('../images/common/sub_top_img1.jpg') no-repeat center top; background-size:cover }
#sub_img.sub02_img_bg { background:url('../images/common/sub_top_img2.jpg') no-repeat center top; background-size:cover }
#sub_img.sub03_img_bg { background:url('../images/common/sub_top_img3.jpg') no-repeat center top; background-size:cover }
#sub_img.sub04_img_bg { background:url('../images/common/sub_top_img4.jpg') no-repeat center top; background-size:cover }
#sub_img.sub05_img_bg { background:url('../images/common/sub_top_img5.jpg') no-repeat center top; background-size:cover }
#sub_img.sub06_img_bg { background:url('../images/common/sub_top_img6.jpg') no-repeat center top; background-size:cover }

/* 컨텐츠 타이틀 */
#contents_wrap .con_title { overflow:hidden; width:1200px; margin:0 auto; padding:100px 0 10px;}
#contents_wrap .con_title h3 { display:block; font-family:"Nanum Square-e"; font-weight:800; font-size:36px; line-height:36px; 
padding-bottom:20px; color:#000; text-align:center; }
#contents_wrap .con_title h4 { display:block; text-align:center; font-weight:400; font-size:16px; color:#080808 }
#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:300px; }
#contents_wrap .con_wrap { width:1200px; margin:0 auto; padding:60px 0 100px 0; line-height:1.6; }

/* 탭버튼1 */
.tab_box1 {overflow:hidden;width:1320px;margin:50px auto 0;border-left:1px solid #d8d8d8; }
.tab_box1 ul { border-top:1px solid #d8d8d8;}
.tab_box1 li {float:left; width:25%;}
.tab_box1 li a {float:left; display:block; width:100%; height:55px; line-height:55px; border:1px solid #d8d8d8; border-left:none; 
border-top:none;background:#fafafa;font-size:15px; font-weight:500; text-align:center; color:#727272; overflow:hidden}
.tab_box1 li.active a {border:1px solid #ffc20e; background:#ffc20e; color:#000}
.tab_last {clear:both;}
.tab_box1 .w1 li {width:16.66%;}
.tab_box1 .w2 li {width:20%;}
.tab_box1 .w3 li {width:50%;}

.tab_box1.mw ul { max-width:500px; }

.ing { border:1px solid #dcdcdc; text-align:center; height:300px; line-height:300px; font-size:18px; }



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

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


#contents_wrap .con_title,
#contents_wrap .con_wrap,
.tab_box1 { width:1000px; }

}

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

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

#contents_wrap { padding-top:50px; }
#contents_wrap .con_title { width:100%; padding:56px 0 10px }
#contents_wrap .con_wrap { width:96%; padding:0 0 50px 0; }
#contents_wrap .con_title h3 { font-size:30px; line-height:30px; }
#contents_wrap .con_area { width:100%; padding-top:20px; }
.tab_box1 { margin:40px auto 20px; width:96%; }
}

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

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

.tab_box1 li {width:50%;}
.tab_box1 li a {height:35px; line-height:35px;font-size:13px; font-weight:500; }
}

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

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

#contents_wrap .con_title { padding:36px 0 10px }
#contents_wrap .con_title h3 { font-size:24px; line-height:24px; padding-bottom:10px; }
#contents_wrap .con_title h4 { font-size:13px; }
#contents_wrap .con_title span { font-size:13px; }

.tab_box1 { margin:20px auto; }

.ing { font-size:16px; }

}

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

@media screen and (max-width:380px) { 
#contents_wrap .con_title h3 { font-size:20px; line-height:20px; }
#contents_wrap .con_title h4 { font-size:12px; }
}