@import url(reset.css);
/*@import url(font-awesome.min.css);*/
@import url(https://use.fontawesome.com/releases/v5.0.1/css/all.css);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css);

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

a:hover,
.focus {
	color:#2196f3;
}

.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:20px; /* 與第一層和第二層的高度間隔*/
}

.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;
    padding:0px 15px;
    padding-top:15px;
    font-size:15px;
    text-decoration:none;
    color:#303030;
    white-space: nowrap;
}

/* 第一層的樣式 hover和focus*/
.navigation > li:hover > a,
.navigation .focus.icon-down:after,
.navigation .focus{
    border-bottom:2px solid #2196f3;
}

/* 第二層以後的樣式 */
.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;
    padding-bottom:10px;
    text-align: left;
    text-decoration:none;
    font-size:15px;
    color:#222;
    background-color:#F5F6F8;
}
/* 第二層以後的樣式 hover */
.navigation > li > ul a:hover{
    border-left:1px solid #2196f3;
    border-right:1px solid #2196f3;
    border-bottom:1px solid #2196f3;    
    color: #FFF;
    background-color: #2196f3;
}

/* 下拉選單上緣線條 */
.navigation ul > li:first-of-type > a{
    
}

/* 向下箭頭 */
.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{
    
}

/* 向右箭頭 */
.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 #0076f9;
}

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

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

/* 向下箭頭 */
.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;
}

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

.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}

/* med */
@media screen and (max-width: 63.9375em) {
    .med-background-position--100{ background-position: center -100px !important; }
}

/* sml */
@media screen and (max-width: 39.9375em) {
    .sml-font-size-24{ font-size: 24px !important; }
    .sml-height-150{ height: 150px !important; }
    .sml-padding-top-45{ padding-top: 45px !important; }
    .sml-background-position-0{ background-position: center 0px !important; }
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #666;
}

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

/* 藍 */
.color1-text,.color1-text-c > *,.color1-text-cc > * > *,.color1-text-ccc > * > * > *,.color1-text-cccc > * > * > * > * { color: #2196f3; }
.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: #2196f3; }

.color1-background,.color1-background-c > *,.color1-background-cc > * > *,.color1-background-ccc > * > * > *,.color1-background-cccc > * > * > * > * { background-color: #2196f3; }
.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: #2196f3; }

.color1-border,.color1-border-c > *,.color1-border-cc > * > *,.color1-border-ccc > * > * > *,.color1-border-cccc > * > * > * > * { border: 1px solid #2196f3; }
.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 #2196f3; }

/* 藍 加深 button hover*/
.color1-2-text,.color1-2-text-c > *,.color1-2-text-cc > * > *,.color1-2-text-ccc > * > * > *,.color1-2-text-cccc > * > * > * > * { color: #1f8ce2; }
.color1-2-text-hover:hover,.color1-2-text-hover-c > *:hover,.color1-2-text-hover-cc > * > *:hover,.color1-2-text-hover-ccc > * > * > *:hover,.color1-2-text-hover-cccc > * > * > * > *:hover { color: #1f8ce2; }

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

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

/* 灰 button hover */
.color2-text,.color2-text-c > *,.color2-text-cc > * > *,.color2-text-ccc > * > * > *,.color2-text-cccc > * > * > * > * { color: #606060; }
.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: #606060; }

.color2-background,.color2-background-c > *,.color2-background-cc > * > *,.color2-background-ccc > * > * > *,.color2-background-cccc > * > * > * > * { background-color: #606060; }
.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: #606060; }

.color2-border,.color2-border-c > *,.color2-border-cc > * > *,.color2-border-ccc > * > * > *,.color2-border-cccc > * > * > * > * { border: 1px solid #606060; }
.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 #606060; }

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

.margin-bottom-50 { margin-bottom: 50px; }
.margin-bottom-60 { margin-bottom: 60px; }
.margin-bottom-70 { margin-bottom: 70px; }
.margin-bottom-80 { margin-bottom: 80px; }

.padding-top-80 { padding-top: 80px; }
.padding-bottom-80 { padding-bottom: 80px; }

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

/* sml */
@media screen and (max-width: 39.9375em) {
	.sml-margin-bottom-30 { margin-bottom: 30px !important; }
}