/* ------------------------------------------------------------------ */
/* Color
main : da251c
point : 666
point : 222

@media screen and (max-width: 768px) {
}
@media screen and (max-width: 640px) {
}
@media screen and (max-width: 480px) {
}
'Gothic A1', 'notokr', sans-serif   'FontAwesome',
/* ------------------------------------------------------------------ */
/* ================================================================== */

/* Intro Section
------------------------------------------------------------------ */
#intro { position: relative; overflow: hidden;}
/* FlexSlider Intro Slider Styles */
.slides { overflow: hidden; margin: 0; padding: 0;}
.flexslider .slides li {height: 100%; min-height: 750px;}
.flexslider .slide01 {background: url("../images/1.jpg") repeat-x scroll 50% 50% / cover; height: 100%; width: 100%}
.flexslider .slide02 {background: url("../images/2.jpg") repeat-x scroll 50% 50% / cover; height: 100%; width: 100%}
.flexslider .slide03 {background: url("../images/3.jpg") repeat-x scroll 50% 50% / cover; height: 100%; width: 100%}
/* Slider Text
--------------------------------------------------------------- */
.caption-wrap {display: table; width: 100%; height: 750px; }
.caption {display: table-cell;text-align: center; padding: 0; vertical-align: middle;  }
/* .caption::after {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 100%;
    background: none ;
    background-size: cover !important;
	-webkit-background-size: cover !important;
    background-attachment: fixed;
    opacity: 0.3;
    filter:alpha(opacity=30);

    z-index: -1;
} */
.caption h1 { font: 100px/90px 'Gothic A1', sans-serif; font-weight: 100; text-shadow: 0px 1px 5px rgba(0, 0, 0, .3); padding: 0; margin: 0 0 18px 0; }
.caption h1 span, .caption a { font-weight: 400; }

.caption h2 { font: 50px/1.5 'Gothic A1', sans-serif; font-weight: 200;padding: 0; margin: 0 0 18px 0; text-shadow: 0px 1px 5px rgba(0, 0, 0, .3); }
.caption h3 { font: 30px/40px 'Gothic A1', sans-serif; font-weight: 400;padding: 0; margin: 0 0 18px 0; text-shadow: 0px 1px 5px rgba(0, 0, 0, .3); }
.caption p { font: 17px/36px "Gothic A1",sans-serif; padding: 0; margin: 12px 8% 0; text-shadow: 0px 1px 2px rgba(0, 0, 0, .3); color: #fff ; background: #332f25;}
.caption .color1 {color:#fff; float:none !important}
.caption .color2 {color:#222; float:none !important}

/* Direction Navigation
--------------------------------------------------------------- */
.flex-direction-nav a {
    display: block;
    width: 40px;
    height: 66px;
    margin: -33px 0 0 0;
    background-color: #2D3339;
    cursor: pointer;
    z-index: 599;
    opacity: 0;
    position: absolute;
    top: 50%;
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.flex-direction-nav a:hover { background-color: #f2da00; }
.flex-direction-nav .flex-next, .flex-direction-nav .flex-prev {position: absolute; }
.flex-direction-nav .flex-next {right: 0px; background: #111 url(../images/direction-nav-right.png) no-repeat 53% 50%; }
.flex-direction-nav .flex-prev {left: 0px; background: #111 url(../images/direction-nav-left.png) no-repeat 47% 50%; }
.flexslider:hover .flex-next, .flexslider:hover .flex-prev { opacity: 0.8; }
.flex-direction-nav .flex-disabled {  opacity: .3 !important;  filter: alpha(opacity=30);  cursor: default;}

/*  Paging
--------------------------------------------------------------- */
.flex-control-nav {
  position:absolute;
  width:360px; /* button 정렬을 위한 전체 넓이 값*/
  left: 50%;
  bottom: 10px;
  margin-left: -180px;
  text-align: center;
  z-index:599;
  }

.flex-control-nav li { display: inline-block; margin: 0 6px; zoom: 1; *display: inline; }
.flex-control-paging li a { border: 0px solid #f2da00; border-radius: 0px; cursor: pointer; display: inline-block; width: 50px; height:6px; margin: 1px; text-indent: -9999px;background-color: rgba(0, 0, 0, 0.5);}
.flex-control-paging li a:hover { background: #f2da00;}
.flex-control-paging li a.flex-active { background: #f2da00;}

/* Flex Caption Effect */
.FadeIn, .FromTop, .FromRight, .FromBottom, .FromLeft {opacity: 0; transition: all 0.7s ease-in-out; -webkit-transition: all 0.7s ease-in-out;}
.captionDelay1 {transition-delay: 0.1s; -webkit-transition-delay: 0.1s;}
.captionDelay2 {transition-delay: 0.2s; -webkit-transition-delay: 0.2s;}
.captionDelay3 {transition-delay: 0.3s; -webkit-transition-delay: 0.3s;}
.captionDelay4 {transition-delay: 0.4s; -webkit-transition-delay: 0.4s;}
.captionDelay5 {transition-delay: 0.5s; -webkit-transition-delay: 0.5s;}
.captionDelay6 {transition-delay: 0.6s; -webkit-transition-delay: 0.6s;}
.captionDelay7 {transition-delay: 0.7s; -webkit-transition-delay: 0.7s;}
.captionDelay8 {transition-delay: 0.8s; -webkit-transition-delay: 0.8s;}
.captionDelay9 {transition-delay: 0.9s; -webkit-transition-delay: 0.9s;}
.captionDelay10 {transition-delay: 1s; -webkit-transition-delay: 1s;}
.captionDelay11{transition-delay: 1.1s; -webkit-transition-delay: 1.1s;}
.captionDelay12 {transition-delay: 1.2s; -webkit-transition-delay: 1.2s;}

.flexslider li.flex-active-slide .FadeIn {opacity: 1;}
.flexslider li .FromTop {transform: translateY(-100%); -o-transform: translateY(-100%); -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%);}
.flexslider li.flex-active-slide .FromTop {opacity: 1; transform: translateY(0); -o-transform: translateY(0%); -ms-transform: translateY(0); -webkit-transform: translateY(0);}
.flexslider li .FromBottom {transform: translateY(100%); -o-transform: translateY(100%); -ms-transform: translateY(100%); -webkit-transform: translateY(100%);}
.flexslider li.flex-active-slide .FromBottom {opacity: 1; transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0);}
.flexslider li .FromLeft {transform: translateX(-100%); -o-transform: translateX(-100%); -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%);}
.flexslider li.flex-active-slide .FromLeft {opacity: 1; transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0);}
.flexslider li .FromRight {transform: translateX(100%); -o-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%);}
.flexslider li.flex-active-slide .FromRight {opacity: 1; transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0);}


/* scrolldown link */
#intro .scrolldown a {
  position: absolute;
  bottom: 100px;
  left: 50%;
  margin-left: -50px;
  color: #fff;
  display: block;
  height: 42px;
  width: 100px;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  border-radius: 100%;
  z-index:999;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
#intro .scrolldown a i {font-size: 30px;}
#intro .scrolldown a:hover { color: #f2da00; }

@media screen and (max-width: 768px) {
  #intro {padding: 0; height: auto;}
  .flexslider .slides li {min-height: 440px; margin: 0; padding: 0;}
  .caption-wrap { height: 430px; }
  .caption { width: 90%; margin: 25% auto auto auto; }
  .caption h1 { font-size: 48px; line-height: 42px;  }
  .caption h2 { font-size: 30px; }
  .caption h3 { font-size: 20px; line-height: 20px;}
  .caption p { font-size: 14px; }
}

@media screen and (max-width:640px) {
  .flexslider .slides li {min-height: 440px; margin: 0; padding: 0; line-height: 1.8;}
  .caption {padding: 0 10px;}
  .caption h1 { font-size: 34px; }
  .caption h2 { font-size: 18px; }
  .caption h3 { font-size: 16px; }
  .caption p { font-size: 12px; }
  #intro .scrolldown a i {font-size: 32px;}
}

/* ------------------------------------------------------------------ */
/* Customer Section - Main Page
/* ------------------------------------------------------------------ */
#customer {padding: 0px 0 60px 0; background: #f5f5f5;}
#customer .brd-wrap  {background: #ccc;}
#customer .brd-wrap .brd-out {padding: 30px 0;}
#customer .brd-wrap .brd-out .title {text-align: right; }
#customer .brd-wrap .brd-out .title h5 {font-weight: 600;}
#customer .brd-wrap .brd-out .title span {display: inline-block; padding-left: 100px;}
/* Board Output */
#output {}
#output .board_output {}
#output .board_output .board_output_1_tr {line-height: 30px;}
#output .board_output .board_output_1_tr img {vertical-align: middle;}
#output .board_output .board_output_1_tr .bd_out1 {}
#output .board_output .board_output_1_tr .bd_out1 a {}
#output .board_output .board_output_1_tr .bd_out1 a:hover {}


#customer .customer-inner {padding: 60px 0 0 0;}
#customer .item-box { margin-bottom: 0; text-align: center;}
#customer .item-box i {font-size: 50px; margin-bottom: 20px;}
#customer .item-box h5 {padding-top: 4px;line-height: 1; font-weight: 600;}
#customer .item-box P {margin: 0;}
@media screen and (max-width: 768px) {
    #customer .customer-inner {margin: 0 auto;}
}

@media screen and (max-width: 640px) {
    #customer .customer-inner {width: 100%; padding: 40px 20px 0 20px;}

    #customer .item-box { float: left; width: 50% !important; margin-bottom: 30px;}
    #customer .item-box h5 {margin-bottom: 10px; line-height: 1;}
    #customer .item-box P {margin: 0; font-size: 12px;}
}

@media screen and (max-width: 480px) {
  #customer {padding-bottom: 0;}
  #customer .brd-wrap .brd-out .title {margin-bottom: 20px;padding: 0 20px;text-align: left;}
  #customer .brd-wrap .brd-out .title span {float:right;}
  #output {padding: 0 20px;}
  #customer .item-box {min-height: 120px ;}
  #customer .item-box i {font-size: 36px;}
}

/* ------------------------------------------------------------------ */
/* gallery Section - Main Page
/* ------------------------------------------------------------------ */
#product {
    padding:  100px 0 50px 0;
    background: #fff url("../images/main-product-bg.jpg") center center no-repeat ;
    background-size: cover !important;
	-webkit-background-size: cover !important;
    background-attachment: fixed;
}
#product h3 {text-align: center; font-weight: 600; text-transform: uppercase; line-height: 1; color: #161117;}
/* hr */
#product hr {
	border: solid #444;
	border-width: 4px 0 0;
	width: 70px;
	margin: 20px auto 60px auto;
	height: 0;
	clear: both;
	text-align: left;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#product:hover h3 + hr {	border-color: #da251c; width: 140px; text-align: center;}
#product .row.items {
	max-width: 1260px;
	margin-top: 0;
}

/* media queries - product */
@media only screen and (max-width:1300px) {
	#product .row.items {	width: 100%;	padding: 0;	}
	#product .row.items .columns {	padding: 0;	}
}
@media screen and (max-width: 480px) {
  #product {padding: 60px 0;}
}

/* product content */
#product-wrapper {margin-top: 36px;}
#product-wrapper:before, #product-wrapper:after {content: "";display: table;}
#product-wrapper:after {clear: both;}
#product-wrapper .bgrid {padding: 0;}

.folio-item .item-wrap {	background: #111417;	overflow: hidden;	position: relative;}
.folio-item .item-wrap a {	display: block;	cursor: pointer;	position: relative;}

/* overlay */
.folio-item .item-wrap .overlay {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.85);
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	opacity: 0;
	zoom: 1;
	-moz-transition: opacity 0.5s ease-in-out;
	-o-transition: opacity 0.5s ease-in-out;
	-webkit-transition: opacity 0.5s ease-in-out;
	-ms-transition: opacity 0.5s ease-in-out;
	transition: opacity 0.5s ease-in-out;
}
.folio-item .item-wrap .link-icon {
	display: block;
	height: 30px;
	width: 30px;
	margin-left: -15px;
	margin-top: -15px;
	font-size: 14px;
	line-height: 30px;
	text-align: center;
	color: #FFFFFF;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	opacity: 0;
	zoom: 1;
	-moz-transition: opacity 0.5s ease-in-out;
	-o-transition: opacity 0.5s ease-in-out;
	-webkit-transition: opacity 0.5s ease-in-out;
	-ms-transition: opacity 0.5s ease-in-out;
	transition: opacity 0.5s ease-in-out;
	position: absolute;
	top: 50%;
	left: 50%;
}
.folio-item .item-wrap img {
	vertical-align: bottom;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.folio-item .product-item-meta {
	width: 100%;
	text-align: center;
	position: absolute;
	top: 20%;
	left: -100px;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	opacity: 0;
	zoom: 1;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.folio-item .product-item-meta h5 {
	font: 16px/21px "notokr", sans-serif;
	letter-spacing: 2px;
	color: #fff;
	margin: 0;
}
.folio-item .product-item-meta p {font: 14px/18px "notokr", sans-serif;	color: #aaa;	margin: 0;}

/* on hover */
.folio-item:hover .overlay,
.folio-item:hover .link-icon,
.folio-item:hover .product-item-meta {
	filter: alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	opacity: 1;
	zoom: 1;
}
.folio-item:hover .product-item-meta {	left: 0;}
.folio-item:hover .item-wrap img {
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}

/* media queries - .product-item-meta */
@media only screen and (max-width:500px) {
	.folio-item .product-item-meta {	top: 16%;	}
	.folio-item .product-item-meta h5 {font: 13px/21px "raleway-bold", sans-serif;	letter-spacing: 1px;	}
	.folio-item .product-item-meta p {font: 13px/18px "raleway-semibold", sans-serif;}
}

@media only screen and (max-width:400px) {
	.folio-item .product-item-meta {	top: 12%;	}
	.folio-item .product-item-meta h5 {	font: 11px/18px "raleway-bold", sans-serif;	letter-spacing: 1px;	}
	.folio-item .product-item-meta p {	font: 11px/16px "raleway-semibold", sans-serif;}
}

/* Popup Modal
/* ------------------------------------------------------------------ */
.popup-modal {	max-width: 550px;	background: #FFFFFF;	position: relative;	margin: 0 auto; 	}
.popup-modal .media {	position: relative;}
.popup-modal img {vertical-align: bottom;}

/* description */
.popup-modal .description-box {	padding: 6px 36px 30px;}
.popup-modal .description-box h4 {	font: 15px/24px "raleway-heavy", sans-serif;	color: #000000;}
.popup-modal .description-box p {	font: 14px/24px "merriweather-regular", serif;	color: #A1A1A1;	margin-bottom: 12px;}

/* categories */
.popup-modal .categories {
	font: 11px/18px "raleway-heavy", sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	display: block;
	text-align: left;
	color: rgba(0, 0, 0, 0.5);
}

/* link box */
.popup-modal .link-box {	width: 100%;	overflow: hidden;	background: #000000;}
.popup-modal .link-box a {
	font: 12px/60px "raleway-heavy", sans-serif;
	color: #FFFFFF;
	text-transform: uppercase;
	letter-spacing: 3px;
	cursor: pointer;
	display: block;
	text-align: center;
	float: left;
	width: 50%;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.popup-modal .link-box a:first-child {border-right: 1px solid rgba(200, 200, 200, 0.1);}

.popup-modal .link-box a:hover {	background: #fdc501;	color: #000000;	border: none;}

/* media queries - popup-modal */
@media only screen and (max-width:600px) {
	.popup-modal {	width: auto;	margin: 0 20px;	}
}

/* ------------------------------------------------------------------ */
/* portfolio Section - Main Page
/* ------------------------------------------------------------------ */

#portfolio {
    padding:  80px 0;
    background: #fff url("../images/main-about-bg.jpg") center center no-repeat;
    background-size: cover !important;
	-webkit-background-size: cover !important;
    background-attachment: fixed;
}
#portfolio h3 {text-align: center; font-family: 'Oxygen', sans-serif; color: #fff; font-weight: 700; text-transform: uppercase; line-height: 1; letter-spacing: 0.4em}
#portfolio h3:after {background:#fff; content:""; display:block; height:1px;width:100px;margin:20px auto 40px;}

#portfolio #photo_output {float: left; width: 33.3%; text-align:center;margin:0 auto; padding: 0; }
#portfolio #photo_output .photo_box {display: block; height: 190px; overflow: hidden}
#portfolio #photo_output .photo_box img {width: 100%; height: 100% auto;}
#portfolio #photo_output a{ font-size: 14px; color: #fff; text-decoration: none; text-align:center !important;  }
#portfolio #photo_output a:hover { font-size: 14px; color: #fff; text-decoration: underline }
#portfolio #photo_output_bar {float:left;width:5px}



/* ------------------------------------------------------------------ */
/* Output Section - Main Page
/* ------------------------------------------------------------------ */

/*  gallery
--------------------------------------------------------------- */
.gallery_out > table {float: left; width: 25% !important;margin: 0 0 -7px 0; padding: 0;}
.gallery_out .board_output_gallery_img a img {width: 100%;}


@media screen and (max-width: 1024px) {
}

@media screen and (max-width: 768px) {

}

@media screen and (max-width: 640px) {
}

@media screen and (max-width: 480px) {
    .flexslider .slides li {min-height: 300px; margin: 0; padding: 0;}
    .gallery_out > table {float: left; width: 50% !important;margin: 0 0 -7px 0; padding: 0;}
    .gallery_out .board_output_gallery_img a img {width: 100%;}
}