@charset "utf-8";
/* CSS Document */
.container { position: relative; margin: 0 auto; width: 960px; height: 100%; text-align: left; clear: both; overflow: hidden;}
#header { position: fixed; z-index: 9999; width: 100%; height: 90px; background: #fff; box-shadow: 0px 8px 9px rgba(150,170,175,0.15); overflow: hidden;}

.brand { float: left; width: 200px; height: 90px; background: url(../images/logo.png) no-repeat left center;}
.brand a { display: block; width: 100%; height: 100%;}

.navi { float: right;}
.navi ul { padding: 35px 0 0 0;}
.navi li { float: left; padding: 0 10px; list-style: none;}
.navi li a { display: block; float: left; font-size: 17px; color: #0DB3AA; text-decoration: none; transition: all 0.2s ease-in-out 0s;}
.navi li a.cur { border-bottom: 2px solid #0DB3AA;}

#home { position: relative; width: 100%; min-height: 100%; z-index: auto; overflow: hidden;}
#about, #news, #service, #clients, #recruit, #contact { position: relative; width: 100%; min-height: 100%; z-index: auto;
background: #f3f3f3;
background: -moz-linear-gradient(top,  #ffffff 0%, #f3f3f3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f3f3f3));
background: -webkit-linear-gradient(top,  #ffffff 0%,#f3f3f3 100%);
background: -o-linear-gradient(top,  #ffffff 0%,#f3f3f3 100%);
background: -ms-linear-gradient(top,  #ffffff 0%,#f3f3f3 100%);
background: linear-gradient(top,  #ffffff 0%,#f3f3f3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f3f3f3',GradientType=0);
}

/*BANNER*/
#slides { display: none; position: relative; z-index: 0;}
.slidesjs-pagination .active { color:red;}
#slides .slidesjs-navigation { position: absolute; left: -100em; bottom: 0; margin-top:3px;}
#slides .slidesjs-previous { margin-right: 5px; float: left;}
#slides .slidesjs-next { margin-right: 5px; float: left;}
.slidesjs-pagination { position: absolute; left: 10px; top: 100px; z-index: 10; margin: 6px 0 0;  list-style: none;}
.slidesjs-pagination li { float: left; margin: 0 1px;}
.slidesjs-pagination li a { display: block; width: 13px; height: 0; padding-top: 13px; background-image: url(../images/pagination.png); background-position: 0 0; float: left; overflow: hidden;}
.slidesjs-pagination li a.active,
.slidesjs-pagination li a:hover.active { background-position: 0 -13px;}
.slidesjs-pagination li a:hover { background-position: 0 -26px;}
#slides a:link,
#slides a:visited { color: #333;}
#slides a:hover,
#slides a:active { color: #9e2020;}

    a.slidesjs-next,
    a.slidesjs-previous,
    a.slidesjs-play,
    a.slidesjs-stop {
      background-image: url(../images/btns-next-prev.png);
      background-repeat: no-repeat;
      display:block;
      width:12px;
      height:18px;
      overflow: hidden;
      text-indent: -9999px;
      float: left;
      margin-right:5px;
	  display: none;
    }

    a.slidesjs-next {
      margin-right:10px;
      background-position: -12px 0;
    }

    a:hover.slidesjs-next {
      background-position: -12px -18px;
    }

    a.slidesjs-previous {
      background-position: 0 0;
    }

    a:hover.slidesjs-previous {
      background-position: 0 -18px;
    }

    a.slidesjs-play {
      width:15px;
      background-position: -25px 0;
    }

    a:hover.slidesjs-play {
      background-position: -25px -18px;
    }

    a.slidesjs-stop {
      width:18px;
      background-position: -41px 0;
    }

    a:hover.slidesjs-stop {
      background-position: -41px -18px;
    }

.mask { position: absolute; right: -30%; top: 0; width: 30%; height: 100%; background-color: rgba(11,163,155,0.7); *background-image: url(../images/mask-bg.png); overflow: hidden; transition: all 0.2s ease-in-out 0s;}
.news { position: absolute; left: 50px; bottom: 300px; color: #fff; text-align: left;}
.news h3 { font-size: 17px;}
.news ul { width: 320px;}
.news li { padding: 5px 0 0; font-size: 13px;}
.news li a { color: #fff;}

.links { position: absolute; left: 40px; bottom: 160px;}
.links ul { width: 320px;}
.links li { position: relative; float: left; padding-top: 80px; width: 80px; height: 20px; text-align: center;}
.links li a { font-size: 12px; color: #fff; text-decoration: none;}
.links li a span { position: absolute; left: 10px; top: 10px; display: block; width: 60px; height: 60px; background-color: rgba(255,255,255,0.9); border-radius: 100%; cursor: pointer;}
.links li a:hover span { left: 5px; top: 5px; padding: 5px; background-color: rgba(255,255,255,1);}
.icon-contact { background: url(../images/icon-contact.png) no-repeat 50% 50%;}
.icon-links { background: url(../images/icon-links.png) no-repeat 50% 50%;}
.icon-map { background: url(../images/icon-map.png) no-repeat 50% 50%;}
.icon-facebook { background: url(../images/icon-facebook.png) no-repeat 50% 50%;}

/*PAGES*/
.page-title { position: relative; padding: 15% 0 3% 0; font-size: 25px; color: #0DB3AA;}
.page-content { padding-bottom: 6%; width: 100%; overflow: hidden;}
.page-content p { margin-bottom: 1.8em; line-height: 1.8;}
.page-left { padding-right: 30px;}

.page-filter { position: absolute; right: 0; top: 69%; width: 120px; font-size: 13px; line-height: 20px; border: 1px solid #e4e4e4; border-radius: 3px; overflow: hidden;}
.filter-title { padding: 4px 6px; background: #fff; color: #666; box-shadow: inset 3px 3px 6px rgba(0,0,0,0.1); cursor: pointer;}
.filter-title select { width: 110px; height: 20px; border: 0; background-color: transparent;}
.filter-detail { display: none; border-top: 1px solid #e4e4e4;}
.filter-detail a { display: block; padding: 4px 8px; text-decoration: none;}
.filter-detail a:hover { background-color: #0BA199; color: #fff;}

.border-full { border-radius: 100%; overflow: hidden; transition: all 0.2s ease-in-out 0s;}
.border-small { background-color: #fff; border: 1px solid #e4e4e4; border-radius: 1em; overflow: hidden; transition: all 0.2s ease-in-out 0s;}
.border-gray { padding: 4px; height: auto; background-color: #fff; border: 1px solid #e4e4e4; border-radius: 3px; overflow: hidden; transition: all 0.2s ease-in-out 0s;}

.page-sorts { padding: 30px 0; width: 100%; text-align: center; clear: both; overflow: hidden;}
.page-sorts a { margin: 0 2px; padding: 4px; color: #0BA199; line-height: 24px; text-decoration: none;transition: all 0.2s ease-in-out 0s;}
.page-sorts a:hover, .page-sorts a.cur { padding: 0; color: #ffffff;}
.page-sorts a span { padding: 3px 8px; background-color: #d7d7d7; border-radius: 100%;}
.page-sorts a:hover span, .page-sorts a.cur span { padding: 7px 12px; background-color: #0BA199; }
.page-prev { background: url(../images/prev-arrow.png) no-repeat 50% 50%;}
.page-prev:hover { background: url(../images/prev-arrow-hover.png) no-repeat 50% 50%;}
.page-next { background: url(../images/next-arrow.png) no-repeat 50% 50%;}
.page-next:hover { background: url(../images/next-arrow-hover.png) no-repeat 50% 50%;}

/*ABOUT*/
#A-1, #A-2, #A-3, #A-4 { float: left; margin: 0 8px 16px 8px; width: 180px; height: 180px; text-align: center; font-size: 29px; font-weight: 500;}
#A-2, #A-3 { background-color: #E9E3DB; color: #8D897D;}
#A-4 { background-color: #0BA199; color: #ffffff;}
#A-1 span, #A-2 span, #A-3 span, #A-4 span { display: block;}
.txt-tw { padding-top: 58px; height: 40px; line-height: 40px;}
.txt-en { height: 24px; line-height: 24px; font-size: 16px;}

/*NEWS*/
.page-news li { padding: 15px 0 0; width: 100%; background: url(../images/list-dot.png) no-repeat left 21px; line-height: 20px; border-bottom: 1px solid #e3e3e3; overflow: hidden; clear: both; cursor: pointer;}
.page-news li.selected { border-bottom: none;}
.page-news li span { display: block; float: left; margin: 0 0 0 15px; padding: 0 10px; font-size: 12px; text-align: center; border-radius: 3px;}
.txt-date { color:#a7a7a7;}
.txt-type-01 { width: 6em; background-color: #e5e5e5; color: #0BA199;}
.txt-type-02 { width: 6em; background-color: #909090; color: #ffffff;}
.txt-type-03 { width: 6em; background-color: #0BA199; color: #ffffff;}
.page-news li a { float: left; display: block; padding-left: 20px; color: #0BA199;}
.news-title { padding-bottom: 15px; overflow: hidden;}
.news-detail { padding: 20px; background-color: #ffffff; font-size: 13px; line-height: 1.8; border: 1px solid #e4e4e4; border-radius: 1.5em; clear: both;}

/*SERVICE*/
.sub-title { width: 185px; height: 36px; background: url(../images/sub-title.jpg) repeat-y 0 0; font-size: 19px; color: #fff; line-height: 36px; text-align: center;}
.service-item { padding: 30px 0; width: 100%; height: 100px; overflow: hidden;}
.service-item li { float: left; margin-right: 10px; width: 100px; height: 100px; background-color: #E9E3DB; font-size: 17px; color: #0BA199; line-height: 100px; text-align: center; border-radius: 100%;transition: all 0.2s ease-in-out 0s;}
.service-item li:hover, .service-item li:focus { background-color: #0BA199; color: #fff;}

.service-01 { border-right: 1px solid #e4e4e4;}
.service-02 { padding-left: 30px;}
.service-01, .service-02 { border-bottom: 1px solid #e4e4e4;}
.service-03 { padding: 30px 0 0;}

.service-office h4 { padding: 30px 0 10px 0; color: #0BA199;}
.service-map { padding: 6px 0 0;}

/*CLIENTS*/
.clients-item li { float: left; width: 25%; padding-bottom: 20px;}
.clients-item a { display: block; width: 220px; text-align: center; text-decoration: none;transition: all 0.2s ease-in-out 0s;}
.clients-item a span { display: block; margin: 0 0 5px 0; padding: 9px; width: 200px; background-color: #fff; border: 1px solid #e4e4e4; border-radius: 20px;}
.clients-item a:hover { color: #0BA199;}

/*RECRUIT*/
.table-recruit tr { border-bottom: 1px solid #e4e4e4; transition: all 0.2s ease-in-out 0s;}
.table-recruit th, .table-recruit td { padding: 10px;}
.table-recruit th { font-size: 17px;}
.table-recruit tbody tr:hover, .table-recruit tbody tr:focus { background-color: #0BA199; color: #fff;}

/*CONTACT*/
#form dl { position: relative; padding-bottom: 15px; width: 100%; overflow: hidden; line-height: 30px;}
#form dt { position: absolute; padding: 5px 0; width: 140px; text-align: right;}
#form dt span.text-orange { padding: 0 10px; color: #F60;}
#form dt span.form-item { padding: 0 40px 0 0;}
#form dd { padding: 0 0 0 150px;}
#form dd img, #form dd a { display: block; float: left;}
#form dd img { margin: 0 15px; border-radius: 3px; height: 40px;}
#form dd a { padding: 5px 0; text-decoration: none;}
#form dd a:hover { color: #0BA199;}
#form input, #form textarea { background-color: transparent; border: none; width: 100%; outline: none;}
#form .border-gray:hover { border-color: #0BA199; box-shadow: 0 0 10px rgba(10,160,155,0.3);}
#form button { padding: 5px 20px; font-size: 17px;
border: 1px solid #069890; border-radius: 6px;
background: #2BBDB5;
background: -moz-linear-gradient(top,  #2BBDB5 0%, #0BA29A 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2BBDB5), color-stop(100%,#0BA29A));
background: -webkit-linear-gradient(top,  #2BBDB5 0%,#0BA29A 100%);
background: -o-linear-gradient(top,  #2BBDB5 0%,#0BA29A 100%);
background: -ms-linear-gradient(top,  #2BBDB5 0%,#0BA29A 100%);
background: linear-gradient(top,  #2BBDB5 0%,#0BA29A 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2BBDB5', endColorstr='#0BA29A',GradientType=0);
color: #ffffff;
}
#form button:focus, #form button:hover {
background: #0BA29A;
background: -moz-linear-gradient(top,  #0BA29A 0%, #0BA29A 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0BA29A), color-stop(100%,#0BA29A));
background: -webkit-linear-gradient(top,  #0BA29A 0%,#0BA29A 100%);
background: -o-linear-gradient(top,  #0BA29A 0%,#0BA29A 100%);
background: -ms-linear-gradient(top,  #0BA29A 0%,#0BA29A 100%);
background: linear-gradient(top,  #0BA29A 0%,#0BA29A 100%);
}

/*FOOTER*/
#footer { position: relative; padding: 30px 0; background-color: #fff; font-size: 12px;}
#footer .grid-4 { text-align: right;}
#scrollUp { bottom: 20px; right: 20px; height: 38px; width: 38px; background: url(../images/icon-top.png) no-repeat;
}