@charset "utf-8";
/* CSS Document */

@import "reset.css";
@import "spacer.css";


body {
 font-size: 62.5%;
 padding: 0;
 background-color: #F9F7F3;
 overflow:hidden;
}


img {
    width: 100%;
    height: auto;
}
/*IE8*/
@media \0screen {  img {  width: auto; /* for ie 8 */  }}

object {  width:100%;   height:auto;}


#loading {
  background-image:url('images/loading.gif');
  background-repeat:no-repeat;
  background-position:center;
  height:100px;
}

a img {  border: none;}

a {  text-decoration: none; }

a:hover, a:active, a:focus {
        opacity: 0.6;
        filter: alpha(opacity=60);
        -ms-filter: "alpha( opacity=60 )";
}

a img:hover, a:active, a:focus {
        opacity: 0.6;
        filter: alpha(opacity=60);
        -ms-filter: "alpha( opacity=60 )";
}


h2 {
 margin: 2rem 0 0.5rem 0;
 padding: 0.3rem;
 border-bottom: solid 1px #ccc;
 background-color: #eee;
}

h3 {
 padding: 0.3rem 0;
 border-bottom: solid 1px #ccc;
}



#container{
 width:100%;
 margin:0 auto;
}


div.clear{
 clear:both;
}

/*Loading*/
.square {
 width: 180px;
 height: 160px;

 margin: 10px;
 padding: 10px 20px;
 color: #000;
 background: #fff;
 font-family: Helvetica, Arial, Sans-Serif;
}

/* ============================================= */
/* Header CSS                                    */
/* ============================================= */

#header {
 width:100%;
 height:auto;
 position:relative;
}



/* ============================================= */
/* Contents CSS                                  */
/* ============================================= */

#contents{
 width:100%;
 height:auto;
 margin: 0 auto;
}

.wrap{
 width:100%;
 height:auto;
}

.slidewrap{
 width:100%;
 height:auto;
 min-height:100%;
}

.cts-bg{ width:100%; height:auto; margin:0 auto; float:left; z-index:1;}
.prof-area{ width:15%; float:left; position:absolute; left:19%; bottom:30%; z-index:100;}
.gmap-link{ width:11%; float:left; position:absolute; right:14%; top:40%; z-index:100;}
.thum-area{ width:36%; float:left; position:absolute; left:19%; bottom:13%; z-index:100;}
.thum{
 float:left;
 width:9.090909090909091%;
 height: auto;

 padding-right:1%;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
}




div.box02{
 float:left;
 width:50%;
 height: auto;
 padding-left:0.78125%;
 padding-right:0.78125%;
 background-color:#FF0;

 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
}

div.box02r{
 float:left;
 width: 48.437%;
 height: auto;
 margin-left:0.78125%;
 margin-right:0.78125%;
 padding:1%;
 background-color:#ccc;

 border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;

 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
}


div.box02n{
 float:left;
 width: 48.437%;
 height: auto;
 margin-left:0.78125%;
 margin-right:0.78125%;
 padding:1%;
 background-color:#222;

 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
}


/* ============================================= */
/* Footer CSS                                    */
/* ============================================= */

#footer {
  width:100%;
  height:105px;
  position:relative;
}

#footer-L{
  float:left;
  width:50%;
  height:105px;

  background-image:url(../images/footerbg-l.png);
  background-repeat:no-repeat;

  -moz-background-size:100% auto;
  background-size:100% auto;
}

#footer-R{
  float:left;
  width:50%;
  height:105px;

  -moz-background-size:100% auto;
  background-size:100% auto;

  position:relative;
}

#branding{
 margin-top:25px;
 width:16.25%;

 height:auto;
}



/* ============================================= */
/* layoutBox CSS                                 */
/* ============================================= */

div.box-line01{
 width:100%;
 height: auto;
 padding-left:1.35%;
 padding-right:1.35%;
 margin:0 auto;

 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;

 position:relative;
}


div.box-line02{
 float:left;
 width:50%;
 height: auto;
 padding-left:1.35%;
 padding-right:1.35%;

 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
}

div.box-line03{
 float:left;
 width:33.3%;
 height: auto;
 padding-left:1.35%;
 padding-right:1.35%;

 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
}


div.box-line04{
 float:left;
 width:25%;
 height: auto;
 padding-left:1.35%;
 padding-right:1.35%;

 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
}


div.box-line05{
 float:right;
 width:20%;
 height: auto;
/*  padding-left:1.35%;
 padding-right:1.35%;  */
 padding-top:0.5%;

 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
}

div.box-line06{
 float:left;
 width:16.66666666666667%;
 height: auto;
 padding-left:1.35%;
 padding-right:1.35%;
 padding-top:0.5%;

 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
}



div.box-line10{
 float:left;
 width:10%;
 height: auto;
 padding-left:1.35%;
 padding-right:1.35%;

 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
}


/***************  ul li Ver.  ****************************/

ul.line{
 float:left;
 width:100%;
 height: auto;
 display:block;
 margin:0 0 8px 0;
}


ul.line01 li{
 width:97.3%;
 height: auto;
 padding-left:1.35%;
 padding-right:1.35%;

 margin-left:1.35%;
 margin-right:1.35%;

 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;

 position:relative;
}

ul.line02 li{
 width:47.3%;/*base 50%*/
 height: auto;
 padding:1%;

 margin-left:1.35%;
 margin-right:1.35%;

 list-style:none;
 float:left;
 display:block;

 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
}

ul.line03 li{
 width:30.6%;/*base 33.3%*/
 height: auto;
 padding-left:1%;

 margin-left:1.35%;
 margin-right:1.35%;
 list-style:none;
 float:left;
 display:block;

 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
}

ul.line04 li{
 width:22.3%;/*base 25%*/
 height: auto;
 padding-left:1%;

 margin-left:1.35%;
 margin-right:1.35%;
 list-style:none;
 float:left;
 display:block;

 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
}

ul.line05 li{
 width:17.3%;/*base 20%*/
 height: auto;

 margin-left:1.35%;
 margin-right:1.35%;
 list-style:none;
 float:left;
 display:block;

 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;

 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
}



/* ============================================= */
/* flexslider CSS                                */
/* ============================================= */
.flexslider {margin: 0 auto; padding: 0; width: 100%; }
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;}
.flexslider .slides img {max-width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}


.no-js .slides > li:first-child {display: block;}


/* FlexSlider Default Theme
*********************************/
.flexslider {background: #fff;  position: relative;  zoom: 1;}
.flexslider .slides {zoom: 1;}
.flexslider .slides > li {position: relative;}
.flex-container {zoom: 1; position: relative;}

/* Direction Nav */
.flex-direction-nav { height: 0; }
.flex-direction-nav li a {width: 52px; height: 52px; margin: -13px 0 0; display: block; background: url(images/bg_direction_nav.png) no-repeat; position: absolute; top: 50%; cursor: pointer; text-indent: -999em;}
.flex-direction-nav li .next {background-position: -52px 0; right: -18px;}
.flex-direction-nav li .prev {left: -17px;}
.flex-direction-nav li .disabled {opacity: .3; filter:alpha(opacity=30);}



/* Control Nav */

#slide-nav{
 width:30.20833333333333%;
 position:absolute;
 right:-15%;
 top:10%;

  background-image:url(../images/footer-navbg.png);
    background-repeat:no-repeat;
    -moz-background-size:100%;
    background-size:100%;

}

.flex-control-nav { width: 100%; text-align: center; position: relative;}

.flex-control-nav li {
  margin: 0;
  padding:0;

  width: 20%;
  height: auto;

  float:left;

  box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;

 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;

  display: inline-block;
  zoom: 1;
  *display: inline;
}
.flex-control-nav li:first-child {margin: 0;}

.flex-control-nav li a {
 display: block;
 cursor: pointer;
    text-indent: -999em;
}
.flex-control-nav li a:hover {
  width: 100%;
  height: auto;

  background: url(../images/nav-hov.png) no-repeat;

  -moz-background-size:100%;
  background-size:100%;

  margin: 0;
  padding:0;
}




#othernav {
  margin: 0;
  padding:0;
  width: 20%;
  height: auto;
  float:left;
  box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
  display: inline-block;
  zoom: 1;
  *display: inline;
}

#othernav a {
 display: block;
 cursor: pointer;
    text-indent: -999em;
}

#othernav a:hover {
width: 100%;
height: auto;
background: url(../images/nav-hov.png) no-repeat;
-moz-background-size: 100%;
background-size: 100%;
margin: 0;
padding: 0;
}