/* ------------------------------------------------------------------ */
/* 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: 80px 0 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, .caption h2, .caption h3, .caption p {text-shadow: 0px 1px 5px rgba(0, 0, 0, .3); }

.caption h1 { font: 100px/90px 'Gothic A1', sans-serif; font-weight: 100; padding: 0; margin: 0 0 18px 0; line-height: 1;}
.caption h1 span, .caption a { font-weight: 600; }
.caption h2 { font: 50px/50px 'Gothic A1', sans-serif; font-weight: 200;padding: 0; margin: 0 0 18px 0; line-height: 1;}
.caption h2 span {font-weight: 600;}
.caption h3 { font: 30px/40px 'Gothic A1', sans-serif; font-weight: 400;padding: 0; margin: 0 0 18px 0; line-height: 1;}
.caption p { font: 17px/36px "Gothic A1",sans-serif; padding: 0; margin: 12px 8% 0; color: #fff ; background: #332f25;}
.caption .color1 {color:#fff; float:none !important}
.caption .color2 {color:#222; float:none !important}
@media screen and (max-width: 768px) {
  #intro {padding: 0; height: auto;}
  .flexslider .slides li {min-height: 440px; margin: 0; padding: 0;}
  .caption-wrap { height: 440px; }
  .caption { width: 90%; padding: 80px 20px 0; }
  .caption h1 { font-size: 68px;}
  .caption h2 { font-size: 36px;}
  .caption h3 { font-size: 20px;}
  .caption p { font-size: 14px; }
}

@media screen and (max-width:640px) {
  .caption {}
  .caption h1 { font-size: 48px; }
  .caption h2 { font-size: 30px; }
  .caption h3 { font-size: 20px; }
  .caption p { font-size: 12px; }
}

/* 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: 50px;
  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 .scrolldown {display: none;}
}

@media screen and (max-width:640px) {
  .flexslider .slides li {min-height: 440px; margin: 0; padding: 0; line-height: 1.8;}
}

/* ------------------------------------------------------------------ */
/* 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 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; }
#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;}
}


#main-bnr {background: #none /* url('../images/main-about-bg.jpg') center top no-repeat; -webkit-background-size: cover;background-size: cover */ ; padding: 100px 0 120px 0; text-align: center; }
#main-bnr h3 {margin-bottom: 20px; font-weight: 600;}
#main-bnr .hd {margin-bottom: 60px; }
#main-bnr .hd p {margin-bottom: 0;}
#main-bnr .hd span {display: block; color: #666; font-size: 18px; font-weight: 500; margin-top: 0px; line-height: 1.3;}

#main-bnr article .bnr_wrap ul {margin-left: 0px; }
#main-bnr article .bnr_wrap ul:after {display: block;clear: both;content: "";	}
#main-bnr article .bnr_wrap ul li{
  position: relative; float: left; width: calc(25% - 80px); overflow: hidden;  margin:0 40px; background-repeat: no-repeat; background-position: center; color: #fff; border-radius: 50%;
}
#main-bnr article .bnr_wrap ul li a {position: relative; display: block;  height: 0; padding-bottom:100%; transition:all .3s;}
#main-bnr article .bnr_wrap ul li a .bg{
  position: absolute; display: block; top: -9999px; right: -9999px; bottom: -9999px; left: -9999px; margin: auto; max-width: 100%; max-height: 100%; width: 100%; height: 100%;
}
#main-bnr article .bnr_wrap ul li a .bg:after{content: "";transition:all .5s ; }
#main-bnr article .bnr_wrap ul li a .bg img {
  opacity: 0.8; -webkit-transition: all 0.5s;-moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;
}
#main-bnr article .bnr_wrap ul li:hover .bg img {
  transform:scale(1.1); -webkit-transform: scale(1.1);-moz-transform: scale(1.1);-ms-transform: scale(1.1);-o-transform: scale(1.1);
}
#main-bnr article .bnr_wrap ul li a .txt {
  position: absolute; top: 50%; left: 0; width: 100%; -webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-ms-transform: translateY(-50%);-o-transform: translateY(-50%);transform: translateY(-50%);
}
#main-bnr article .bnr_wrap ul li a .txt strong{display: block; margin-top: 0px; font-size: 18px; color: #fff; font-weight: 500; }
#main-bnr article .bnr_wrap ul li:hover .bg:after{
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7);
}


@media screen and (max-width:1200px) {
	#main-bnr article .bnr_wrap ul{margin-left: -5px;}
	#main-bnr article .bnr_wrap ul li{width: calc(25% - 5px);}
	#main-bnr article .bnr_wrap ul li .txt img{width: 40%; max-width: 88px; }
}

@media screen and (max-width:768px) {
	#main-bnr { padding: 60px 0;}
  #main-bnr .hd {margin-bottom:40px; }
	#main-bnr article .bnr_wrap {overflow: hidden;}
	#main-bnr article .bnr_wrap ul{}
	#main-bnr article .bnr_wrap ul li {width: calc(25% - 30px); float: none; display: inline-block; margin: 10px; }
}

@media screen and (max-width:640px) {
	#main-bnr{padding: 70px 0; }
	#main-bnr .hd {margin-bottom:40px; }
	#main-bnr .hd p img{width: 150px; }
	#main-bnr .hd span{font-size: 15px; margin-top: 20px; }
  #main-bnr article .bnr_wrap ul {margin-left: 10px;}
  #main-bnr article .bnr_wrap ul li {display: block; float: left; width: calc(50% - 30px);}
	#main-bnr article .bnr_wrap ul li strong{font-size: 15px; font-weight: 400; margin-top: 13px; }
}

/* ------------------------------------------------------------------ */
/* 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%;}
}