@import url(util.css);

@charset "utf-8";

/* Font */
@font-face{font-family:ng;font-style:normal;font-weight:400;src:url(http://themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Regular.eot)\9;src:local('NanumGothic'),local('나눔고딕'),url('http://themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Regular.woff') format('woff')}
@font-face{font-family:ng;font-style:normal;font-weight:700;src:url(http://themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Bold.eot)\9;src:local('NanumGothic'),local('나눔고딕'),url('http://themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Bold.woff') format('woff')}
.font_hv{ font-family:"Helvetica Neue", Helvetica, Arial, sans-serif}

/* reset with normalize */
body,input,textarea,select,button,table{font-size:14px;font-family:"Helvetica Neue", Helvetica, Arial,'나눔고딕',ng,'Malgun Gothic','留묒� 怨좊뵓','�뗭�',Dotum,'Apple SD Gothic Neo',sans-serif;color:#999}
a{text-decoration:none}
a:hover,a:hover:focus,a:active{color:#333}
a,button,input,textarea{transition:border-color .4s,background .4s,color .4s,opacity .4s}
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
li{list-style:none}
address{font-style:normal}
label{cursor:pointer}
table{width:100%}

/* common */
.blank{background:url(../img/blank.png)}
.overflow{overflow:hidden}
.ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
::-moz-selection {
   background: #ff4444;
   color: #fff;
}
::selection {
   background: #ff4444;
   color: #fff;
}


/* heading */
.color_orange{ color:#ff4444 !important}
.bg_blk{ background:#333 !important; color:#BBB !important}
.h2{ height:14px; margin:50px 0 84px; border-bottom:1px solid #ababab; font-size:24px; line-height:1; text-align:center}
.h2 strong{padding:0 30px; background:#FFF}
.h2_2{ font-size:40px; color:#333}
.visual h1{ margin:0 0 10px; font-weight:700; font-size:50px; line-height:1; letter-spacing:-1px; color:#333}

/* form */
.no_style{margin:0;padding:0;border:0;background:none}
.btn2,.btn3{ display:inline-block; padding:6px 12px; border:0; border-radius:0; line-height:1.42857143; text-decoration:none !important}
.btn3{ margin:0 3px; padding:10px 40px; border-radius:6px; background:#ff4444; font-style:italic; font-family:Georgia, serif; color:#FFF !important}
.btn-group-lg>.btn, .btn-lg {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
}
.form-control{ border-radius:0}

/* icon */
[class^=icon_],
.bx-controls-direction a,
.bx-pager-item a{display:inline-block;overflow:hidden;margin:0;padding:0;border:0;background-color:transparent;background-position:50% 50%;background-repeat:no-repeat;font-size:0;line-height:0;text-decoration:none;vertical-align:middle;text-indent:-1000em;*display:inline;*zoom:1}
[class^=icon_] *{font-size:0;line-height:0;text-decoration:none;vertical-align:middle;text-indent:-1000em}
[class^=icon_view]{width:62px;height:16px;background:url(../img/btn_view.png)}
.icon_mail{width:21px;height:13px;background:url(../img/icon_mail.png)}


/* tab */
.nav-pills{ margin:50px 0}
.nav-pills>li>a{ width:200px; border-radius:0; background:#DDD; font-weight:700; font-size:20px; text-align:center; color:#FFF}
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover{ background:#ff4444}

/* slider */
.bx-wrapper{position:relative}
.bx-controls{ position:static}
.bx-controls-direction,.bx-pager{position:absolute;top:50%;left:0;right:0; z-index:20;}
.bx-controls-direction a{float:left;width:74px;height:89px;margin-top:-130px;background:url(../img/arrow.png) 0 50% no-repeat}
.bx-controls-direction .bx-next{float:right;background-position:100% 50% !important}
.bx-wrapper img{display:block}
.bx-pager{top:auto; bottom:10px; text-align:center}
.bx-pager-item{ display:inline-block; margin:0 4px}
.bx-pager a{ display:inline-block; width:10px; height:10px; border-radius:50%; background:#4c4c4c}
.bx-pager .active{ background:#ff4444}

/* Grid */
.row,
.form-horizontal .form-group{margin-left:0;margin-right:0;}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{padding-left:0;padding-right:0}
.w1200{ max-width:1200px; margin:0 auto}

/* Layout */
body{ min-width:1200px}
#wrap{ padding-top:140px}
/* Header */
#hd{position:fixed;top:0;left:0; right:0;z-index:100; padding:40px 0; background:#FFF;background:rgba(255,255,255,.9); transition:all .4s}
#hd>div{ position:relative}
#hd h1 *{display:block}
#hd img{ height:60px; transition:height .4s}
/* gnb */
#gnb{ margin:5px 0; font-size:0;white-space:nowrap}
#gnb li{ display:inline-block;position:relative;margin-left:70px}
#gnb a{display:block;font-weight:700;font-size:14px; line-height:34px;text-decoration:none;color:#afb0b0}
#gnb .on,#gnb a:hover{color:#111}
#gnb>ul>li>a{ font-size:20px;}
#gnb ul ul{ display:none; position:absolute;top:100%;left:0}
#gnb .select{ display:block !important}
#gnb li li{ margin:0 30px 0 0}
#gnb li li .on,#gnb li li a:hover{color:#ff4444}
.if_scroll #hd{ padding:20px 0}
.if_scroll #hd img{ height:40px; margin-top:1px;}
.if_scroll #gnb ul ul{ display:none !important}

/* Container */
#ct{}

/* Footer */
#ft{  margin-top:40px; padding:30px 0; background:#f3f3f3; text-align:center;}
#ft h4{ margin-bottom:15px; font-size:14px}
#ft address{ margin-top:17px; font-size:12px; line-height:200%;}

[class^=icon_footer]{ width:198px;height:94px;background:url(../img/footer.png); transition:all .5s}
[class^=icon_footer]:hover{background-image:url(../img/footer_on.png)}



/* Sub */




/* board */
.bpa_category{ margin-top:-40px}
.bpa_category>li{ padding:0 0 0 40px}
.bpa_category a{ font-weight:700; font-size:14px; color:#afb0b0}
.bpa_category .on a{ color:#ff4444}
#masonry{ min-height:600px}
.pf{ margin:15px -15px}
.pf li{ padding:14px}
.pf a{ display:block; position:relative; border:1px solid #f3f3f3;}
.pf .hover{ position:absolute;top:0;bottom:0;left:0; right:0; padding:40px; background:#ff4444; font-size:14px; color:#FFF;filter:alpha(opacity=0);opacity:0; transition:all .5s}
.pf .hover *{ display:block}
.pf .cate{ width:45px; margin-bottom:6px; padding-bottom:6px; border-bottom:1px solid #FFF; font-size:16px; white-space:nowrap}
.pf .title{ font-size:20px; margin-bottom:5px; margin-top:3px;}
.pf .sub_title{ margin-bottom:30px; font-size:14px}
.pf .detail{ position:absolute;left:40px; bottom:40px; padding:0 70px 0 15px; border:1px solid #FFF;background:url(../img/detail.png) 90% 50% no-repeat;font-size:12px; line-height:40px;}
.pf a:hover .hover{filter:alpha(opacity=90);opacity:.9}

.lst{ margin:15px -15px}
.lst li{ padding:15px}
.lst a{ display:block; position:relative}
.lst .hover{ position:absolute;top:0;bottom:0;left:0; right:0; padding:40px; background:#ff4444; font-size:14px; color:#FFF;filter:alpha(opacity=0);opacity:0; transition:all .5s}
.lst .hover *{ display:block}
.lst .cate{ width:45px; margin-bottom:6px; padding-bottom:6px; border-bottom:1px solid #FFF; font-size:16px; white-space:nowrap}
.lst .title{ font-size:20px}
.lst .sub_title{ margin-bottom:30px; font-size:16px}
.lst .detail{ position:absolute;left:40px; bottom:40px; padding:0 70px 0 15px; border:1px solid #FFF;background:url(../img/detail.png) 90% 50% no-repeat;font-size:12px; line-height:40px;}
.lst a:hover .hover{filter:alpha(opacity=90);opacity:.9}
.y_2 .hover{ padding:25px}
.y_2 .detail{ display:none}
.rd{ padding:40px 0;border-top:1px solid #555;}
.rd_aside{ padding-right:30px}
.rd_aside h1{ margin-bottom:30px; font-size:30px; letter-spacing:-1px}
.rd_aside h1 small{ display:block; margin-top:10px; font-size:20px; color:#BBB}
.rd_meta{ font-size:16px}
.rd_ft{ margin-top:40px; padding:20px 0; border-top:1px solid #555; text-align:center}

/* main */
.index h1{ color:#afb0b0}
#main_3{ padding-bottom:70px; text-align:center}
[class^=icon_main3]{ width:157px;height:180px;background:url(../img/index/main3.png)}
.icon_main3_2{ background-position:50% 0}
.icon_main3_3{ background-position:100% 0}
[class^=icon_main3]:hover{background-image:url(../img/index/main3_on.png)}

/* about */
#about1 .bg{ height:222px; margin:50px 0 80px;background:url(../img/about/1.png) 50% 0 no-repeat}
#about2{padding:50px 0 80px;background:#f7f7f7; text-align:center}
[class^=icon_about2]{ width:340px;height:250px;background:url(../img/about/2.png); transition:all .5s}
.icon_about2_2{ background-position:50% 0}
.icon_about2_3{ background-position:100% 0}
[class^=icon_about2]:hover{background-image:url(../img/about/2_on.png)}
#about3{padding:50px 0 80px;}
#about3 .bg{ height:992px; margin-top:60px; background:url(../img/about/about_01.jpg) no-repeat}
#about3 .bbs{ width:1200px; height:750px; border:0px;}
#about4 .bg{ height:300px; margin:50px 0 80px;background:url(../img/about/client.png) 50% 0 no-repeat}
#process .bg{ height:7000px; margin-top:60px; background:url(../img/about/book_detail.png) no-repeat}
#achieve{ margin-bottom:100px}
#achieve1{ height:1431px; margin-top:60px; background:url(../img/about/achieve1.png) no-repeat}
#achieve2{ height:1656px; margin-top:60px; background:url(../img/about/achieve2.png) no-repeat}
#essay1{ height:1412px; margin-bottom:100px; background:url(../img/about/essay.png) no-repeat}

/* business */
#business .section{  position:relative;height:500px; background:url(../img/business/1.png) no-repeat}
#business .section{}
#business .blank{ position:absolute;top:0;bottom:0;left:0; right:0;}

/* contact */
#webooks_map{ border:1px solid #BBB}
#contact1{ margin-bottom:40px; border-bottom:1px solid #BBB}
#contact1 dl{ margin:30px 0; font-size:16px; color:#555}
#contact1 dt{ width:40px; font-size:20px;line-height:28px;  text-align:left}
#contact1 dd{ margin-left:40px;line-height:28px; }
#contact2 h2{  margin-bottom:30px; font-weight:700; font-size:40px; line-height:1; letter-spacing:-1px; color:#333}
#contact2 h3{ margin-top:10px; margin-bottom:4px; font-size:25px; line-height:1; letter-spacing:-1px; color:#333}
#contact2 p{ margin-bottom:15px; font-size:18px;}

/* XE fix */
.x *,
.xm *,
.board *{-webkit-box-sizing:content-box;box-sizing:content-box}
.pagination{ display:block}