/* ------------------------------------------------------------------ */
/* Color
main : 113f8c
point : 464c58
point : 353942
/* ------------------------------------------------------------------ */

/* ================================================================== */
/* Main Common
/* ================================================================== */
hr {
	-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;
}
/* ================================================================== */
/* Intro Section
/* ================================================================== */
#intro {margin-top: 80px; overflow: hidden}
#flex {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100wh;
	height: auto;
    margin: 0 auto;
	background: #444;
}
#flex .flex-item {
  position: relative;
  flex-grow: 1;
  display: flex;
  height: 100%;
  min-height: 550px;
  width:16.6%;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
  text-align: center;
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  background-size: cover;
  transition: .2s all;
  cursor: pointer;
  z-index: 1;
}

#flex .flex-item:first-child {border: none}
#flex .flex-item:nth-child(1) { background: url("../images/01.jpg") no-repeat center center / cover; }
#flex .flex-item:nth-child(2) { background: url("../images/02.jpg") no-repeat center center / cover; }
#flex .flex-item:nth-child(3) { background: url("../images/NEW03.jpg") no-repeat center center / cover; }
#flex .flex-item:nth-child(4) { background: url("../images/NEW04.jpg") no-repeat center center / cover; }
#flex .flex-item:nth-child(5) { background: url("../images/NEW05.jpg") no-repeat center center / cover; }
#flex .flex-item:nth-child(6) { background: url("../images/06.jpg") no-repeat center center / cover; }

#flex .flex-item:hover { flex-grow: 2;width:40%; background-color: rgba(255, 255, 255, 0.9)}

/* .flex-item:nth-child(2) {  background: #113f8c url('../images/2.jpg') no-repeat center center;}  */
#flex .flex-title {
  position: relative;
  width:100%;
  height: 100%;
  min-height: 100%;
  text-transform: uppercase;
  letter-spacing: .0em;
  color: #fff;
  background: rgba(0,0,0,0.5);
}
#flex .flex-title:hover {background: rgba(0,0,0,0.1);}
#flex .flex-title .flex-title-inner {position: absolute; top:450px; left: 0px; right: 0px; width:100%; background: rgba(255, 255, 255, 0.0);}
#flex .flex-title .flex-title-inner h1, .flex-title .flex-title-inner h3, .flex-title .flex-title-inner p {}
#flex .flex-title .flex-title-inner h1 {margin-bottom:10px; font-weight: 200;}
#flex .flex-title .flex-title-inner h3 {width:auto; padding: 5px; font-family: 'Lato', sans-serif; font-size: 22px; font-weight: 900; }
#flex .flex-title .flex-title-inner p {display: none; margin-top: 0px;}
#flex .flex-item:hover .flex-title-inner p {display: block; }

@media screen and (max-width: 1024px) {
	#flex {position: relative; display:block; }
    #flex .flex-item {float: left; width: 33.3% !important; min-height: 300px;border-left: none;  }
    #flex .flex-item, .flex-item:first-child {border-left: none; border-bottom: 0px solid rgba(255, 255, 255, 0.2) }
    #flex .flex-title .flex-title-inner {top: 0}
    #flex .flex-title .flex-title-inner p, #flex .flex-item:hover .flex-title-inner p {display: none;}
}

@media screen and (max-width: 768px) {
    #flex .flex-item {float: left; width: 50% !important; }
    #flex .flex-item:nth-child(even) { border-left: 0px solid rgba(255, 255, 255, 0.4);}
    #flex .flex-title {background: rgba(0,0,0,0.2);}
}
@media screen and (max-width: 640px) {
    #flex .flex-item {min-height: 300px;}
    #flex .flex-title {background: rgba(0,0,0,0.2);}
    #flex .flex-title .flex-title-inner {top: 0}
	#flex .flex-title .flex-title-inner h3 {font-size: 16px;}

}
@media screen and (max-width: 480px) {
    #flex .flex-item {min-height: 180px}
}

/* ------------------------------------------------------------------ */
/* Quick Section - Main Page
/* ------------------------------------------------------------------ */

#quick {padding:60px 0 ; text-align: center; background: #fff; }
#quick .quick-wrap h4 { text-align: center; font-weight: 400; text-transform: uppercase;}
/* #quick .quick-wrap h3:after {background:#332f25; content:""; display:block; height:2px;width:30px;margin:10px auto 20px;}*/
#quick .quick-wrap a{display: block}
#quick .quick-wrap hr {
	border: solid #666;
	border-width: 1px 0 0;
	width: 30px;
	margin: 10px auto 20px auto;
	height: 0;
	clear: both;
	text-align: left;
}
#quick .quick-wrap:hover h4 + hr {	border-color: #113f8c; width: 120px; text-align: center;}
#quick .quick-wrap p {margin-bottom: 0px; line-height: 1.7; font-size: 13px;}

#quick .quick-wrap a h4, #quick .quick-wrap a p, #quick .quick-wrap a:visited h4 {
    text-decoration: none; outline: 0; color: #666; -webkit-transition: color .3s ease-in-out; -moz-transition: color .3s ease-in-out; -o-transition: color .3s ease-in-out; transition: color .3s ease-in-out;
}
#quick .quick-wrap a:hover h4, #quick .quick-wrap a:focus h4:after, #quick .quick-wrap a:hover p { color: #113f8c !important; }


/* ------------------------------------------------------------------ */
/* gallery Section - Main Page
/* ------------------------------------------------------------------ */

#gallery {
    padding:  80px 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;
}
#gallery h2 {text-align: center; font-weight: 100; text-transform: uppercase; line-height: 1; color: #444;}
/* hr */
#gallery hr {
	border: solid #444;
	border-width: 3px 0 0;
	width: 100px;
	margin: 20px auto 40px 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;
}
#gallery:hover h2 + hr {	border-color: #113f8c; width: 140px; text-align: center;}

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

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



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

#output {padding: 60px 0; background: url('../images/main-output-bg.gif') 0 0 repeat;border-top: 1px solid #e5e5e5;}
#output .output-wrap h5 {font-weight: 400; border-bottom: 0px solid #ccc}
#output .output-wrap hr {
	border: solid #444;
	border-width: 1px 0 0;
	width: 60px;
	margin: 5px 0 20px;
	height: 0;
	clear: both;
	text-align: left;
}
#output .output-wrap:hover h5 + hr {border-color: #113f8c; width: 100px;}
#output .output-wrap.bnr1 a, #output .output-wrap.bnr2 a {display: block;}
#output .output-wrap.bnr1 a:hover, #output .output-wrap.bnr2 a:hover {font-weight: 600;}
#output .output-wrap.bnr1 {margin-bottom: 20px;}
#output .output-wrap.bnr2 {}
#output .output-wrap p {margin-bottom: 0; font-size: 14px;}

#output .output-wrap.contact .tel { margin-bottom: 20px; font-size: 32px; color: #444; line-height: 1; font-weight: 700;}
#output .output-wrap.contact .tel span {font-size: 28px; color: #999; font-weight: 700;}
#output .output-wrap.contact ul li {margin-bottom: 5px; line-height: 20px; font-size: 13px;font-weight: 200;}
#output .output-wrap.contact .button {width: 100%; margin-top: 20px; text-align: center;}

/* Board Output */
#output .output-wrap .board_out {}
#output .output-wrap .board_out .board_output {}
#output .output-wrap .board_out .board_output .board_output_1_tr {line-height: 30px;}
#output .output-wrap .board_out .board_output .board_output_1_tr .bd_out1 {}
#output .output-wrap .board_out .board_output .board_output_1_tr .bd_out1 a {}
#output .output-wrap .board_out .board_output .board_output_1_tr .bd_out1 a:hover {}



/* ------------------------------------------------------------------ */
/* 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 {padding: 30px 10px;}
    #quick .quick-wrap {height: 125px; margin:0 auto 0 auto; padding: 20px 0;border-bottom: 0px solid #eee}
    #quick .quick-wrap h4:after {margin-bottom: 20px}
    #quick .quick-wrap p {display: block; width: 80%; margin: 0 auto}

    #output {padding: 30px 10px !important; }
    #output .output-wrap.bnr1, #output .output-wrap.bnr2 {margin-bottom: 40px;}
    #output .output-wrap .board_out {margin-bottom: 40px;}

}

/* ------------------------------------------------------------------ */
/* Mobile Size
/* ------------------------------------------------------------------ */
@media screen and (max-width: 640px) {
    #quick .quick-wrap { height: auto;margin:0 auto 0 auto; padding-bottom: 20px;border-bottom: 1px solid #eee}
    #quick .quick-wrap:last-child {margin-bottom: 0; padding-bottom: 0; border: none}

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

    #customer .bnr2 { margin: 0;padding: 0px;}
    #customer .bnr2 .button {margin: 0;}
}

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