/* ------------------------------------------------------------------ */
/* Color
main : 1673c4     blue
point : f2432f     red
point : 6782b8    blue2

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

/* Intro Section
------------------------------------------------------------------ */
.intro-inner { display:table; width:100%;}
.intro-left { float:left; display:block; width:66.9%;}
.intro-right { float:right; display:table; width:33%; height:100vh; background:rgba(255, 255, 255, 0.0); z-index:3;}
.intro-right .intro-right-wrap { display:table-cell; vertical-align:middle;}

@media screen and (max-width: 768px) {
  .intro-inner { height:auto;}
  .intro-left, .intro-right { float:none;}
  .intro-left { width:100%;}
  .intro-right { position:absolute; left:0; right:0; bottom:30px; width:100%; height:auto;}
}
@media screen and (max-width: 480px) {
  .intro-right { bottom:30px;}
}

#intro { position:relative; overflow:hidden; background:url("../images/intro-bg.jpg") repeat-x scroll 50% 50% / cover; height:100%; width:100%;}
/* FlexSlider Intro Slider Styles */
.slides { overflow:hidden; margin:0; padding:0;}
.flexslider .slides li { min-height:650px;}

/* Slider Text
--------------------------------------------------------------- */
.caption-wrap { display:table; width:100%; height:100%;}
.caption { display:table-cell; text-align:left; 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, .caption h2, .caption h3, .caption p { text-shadow:0px 1px 5px rgba(0, 0, 0, .3);}
.caption h1 { font:100px/90px 'Oswald', sans-serif; font-weight:300; padding:0; margin:0 0 18px 0;}
.caption h1 span, .caption a { color:#222; font-weight:700;}
.caption h2 { font:50px/50px 'NotoSansKR', sans-serif; font-weight:200; padding:0; margin:0 0 18px 0; line-height:1.2;}
.caption h3 { font:30px/40px 'NotoSansKR', sans-serif; font-weight:400; padding:0; margin: 0 0 18px 0;}
.caption p { font: 17px/36px "NotoSansKR",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;}

/*  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:40px;}
#intro .scrolldown a:hover { color:#f2da00;}

@media screen and (max-width: 768px) {
  #intro { padding:0; height:auto;}
  .flexslider .slides li { min-height:430px; margin:0; padding:0;}

  .caption { display:block; width:90%; margin:220px auto auto auto; text-align:center;}
  .caption h1 { font-size:48px; line-height:42px;}
  .caption h2 { font-size:36px; line-height: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 { margin-top:160px;}
  .caption h1 { font-size:34px;}
  .caption h2 { font-size:24px;}
  .caption h3 { font-size:20px;}
  .caption p { font-size:12px;}
  #intro .scrolldown { display:none;}
}

#main-bnr { margin-top:0; padding:0; text-align:center;}
#main-bnr .hd { margin-bottom:60px;}
#main-bnr .hd span { display:block; color:#666; font-size:18px; font-weight:500; margin-top:0px; line-height:1.3;}

#main-bnr article .lst_adv ul { margin-left:10px;}
#main-bnr article .lst_adv ul:after { display:block; clear:both; content:"";}
#main-bnr article .lst_adv ul li { 
  position:relative;
  float:left;
  width:calc(50% - 20px);
  overflow:hidden;
  margin-left:10px;
  margin-bottom:10px;
  box-shadow:0 0px 5px rgba(0, 0, 0, 0.15);
}
#main-bnr article .lst_adv ul li a { display:block; height:0; padding-bottom:100%; position: relative;transition:all .3s;}
#main-bnr article .lst_adv ul li .bg{
  display:block;
  position:absolute;
  top:-9999px;
  right:-9999px;
  bottom:-9999px;
  left:-9999px;
  margin:auto;
  max-width:100%;
  max-height:100%;
  width:100%;
  height:100%;
  background:#fff;
}

#main-bnr article .lst_adv ul li .box_color1 { background:#d02029;}
#main-bnr article .lst_adv ul li .box_color2 { background:#1673c4;}
#main-bnr article .lst_adv ul li .box_color3 { background:#6782b8;}

#main-bnr article .lst_adv ul li .bg:after { content:""; transition:all .5s;}
#main-bnr article .lst_adv ul li .bg img {
 width:110%; 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 .lst_adv 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 .lst_adv ul li .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 .lst_adv ul li .txt p { display:block; margin-top:10px; margin-bottom:0; font-size:18px; color:#fff; font-weight:600; text-align:center;}
#main-bnr article .lst_adv 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 .lst_adv ul { margin-left:-5px;}
	#main-bnr article .lst_adv ul li { width:calc(50% - 5px); margin-left:5px;}
	#main-bnr article .lst_adv ul li .txt img { max-width:88px;}
}

@media screen and (max-width:768px) {
	#main-bnr { padding:0 0 30px;}
	#main-bnr article .lst_adv { overflow:hidden; padding:0 50px;}
	#main-bnr article .lst_adv ul { margin-top:-5px;}
	#main-bnr article .lst_adv ul li { width:calc(28% - 2px); float:none; display:inline-block; margin-top:5px;}
  #main-bnr article .lst_adv ul li .txt img { max-height:46px;}
}

@media screen and (max-width:640px) {
  #main-bnr article .lst_adv { overflow:hidden; padding:0;}
  #main-bnr article .lst_adv ul li .txt p { margin-top:0px; font-size:12px !important; font-weight:400;}
}

/* ------------------------------------------------------------------ */
/* Customer Section - Main Page
/* ------------------------------------------------------------------ */
#customer { padding:60px 0 60px 0; background:#fff;}
#customer .customer-inner { padding:0 0;}
#customer .item-box { margin-bottom:0;}
#customer .item-box .item-left { float:left; vertical-align:top; margin-right:20px;}
#customer .item-box .item-left i { font-size:28px;}
#customer .item-box .item { float:left; display:table-cell; vertical-align:middle;}
#customer .item-box .item h5 { padding-top:4px; line-height:1; font-family:'NotoSansKR', sans-serif;}
#customer .item-box .item 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:0 20px;}
    #customer .item-box { float:left; width:50% !important; margin-bottom:30px;}
    #customer .item-box:last-child { float:left !important;}
    #customer .item-box .item-left, #customer .item-box .item { float:none; text-align:center;}
    #customer .item-box .item-left { display:block; margin:0 0 10px 0;}
    #customer .item-box .item { display:block; vertical-align:top;}
    #customer .item-box .item h5 { margin-bottom:10px; line-height:1;}
    #customer .item-box .item P { margin:0; font-size:12px;}
}

@media screen and (max-width: 480px) {
  #customer .item-box { min-height:100px;}
  #customer .item-box:nth-child(even) { text-align:right;}
  #customer .item-box .item-left { margin-right:0;}
  #customer .item-box .item-left i { font-size:36px;}
}
/* ------------------------------------------------------------------ */
/* 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:'NotoSansKR', 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%;}

/*  interior
--------------------------------------------------------------- */
#output { padding:60px 0; background:#fff;}
#output h5 { margin-bottom:20px; font-weight:400; border-bottom:1px solid #ccc;}
#output .tel { font-size:36px; color:#444; line-height:1; letter-spacing:0em;}
#output ul li { margin-bottom:5px;}
#output .button { width:100%; text-align:center;}

@media screen and (max-width: 1024px) {
    #portfolio #photo_output .photo_box { height:150px;}
}

@media screen and (max-width: 768px) {
    #portfolio { padding:30px 0;}
    #portfolio #photo_output .photo_box { height:130px;}

    #about, #quick, #output { padding:30px 10px !important;}
    #about p { font-size:16px; letter-spacing:-0.08em;}

    #quick { padding-bottom:10px;}
    #quick h3:after { margin-bottom:20px;}
    #quick p { display:block;}

    #customer .customer-inner { margin:0 auto;}

    #output .board_out { margin-bottom:30px;}

}

@media screen and (max-width: 640px) {
    #quick .quick-box .quick-txt { opacity:1; transform:scale(1); transition:0.3s ease; color: #fff;}
    #quick .quick-box .quick-txt { background:rgba(0, 0, 0, 0.5); transform:scale(1); opacity:1;}
    #quick .end p { margin-bottom:0; padding-bottom:0; border-bottom:none;}

    #portfolio #photo_output { margin-bottom:20px;}
    #portfolio #photo_output .photo_box { height:auto;}
    .gallery_out >table { float:left; width:50%; margin:0 0 -7px 0; padding:0;}

}

@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%;}
}