/* ------------------------------------------------------------------ */
/* Color
main : 61ae24
main : 1b7c83
point : 01a4a4
point : ff8080
/* ------------------------------------------------------------------ */

/* ================================================================== */
/* Main Common
/* ================================================================== */
hr {
	-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;
}
/* ================================================================== */
/* flex-wrap Section
/* ================================================================== */
#flex-wrap {margin-top: 80px; background: url('../images/main-intro-bg.jpg') no-repeat center bottom; background-size: cover; }
#flex {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}
.flex-item {
  flex-grow: 1;
  display: flex;
  width:20%;
  background-size: cover;
  transition: .2s all;
  cursor: pointer;
  padding: 0;
  box-sizing: border-box;
  text-align: center;
  border-left: 1px solid rgba(255, 255, 255, 0.4)
}
.flex-item:first-child {border: none}
.flex-item:hover { background-color: rgba(70, 76, 88, 0.7) }
.flex-item .flex-item-inner {width: 100%;height: 500px;}
/* .flex-item:nth-child(2) {  background: #00a1cb url('../images/2.jpg') no-repeat center center;}  */
.flex-title {
  display: block;
  width:100%;
  margin-top:150px;
  text-transform: uppercase;
  letter-spacing: .0em;
  color: #fff;
	vertical-align: middle;
  transition: .2s all;
}
.flex-title h1, .flex-title h3, .flex-title p {
	text-shadow: 0px 1px 2px rgba(0, 0, 0, .2);
	-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;
}
.flex-title h1 {margin-bottom:20px; font-weight: 200;}
.flex-title h3 {margin-bottom:20px; font-weight: 700;}
.flex-title p {display: none; margin-bottom:0;}
.flex-item .button {display: none;}
.flex-item:hover { flex-grow: 3;width:30%;}
.flex-item:hover p {display: block; padding: 0 20px;}


@media screen and (max-width: 768px) {
#flex {display:block;}
.flex-item, .flex-item:first-child {flex-direction: row; float: left; width:50%; height: auto; border-bottom: 1px solid rgba(255, 255, 255, 0.4) }
.flex-item:last-child {width: 100%;}
.flex-item:hover {width:auto;}
.flex-item .flex-item-inner {display: table; width: 100%; height: 100%; height: 150px;}
.flex-title {display: table-cell; margin-top:0;}
.flex-title h1 {display: none;}
.flex-title p {display: block; padding: 0 10px;}
}
@media screen and (max-width: 480px) {
	.flex-item, .flex-item:first-child {flex-direction: row; float: none; width:100%; height: auto; border-bottom: 1px solid rgba(255, 255, 255, 0.4) }
	.flex-item .flex-item-inner {height: 117px;}
	.flex-title h3 {margin-bottom:10px; }
}

/* ------------------------------------------------------------------ */
/* About us Section - Main Page
/* ------------------------------------------------------------------ */
#aboutus{
	padding: 80px 0;
	border-bottom: 1px solid #e5e5e5;
	background: #f5f5f5; /* Old browsers */
	background: -moz-linear-gradient(top,  #f5f5f5 0%, #ffffff 20%, #ffffff 30%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #f5f5f5 0%,#ffffff 20%,#ffffff 30%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to top,  #f5f5f5 0%,#ffffff 20%,#ffffff 30%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
#aboutus .hd {margin-bottom: 60px; }
#aboutus .hd p.txt{color: #333; font-size: 40px; font-weight: 100; text-align: center; letter-spacing: -1px; line-height: 1.3; margin-top: 0; }
#aboutus .hd p.txt span{font-weight: 400;}

#aboutus article .lst ul:after{display: block;clear: both;content: "";}
#aboutus article .lst ul li{float: left; width: calc(25% + 1px); text-align: center; display: table;  margin-left: -1px;}
#aboutus article .lst ul li .in{border: 0px solid  #eee; height: auto;  display: table-cell; width: 100%; vertical-align: middle; }
#aboutus article .lst ul li .in img {opacity: 0.6}
#aboutus article .lst ul li p{font-size: 18px; font-weight: 500; color: #333; margin-top: 30px; margin-bottom: 0; }

@media screen and (max-width:1200px) {
	#aboutus .hd{margin-bottom: 30px;}
	#aboutus .hd p.txt{font-size: 35px; margin-top: 0; }
	#aboutus article .lst ul li .in{height: 280px; border: none }
}

@media screen and (max-width:960px) {
	#aboutus{padding: 60px 0; }
	.hd {margin-bottom: 40px; }
	#aboutus .hd p.txt{font-size: 25px; }
	#aboutus .inBox {padding: 0 20px;}
	#aboutus article .lst ul li{width: calc(25% + 1px); margin-top: -1px;}
	#aboutus article .lst ul li .in{height: auto; padding: 10% 0px;}
	#aboutus article .lst ul li .in img{width: 90px; }
	#aboutus article .lst ul li p{font-size: 16px; }
}
@media screen and (max-width:480px) {
	#aboutus article .lst ul li{width: calc(50% + 1px); margin-top: -1px;}
	#aboutus article .lst ul li .in img{ width: auto; height: 60px; }
}


/* ------------------------------------------------------------------ */
/* About Section - Main Page
/* ------------------------------------------------------------------ */
#about {padding:  80px 0;
background: #f5f5f5; /* Old browsers */
background: -moz-linear-gradient(bottom,  #f5f5f5 0%, #ffffff 20%, #ffffff 30%); /* FF3.6-15 */
background: -webkit-linear-gradient(bottom,  #f5f5f5 0%,#ffffff 20%,#ffffff 30%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #f5f5f5 0%,#ffffff 20%,#ffffff 30%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
overflow: hidden;
}
#about .about-wrap {position: relative; }
#about .about-wrap h2 {text-align: center; font-weight: 100; color: #666;text-transform: uppercase; line-height: 1;}
/* #about h2:after {background:#fff; content:""; display:block; height:3px;width:150px;margin:20px auto 40px;} */
#about hr {
	border: solid #999;
	border-width: 3px 0 0;
	width: 100px;
	margin: 20px auto 40px auto;
	height: 0;
	clear: both;
	text-align: left;
}
#about:hover h2 {color:#61ae24;}
#about:hover h2 + hr { color:#61ae24; border-color: #61ae24; width: 140px; text-align: center;}
#about .about-wrap p {font-size: 22px; margin-bottom: 0; padding-bottom: 20px;line-height: 32px;text-align: center;color: #666; font-weight: 300;}
#about .about-wrap  p span {font-weight: 700; color: #01a4a4;}
#about .about-wrap .quote-left, #about .about-wrap .quote-right {
   position: absolute;
   top: 50%;
   color: #999;
   font-size: 40px;
   margin-top: -25px;
}
#about .about-wrap .quote-left { left: 5%; }
#about .about-wrap .quote-right { right: 5%; }
/*  Slider */
#about .flexslider .slides li {height: auto;}

/*  Paging
--------------------------------------------------------------- */
#about .flex-control-nav { position:absolute; width:200px; left: 50%; bottom: -30px; margin-left: -100px; text-align: center; z-index:599; }
#about .flex-control-nav li { display: inline-block; margin: 0 6px; zoom: 1; *display: inline; }
#about .flex-control-paging li a { border: 2px solid #999; border-radius: 10px; cursor: pointer; display: inline-block; width: 15px; height: 15px; margin: 1px; text-indent: -9999px;background-color: rgba(0, 0, 0, 0);}
#about .flex-control-paging li a:hover { background: #999;}
#about .flex-control-paging li a.flex-active { background: #999;}



/* Intro Section
------------------------------------------------------------------ */
#intro { position: relative; margin: 0 auto 0 ; overflow: hidden;}
/* FlexSlider Intro Slider Styles */
#intro .slides { overflow: hidden; margin: 0; padding: 0;}
#intro .flexslider .slides li {height: 100%; min-height: 650px;}
#intro .flexslider .slide01 {background: url("../images/1.jpg") repeat-x scroll 50% 50% / cover; height: 100%; width: 100%}
#intro .flexslider .slide02 {background: url("../images/2.jpg") repeat-x scroll 50% 50% / cover; height: 100%; width: 100%}
#intro .flexslider .slide03 {background: url("../images/3.jpg") repeat-x scroll 50% 50% / cover; height: 100%; width: 100%}
/* Slider Text
--------------------------------------------------------------- */
#intro .caption-wrap {display: table; width: 100%; height: 650px; }
#intro .caption {display: table-cell;text-align: center; padding: 0; vertical-align: middle;  }
#intro .caption h1, #intro .caption h2, #intro .caption h3 {text-shadow: 0px 1px 5px rgba(0, 0, 0, .3); }
#intro .caption h1 { font: 100px/90px 'NotoSansKR', sans-serif; font-weight: 100;  padding: 0; margin: 0 0 18px 0; }
#intro .caption h1 span, .caption a { font-weight: 400; }
#intro .caption h2 { font: 50px/50px 'NotoSansKR', sans-serif; font-weight: 100;padding: 0; margin: 0 0 18px 0;  }
#intro .caption h3 { font: 30px/40px 'NotoSansKR', sans-serif; font-weight: 400;padding: 0; margin: 0 0 18px 0;  }
#intro .caption p { font: 17px/36px "NotoSansKR",sans-serif; padding: 0; margin: 12px 8% 0; text-shadow: 0px 1px 2px rgba(0, 0, 0, .3); color: #fff ; background: #332f25;}
#intro .caption .color1 {color:#fff; float:none !important}
#intro .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: #00a1cb;
    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: #01a4a4; }
.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
--------------------------------------------------------------- */
#intro .flex-control-nav {
  position:absolute;
  width:360px; /* button 정렬을 위한 전체 넓이 값*/
  left: 50%;
  bottom: 10px;
  margin-left: -180px;
  text-align: center;
  z-index:599;
  }

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

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


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

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




/* ------------------------------------------------------------------ */
/* PC Size
/* ------------------------------------------------------------------ */
@media screen and (max-width: 1024px) {
	#gallery #photo_output .photo_box {height: 150px;}

	#about .about-wrap .quote-left { left: 5%; }
	#about .about-wrap .quote-right { right: 5%; }

}

/* ------------------------------------------------------------------ */
/* Tablet Size
/* ------------------------------------------------------------------ */
@media screen and (max-width: 768px) {

	#gallery {padding: 30px 0;}
	#gallery #photo_output .photo_box {height: 130px;}

	#quick, #output {padding: 30px 10px !important; }
	#about {padding-right: 20px; padding-left: 20px;}
	#about .about-wrap p {font-size: 16px; letter-spacing: -0.08em}
	#about .about-wrap .quote-left, #about .about-wrap .quote-right { display: none}

	#output .output-wrap.bnr1, #output .output-wrap.bnr2 {margin-bottom: 40px;}
	#output .output-wrap .board_out {margin-bottom: 40px;}
	#output .last {padding: 20px 30px; background: rgba(0, 0, 0, 0.1);}

}

/* ------------------------------------------------------------------ */
/* Mobile Size
/* ------------------------------------------------------------------ */
@media screen and (max-width: 640px) {
    #gallery #photo_output {margin-bottom: 20px;}
    #gallery #photo_output .photo_box {height: auto;}
    .gallery_out >table {float: left; width: 50%;margin: 0 0 -7px 0; padding: 0;}

		#output .output-wrap.bnr1, #output .output-wrap.bnr2 {float: left; width: 50%; min-height: 100px; padding: 10px; text-align: center;}
		#output .output-wrap.bnr1 hr, #output .output-wrap.bnr2 hr {margin: 5px auto;}
		#output .output-wrap.bnr1 {border-right: 1px solid #e5e5e5}
}

@media screen and (max-width: 480px) {
    .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%;}
}