@charset "UTF-8";

/* 전체 그룹 */
#wrapper100 {width:100%;margin:0 auto; position:relative;}
#wrapper100:after{display:block;clear:both;height:1px;margin-top:-1px;content:''}

#sknavi_div {float:left; margin-top:-200px;}
.sknavi {position:absolute ; top:-200px; z-index:100; }
.sknavi:focus, .sknavi:active {top:1px ; display:block ; width:130px ; height:20px ; }

/* 상단 */
#header{position:fixed;top:0px;left:0px;width:100%;;z-index:100;display:block;background-color:#fff;border-top:2px solid #286aca;}

#header .h_group{position:absolute;top:0px;left:0px;width:100%;height:70px;z-index:100;background-color:#fff;border-bottom:1px solid #cfcfcf}
#header h1{position:absolute;top:20px;left:0;text-align:center;width:100%;z-index:101;}
#header h1 img{width:135px}
#header .h_group > #gnb{margin:0 auto;z-index:100;width:100%;background-color:#fff;position:relative}
#header .h_group > #gnb > .menu{width:100%;max-width:1200px;margin:0 auto;position:relative}
span.product_all a{position:absolute;top:19px;left:0px;height:25px;padding:5px 10px;z-index:102;text-align:center;background:url(../../images/common/product_menu_bg_mobile.png) 50% 50% no-repeat;text-indent:-999999px;width:20px}
span.menu_all a{position:absolute;top:19px;right:0px;background:url(../../images/common/menu_all.png) 50% 50% no-repeat;padding:5px 10px;text-indent:-999999px;width:20px;z-index:102;display:inline-block}

/* 제품소개 클릭시 슬라이드다운 메뉴 */
#product_menu  {width:100%;margin:0 auto;position:absolute;top:71px;left:0px;background:url(../../images/common/menu_bg.png);border-bottom:2px solid #608ffb }
#product_menu  div{width:100%;max-width:1200px;margin:0 auto;position:relative;padding:20px 0 30px 0}
#product_menu  ul{width:100%;}
#product_menu  ul li{float:left;width:33.3333%;display:inline-block;}
#product_menu  ul li a{font-size:0.875em;font-size:0.875rem;display:block;font-weight:bold;color:#000;text-align:center;padding:10%}
#product_menu  ul li a:hover{color:#336ec5;text-decoration:underline;background:#ddd}
#product_menu  ul li a span{;text-align:center;display:block;width:100%}
#product_menu  ul li a span.icon_bg{background:#608ffb;width:90%;padding:15px 5%;border-radius:5px}
#product_menu  ul li a span.icon_bg img{width:50px}

/* 전체메뉴 */
#lnb {width:100%;;margin:0 auto;position:absolute;top:0px;left:0px;;z-index:110;}
#lnb div{width:100%;max-width:1200px;margin:0 auto;position:absolute;top:0px;left:0px;padding:70px 0 0 0;}
#lnb ul{width:100%;}
#lnb ul::after{display:block;clear:both;height:1px;margin-top:-1px;content:''}
#lnb ul li{background-color:#233f7f}
#lnb ul li a{font-size:1em;font-size:1rem;display:block;padding:10px 0;font-weight:bold;color:#fff;text-indent:10px}
#lnb ul li a:hover{color:#fff;text-decoration:underline}
#lnb ul li ul li{float:left;width:50%;background-color:#2b50a4;border-bottom:1px solid #426ac7}
#lnb ul li ul li a{font-size:0.8125em;font-size:0.8125rem;background:url(../../images/common/arrow01.png) 90% 50% no-repeat;padding:8px 0;height:23px}
span.menu_all_close a{position:absolute; top:22px; right:8px;z-index:999;width:18px;height:15px;padding:5px;background:url(../../images/common/menu_all_close.png) 50% 50% no-repeat;background-color:#fff;text-indent:-999999px;}

/* 푸터 */
#footer_wrap{clear:both; width:100%;;margin-top:0px;;background:#fff;border-top:1px solid #ddd}
#footer {clear:both; position:relative; width:96%;max-width:1200px; margin:0 auto;text-align:center;padding:15px 0}
#footer span{font-size:0.875em;font-size:0.875rem;padding:0 20px 0 0;background:url(../../images/common/footer_menu_bg.png) 90% 50% no-repeat}
#footer span.last{;padding:0;background:url(noneg) 90% 50% no-repeat}

.footer_info {width:100%;clear:both;text-align:center;border-top:1px solid #ddd;padding:10px 0;background:#f9f9f9}
.footer_info p{color:#87898e;line-height:20px;font-size:0.75em;font-size:0.75rem}


/* 버튼 */
button{display: inline-block;   cursor: pointer;    text-align: center;vertical-align:middle;text-decoration: none;font-size: 14px;padding: 4px 8px 4px 8px;border-radius: 0px;-webkit-box-shadow: 0 3px 3px rgba(0,0,0,.3);    -moz-box-shadow: 0 3px 3px rgba(0,0,0,.3);box-shadow: #999 0px 1px 1px;-webkit-box-shadow: #999 0px 1px 1px;-moz-box-shadow: #999 0px 1px 1px;
    border: solid 1px #002356;  color: #fff;    background: #0061ba;background-image: -webkit-gradient(linear,  left top,   left bottom,color-stop(0, #0061ba),color-stop(1, #003b94));background-image: -o-linear-gradient(bottom, #0061ba 0%, #003b94 100%);background-image: -moz-linear-gradient(bottom, #0061ba 0%, #003b94 100%);
    background-image: -webkit-linear-gradient(bottom, #0061ba 0%, #003b94 100%);    background-image: -ms-linear-gradient(bottom, #0061ba 0%, #003b94 100%);    background-image: linear-gradient(to bottom, #0061ba 0%, #003b94 100%);line-height:14px}
button a{color:#fff;}

button:hover, button:active {position: relative;color: #fff;background: #002356;background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #002866),color-stop(1, #002356));  background-image: -o-linear-gradient(bottom, #002866 0%, #002356 100%);background-image: -moz-linear-gradient(bottom, #002866 0%, #002356 100%);
    background-image: -webkit-linear-gradient(bottom, #002866 0%, #002356 100%);    background-image: -ms-linear-gradient(bottom, #002866 0%, #002356 100%);    background-image: linear-gradient(to bottom, #002866 0%, #002356 100%);}

.button {display: inline-block;cursor: pointer;text-align: center;text-decoration: none;font-size: 14px;margin:0px 3px 0px 3px;padding: 5px 8px 5px 8px;border-radius: 0px;box-shadow: #999 0px 1px 1px;-webkit-box-shadow: #999 0px 1px 1px;-moz-box-shadow: #999 0px 1px 1px; color: #fff;    background: #2d2d2d;}
.button:hover, .button:active, .button:visited {position: relative;color: #fff;background: #002356; }
.button a{color:#fff;}

.colH{color: #fff;border: solid 1px #404e92;    background: #404e92;background-image: -webkit-gradient(linear,  left top,left bottom,   color-stop(0, #5d79c9),color-stop(1, #374796)   );background-image: -o-linear-gradient(bottom, #5d79c9 0%, #3747968 100%);
    background-image: -moz-linear-gradient(bottom, #5d79c9 0%, #374796 100%);background-image: -webkit-linear-gradient(bottom, #5d79c9 0%, #374796 100%);   background-image: -ms-linear-gradient(bottom, #5d79c9 0%, #374796 100%);    background-image: linear-gradient(to bottom, #5d79c9 0%, #374796 100%);}
.colH:hover,.colH:active {color: #fff;background: #365515;background-image: -webkit-gradient(linear,    left top,left bottom,   color-stop(0, #406518),color-stop(1, #365515)   );background-image: -o-linear-gradient(bottom, #406518 0%, #365515 100%);
    background-image: -moz-linear-gradient(bottom, #406518 0%, #365515 100%);background-image: -webkit-linear-gradient(bottom, #406518 0%, #365515 100%);background-image: -ms-linear-gradient(bottom, #406518 0%, #365515 100%);   background-image: linear-gradient(to bottom, #406518 0%, #365515 100%);}


/* 태블릿용 CSS */
@media all and (min-width:768px){

/* 상단 */


/* 푸터 */
#footer span{font-size:1em;font-size:1rem;padding:0 20px 0 0;background:url(../../images/common/footer_menu_bg.png) 90% 50% no-repeat}
.footer_info p{color:#87898e;line-height:20px;font-size:0.8125em;font-size:0.8125rem}

}

/* PC용 CSS */
@media all and (min-width:960px){
/* 기본 CSS */
#wrap{position:relative;width:100%;}

/* 상단 */
#header .h_group{height:100px;}
#header h1{top:25px;}
#header h1 img{width:203px}

/* 제품소개메뉴 */
#product_menu  {position:absolute;top:100px;height:350px;}
#product_menu  ul li{float:left;width:20%;display:inline-block;}
#product_menu  ul li a{font-size:0.875em;font-size:0.875rem;display:block;font-weight:bold;color:#000;text-align:center;padding:15% 18% 5% 18%}
#product_menu  ul li a:hover{color:#336ec5;text-decoration:underline;background:#ddd}
#product_menu  ul li a span{text-align:center;display:block;width:90%}
#product_menu  ul li a span.icon_bg{background:#608ffb;padding:20px 5%;border-radius:5px}
#product_menu  ul li a span.icon_bg img{width:50px}

span.product_all a{position:absolute;top:30px;padding:10px 60px 10px 10px;background:url(../../images/common/product_menu_bg.png) 90% 50% no-repeat;text-indent:0px;width:70px;border:1px solid #c5c5c5;box-shadow:1px 1px 1px #f2f2f2;}
span.menu_all a{position:absolute;top:30px;padding:10px 15px;z-index:999;border:1px solid #c5c5c5;box-shadow:1px 1px 1px #f2f2f2;}


/* 전체메뉴 */
#lnb {width:100%;z-index:1000;position:static;height:100vh;top:0;position:fixed;background:url(../../images/common/allmenu_bg.png)}
#lnb div{width:80%;max-width:1000px;margin:50px auto;z-index:1001;padding:0;position:static;border:2px solid #608ffb;position:relative}
#lnb div ul{width:80%;;background-color:#fff;float:right;padding:5% 10%;margin:0 auto;}
#lnb div ul::after{display:block;clear:both;height:1px;margin-top:-1px;content:''}
#lnb div ul li{background-color:#fff;width:100%;margin:0 0 15px 0 ;border-top:2px solid #333;float:left}
#lnb div ul li a{font-size:1em;font-size:1rem;display:block;padding:7px 0;font-weight:bold;color:#666;text-indent:10px;background:#f9f9f9;}
#lnb div ul li a:hover{color:#000;text-decoration:underline}
#lnb div ul li ul{width:100%;clear:both;padding:0;border:none;}
#lnb div ul li ul::after{display:block;clear:both;height:1px;margin-top:-1px;content:''}
#lnb div ul li ul li{float:left;width:25%;background-color:#fff;border-bottom:none;display:inline-block;;border-top:none;margin:0}
#lnb div ul li ul li a{font-size:0.8125em;font-size:0.8125rem;background:url(../../images/sub/icon/bullet03.png) 0 50% no-repeat}
span.menu_all_close a{position:absolute; top:0px; right:0px;background:url(../../images/common/menu_all_close.png) 50% 50% no-repeat;background-color:#fff;text-indent:-999999px;border:none;box-shadow:none;padding:15px 17px;z-index:1001;}


}