@charset "utf-8";

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);

.float_area:after{content:""; display:block; clear:both;}
.f_left {float:left;}
.f_right{float:right;}
.cen {text-align:center;}
.left {text-align:left;}
.rig {text-align:right;}
.imgmiddle {vertical-align:middle;}
.imgbottom {vertical-align:bottom;}
.imgtop {vertical-align:top;}

.top3 {padding-top:3px;}
.top5 {padding-top:5px;}
.top8 {padding-top:8px;}
.top10 {padding-top:10px;}
.top12 {padding-top:12px;}
.top15 {padding-top:15px}
.top20 {padding-top:20px;}
.top25 {padding-top:25px;}
.top30 {padding-top:30px;}
.top36 {padding-top:36px;}
.top40 {padding-top:40px;}
.top50 {padding-top:50px;}
.top70 {padding-top:70px;}

.left170 {padding-left:170px;}
.left250 {padding-left:250px;}
.left90 {padding-left:90px;}
.left78 {padding-left:78px;}
.left30 {padding-left:30px;}
.left25 {padding-left:25px;}
.left20 {padding-left:20px;}
.left15 {padding-left:15px;}
.left10 {padding-left:10px;}
.left5 {padding-left:5px;}
.left2 {padding-left:2px;}

.rig5 {padding-right:5px;}
.rig10 {padding-right:10px;}
.rig15 {padding-right:15px;}
.rig20 {padding-right:20px;}

.bot3 {padding-bottom:3px;}
.bot5 {padding-bottom:5px;}
.bot10 {padding-bottom:10px;}
.bot20 {padding-bottom:20px;}

.mr20{margin-right:20px;}

.clear {clear:both;}

.ml17{margin-left:17px;}

.mtop0 {margin-top:0;}
.mtop5 {margin-top:5px;}
.mtop10 {margin-top:10px;}
.mtop15 {margin-top:15px;}
.mtop20 {margin-top:20px;}
.mtop30 {margin-top:30px;}
.mtop40 {margin-top:40px;}
.mtop70 {margin-top:70px;}

.relative {position:relative;}

.s_txt {font-size:11px;color:#868686;line-height:130%;}

.box {font-family: "돋움";font-size: 9pt;color: #333333;border: 1px solid #d1d1d1; padding:3px;line-height: 140%;}
.box2 { font-size:9pt; color:#666666; text-decoration:none;background:#F7F7F7 ;border-bottom: 1px solid #C6C6C6; 
        border-right: 1px solid #C6C6C6;	border-left: 1px solid #C6C6C6; border-top:1px solid #C6C6C6 }

.space {letter-spacing:0;}

.bold {font-weight:bold;}
.l_line {border-left:1px solid #cdcdcd;}

.back_no {background:none;}

.list li { background:url(/images/contents/list_icon.gif) no-repeat left 10px; padding:2px 7px; }
.n_list li {padding:2px 7px; font-size:14px;}

.height50 {clear:both; height:50px;}

.f_area:after{content:""; display:block; clear:both;}
.f_left{float:left;}

.l_height24{line-height:24px;}
.l_height26{line-height:26px;}

/*font size*/
.font10 {font-size:10px;}
.font13 {font-size:13px;}
.font14 {font-size:14px;}
.font16 {font-size:16px;}
.font18 {font-size:18px;}
.font22 {font-size:22px;}
.font24 {font-size:24px;}
.font28 {font-size:28px;}

body{text-align:center;}
#wrapper{text-align:center;}

/*font color*/
.blue {color:#49aadb;}
.green {color:#66a439;}
.red {color:#de3f42;}
.white {color:#fff;}

.w300{width:300px;}
.w350{width:350px;}
.w400{width:400px;}
.w450{width:450px;}
.w500{width:500px;}
.w600{width:600px;}

/* util */
.util{position:absolute; right:10px; top:20px;}
.util:after{content:""; display:block; clear:both;}
.util li{float:left; color:#242424;}
.util li a{font-size:10px; color:#242424; text-transform: uppercase; font-weight:600;}
.util li span{padding:0 5px;}
.util li.inquiry{background:#284191; padding:0 5px; margin-left:8px;}
.util li.inquiry a{color:#fff;}

/* header */
#top{z-index: 2; position:relative;}
#top body{text-align:center;}
.header{text-align: center; width:100%;}

/* 하단사이트맵 */
.f_wrap{background:#fafafa; text-align:center; border-top:1px solid #ddd;}
.f_sitemap {width:1000px; margin:auto; text-align:left;}
.f_sitemap .p_tit{padding:20px 0; font-size:15px; font-weight:bold; text-align: center;}
.f_sitemap ul:after{content:""; display:block; clear:both;}
.f_sitemap ul{padding-bottom:30px;}
.f_sitemap ul li{float:left; width:31%; background:url(/images/contents/blet_grey.gif) no-repeat left center; padding-left:15px;}
.f_sitemap ul li a{text-align:center;}

/* footer_wrap */
.footer_wrap{height:148px; border-top:1px solid #ddd;}
.footer_wrap .footer{width:1000px; margin:auto; position:relative; text-align:left;}
.footer_wrap .footer:after{content:""; display:block; clear:both;}
.footer_wrap .footer .f_logo{float:left; padding:30px 0 0 15px;}
.footer_wrap .footer .foot{float:left; line-height: 20px; margin-left:30px; margin-top:25px;}
.footer_wrap .footer ul li{color:#878787; }
.footer_wrap .footer .right{float:right; margin-top:30px;}
.footer_wrap .footer .right:after{content:""; display:block; clear:both;}
.footer_wrap .footer .right li{float:left;}
.foot{float:left; margin:23px 0 0 40px; width:600px;}
.f_list{padding-top:10px; width:1000px; margin:auto; }
.f_list ul:after{content:""; display:block; clear:both;}
.f_list ul{padding-left:120px;}
.f_list li{float:left; line-height:150%}
.f_list li span{padding:0 6px;}
.f_list li a{color:#878787;}

.top:after{content:""; display:block; clear:both;}
.top{width:1000px; margin:auto; position:relative; height:94px;}
.header h1{float:left; padding:20px 0 0 10px;}
.header .top p{text-align: left; padding:26px 0 0 50px; float:left;}
.header .menu_wrap{background:#27367f;}
.header .menu{margin-top:20px; height:42px; width:1000px; margin:auto;}
.header .menu li.last a{border-right:none;}

.menu li {
  cursor: pointer;
  position: relative;
  transition: background-color .5s;
  -moz-transition: background-color .5s;
  -o-transition: background-color .5s;
  -webkit-transition: background-color .5s;
  /* IE lt 10, Chrome lt 1, Opera lt 11.6, Safari lt 3, FF lt 4, Android lt 2.1 и iOS lt 2.0 не поддерэивают transition. */
}

.menu li:hover {
   /* .menu > li.home может иметь больше приоритета. Поэтому. */
}

.menu a {
  /*display: block;*/
  font-family: 'Open Sans', sans-serif;
  /*height: 100%;
  margin: 0 5px;*/
  overflow: hidden;
  position: relative;
  text-align: center;
  text-decoration: none;
  word-wrap: break-word;
  color:#fff; font-weight:bold; padding:0 50px; line-height:42px; font-size:14px; font-weight:400;}
.menu li ul li a{font-size:12px; color:#333;}
.menu a:hover {
  /* Защита от простого a:hover. */
  /*color: #FFF;*/
}
/* END: Общие стили */

/* BEGIN: Главное меню */

.menu > li {
  float: left;
  /*height: 100%;*/
  /*width: 20%;  Мудакам которые не поддерживают calc. 
  /*width: calc((100% - 90px) / 5);
  width: -moz-calc((100% - 90px) / 5);
  width: -webkit-calc((100% - 90px) / 5);*/
  /* IE lt 9, Chrome lt 19, Opera lt 15, Safari lt 6, FF lt 4, Android и iOS не поддерэивают calc. */
}


.menu > li.current a{color:#0174B6;}
.menu > li:hover{color:#0174B6;}

/*.menu > li:not(:first-child) {
  box-shadow: inset 1px 0 0 0 #272B31, inset 2px 0 0 0 #434A52;
  -moz-box-shadow: inset 1px 0 0 0 #272B31, inset 2px 0 0 0 #434A52;
  -webkit-box-shadow: inset 1px 0 0 0 #272B31, inset 2px 0 0 0 #434A52;
}*/

.menu > li.home > a {
  color: transparent !important;
}

.menu > li > a > span {
  left: 0; /* Селектор .menu a выравнивает содержимое по центру, из-за чего span начинается от центра. Исправляем. */
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  /* IE lt 9, Chrome lt 5, Opera lt 10.5, Safari lt 3.1, FF lt 3.5, Android lt 2.1 и iOS lt 2.0 не поддерэивают transform. */
}
/* END: Главное меню */

/* BEGIN: Подменю */
.sub-menu {
  max-height: 0;
  min-width: 100%;
  overflow: hidden;
  position: absolute;
  top: 100%;
  transition: max-height .5s .2s;
  -moz-transition: max-height .5s .2s;
  -o-transition: max-height .5s .2s;
  -webkit-transition: max-height .5s .2s;
  background:#fff;
  left:0;
}

li:hover > .sub-menu {
  max-height: 600px;
}

.sub-menu li {
  height: 45px;
}

.sub-menu a {
  line-height: 45px;
  transition: color .5s;
  -moz-transition: color .5s;
  -o-transition: color .5s;
  -webkit-transition: color .5s;
  white-space: nowrap;
  border-right:none;
}

.sub-menu li.current a,
.sub-menu a:hover {
  color: #0174B6 !important; /* !important VS .menu a:hover */
}
/* END: Подменю */

/* location */
.location_wrap{height:48px; border-bottom:1px solid #d9d9d9;}
#location {width:1292px; margin:auto; color:#888888;font-size:11px; padding:20px 10px 0 0; position:relative;}
#location ul{position:absolute; right:10px; top:19px;}
#location li {float:left;}
#location li.home{background:url(/images/contents/icon_util.gif) no-repeat 0 3px; padding-left:13px;}
#location li a { padding-left:25px;color:#a6a6a6; text-decoration:none;}
#location li span{padding:0 10px;}
#location li.now {font-weight:bold; color:#711a1d;}

/* contents_wrap */
.contents_wrap{width:998px; margin:auto; text-align:left; border-left:1px solid #e6e6e6; border-right:1px solid #e6e6e6;}
.contents_wrap:after{content:""; display:block; clear:both;}

/* lnb */
.left{float:left; width:207px;}
.left h2{color:#fff; height:55px; background:url(/images/contents/bg_h2.gif) repeat-x;font-size:20px; padding:23px 0 0 15px; font-weight:600}
.left h2.performance{padding:10px 0 0 15px; height:68px;}
.menu_v{width:207px;font-size:13px; text-align:left; font-weight:400;}
.menu_v ul{margin:0;padding:0;list-style:none}
.menu_v li{position:relative;margin:0 0 -1px 0;vertical-align:top;*zoom:1}
.menu_v li a{display:block;position:relative;padding:12px 10px;color:#242424;font-weight:600;text-decoration:none;background:#fafafa;border-top:1px solid #eee;border-bottom:1px solid #eee;*zoom:1}
.menu_v li a .i{position:absolute;top:50%;left:100%;width:8px;height:8px;margin:-4px 0 0 -16px;color:#ccc;background:url(/images/left_sub.gif) no-repeat left top}
.menu_v li ul{padding:5px 0;background:#fff}
.menu_v li li{margin:0}
.menu_v li li a{padding:5px 10px;border:0;background:#fff;font-weight:normal}
.menu_v li li a span{color:#666; font-size:12px;  padding-left:10px;}
.menu_v li.active{z-index:2; background:url(/images/contents/blet_lnb.gif) no-repeat;}
.menu_v li li.active{border:0}
.menu_v li.active a{ color:#2b3d8a;}
.menu_v li.active .i{background-position:0 -44px}
.menu_v li.active li a{border:0; background:none; }
.menu_v li.active ul{display:block;border-top:1px solid #eee}
.menu_v li.active li.active a span{font-weight:bold;color:#e8212b;letter-spacing:-0.01em; background:url(/images/left_arrow.gif)no-repeat left 5px;}


/* con_area */
.con_area h3{font-size:30px; border-bottom:1px solid #cccccc; padding:52px 0 20px 0; font-weight:bold; margin-bottom:40px;}
.tab ul{border-top:1px solid #acacac}
.tab ul:after{content:""; display:block; clear:both;}
.tab li{height:40px; line-height:40px; width:19%;text-align: center; background:#b6b6b6; float:left; margin-right:5px;}
.tab li a{color:#fff; font-size:15px;}
.tab .on{background:#c79f62;  }
.tab .on a{color:#fff;}