/* ------------------------------------------------------------------ */
/* Color
main : 00a1cb
point : 464c58
point : 353942
/* ------------------------------------------------------------------ */

/* ================================================================== */
/* Main Common
/* ================================================================== */



/* ================================================================== */
/* Intro Section
/* ================================================================== */
#intro { position: relative; overflow: hidden; background: #fff url("../images/intro-bg.jpg") center top repeat-x;}
/* FlexSlider Intro Slider Styles */
.slides { overflow: hidden; margin: 0 auto; padding: 0;}
#intro .flexslider .slides li {min-height: 550px;}
#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: 150px 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: 50px/90px 'notokr', sans-serif; font-weight: 300; text-shadow: 0px 1px 5px rgba(0, 0, 0, .3); padding: 5px 15px; margin: 0 0 5px 0;
}
#intro .caption h1 span, .caption a { color: #adbd51; }
#intro .caption h2 {
  font: 40px/50px '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 h3 {
  font: 24px/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: 14px/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: #222; }
#intro .flex-direction-nav .flex-next, #intro .flex-direction-nav .flex-prev {position: absolute; }
#intro .flex-direction-nav .flex-next {
  right: 0px; background: #999 url(../images/direction-nav-right.png) no-repeat 53% 50%;
}
#intro .flex-direction-nav .flex-prev {
  left: 0px; background: #999 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 #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);
}
#intro .flex-control-paging li a:hover { background: #fff;}
#intro .flex-control-paging li a.flex-active { background: #fff;}


/* ------------------------------------------------------------------ */
/* Output Section - Main Page
/* ------------------------------------------------------------------ */
#output {padding: 60px 0;}
#output .wrap-box {}
#output .wrap-box .inner-box {height: 270px; padding: 30px 40px;border: 1px solid #e5e5e5;box-sizing: border-box;}
#output .wrap-box .inner-box h5 {font-weight: 600;}
#output .wrap-box .inner-box hr {
	border: solid #e5e5e5;
	border-width: 1px 0 0;
	width: 100%;
	margin: 5px 0 30px;
	height: 0;
	clear: both;
	text-align: left;
}
#output .wrap-box .box2 i {padding: 0 0 20px 0 ;font-size: 80px;}
#output .wrap-box .box2 a:hover, #output .wrap-box .box2 a:hover i {color: #464c58}

#output .wrap-box .inner-bnr div {height: 125px; padding: 30px; color: #fff;}
#output .wrap-box .inner-bnr div p {font-size: 12px;}
#output .wrap-box .inner-bnr div i {float: right; padding-left: 10px; font-size: 40px;}
#output .wrap-box .inner-bnr .bnr1 {margin-bottom: 20px; background: #656e80;}
#output .wrap-box .inner-bnr .bnr2 {background: #464c58;}

/* box, button Hover */
.box2, .box2:visited,
.bnr1, .bnr1:visited,
.bnr2, .bnr2:visited {
    -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; transition: all .2s ease-in-out;
}
.box2, .box2:visited {
    text-decoration: none;
    letter-spacing: 0;
    border: none;
    cursor: pointer;
    height: auto;
}
.box2 a, .box2 a:hover {color: #fff;}
.box2:hover { background: #464c58; color: #fff; }
.bnr1:hover, .bnr2:hover { background: #444 !important; color: #fff; }

/* Board Output */
#output .wrap-box .inner-box .board_out {}
#output .wrap-box .inner-box .board_out .board_output {}
#output .wrap-box .inner-box .board_out .board_output .board_output_5_tr img {vertical-align: middle !important;}
#output .wrap-box .inner-box .board_out .board_output .board_output_5_tr {font-size: 13px; line-height: 29px;}
#output .wrap-box .inner-box .board_out .board_output .board_output_5_tr .bd_out1 {}
#output .wrap-box .inner-box .board_out .board_output .board_output_5_tr .bd_out1 a {font-size: 13px;}
#output .wrap-box .inner-box .board_out .board_output .board_output_5_tr .bd_out1 a:hover {}