@charset "utf-8";

/* 공통 */
html,body {height:100%; }
body,html{word-break: keep-all;}
#sub_wrap { position:relative; margin-top:60px; min-height:100%; height:auto; }

/* 컨텐츠 전체 */
#contents_wrap { margin:0 auto; }

/* 상단이미지 */
#sub_img { width:100%; text-align:center }
#sub_img img { width:100%; max-width:1024px; }
#sub_img .sub_img_bg1 { background:#dde2e4 }
#sub_img .sub_img_bg2 { background:#ebe7de }
#sub_img .sub_img_bg3 { background:#ebe7de }
#sub_img .sub_img_bg4 { background:#ebe7de }
#sub_img .sub_img_bg5 { background:#9fa2a7 }
#sub_img .sub_img_bg6 { background:#6d85a7 linear-gradient(to right, #6d85a7 0%, #6d85a7 25%, #2d4d88 50%, #2d4d88 100%) }
#sub_img .sub_img_bg7 { background:#f0ece9 linear-gradient(to right, #f0ece9 0%, #f0ece9 25%, #e6e3e0 50%, #e6e3e0 100%) }
#sub_img .sub_img_bg8 { background:#f0ece9 linear-gradient(to right, #f0ece9 0%, #f0ece9 25%, #e6e3e0 50%, #e6e3e0 100%) }

/* 오른쪽 컨텐츠 영역 */
#contents_wrap .contents_body { margin:20px auto 0; }

/* 컨텐츠 타이틀 */
#contents_wrap .contents_body .con_title {border-bottom:1px solid #dadada; text-align:center; margin-bottom:20px;}
#contents_wrap .contents_body .con_title h3 { font-family:'Nanum Square-b'; font-weight:bold; font-size:20px; color:#000;padding-bottom:15px;}

/* 실제 컨텐츠 영역 */
#contents_wrap .contents_body .con_area { max-width:995px; width:96%; padding:20px 0 40px; margin:0 auto; }
#contents_wrap .contents_body .con_area img {max-width:100%}

/* 탭버튼1 */
.tab_box1 {margin:0 0 30px;height:60px;background:url('../images/common/tab_box_bg1.gif') repeat-x left bottom}
.tab_box1:after {clear:both; content:''}
.tab_box1 .tabbtn {float:left; display:block; padding:0 10px; height:58px; line-height:58px; border:1px solid #d8d8d8; border-left:none; border-bottom:none; background:#fafafa;
font-size:15px; font-weight:bold; text-align:center; color:#727272; overflow:hidden}
.tab_box1 .tabbtn:first-child { border-left:1px solid #d8d8d8;}
.tab_box1 .tabbtn_on:first-child {border-left:2px solid #007abc;}
.tab_box1 .tabbtn_on {height:60px; border:2px solid #007abc; border-bottom:none; background:#fff; color:#237cc1}
.tab_last {clear:both;}
.tab_box1.w1 .tabbtn {width:50%;}
.tab_box1 .tabbtn.line2 br { display:none; }

@media (max-width:767px) {

.tab_box1 {margin:0 0 20px; }
.tab_box1 .tabbtn { font-size:13px; }

}

@media (max-width:480px) {

.tab_box1 .tabbtn.line2 { padding:10px 10px; line-height:18px; }
.tab_box1 .tabbtn.line2 br { display:block; }

}

@media (max-width:340px) {

.tab_box1 .tabbtn { padding:0 7px; font-size:12px; }
.tab_box1 .tabbtn.line2 { padding:10px 7px; }

}

/* 탭버튼2 */
.tab_box2 {overflow:hidden; margin:30px 0 10px;}
.tab_box2 .tabbtn {float:left; display:block; width:30%; margin:0 5px 5px 0; height:40px; line-height:38px; border:1px solid #d8d8d8;  
font-weight:bold; text-align:center; color:#727272; overflow:hidden}
.tab_box2 .tabbtn_on {height:40px; border:1px solid #007abc; background:#007abc; color:#fff; }

@media (max-width:767px) {

.tab_box2 {margin:20px 0 10px;}
.tab_box2 .tabbtn { width:48%; height:30px; line-height:28px; font-size:13px;}
.tab_box2 .tabbtn_on { height:30px; }

}

/* 탭버튼3 */
.tab_box3 {margin:0 0 30px; height:50px; }
.tab_box3 .tabbtn {float:left; display:block; width:50%; height:50px; line-height:50px; border:1px solid #d8d8d8; border-left:none; background:#eff2f8;
font-size:15px; font-weight:bold; text-align:center; color:#727272; overflow:hidden}
.tab_box3 .tabbtn:first-child { border-left:1px solid #d8d8d8; border-right:none; }
.tab_box3 .tabbtn_on {background:#57586b; border:1px solid #57586b; color:#fff}

@media (max-width:767px) {

.tab_box3 {margin:0 0 20px; height:40px; }
.tab_box3 .tabbtn {height:40px; line-height:40px; font-size:13px; }

}