@charset 'utf-8';
@import url('https://fonts.googleapis.com/css?family=Mukta|Playfair+Display');
/*
font-family: 'Playfair Display', serif;
font-family: 'Mukta', sans-serif;
*/

*{
     margin: 0;
     border: 0;
     padding: 0;
}

body{
    margin: 0;
    padding: 0;
    font-family:,'微軟正黑體', "Microsoft JhengHe", "Helvetica", Sans-Serif;
    color: #1b1d1f;
    background-color: #fff;
    letter-spacing: 0.05em;
    line-height: 1.5;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
    *zoom: 1;
}
.pic{
    position: relative;
    text-align: center;
}
.pic img{
    width: 100%;
    height: auto;
}
a{
    color:  #1b1d1f;
    text-decoration: none;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video,input, select, textarea, button { font-family:'微軟正黑體', "Microsoft JhengHe", Helvetica, serif;}

.container{
    max-width: 1580px;
    margin: 0 auto;
    position: relative;
}

/*--Go TO CSS--*/
a.go-top{
    width: 45px;
    height: 45px;
    background-color: #149ffc;
    z-index: 35;
    position: fixed;
    border-radius: 50%;
    text-decoration: none;
    color: #FFF;
    display: block;
    text-align: center;
    line-height: 50px;
}
a.go-top:hover{background-color: #444;}


/*header*/
.btn.site-logo{
    position: relative;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    text-indent: -999999px;
    background: url(../img/logo.png) no-repeat 50% 50%;
    width: 350px;
    height: 80px;
    background-size: 100% auto;
    display: block;
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 20;
}
.btn.site-logo:hover{
    opacity: 0.7;
}

.site-header{
    width: 100%;
    height: auto;
    position: relative;
    background: #FFF;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px 0;
    z-index: 6;
}
.site-nav{
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: right;
}

.site-nav ul{
    display: inline-block;
    text-align: left;
}
.site-nav > ul > li{
    display: inline-block;
    position: relative;
}
.site-nav ul > li > a{
    display: block;
    margin: 0 20px;
    position: relative;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    font-size: 15px;
    text-align: center;
    font-weight: bold;
}
.site-nav > ul > li > a:hover{
    color: #149ffc;
}
.site-nav li > a span{
    display: block;
    font-family: 'Mukta', sans-serif;
    font-size: 16px;
    font-weight: normal;
}
.site-nav li > a .icon{
    display: block;
    margin: 0 auto 4px;
    background: url(../img/menu_01.png) no-repeat 50% 50%;
    width: 30px;
    height: 30px;
    background-size: 100% auto;
}
.site-nav a .icon.ic2{background-image: url(../img/menu_02.png);}
.site-nav a .icon.ic3{background-image: url(../img/menu_03.png);}
.site-nav a .icon.ic4{background-image: url(../img/menu_04.png);}
.site-nav a .icon.ic5{background-image: url(../img/menu_05.png);}
.site-nav a .icon.ic6{background-image: url(../img/menu_06.png);}
.site-nav a .icon.ic7{background-image: url(../img/menu_07.png);}
.site-nav a .icon.ic8{background-image: url(../img/menu_08.png);}


.site-nav ul ul {
    width: 150px;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin: 0 auto;
    display: block;
    padding-bottom: 10px;
    opacity: 0;
    -webkit-transform: translate(10px,0);
    transform: translate(10px,0);
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.site-nav ul > li:hover ul{
    opacity: 1;
    -webkit-transform: translate(0px,0);
    transform: translate(0px,0);
}
.site-nav ul ul li {
    display: block;
    
}

.site-nav ul ul li a{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    text-align: center;
    background: #149ffc;
    color: #fff;
    padding: 7px 10px;
    margin: 0 auto;
}
.site-nav ul ul a:hover{
    background: #444;
}


.header-fixed .site-header{
    position: fixed;
    z-index: 30;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 0;
    -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    -webkit-animation: fix-h .5s infinite linear alternate;
    animation: fix-h .5s infinite linear alternate;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    padding: 8px 0;
}
.header-fixed .site-nav a .icon{
    width: 35px;
    height: 35px;
    background-size: 100% auto;
}
.header-fixed .site-nav a .icon{
    display: none;
}
.header-fixed .btn.site-logo{
    width: 250px;
    height: 60px;
}
@-webkit-keyframes fix-h {
    from {
        -webkit-transform: translate(0, -150px);
        transform: translate(0, -150px);
        opacity: 0;
    }

    to {
        -webkit-transform: translate(0px, 0);
        transform: translate(0px, 0);
        opacity: 1;
    }
}
@keyframes fix-h {
    from {
        transform: translate(0, -100px);
        -webkit-transform: translate(0, -100px);
        opacity: 0;
    }

    to {
        -webkit-transform: translate(0px, 0);
        transform: translate(0px, 0);
        opacity: 1;
    }
}

/*float fixed*/
.btn.float-left{
    display: block;
    background: url(../img/money.png) no-repeat 50% 50%;
    width: 129px;
    height: 158px;
    position: fixed;
    left: 0;
    top: 35%;
    z-index: 20;
    text-indent: -99999px;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.btn.float-left:hover{
    opacity: 0.7;
}
.btn.float-right{
    display: block;
    width: 110px;
    background: #54c300;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    padding: 10px;
    border-radius: 8px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    height: 141px;
    position: fixed;
    right: 0;
    top: 220px;
    z-index: 20;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.btn.float-right .pic{
    margin: 5px auto;
}
.btn.float-right .pic img{
    width: 100%;
    height: auto;
}

.btn.float-right-fb:hover,
.btn.float-right-fb2:hover,
.btn.float-right:hover{
    opacity: 0.7;
}


.btn.float-right-fb{
    display: block;
    background: url(../img/fb_icon2.png) no-repeat 50% 50%;
    width: 110px;
    height: 110px;
    background-size: 100% auto;
    position: fixed;
    right: 0;
    top: 370px;
    z-index: 20;
    text-indent: -99999px;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.btn.float-right-fb2{
    display: block;
    background: url(../img/fb_icon2.png) no-repeat 50% 50%;
    width: 110px;
    height: 110px;
    background-size: 100% auto;
    position: fixed;
    right: 0;
    top: 490px;
    z-index: 20;
    text-indent: -99999px;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.innner_content{
    position: relative;
    width: 100%;
    padding-bottom: 50px;
}
.bread{
    background: #b2dffd;
    width: 100%;
    text-align: right;
    position: relative;
    max-width: 1580px;
    margin: 0 auto;
}
.bread ul{
    display: block;
    text-align: right;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 10px;
}
.bread li{
    display: inline-block;
    position: relative;
}
.bread li a{
    display: block;
    color: #6e6e6e;
    font-size: 12px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px 5px;
    position: relative;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.bread li+li a:before{
    content: '/';
    position: relative;
    display: inline-block;
    margin: -1px 10px 0 0;
}
.bread li a:hover{
    color: #255ca7;
}

.main-content{
    position: relative;
    
}

.side{
    float: left;
    width: 250px;
    min-height: 500px;
}
.side-title{
    background: #17a0fc;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 8px 10px 8px 30px;
    background: url(../img/side_line.png) no-repeat 10px 50%,#17a0fc;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    margin-bottom:2px;
}
.side-title span{
    font-style: italic;
    margin: 0 4px 0 10px;
}

.innner_content{
    background: url(../img/bk.png) no-repeat center bottom fixed,#e7f7ff;
}

.has-side .main-content{
    float: right;
    width: calc(100% - 280px);
    min-height: 500px;
}
.inner-title{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 8px 10px 8px 48px;
    background: #f1f1f1;
    background: url(../img/drop_water.png) no-repeat 15px 50%;
    margin-bottom: 30px;
    font-size: 21px;
    font-weight: bold;
    color: #767474;
}
article.editor{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px 0;
    
}

/*footer*/
.site-footer{
    position: relative;
    width: 100%;
    background: url(../img/footer_bg.jpg) repeat;
    text-align: center;
}
.site-footer .container{
    display: inline-block;
}
.footer-top{
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 90px 0;
}
.footer-info{
    float: left;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 250px;
    padding-right: 50px;
}
.btn.footer-logo{
    display: block;
    background: url(../img/logo_big.png) no-repeat 50% 50%;
    width: 214px;
    height: 194px;position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    text-indent: -999999px;
    position: absolute;
    left: 0;
    top: 0px;
    margin: auto;
}
.btn.footer-logo:hover{
    opacity: 0.7;
}
.fb-box{
    width: 500px;
    height: 260px;
    float: right;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.fb-box iframe{
    max-width: 100% !important;
    width: 100%;
}

.foot-til{
    font-size: 22px;
    font-weight: bold;
    color: #474c50;
    margin-bottom: 10px;
}
.foot-til span{
    font-family: 'Mukta', sans-serif;
    margin-left: 5px;
}
.footer-info .txt{
    line-height: 2;
}
.footer-info .txt b{
    font-family: 'Mukta', sans-serif;
    color: #255ca7;
    line-height: normal;
    font-size: 46px;
}
.footer-bottom{
    background: #434343;
    position: relative;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    padding: 30px 0;
    font-size: 14px;
    color: #FFF;
}
.site-map{
    display: block;
    position: relative;
    margin-top: 8px;
}
.site-map li{
    display: inline-block;
    position: relative;
    margin: 0 15px;
}
.site-map li:before{
    content: '|';
    display: block;
    position: absolute;
    left: -15px;
    top: 0;
}
.site-map li:first-child:before{
    display: none;
}
.site-map a{
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    display: block;
    position: relative;
    color: #FFF;
}
.site-map a:hover{
    color: #149ffc;
}

/*mobile section*/
.mobile-menu{
    position: fixed;
    z-index: 90;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    background: rgba(0,0,0,0.7);
    width: 0%;
    height: 100%;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    width: 100%;
    color: #FFF;
    left: -200%;
}
.mobile-menu.open{
    left: 0;
}
.btn.m-menu{
    display: block;
    width: 45px;
    height: 45px;
    z-index: 92;
    position: fixed;
    right: 10px;
    top: 20px;
    text-align: center;
    cursor: pointer;
    font-size: 20px;
    line-height: 42px;
    color: #000;
    border: solid 1px #000;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.btn.m-menu.open{
    color: #FFF;
    border-color: #fff;
}
.btn.m-menu.open i:before{
    content: "\f00d";
}
.m-menu.header-fixed{
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    -webkit-animation: fix-h .7s infinite linear alternate;
    animation: fix-h .7s infinite linear alternate;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
}
.mobie-nav{
    background: #FFF;
    color: #000;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 75px;
    margin: auto;
    padding-top: 20px;
}
.mobie-nav ul > li{
    position: relative;
    display: block;
    width: 100%;
    border-bottom: solid 1px #f2f2f2;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 3px 5px;
}
.mobie-nav > ul > li > a{
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 7px 15px;
    font-size: 16px;
    font-weight: bold;
    position: relative;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    border-left: solid 5px #255ca7;
}
.mobie-nav > ul > li > a:hover{
    color: #149ffc;
}
.mobie-nav > ul > li > a span{
    display: block;
    font-size: 14px;
    font-family: 'Mukta', sans-serif;
}
.mobie-nav ul ul{
    display: none;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.mobie-nav ul ul li a{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    padding: 7px 16px;
}
.mobie-nav ul ul li a:hover{
    color: #149ffc;
}
.m-inner-ul.open{
    display: block;
}

@media screen and (min-width:1024px){
    .btn.m-menu{display: none;}
}

/*banner*/
.banner{
    position: relative;
    width: 100%;
}
.banner:before,
.banner:after{
    width: 140px;
    height: 100%;
    display: block;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    background: rgba(255,255,255,0.6);
}
.banner:after{
    left: inherit;
    right: 0;
}
.banner a{
    display: block;
}
.banner img{
    width: 100%;
    height: auto;
    margin: 0 auto;
    cursor: pointer;
}
.inner-banner{
    position: relative;
    text-align: center;
}
.inner-banner .item{
    max-width: 1580px;
    margin: 0 auto;
}
.inner-banner .item img{
    width: 100%;
    height: auto;
    display: block;
}
.slick-dots{
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: -40px;
    text-align: center;
    z-index: 10;
}
.slick-dots li{
    display: inline-block;
}
.slick-dots li button{
    display: block;
    background:  #149ffc;
    text-indent: -99999px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100px;
    height: 5px;
    cursor: pointer;
    margin: 0 1px;
}
.slick-dots li.slick-active button{
    background: #255ca7;
}



/*btn*/
.basicebtn{
  display: inline-block;
  width: 177px;
  height: 46px;
  position: relative;
    background: -webkit-gradient(linear, left top, right top, from(#17a0fc) , to(#17fcd9));
    background: linear-gradient(to right, #17a0fc , #17fcd9);
  text-align: center;
  color: #FFF;
  cursor: pointer;
  border-radius: 5px;
  overflow: hidden;
  line-height: 46px;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    -webkit-box-shadow: 0 3px 5px rgba(144,144,144,0.4);
    box-shadow: 0 3px 5px rgba(144,144,144,0.4);
}
.basicebtn.rev:hover{
  background: #255ca7;
}
.basicebtn.snd{
}
.basicebtn.snd:hover{
  background: #4b4944;
}

.btn-box{
    clear: both;
}
.pagination {
    text-align: center;
    font-size: 14px;
    margin-top: 10px;
    padding-top: 20px;
    clear: both;
}
.pagination li {
    display: inline-block;
    vertical-align: top;
    position: relative;
}
.pagination li.pagination_ctrl{
    width: 38px;
    height: 28px;
}
.pagination li a.controls{
    position: absolute;
    width: 28px;
    height:28px;
    display: block;
    bottom: 0px;
    border: 0px;
    border: 1px solid #255ca7;
    content: '';
    color: #255ca7;
}
.pagination li a.controls:hover{
  border-color: #149ffc;
}
.pagination li a.controls.prev:before{
    content: '\e918';
    font-family: 'icon-font';
}
.pagination li a.controls.next:before{
  content: '\e919';
  font-family: 'icon-font';
  font-size: 12px;
}
.pagination li a.controls.prev:hover,
.pagination li a.controls.next:hover{
  color: #2369b4;
}
.pagination li a {
    display: block;
    min-width: 28px;
    height: 28px;
    line-height: 26px;
    padding: 0 5px;
    border: 1px solid #777;
    text-align: center;
    color: #777;
    margin: 0 5px;
    border-radius: 50%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
.pagination li a:hover,
.pagination li.active a {
    border-color: #149ffc;
    color: #149ffc;
}
.pagination li a.controls {
    font-size: 15px;
}
.page-info {
    display: none;
}
.page-info .form-control {
    display: block;
    width: 100%;
    height: 36px;
    padding: 5px 10px;
    border: 1px solid #ccc;
    text-align: center;
}
.page-info .form-control:focus {
    outline: none;
    border-color: #149ffc;
}

/*-----RWD---*/
@media screen and (max-width:1360px){
    .btn.site-logo{
        background-image: url(../img/logo_s.png);
        width: 70px;
        height: 95px;
        background-position: 50% 50%;
        background-size: 100% auto;
    }
    .header-fixed .btn.site-logo{
        width: 40px;
        height: 55px;
    }
}
@media screen and (max-width:1200px){
    .fb-box{
        float: none;
        margin: 0 auto;
        width: 100%;
    }
    .footer-info{
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0 auto;
        float: none;
        width: 540px;
    }
    .footer-top{
        padding: 45px 0;
    }
}
@media screen and (max-width:1024px){
    .btn.site-logo{
        left: 0;
        right: 0;
        position: relative;
    }
    .site-nav{
        display: none;
    }
    .site-header{
        padding: 10px 0;
    }
    .header-fixed .site-header{
        -webkit-animation: none;
        animation: none;
    }
    .banner:before,
    .banner:after,
    .banner .slick-dots{
        display: none;
        visibility: hidden;
        opacity: 0;
    }
    .container{
        padding: 0 15px;
    }
    .btn.float-right-fb,
    .btn.float-right-fb2,
    .btn.float-left,
    .btn.float-right{
        display: none;
    }
    .side{display: none;}
    .has-side .main-content{
        float: none;
        width: 100%;
    }
    .inner-title{margin-bottom: 15px;}
    .page-info {
      display: block;
      padding: 0 50px;
  }
  .pagination {
      position: relative;
      margin-top: -30px;
  }
  .pagination li a {
      display: none;
  }
  .pagination li a.controls {
      display: block;
      position: absolute;
      bottom: 0px;
  }
  .pagination li.pagination_ctrl{
      position: absolute;
      bottom: 16px;
  }
  .pagination li.pagination_prev{
      left: 0;
  }
  .pagination li.pagination_next{
      right: 0;
  }
  .pagination-title {margin-top: -10px;}
}


@media screen and (max-width:600px){
    .footer-info{
        width: 100%;
        overflow: hidden;
        padding: 0;
        text-align: center;
        padding-top: 200px;
    }
    .btn.footer-logo{
        left: 0;
        right: 0;
        top: 0;
        margin: 0 auto;
    }

}
@media screen and (max-width:400px){
    .btn.site-logo{
        left: 20px;
        margin: auto 0;
    }
    .btn.m-menu{
        top: 20px;
    }
}
#contact-form label.error {
		display: block; 
		color: #f00; 
	}
.inner-title h1{font-size:24px;} 
.service-editor h2{color:#17a0fc;}   
.form-go{position:absolute; top:0; left:0; opacity:0;display:none;}