@charset "utf-8";

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);

@font-face {
  font-family: 'Nanum Barun Gothic';
  font-style: normal;
  font-weight: 200;
  src: url(/Common/fonts/NanumBarunGothicUltraLight.eot);
  src: local('Nanum Barun Gothic UltraLight'),
       local('NanumBarunGothicUltraLight'),
       url(./NanumBarunGothicUltraLight.eot?#iefix) format('embedded-opentype'),
       url(./NanumBarunGothicUltraLight.woff2) format('woff2'),
       url(./NanumBarunGothicUltraLight.woff) format('woff'),
       url(./NanumBarunGothicUltraLight.ttf) format('truetype');
}

@font-face {
  font-family: 'Nanum Barun Gothic';
  font-style: normal;
  font-weight: 300;
  src: url('/Common/fonts/NanumBarunGothicLight.eot');
  src: local('Nanum Barun Gothic Light'),
       local('NanumBarunGothicLight'),
       url('/Common/fonts/NanumBarunGothicLight.eot?#iefix') format('embedded-opentype'),
       url('/Common/fonts/NanumBarunGothicLight.woff2') format('woff2'),
       url('/Common/fonts/NanumBarunGothicLight.woff') format('woff'),
       url('/Common/fonts/NanumBarunGothicLight.ttf') format('truetype');
}

@font-face {
  font-family: 'Nanum Barun Gothic';
  font-style: normal;
  font-weight: 400;
  src: url('/Common/fonts/NanumBarunGothic.eot');
  src: local('Nanum Barun Gothic'),
       local('NanumBarunGothic'),
       url('/Common/fonts/NanumBarunGothic.eot?#iefix') format('embedded-opentype'),
       url('/Common/fonts/NanumBarunGothic.woff2') format('woff2'),
       url('/Common/fonts/NanumBarunGothic.woff') format('woff'),
       url('/Common/fonts/NanumBarunGothic.ttf') format('truetype');
}

@font-face {
  font-family: 'Nanum Barun Gothic';
  font-style: normal;
  font-weight: 700;
  src: url('/Common/fonts/NanumBarunGothicBold.eot');
  src: local('Nanum Barun Gothic Bold'),
       local('NanumBarunGothicBold'),
       url('/Common/fonts/NanumBarunGothicBold.eot?#iefix') format('embedded-opentype'),
       url('/Common/fonts/NanumBarunGothicBold.woff2') format('woff2'),
       url('/Common/fonts/NanumBarunGothicBold.woff') format('woff'),
       url('/Common/fonts/NanumBarunGothicBold.ttf') format('truetype');
}

/*
a {color:#666 !important;}
a:hover { text-decoration: none;}
*/

body {font-family: 'Nanum Barun Gothic','나눔고딕', NanumGothic, 'Nanum Gothic',  sans-serif; color:#000; padding-top: 50px; padding-bottom: 70px; font-size:14px; }

.h5 {font-size: 15px; }



.container-fluid { padding: 0;}


/*
.logo { background: url(/images/bootstrap/logo.png) no-repeat;width:432px; height: 85px;  }
*/
.navbar-brand{
    background: url(/images/bootstrap/logo.png) no-repeat;
    background-size: 40px 40px;
    height:40px;
    margin:5px;
    width:250px;
    letter-spacing:-1px;
}

/*navbar default change*/
/*
.navbar-default {
    background-color: #F8F8F8;
    border-color: #E7E7E7;
}
.navbar-default .navbar-nav > li > a {
    color: #777777;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    background-color: #E7E7E7;
    color: #555555;
}
*/

/*** navbar reverse change*/
.navbar > .active > a, .navbar > .active > a:focus, .navbar > .active > a:hover,
.navbar-inverse > .active > a, .navbar-inverse> .active > a:focus, .navbar-inverse > .active > a:hover {
    background: #111 !important;
    color: #FFF !important;
}

.navbar, .navbar-inverse {
   background: #1c4b77!important;
   border-color: #1c4b77 !important;
}

.navbar-image {
  float: left;
  padding: 10px 5px;
}

/***내브바에 있는 마우스 오버 및 활성 상태일때 값 설정*/
.control { position: inherit; top: 50%; z-index: 5; display: inline-block; right: 50%;} 

@media (max-width: 320px)  {
.navbar-brand img { width: 90%; height: auto; margin-top:-120px}  
}
@media (max-width: 980px) {
.navbar-nav li { margin:0 10px;}
}

/***carousel*/
/*
.carousel-indicators li
{
    text-indent: 0 !important;
    height: 25px !important;
    width: 25px !important;
    line-height: 25px !important;
    border-radius: 25px !important;
    background-color: #d1d1d1;
    color: #444;
    text-align: center;
}
.carousel-indicators li.active
{
    background-color: #fff;
}
*/


/***dropdown-menu change(red)*/
 .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
            background-image:none !important;
 }
 .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
            background-color:#4a9eed;
 }


/***table*/
.table > tbody > tr > .no-line {border-top: none;}
/*.table > thead > tr > .no-line {border-bottom: none;}*/
.table > tbody > tr > .thick-line {border-top: 2px solid;}

 /***media-list*/
.media-img {
    overflow: hidden;
    padding: 0;
    position: relative;
    float: left;    
    text-align: center;
    cursor: default;
}

.media-img .img-overlay {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.4);
    height: 100%;
    width: 100%;
    opacity: 0;
    padding-top: 30%;
    position: absolute;
    overflow: hidden;
    text-align: center;
    transition: opacity 0.3s ease-out 0s;
    z-index: 4;
}
.media .img-overlay a {
	display: none;
	position: relative;
	margin-top: -24px;
}

.media:hover .img-overlay a,
.media .img-overlay:hover a {
	display: inline-block;
}

/*
.media div.media-img img {
    height: auto;
    transform: scale(1.1);
    transition-duration: 2000ms;
    transition-timing-function: ease-out;
    width: 100%;
}
*/

.media div.pull-left {
    overflow: hidden;
	margin-right: -2px;
	margin-left: 0px;
}

.media-img img {
    width: 100%;
    
   position: relative;
  -webkit-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;   
}

/*hover 효과*/
.media-img:hover img {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /><feGaussianBlur stdDeviation="3" /></filter></svg>#filter');
  filter: grayscale(1) blur(3px);
  -webkit-filter: grayscale(1) blur(3px);
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

.nopadmar {
   padding: 0 !important;
   margin: 0 !important;
}

/*메뉴 중앙 정렬 */
.vcenter {
        display: table-cell;
        float: none;height: 120px /*any value*/;
        vertical-align: middle; 
}

/*Avata
<div class="avata_roundCircle">MR</div>
*/
.avata_roundCircle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #fff;
    line-height: 50px;
    text-align: center;
    background: #ADAAAA;
    font-size: 14px;
    } 
      
    
      
#carousel-generic {margin-top:0px;}


/* 아이콘 부분 */
.service {margin: 40px 0;}
.service a { display: block;}
.icons {      
        float: left;
        display: block;
        font-size: 30px;
        color: #fff;
        background-color: #FF8000;
        border-radius: 50%;
        text-align: center;
        margin-right: 15px ;
        padding: 20px;
        border:4px solid #FF8040;
        transition: all 0.3s;
    }  

.service a:hover .icons  { background-color:#0080C0;}  /*아이콘 제목 마우스 오버시 색상변경*/
.service a:hover .icontxt h4 { color: #0080FF; }
.icontxt { display: block; color: #2E2F28; text-align: left; } 
.icontxt h4 {font-weight: bold; font-family: '나눔고딕', NanumGothic, 'Nanum Gothic',  sans-serif; font-size: 20px; text-transform: uppercase; text-align: left;}
@media (min-width: 768px) 
{
    /*해상도가 768픽셀 이하인 경우 아이콘과 제목 정렬*/
    .icons { margin: 0 auto; position: relative; left: 30%;}
    .icontxt h4 { text-align: center;}
}

@media (max-width: 360px) 
{
/*최대 해상도가 360픽셀인 경우 텍스트를 사라지게 처리함*/
    .icontxt p { display: none; }
    .icontxt {line-height:10px; padding: 0; margin: 0;}
    .icontxt h4 { display: none; }
    .icons { padding: 20px; margin: 10px 0 10px 20px; }
    .book img { width: 50%; height: auto;}
    .control { display: none;} 
}



/*
header { color: #fff; text-align: center; padding: 40px 0;}
header small { color: #fff}
header p { color: #C0C0C0}

.header_content {
    background:url('/images/bootstrap/slide1_bg.jpg')  no-repeat center top fixed;
    background-size:cover;
}
*/

header.header_title { border-bottom: 1px solid #ccc; padding: 10px 0;}
.sns { padding-top: 10px; font-size:20px;}
.sns ul li { display: inline;}
.sns a { padding: 10px 0px 10px 10px;  }
header.header_title h1 { display: inline; }
header.header_title h2 { display: inline; }
header.header_title h3 { display: inline; }
header.header_title h4 { display: inline; }

/*
.about p { line-height: 1.8em; font-size: 14px; color: #282923}

.about, .portfolio, .contact { padding: 50px 0;}

.about .point_01 {font-size:24px; font-weight:bold; color:#1f61b9; padding:0 0 22px 0;}
.about .point_02 {font-size:16px; font-weight:bold; color:#4782d4; text-align:left; line-height:32px;}
.about .msg_txt {font-size:14px;color:#7e8286;line-height:25px;}

#about, #portfolio, #contact { margin-top: -85px; padding-top: 85px }  /*  nav-fix 때문에 생기는 공백 상쇄 */
*/

.footer_content {
  background:#3d4c5c; 
}
.footer_content p.address {color:#fff;line-height:15px;margin-top:14px;font-size:12px;}
.footer_content p.copyright {clear:both;color:#fff;margin-top:20px;}
footer { padding: 0px 0px; color: #fff; background:#3d4c5c;}


/* common */
.clear {clear:both;overflow:hidden;height:0;}
.float_l {float:left;}
.float_r {float:right;}
.skip {position:absolute;visibility:hidden;overflow:hidden;height:0;line-height: 0;width:0;margin:0;padding:0;font:0/0 Arial;}
.align_c {text-align:center !important;}
.align_l {text-align:left !important;}
.align_r {text-align:right !important;}
.bgNo {background-image:none !important;}
.mt0 {margin-top:0 !important;}
.mt5 {margin-top:5px !important;}
.mt6 {margin-top:6px !important;}
.mt10 {margin-top:10px !important;}
.mt15 {margin-top:15px !important;}
.mt17 {margin-top:17px !important;}
.mt18 {margin-top:17px !important;}
.mt20 {margin-top:20px !important;}
.mt25 {margin-top:25px !important;}
.mt30 {margin-top:30px !important;}
.mt40 {margin-top:40px !important;}
.mt50 {margin-top:50px !important;}
.mt60 {margin-top:60px !important;}
.mt100 {margin-top:60px !important;}
.mtr20 {margin-top:-20px !important;}
.mb0 {margin-bottom:0 !important;}
.mb10 {margin-bottom:10px !important;}
.mb50 {margin-bottom:50px !important;}
.ml10 {margin-left:10px !important;}
.ml20 {margin-left:20px !important;}
.ml50 {margin-left:50px !important;}
.ml70 {margin-left:70px !important;}
.mr5 {margin-right:5px !important;}
.mr20 {margin-right:20px !important;}
.mr24 {margin-right:24px !important;}
.mr25 {margin-right:25px !important;}
.mr30 {margin-right:30px !important;}
.mr50 {margin-right:50px !important;}
.bt0 {border-top:0 !important;}

.fs10 {font-size:10px !important;}
.fs11 {font-size:11px !important;}
.fs12 {font-size:12px !important;}
.fs13 {font-size:13px !important;}

.line {border: 1px dotted #525252; border-style: none none solid; color: #fff; background-color: #fff; }
.dotted_line {border: 1px dotted #525252; border-style: none none dotted; color: #fff; background-color: #fff; }


/*
 .img_opacity{
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=45)"; 
  filter:alpha(opacity=45);
 }
 .img_opacity:hover{
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter:alpha(opacity=100);
 }
 
 .img_opacity{
  opacity: 0.45;
 }
 .img_opacity:hover{
  cursor:pointer;
  opacity: 1.0;
 }
 */
 




 a.darken {
    display: inline-block;
    background: black;
    padding: 0;
}

a.darken img {
    display: block;

    -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
        -ms-transition: all 0.5s linear;
         -o-transition: all 0.5s linear;
            transition: all 0.5s linear;
}

a.darken:hover img {
    opacity: 0.7;

}
 
 
 
/*
.form-control {
  -webkit-appearance: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
​}
*/

  .form-group input[type="text"], .form-group textarea { border-radius: 0;}

  .required {
    background: url(/images/bootstrap/required.png) right top no-repeat;
  }

  button.send_btn {
    cursor: pointer;
    background:url(/images/bootstrap/pattern.png) repeat;
    color: #FFF;
    margin:0 10px 0 0;
    display: inline-block;
    padding: 0 20px;
    height:40px;
    line-height:40px;
    font-size: 14px;
    width: auto;
    border:0;
  }
  button.send_btn:hover {
     background-image:url(/images/bootstrap/color_pattern.png);
     text-decoration:none;
  }


.messagealert {
    width: 100%;
    position: fixed; top:0px;
    z-index: 100000;
    padding: 0;
    font-size: 15px;
}

/*로그인*/
.form-signin
{
    max-width: 330px;
    padding: 15px;
    margin: 0 auto;
}
.form-signin .form-signin-heading, .form-signin .checkbox
{
    margin-bottom: 10px;
}
.form-signin .checkbox
{
    font-weight: normal;
}
.form-signin .form-control
{
    position: relative;
    font-size: 16px;
    height: auto;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.form-signin .form-control:focus
{
    z-index: 2;
}
.form-signin input[type="text"]
{
    margin-bottom: -1px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.form-signin input[type="password"]
{
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.account-wall
{
    margin-top: 20px;
    padding: 40px 0px 20px 0px;
    background-color: #f7f7f7;
    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.login-title
{
    color: #555;
    font-size: 16px;
    font-weight: 400;
    display: block;
}
.profile-img
{
    width: 96px;
    height: 96px;
    margin: 0 auto 10px;
    display: block;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.need-help
{
    margin-top: 10px;
}
.new-account
{
    display: block;
    margin-top: 10px;
}

.label-checkbox
{
    display: inline-block;
    margin-top: 10px;
}



.hr { height:10px; margin-top:5px; border-top:1px solid #eee; }
.hr hr { display:none }


/*Main*/

.main_latest {line-height:40px;margin:0 0;border-bottom:1px solid #F7F7F7;vertical-align:middle;}
.main_latest a {color:#000000;}
.main_latest a:hover {text-decoration:none;}

/*동영상*/
div.image_tn {float:left; margin-left:20px;}
div.image_tn img {margin:0px; max-width:none;}

.video {}
.video ul {width:100%;list-style:none;border-bottom:1px solid #e9eaea;}
.video ul:after {content:'';display:block;clear:both;}
.video li {float:left;margin:0 0;}
.video img {float:left;max-width:240px;max-height:180px;margin:3px 3px 0 0;border:0}

/*에디터*/
#editor {
	max-height: 250px;
	height: 250px;
	background-color: white;
	border-collapse: separate; 
	border: 1px solid rgb(204, 204, 204); 
	padding: 4px; 
	box-sizing: content-box; 
	-webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset; 
	box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
	border-top-right-radius: 3px; border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px; border-top-left-radius: 3px;
	overflow: scroll;
	outline: none;
}

.content-body pre p {margin: 0; padding: 0;}
.content-body img {display: block; max-width: 100%; width: 100%; height: auto;}

#voiceBtn {
  width: 20px;
  color: transparent;
  background-color: transparent;
  transform: scale(2.0, 2.0);
  -webkit-transform: scale(2.0, 2.0);
  -moz-transform: scale(2.0, 2.0);
  border: transparent;
  cursor: pointer;
  box-shadow: none;
  -webkit-box-shadow: none;
}

div[data-role="editor-toolbar"] {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.dropdown-menu a {
  cursor: pointer;
}





.hovereffect img {

  position: relative;
  -webkit-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
}

.hovereffect:hover img {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /><feGaussianBlur stdDeviation="3" /></filter></svg>#filter');
  filter: grayscale(1) blur(3px);
  -webkit-filter: grayscale(1) blur(3px);
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}