@charset "utf-8";

#s_visu {width:100%; height:250px; background-repeat:no-repeat; background-position:center center; background-size:cover; display:table}
#s_visu > div {display:table-cell; text-align:center; vertical-align:middle; color:#fff;}
#s_visu h2 {font-size:2.7em; font-weight:bold; margin-bottom:10px;}
#s_visu p {font-size:1em; opacity:0.9em; font-weight:200;}

.s_visu1 {background-image:url(/images/sub/s_visual1.jpg)}

@media screen and (max-width:1024px){
	#s_visu {height:200px;}
}

@media screen and (max-width:767px){
	#s_visu h2 {font-size:2.5em; margin-bottom:1%}
}

@media screen and (max-width:500px){
	#s_visu {height:160px;}
}




/* sub_top */
.sub_top {position:relative;width:100%; margin:0 auto; background:#fff; box-sizing:border-box; border-bottom:1px solid #e2e2e2; z-index:999;}
.sub_top .sub_top_in {width:100%; max-width:1280px; margin:0 auto; position:relative; z-index:50;}
.snb:after { content:"."; display:block; height:0; clear:both; visibility:hidden;}
.snb>div { float:left; position:relative;}
.snb .home>a { display:block; width:60px; height:60px; text-align:center; font-size:0; background:#074372 url("/images/sub/ico_home.png") no-repeat center; border-right:1px solid #e2e2e2}
.snb>.depth1_area, .snb>.depth2_area { width:250px;}
.snb>.depth1_area, .snb>.depth2_area  a {color:#074372; }
.snb .open_depth { display:block; position:relative; height:60px; line-height: 60px; padding:0 20px; border-right:1px solid #e2e2e2; color:#4b4b4b; font-size:1em; white-space:nowrap;}
.snb .open_depth:after { content:"\e874"; display:inline-block; position:absolute; top:0; right:14px; font-family:'Linearicons-Free'; font-size:10px; line-height:60px; color:#000;}
.snb .open_depth.on:after { content:"\e873"; top:0;}
.snb .smenu { display:none; position:absolute; top:60px; left:0; width:100%;z-index: 10;}
.snb .smenu>li>a { display:block; padding:12px 5px 13px 20px; border:1px solid #ccc; border-top:none; background-color:#f4f4f4; color:#555; font-size:14px;}
.snb .smenu>li>a:hover { background-color:#fff; color:#222;}

@media screen and (max-width:1199px){
	.sub_top {width:100%;}
}

@media screen and (max-width:767px){
/* sub_top */
	.sub_top { height:46px;}
	.snb { padding-left:45px;}
	.snb .home { position:absolute; top:0; left:0; z-index:10;}
	.snb .home>a { width:45px; height:45px; background-size:100% auto}
	.snb .home>a:before { font-size:13px; line-height:13px;}
	.snb>.depth1_area, .snb>.depth2_area { width:50%;}
	.snb .open_depth { height:45px; line-height: 45px; padding:0px 12px 0px 12px; font-size:1em; overflow:hidden; text-overflow:ellipsis; }
	.snb .open_depth:after { /*top:13px;*/ right:6px; font-size:9px; line-height:45px;}
	/* .snb .open_depth.on:after { top:12px;} */
	.snb .smenu { top:45px;}
	.snb .smenu>li>a { padding:7px 5px 8px 7px; font-size:12px;}

}


#subContent {width:100%; margin:80px 0;}
#subTitle {font-size:2.4em; color:#222; font-weight:bold; text-align:center; margin-bottom:60px;}

@media screen and (max-width:1024px){
	#subContent {margin:7% 0}
	#subTitle {margin-bottom:5%}
}

@media screen and (max-width:767px){
	#subTitle {font-size:2.2em;}
}



/*������*/
.tabmenu1 { overflow: hidden; text-align: center; margin: 0 auto 50px; }
.tabmenu1 li { width: 180px; display: inline-block; *zoom:1; *display: inline; }
.tabmenu1.w8 li { width: 155px; display: inline-block; *zoom:1; *display: inline; }
.tabmenu1 li a { display: block; line-height: 3.5em; border:1px solid #ddd; font-size: 1.05em; color:#555; }
.tabmenu1 li a:hover { color:#074372;  }
.tabmenu1 li.on a { background:#074372; color:#fff; }

@media screen and (max-width:976px) {
    
    .tabmenu1 { margin: 7% auto 0; }
    .tabmenu1 li { width: 24%; margin-bottom: 3px; }
    .tabmenu1.w8 li { width: 24%;}

}

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

.tabmenu1 li { padding: 0; }

}


.tabmenu2 { margin: 0 auto 30px; max-width: 1280px; width: 98%; }
.tabmenu2 li { width: 156px; display: inline-block; *zoom:1; *display: inline; margin-bottom: 0.2%; }
.tabmenu2 li a { display: block; line-height: 3.5em; border:1px solid #ddd; font-size: 1em; color:#555; text-align: center; }
.tabmenu2 li a:hover { color:#074372;  }
.tabmenu2 li.on a { background:#074372; color:#fff; }

.tabmenu2_2 li {width:250px;}

.tabmenu2 li.wide { width: 200px; }

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

.tabmenu2 { }
.tabmenu2 li { width: 24%; margin-bottom: 3px; }

.tabmenu2_2 li {width:32.5%}

}

@media screen and (max-width:568px) {
    
    .tabmenu2 li { padding: 0; width: calc(100% / 3 - 2px);}

}

@media screen and (max-width:408px) {
	.tabmenu2 li a { font-size: 0.86em; }
}

/* ������ �ν��� ���� �κ� */
/* #page01 .tabmenu2  a.menu1,
#page02 .tabmenu2  a.menu2,
#page03 .tabmenu2  a.menu3,
#page04 .tabmenu2  a.menu4,
#page05 .tabmenu2  a.menu5,
#page06 .tabmenu2  a.menu6,
#page07 .tabmenu2  a.menu7,
#page08 .tabmenu2  a.menu8,
#page09 .tabmenu2  a.menu9,
#page10 .tabmenu2  a.menu10,
#page11 .tabmenu2  a.menu11 { background:#25aae1; color:#fff; }


#page01 .tabmenu1  a.menu1,
#page02 .tabmenu1  a.menu2,
#page03 .tabmenu1  a.menu3,
#page04 .tabmenu1  a.menu4,
#page05 .tabmenu1  a.menu5,
#page06 .tabmenu1  a.menu6,
#page07 .tabmenu1  a.menu7,
#page08 .tabmenu1  a.menu8,
#page09 .tabmenu1  a.menu9,
#page10 .tabmenu1  a.menu10,
#page11 .tabmenu1  a.menu11 { background:#074372; color:#fff; }*/


a.prod-active{background-color: #25aae1; color: #fff !important;}


/*��ǰ�Ұ� ��ü����Ʈ*/
.product_list ul { width: 100%; height: auto; display: flex; justify-content: space-between; flex-wrap: wrap; }
.product_list ul li { width: 31%; margin-bottom: 3%;  }
.product_list ul li a img { width: 100%; border: 1px solid #ddd; }

.product_list ul.product_list2 { justify-content: flex-start; }
.product_list ul.product_list2 li { margin-right: 3.5%; }
.product_list ul.product_list2 li:last-child { margin-right: 0; }
.product_list ul.product_list2 li:nth-child(3) { margin-right: 0; }
.product_list ul.product_list2 li:nth-child(6) { margin-right: 0; }
.product_list ul.product_list2 li:nth-child(9) { margin-right: 0; }
.product_list ul.product_list2 li a img { border: 1px solid #ddd; }

.product_tit { font-size: 1.55em; font-weight: 600; color: #074372; }

@media screen and (max-width:976px) {
	.product_list ul { margin-top: 6%; }
	.product_list ul.product_list2 { margin-top: 0; }
}
@media screen and (max-width:767px) {
	.product_list ul li { width: 49%; margin-bottom: 3%; }
	.product_list ul.product_list2 li { width: 49%; margin-bottom: 3%; margin-right: 0; }
	.product_list ul.product_list2 { justify-content: space-between; }
}



.tabmenu { text-align: center; width: 100%; max-width: 1280px; margin: 0 auto 4%; overflow: hidden; font-size:0; padding-top:1px; padding-left: 1px;  margin-top: 70px; }
.tabmenu li { position: relative; vertical-align: middle; display: inline-block; width:calc(100% / 4);  margin-top: -1px; margin-left: -1px; border: 1px solid #d1d1d1; text-align: center;}
.tabmenu.w2 li {width:calc(100% / 2);}
.tabmenu.w3 li {width:calc(100% / 3);}
.tabmenu li a { text-decoration: none; width:100%; height:60px; display: flex; justify-content: center; align-items: center; background: #f7f7f7;color:#525252; font-size:17px;  font-weight: 600; line-height: 1em;box-sizing: border-box; /*text-overflow:ellipsis; overflow:hidden; white-space:nowrap;*/}
.tabmenu li a:hover { color:#074372; }

.tabmenu.fs-s li a { font-size: 1.5rem; }

.tabmenu.col5 li { width:calc(100% / 5); max-width: 280px; }
.tabmenu.col6 li { width:calc(100% / 6); max-width: 280px; }
.tabmenu.col7 li { width:calc(100% / 7); float: left; }


.tabmenu.floor.floor li a { height: 80px; line-height: 80px; font-size: 1.5rem; font-weight: 400; }
.tabmenu.floor.floor li a p { display: inline-block; line-height: 1.3em; vertical-align: middle; }
.tabmenu.floor.floor li a p span { font-size: 2.1rem; font-weight: 900; color:#004ddf; }


/* 페이지 인식을 위한 부분 */
.tab01 .tabmenu  a.menu1,
.tab02 .tabmenu  a.menu2,
.tab03 .tabmenu  a.menu3,
.tab04 .tabmenu  a.menu4,
.tab05 .tabmenu  a.menu5,
.tab06 .tabmenu  a.menu6,
.tab07 .tabmenu  a.menu7,
.tab08 .tabmenu  a.menu8,
.tab09 .tabmenu  a.menu9,
.tab10 .tabmenu  a.menu10,
.tab11 .tabmenu  a.menu11,
.tab12 .tabmenu  a.menu12 { color:#222; background:#fff; font-weight:600; border-top: 3px solid #074372 !important; z-index:98; }

.tab01 .tabmenu  a.menu1 small,
.tab02 .tabmenu  a.menu2 small,
.tab03 .tabmenu  a.menu3 small,
.tab04 .tabmenu  a.menu4 small,
.tab05 .tabmenu  a.menu5 small,
.tab06 .tabmenu  a.menu6 small,
.tab07 .tabmenu  a.menu7 small,
.tab08 .tabmenu  a.menu8 small,
.tab09 .tabmenu  a.menu9 small,
.tab10 .tabmenu  a.menu10 small,
.tab11 .tabmenu  a.menu11 small,
.tab12 .tabmenu  a.menu12 small { color:#fff; background:#004ddf; font-weight:600; border-color: #004ddf !important; z-index:98; }

@media all and (max-width:1280px) {
  .tabmenu.col6 li { width:calc(100% / 4); }
}

@media all and (max-width:1080px) {
  .tabmenu { margin-top: 50px; margin-bottom: 5%; }
  .tabmenu li a { height:55px;  }
}


@media all and (max-width:976px) {
    .tabmenu li { width:calc(100% / 5); }
    .tabmenu li a { font-size: 16px;  }
    
    .tabmenu.col3 li { width:calc(100% / 3);  float: inherit; }
    .tabmenu.col5 li { width:calc(100% / 3); }
    .tabmenu.col6 li { width:calc(100% / 3); }
}

@media all and (max-width:767px) {
    .tabmenu li { width:calc(100% / 4); }
    
}

@media all and (max-width:640px) {
    .tabmenu li a { height:45px;  }
}
@media all and (max-width:480px) {
    .tabmenu { margin-top: 30px;}
    .tabmenu li { width:calc(100% / 2); }
    .tabmenu.w3 li { width:calc(100% / 2); }
    .tabmenu.w3 li:last-child { width: 100%; }
    .tabmenu li a { font-size: 14px;}
}