@import url(https://use.fontawesome.com/releases/v5.4.0/css/all.css);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css);
@import url(owl.carousel.min.css);
@import url(owl.theme.default.min.css);
@import url(animate.css);
@import url(w3.css);

@import url(reset.css);
@import url(foundation.css);
@import url(framework.css);
@import url(basic.css);
@import url(boxhover.css);

a:hover,
.focus {
    color:#174873;
}

a,
i,
div,
.focus {
    -o-transition: color .3s linear,background-color .3s linear,border .3s linear ;
    -webkit-transition: color .3s linear,background-color .3s linear,border .3s linear ;
    -moz-transition: color .3s linear,background-color .3s linear,border .3s linear ;
    transition:  color .3s linear,background-color .3s linear,border .3s linear ;
}

::placeholder { color: #bbb; } 

.owl-theme .owl-dots { position:absolute;left:0px;right:0px;bottom: 0px;margin:auto;display:none; }

.owl-theme .owl-dots .owl-dot span{ background-color:#FFF; }

.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background: #03ACDC}

.navigation{
    display:inline-block;
}

/*li 設position:relative; 是為了讓ul有定位點,relative會讓li保留在原位不會徧離*/
.navigation li{
    position:relative;
    /*text-align: left;*/
}

/*第一層橫向***********************/

.navigation > li{
    display:inline-block;
    z-index: 2;
}

/*第一層 end****************************************/

/*第二層直向****************************************/

.navigation > li > ul{
    display:none;
    position:absolute;
    left: 0px;
    padding-top:28px; /* 與第一層和第二層的高度間隔*/
}

.navigation > li:hover > ul{
    display: block;
}

/*第二層 end **********************************/

/*第三層以後橫向*****************************/

.navigation ul > li > ul{
    display:none;
    position:absolute;
    left:100%;
    top:0px;
}

.navigation ul > li:hover > ul{
    display: block;
}

/* 第三層 end **********************************/

/* 第一層的樣式 */
.navigation > li > a{
    display:block;
    height:45px;
    border-radius:25px;
    padding:0px 15px;
    padding-top:15px;
    font-size:16px;
    text-decoration:none;
    color:#303030;
    white-space: nowrap;
}

/* 第一層的樣式 hover和focus*/

.navigation > li:hover > a,
.navigation .focus.icon-down:after,
.navigation .focus{
    border-radius:25px;
    color:#FFF;
    background-color: #174873;
}

/* 第二層以後的樣式 */
.navigation > li > ul a{
    display:block;
    width:250px;
    height:44px;
    border-left:1px solid #eaeaec;
    border-right:1px solid #eaeaec;
    border-bottom:1px solid #eaeaec;
    padding:0px 15px;
    padding-top:14px;
    text-align: left;
    text-decoration:none;
    font-size:16px;
    color:#666;
    background-color:#FFF;
}
/* 第二層以後的樣式 hover */
.navigation > li > ul a:hover{
    border-left:1px solid #174873;
    border-right:1px solid #174873;
    border-bottom:1px solid #174873;    
    color: #FFF;
    background-color: #174873;
}

/* 下拉選單上緣線條 */
.navigation ul > li:first-of-type > a{
    border-top:3px solid #174873;
}

/* 向下箭頭 */
.navigation .icon-down:after{
    font-family: FontAwesome;
    content:"\f107";
    font-size:8px;
    /*color:#303030;*/
    position: relative;
    right:-6px;
}
/* 向下箭頭 hover */
.navigation > li:hover .icon-down:after{
    /*color: #FFF;*/
}

/* 向右箭頭 */
.navigation .icon-right:after{
    font-family: FontAwesome;
    content:"\f105";
    font-size:8px;
    /*color:#999;*/
    position: absolute;
    right:10px;
    top:16px;
}   

/* 向右箭頭 hover */
.navigation .icon-right:hover:after{
    /*color:#FFF;*/
}

/*///////////////////////////////////////////////////////////////////////*/

.navigation-rwd {
    display: none;
    width: 100%;
    font-size: 15px;    
}

.navigation-rwd li{
    position: relative;
}

/* 第二層以後縮排 */
.navigation-rwd > li ul a{
    padding-left: 23px;
}

/* 第一個選單上緣線條 */
.navigation-rwd > li:first-of-type > a{
    border-top:4px solid #174873;
}

/* 選單項目樣式 */
.navigation-rwd a{
    display:block;
    padding-left:10px;
    line-height: 40px;
    text-decoration:none;
    border-bottom:1px solid #e3e3e4;
    background-color: #FFF;
}

/* 選單項目樣式hover */
.navigation-rwd a:hover{
    color: #FFF;
    background-color: #174873;
}

/* 向下箭頭 */
.navigation-rwd .icon-down:after{
    font-family: FontAwesome;
    content:"\f107";
    /*color:#666;*/
    position: absolute;
    right:5px;
}

/* 向上箭頭 */
.navigation-rwd .icon-up:after{
    font-family: FontAwesome;
    content:"\f106";
    /*color:#666;*/
    position: absolute;
    right:5px;
}

/*///////////////////////////////////////////////////////////////////////*/

.pagination {
    margin-top: 20px;
    text-align: center;
}

.pagination li {
    display: inline-block;
}

.pagination a {
    display: block;
    width: 40px;
    height: 40px;
    margin-right: 5px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    text-align: center;
    line-height: 39px;
    text-decoration: none;
    background-color: #f5f6f8;
}

.pagination a:hover,
.pagination .focus,
.pagination .jump-page:hover {
    border: 1px solid #174873;
    color: #FFF;
    background-color: #174873;
}

.pagination li:nth-of-type(1) i,
.pagination li:nth-of-type(2) i {
    position: relative;
    left: -1px;
    top: 0px;
    font-size:16px;
}

.pagination li:nth-last-of-type(1) i,
.pagination li:nth-last-of-type(2) i {
    position: relative;
    left: 1px;
    top: 0px;
    font-size:16px;
}

.pagination.show-for-small-only{
    margin-bottom: 20px;
}

.pagination .jump-page{
    width: 85px;
    margin-right: 5px;
    border: 0px solid #e5e6e8;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;  
    background-color: #f5f6f8;  
}

/*///////////////////////////////////////////////////////////////////////*/

.margin-left-150{ margin-left: 150px !important; }
.margin-right-150{ margin-right: 150px !important; }

.margin-top-60 { margin-top: 60px; }
.margin-top-70 { margin-top: 70px; }
.margin-top-80 { margin-top: 80px; }
.margin-top-90 { margin-top: 90px; }
.margin-top-100 { margin-top: 100px; }
.margin-bottom-60 { margin-bottom: 60px; }
.margin-bottom-70 { margin-bottom: 70px; }
.margin-bottom-80 { margin-bottom: 80px; }
.margin-bottom-90 { margin-bottom: 90px; }
.margin-bottom-100 { margin-bottom: 100px; }

.padding-left-100 { padding-left: 100px; }
.padding-right-100 { padding-right: 100px; }

.padding-top-60 { padding-top: 60px; }
.padding-top-70 { padding-top: 70px; }
.padding-top-80 { padding-top: 80px; }
.padding-top-90 { padding-top: 90px; }
.padding-top-100 { padding-top: 100px; }
.padding-bottom-60 { padding-bottom: 60px; }
.padding-bottom-70 { padding-bottom: 70px; }
.padding-bottom-80 { padding-bottom: 80px; }
.padding-bottom-90 { padding-bottom: 90px; }
.padding-bottom-100 { padding-bottom: 100px; }

.color-3-hover:hover{ color: #333; }
.color-c-hover:hover{ color: #CCC; }

/* med */
@media screen and (max-width: 63.9375em) {
    .med-height-200{ height: 200px !important; }
    .med-height-250{ height: 350px !important; }
    .med-height-350{ height: 350px !important; }
    
    .med-margin-bottom-30 { margin-bottom: 30px !important; } 
    .med-position-relative { position: relative !important; }
}

/* sml */
@media screen and (max-width: 39.9375em) {
    .sml-width-100{ width: 100px !important; }
    .sml-width-95p{ width: 95% !important; }

    .sml-height-35{ height: 35px !important; }
    .sml-height-50{ height: 50px !important; }
    .sml-height-80{ height: 80px !important; }
    .sml-height-100{ height: 100px !important; }
    .sml-height-150{ height: 150px !important; }
    .sml-height-200{ height: 200px !important; }
    .sml-height-250{ height: 250px !important; }

    .sml-margin-bottom-30 { margin-bottom: 30px !important; }

    .sml-padding-top-45{ padding-top: 45px !important; }
    .sml-padding-top-65{ padding-top: 65px !important; }
    .sml-padding-top-70{ padding-top: 70px !important; }
    
    .sml-line-height-34{ line-height: 34px !important; }
    .sml-font-size-24{ font-size: 24px !important; }
}
/* ************************************************************************************************************************************************ */ 

.color1-text,.color1-text-c > *,.color1-text-cc > * > *,.color1-text-ccc > * > * > *,.color1-text-cccc > * > * > * > * { color: #174873; }
.color1-text-hover:hover,.color1-text-hover-c > *:hover,.color1-text-hover-cc > * > *:hover,.color1-text-hover-ccc > * > * > *:hover,.color1-text-hover-cccc > * > * > * > *:hover { color: #174873; }

.color1-background,.color1-background-c > *,.color1-background-cc > * > *,.color1-background-ccc > * > * > *,.color1-background-cccc > * > * > * > * { background-color: #174873; }
.color1-background-hover:hover,.color1-background-hover-c > *:hover,.color1-background-hover-cc > * > *:hover,.color1-background-hover-ccc > * > * > *:hover,.color1-background-hover-cccc > * > * > * > *:hover { background-color: #174873; }

.color1-border,.color1-border-c > *,.color1-border-cc > * > *,.color1-border-ccc > * > * > *,.color1-border-cccc > * > * > * > * { border: 1px solid #174873; }
.color1-border-hover:hover,.color1-border-hover-c > *:hover,.color1-border-hover-cc > * > *:hover,.color1-border-hover-ccc > * > * > *:hover,.color1-border-hover-cccc > * > * > * > *:hover { border: 1px solid #174873; }

.color2-text,.color2-text-c > *,.color2-text-cc > * > *,.color2-text-ccc > * > * > *,.color2-text-cccc > * > * > * > * { color: #92cddf; }
.color2-text-hover:hover,.color2-text-hover-c > *:hover,.color2-text-hover-cc > * > *:hover,.color2-text-hover-ccc > * > * > *:hover,.color2-text-hover-cccc > * > * > * > *:hover { color: #92cddf; }

.color2-background,.color2-background-c > *,.color2-background-cc > * > *,.color2-background-ccc > * > * > *,.color2-background-cccc > * > * > * > * { background-color: #92cddf; }
.color2-background-hover:hover,.color2-background-hover-c > *:hover,.color2-background-hover-cc > * > *:hover,.color2-background-hover-ccc > * > * > *:hover,.color2-background-hover-cccc > * > * > * > *:hover { background-color: #92cddf; }

.color2-border,.color2-border-c > *,.color2-border-cc > * > *,.color2-border-ccc > * > * > *,.color2-border-cccc > * > * > * > * { border: 1px solid #92cddf; }
.color2-border-hover:hover,.color2-border-hover-c > *:hover,.color2-border-hover-cc > * > *:hover,.color2-border-hover-ccc > * > * > *:hover,.color2-border-hover-cccc > * > * > * > *:hover { border: 1px solid #92cddf; }

.colorg1-text,.colorg1-text-c > *,.colorg1-text-cc > * > *,.colorg1-text-ccc > * > * > *,.colorg1-text-cccc > * > * > * > * { color: #F4F4F7; }
.colorg1-text-hover:hover,.colorg1-text-hover-c > *:hover,.colorg1-text-hover-cc > * > *:hover,.colorg1-text-hover-ccc > * > * > *:hover,.colorg1-text-hover-cccc > * > * > * > *:hover { color: #F4F4F7; }

.colorg1-background,.colorg1-background-c > *,.colorg1-background-cc > * > *,.colorg1-background-ccc > * > * > *,.colorg1-background-cccc > * > * > * > * { background-color: #F4F4F7; }
.colorg1-background-hover:hover,.colorg1-background-hover-c > *:hover,.colorg1-background-hover-cc > * > *:hover,.colorg1-background-hover-ccc > * > * > *:hover,.colorg1-background-hover-cccc > * > * > * > *:hover { background-color: #F4F4F7; }

.colorg1-border,.colorg1-border-c > *,.colorg1-border-cc > * > *,.colorg1-border-ccc > * > * > *,.colorg1-border-cccc > * > * > * > * { border: 1px solid #F4F4F7; }
.colorg1-border-hover:hover,.colorg1-border-hover-c > *:hover,.colorg1-border-hover-cc > * > *:hover,.colorg1-border-hover-ccc > * > * > *:hover,.colorg1-border-hover-cccc > * > * > * > *:hover { border: 1px solid #F4F4F7; }
/* ************************************************************************************************************************************************ */ 

.tag {
    display: none;
}

.navigation > li > ul{
    padding-top:22px; /* 與第一層和第二層的高度間隔*/
}

/* 第一層的樣式 hover和focus*/

.navigation > li:hover > a,
.navigation .focus.icon-down:after,
.navigation .focus{
    border-radius:25px;
    color:#FFF;
    background-color: #174873;
}

.navigation-rwd {
    position: absolute;
}

/*////////////////////////////////////////////////////////////////*/

.navbar-fixed{
  width: 100%;
  height: 70px !important;
  position: fixed !important;
  left:0;
  right:0;
  top: 0;
  z-index: 10;
  box-shadow:0px 0px 10px 2px #ddd;
  background-color: #FFF;
  animation: 1s ease-out 0s 1 navbarmove;
}

.navbar-fixed-rwd{
  width: 100%;
  position: fixed !important;
  left:0;
  right:0;
  top: 0;
  z-index: 10;
  box-shadow:0px 0px 10px 2px #ddd;
  background-color: #FFF;
  animation: 1s ease-out 0s 1 navbarmove;
}

@keyframes navbarmove {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

.navbar-fixed a{
  color: #333;
}

.navbar-fixed .logo{
  /*height: 40px !important;*/
}

.navbar-fixed .col1{
  line-height:70px !important;
  /*padding-top: 14px !important;*/
}

.navbar-fixed .col2{
 padding-top: 12px !important; 
}

.navbar-fixed .col2 .navigation > li > ul{
    padding-top: 14px; /* 與第一層和第二層的高度間隔*/
}