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

html {
	font-family: 'Nanum Gothic',Georgia,dotum,"Times New Roman",Times,serif, arial,helivetica,Arial,sans-serif;
}
body {
	background-color: #CDE8FA;
	padding-top: 0;
}
body, h1, h2, h3, h4,input, select, textarea, button {
  font-family: 'Nanum Gothic',Georgia,dotum,"Times New Roman",Times,serif, arial,helivetica,Arial,sans-serif;
}

.backwhite {
  background-color: #FFF;
	padding: 20px 0;
}
.backgrey {
  background-color: rgba(47, 47, 47, 0.4);
  padding-right: 0px;
  padding-left: 0px;
}

#Plogin {
  margin: 0 auto;
  padding: 10px;
  width: 100%;
  background: rgba(47, 47, 47, 0.4);
  display:none;
}
.logotext {
	padding-left: 0px;
	padding-right: 0px;
}
.navbar {
  border-radius: 0px;
	margin-bottom: 0;
}

.text-12 { font-size: 12px; }
.text-16 { font-size: 16px; }
.text-20 { font-size: 20px; }
.text-24 { font-size: 24px; }
.top-buffer5  { margin-top:5px; }
.top-buffer10 { margin-top:10px; }
.top-buffer20 { margin-top:20px; }
.bot-buffer10 { margin-bottom:10px; }
.bot-buffer20 { margin-bottom:20px; }
.table-border { border: 1px solid #CDCDCD; }
.word_wrap {

  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;

  word-wrap: break-word; /* Internet Explorer 5.5+ */
}
.brd_detail {
	display: table-row;
}
#delete_upload_image {
  position: absolute;
  top: -1px;
  right: 15px;
}
#update_upload_image {
  position: absolute;
  top: -1px;
  left: 15px;
}

.header-background {
	margin: 0 auto;
	background-color: #040D35;
	padding-left: 0;
	padding-right: 0;
}

.main-contents {
  background: #CDE8FA url(/images/main/background_sky.jpg) left top no-repeat;
  padding-right: 0px;
  padding-left: 0px;
	-webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
}

#bgimgwrapper {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: -1;
  overflow: hidden;
}
#bgimgfooter {
  position: absolute;
  left: 0;
	bottom: 0;
	width: 100%;
  z-index: -1;
  overflow: hidden;
}

#bgimg {
  -ms-interpolation-mode: bicubic;
  display: block;
	width: 100%;
}

#bgfooter {
  -ms-interpolation-mode: bicubic;
  display: block;
}

.forbackground {
  padding-right: 0px;
  padding-left: 0px;
  margin-right: 0px;
  margin-left: 0px;
}

/* ===============================
For Datepick
================================ */
.datepick-popup {width:300px;}
.datepick {width:200px;}
.datepick-nav {width:200px;}
.datepick-month {width:200px;}
.datepick-month-row {width:200px;}
.datepick-ctrl {width:200px;}
.datepick-clear-fix {width:200px;}
.datepick-month-header {width:200px; height:23px;}
.datepick-month table{width:200px;}
.datepick-popup td {font-size:14px;}

/* ===============================
Index
================================ */
/*
#myCarousel.carousel {
    height: 55%;
}
*/
.carousel-control.left {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1) 0%, transparent 100%);
}
.carousel-control.right {
    background-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.1) 100%);
}
.carousel { border: 1px solid #777; }

.panel-body p {
  height:140px;
  overflow:hidden;
	text-overflow: ellipsis;
}
.panel-heading h4 { height: 39px; overflow: hidden; }

ul.portfolio-categ li.active a,
ul.portfolio-categ li.active a:hover {
    color: #68A4C4;
}
.flex-video {
	position: relative;
	padding-top: 25px;
	padding-bottom: 25px;
	height: 0;
	margin-bottom: 16px;
	overflow: hidden;
}
.flex-video.widescreen { padding-bottom: 57.25%; }
.flex-video.vimeo { padding-top: 0; }

.flex-video iframe,
.flex-video object,
.flex-video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
.flex-video { padding-top: 0; }
}

/* ===============================
12. Page
================================ */
.page-header {
	margin-top: 0px;
}

/* ===============================
12. Portfolio
================================ */

.work-nav #filters {
  margin: 0;
  padding: 0;
  list-style: none;
}

.work-nav #filters li {
  margin: 0 10px 30px 0;
  padding: 0;
  float:left;
}

.work-nav #filters li a {
  color: #7F8289;
  font-size: 16px;
  display: block;
}

.work-nav #filters li a:hover {

}

.work-nav #filters li a.selected {
  color: #DE5E60;
}

#thumbs {
  margin: 0;
  padding: 0;
}

#thumbs li {
  list-style-type: none;
}

.item-thumbs {
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
  cursor: pointer;
}

.item-thumbs a + img {
  width: 100%;
}

.item-thumbs .hover-wrap {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;

  opacity: 0;
  filter: alpha(opacity=0);

  -webkit-transition: all 450ms ease-out 0s;
     -moz-transition: all 450ms ease-out 0s;
     -o-transition: all 450ms ease-out 0s;
        transition: all 450ms ease-out 0s;

  -webkit-transform: rotateY(180deg) scale(0.5,0.5);
     -moz-transform: rotateY(180deg) scale(0.5,0.5);
    -ms-transform: rotateY(180deg) scale(0.5,0.5);
     -o-transform: rotateY(180deg) scale(0.5,0.5);
      transform: rotateY(180deg) scale(0.5,0.5);
}

.item-thumbs:hover .hover-wrap,
.item-thumbs.active .hover-wrap {
  opacity: 1;
  filter: alpha(opacity=100);

  -webkit-transform: rotateY(0deg) scale(1,1);
     -moz-transform: rotateY(0deg) scale(1,1);
    -ms-transform: rotateY(0deg) scale(1,1);
     -o-transform: rotateY(0deg) scale(1,1);
        transform: rotateY(0deg) scale(1,1);
}

.item-thumbs .hover-wrap .overlay-img {
  position: absolute;
  width: 50%;
  height: 100%;
  opacity: 0.80;
  filter: alpha(opacity=80);
  background: #000;
}

.item-thumbs .hover-wrap .overlay-img-thumb {
  position: absolute;
  border-radius: 60px;
  top: 50%;
  left: 50%;
  margin: -28px 0 0 -38px;
/*  font-size: 32px; */
  line-height: 1em;
  opacity: 1;
  filter: alpha(opacity=100);
}


/* --- Portolio filter --- */

ul.portfolio-categ{
  margin:10px 0 30px 0;
  padding:0;
  float:left;
  list-style:none;
}

ul.portfolio-categ li{
  margin:0;
  padding:0 20px 0 0;
  float:left;
  list-style:none;
  font-size:13px;
  font-weight:600;
}

ul.portfolio-categ li a{
  display:block;
  padding:35x 0 35x 0;
  color:#353535;
}

ul.portfolio-categ li.active a:hover, ul.portfolio-categ li a:hover,ul.portfolio-categ li a:focus,ul.portfolio-categ li a:active {
  text-decoration:none;
  outline:0;
}

/* --- portfolio detail --- */
.top-wrapper {
  margin-bottom:20px;
}

/*
	Footer
*/
#footwrap {
	background: rgba(47, 47, 47, 0.4);
	padding-top: 20px;
	padding-bottom: 20px;
	margin-top: 20px;
}

#footwrap p {
	color: white;
}

#footwrap h5 {
	color: white;
}


#footwrap t {
	font-weight: 700;
}

#footwrap i {
	padding-right: 8px;
	color: #1abc9c;
}

/* Copyright Wrap */

#c {
	background: rgba(22, 22, 22, 0.5);
	padding-top: 15px;
	text-align: right;
}

#c p {
	color: white
}


/* ----- DO NOT ADD BELOW THIS LINE */
@media (min-width: 992px) {
	.container {
		width: 970px;
	}
}

@media (min-width: 1200px) {
	.container {
		width: 970px;
	}
}