/* ------------------------------------------------------------------ */
/* Color
main : 0e385e
point : 464c58
point : 353942
/* ------------------------------------------------------------------ */

/* ================================================================== */
/* Main Common
/* ================================================================== */
/* hr */
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;    
}
/* ================================================================== */
/* Intro Section
/* ================================================================== */
#intro { position: relative; margin-top: 80px;overflow: hidden; }
/* FlexSlider Intro Slider Styles */
.slides { overflow: hidden; margin: 0; padding: 0;}
#intro .flexslider .slides li {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 .caption {/* position: relative; */ text-align: left; width: 95%; margin: 20% auto auto auto; padding: 0; border: 0px solid #332f25; z-index: 1}
#intro .caption::after {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 100%;
    background: #fff ;
    background-size: cover !important;
	-webkit-background-size: cover !important;
    background-attachment: fixed;
    opacity: 0.3;
    filter:alpha(opacity=30);
    
    z-index: -1;
} 
#intro .caption h1, .caption h2, .caption h3, .caption p { display: table; background: rgba(0,0,0,0.7) }
#intro .caption h1 { font: 70px/80px 'notokr', sans-serif; font-weight: 100; text-shadow: 0px 1px 5px rgba(0, 0, 0, .3); padding: 5px 15px; margin: 0 0 5px 0; }
#intro .caption span, .caption a { color: #00a1cb; font-weight: 600;}
#intro .caption h2 { font: 42px/60px 'notokr', sans-serif; font-weight: 300;padding: 5px 15px; margin: 0 0 5px 0; text-shadow: 0px 1px 5px rgba(0, 0, 0, .3); }
#intro .caption h3 { font: 30px/40px 'notokr', sans-serif; font-weight: 400;padding: 5px 15px; margin: 0 0 5px 0; text-shadow: 0px 1px 5px rgba(0, 0, 0, .3); }
#intro .caption p { font: 17px/36px "notokr",sans-serif; padding: 5px 15px; margin: 0; text-shadow: 0px 1px 2px rgba(0, 0, 0, .3); color: #fff ;}
#intro .caption .color1 {color:#fff; float:none !important}
#intro .caption .color2 {color:#222; float:none !important}

/* Direction Navigation
--------------------------------------------------------------- */
#intro .flex-direction-nav a {
    display: block;
    width: 40px;
    height: 66px;
    margin: -33px 0 0 0;
    background-color: #353942;
    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;
}

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

/*  Paging
--------------------------------------------------------------- */
#intro .flex-control-nav { position:absolute; width:200px; left: 50%; bottom: 10px; margin-left: -100px; 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 #0e385e; border-radius: 10px; cursor: pointer; display: inline-block; width: 15px; height: 15px; margin: 1px; text-indent: -9999px;background-color: rgba(0, 0, 0, 0);}
#intro .flex-control-paging li a:hover { background: #0e385e;}
#intro .flex-control-paging li a.flex-active { background: #0e385e;}

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



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

#quick {padding:60px 0 ; text-align: center; background: #fff; }
#quick .quick-wrap h3 {font-size: 28px;text-align: center; font-weight: 400; text-transform: uppercase; font-weight: 200;}
/* #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 h3 + hr {	border-color: #0e385e; width: 120px; text-align: center;}
#quick .quick-wrap p {margin-bottom: 0px; line-height: 1.7; font-size: 12px;}

#quick .quick-wrap a h3, #quick .quick-wrap a p, #quick .quick-wrap a:visited h3 { 
    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 h3, #quick .quick-wrap a:focus h3:after, #quick .quick-wrap a:hover p { color: #0e385e !important; }





/* ------------------------------------------------------------------ */
/* About Section - Main Page
/* ------------------------------------------------------------------ */

#about { padding:  80px 0; background: #ccc url("../images/main-about-bg2.jpg") center center no-repeat;background-size: cover; background-attachment: fixed; }
#about .about-wrap {position: relative; }
#about .about-wrap h2 {text-align: center; font-weight: 100; color: #fff;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 #fff;
	border-width: 3px 0 0;
	width: 100px;
	margin: 20px auto 40px auto;
	height: 0;
	clear: both;
	text-align: left;
}
#about:hover h2 + hr {	border-color: #ffca00; 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: #fff; font-weight: 300;}
#about .about-wrap  p span {font-weight: 700; color: #ffca00;}
#about .about-wrap .quote-left, #about .about-wrap .quote-right {
   position: absolute;
   top: 50%;
   color: #fff;
   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 #fff; 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: #fff;}
#about .flex-control-paging li a.flex-active { background: #fff;}


/* ------------------------------------------------------------------ */
/* 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: #0e385e; 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: #fff;}
#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: 70px;
	margin: 5px 0 20px;
	height: 0;
	clear: both;
	text-align: left;
}
#output .output-wrap:hover h5 + hr {	border-color: #444; width: 100%; text-align: left;}
#output .output-wrap.contact .tel { margin-bottom:  20px;font-size: 36px; color: #444; line-height: 1;letter-spacing: 0em}
#output .output-wrap.contact ul li {margin-bottom: 5px;}
#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) {
    
    #intro {padding: 0; height: auto;}
    #intro .flexslider .slides li {min-height: 350px; margin: 0; padding: 0;}
    #intro .caption { width: 90%; margin: 20% auto 20% auto; }
    #intro .caption h1 { font-size: 42px; line-height: 42px;  }
    #intro .caption h2 { font-size: 30px; line-height: 30px; }
    #intro .caption h3 { font-size: 20px; line-height: 20px;}
    #intro .caption p { font-size: 14px; }        
    
    #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}  

    #quick {padding-bottom: 10px;}
    #quick .quick-wrap {height: 125px; margin:0 auto 0 auto; padding: 20px 0;border-bottom: 0px solid #eee}
    #quick .quick-wrap h3:after {margin-bottom: 20px}
    #quick .quick-wrap p {display: block; width: 80%; margin: 0 auto}    
    
    #customer .customer-inner {margin: 0 auto;}
    #customer .bnr {width: 100%;}
    
    #output .output-wrap  .board_out {margin-bottom: 30px;}
    
}

/* ------------------------------------------------------------------ */
/* Mobile Size 
/* ------------------------------------------------------------------ */
@media screen and (max-width: 640px) {
    #intro .flexslider .slides li {min-height: 300px; margin: 0; padding: 0;}
    #intro .caption {text-align: center;}
    #intro .caption h1, #intro .caption h2, #intro .caption h3, #intro .caption p { display: table; width: 100%;background: rgba(0,0,0,0.7) ; letter-spacing: -0.05em; }
    #intro .caption h1 { font-size: 24px; line-height: 42px;  }
    #intro .caption h2 { font-size: 18px; line-height: 30px; }
    #intro .caption h3 { font-size: 14px; line-height: 20px;}
    #intro .caption p { font-size: 12px; }         
    #intro .flex-direction-nav {display: none}
    
    #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: 50%;margin: 0 0 -7px 0; padding: 0;}
    
    #customer .customer-inner {width: 100%;text-align: center;}
    #customer .customer-inner div {float: none}
    #customer .customer-inner h3 {text-align: center;}
    #customer .customer-inner h3:after {margin:10px auto 20px;}
    
    #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%;}    
}