@import url('var.css');
@import url('nav.css');

/* CSS Document */
html{}
body{
		font-size:var(--bodyTxt);
		line-height:1.8;
	    color:#333;
		font-family:var(--en),var(--cn);
		font-weight:500;
		letter-spacing:.1em;
		padding-top: var(--headerH);
    }

hr{
    border-color:#ccc;
}

.en{font-family:var(--en);}

/*Scroll Bar**************************/

/* width */
::-webkit-scrollbar {
  width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 15px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--scrollBar);
  border-radius: 15px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollBarHover);
}


/*Header****************************/
header{
			background:rgba(255,255,255,1);box-shadow:0 0 7px rgba(0,0,0,.3);
			position:fixed;left:0;top:0;width:100%;z-index: 999;
		}

header .logo img{width:180px;margin:5px auto;display:block;}

/*滑鼠滑動*/
header.active{background:rgba(255,255,255,.97);}

@media (min-width:1024px){
    header.active .topNav{}
}

header.active .mainNav>ul>li{padding:.3em 1em}
header.active .mainNav>ul>li>a{font-size: 15px;}

/*topNav*/
.topNav{
    justify-content:space-between;
    max-width:var( --maxW);
    height:100px;
    margin:auto;
    transition:all .7s;
}


/*Share****************************/
.shareBnList{margin-bottom:50px;}
.shareBnList li{padding:15px;}
.shareBnList li img{
    max-width:250px;    
    width: 100%;
    border: 1px solid #eee;
    box-shadow:var(--boxShadow);
}


/*footer****************************/
footer{
	text-align: center;
    letter-spacing: .1em;
    font-size: 13px;
    background:var(--blue);
    color:#fff;
}

footer .FL ,
footer .FR{width:200px;}

footer .FC{
    margin: auto;
    flex:1;
    background:#F2F2F2;
    color:#333;
    padding:2em 5em 1em;
    justify-content: space-between;
    align-items:center;
}

footer .FC h2{
     font-size: 15px;
    margin: .2em 0;
}

footer .FC h3{
    font-size: 13px;
    margin-bottom: .2em;
}

.footerLink{}

.footerLink a{
    color: #333;
    padding-right:.8em;
    text-decoration:underline;
    font-size:13px;
}

.footerLink a:hover{
    color:var(--org);
}



/*swiper ***********************/

.swiper-pagination{
    display:flex;
    align-items: center;
}

.swiper-pagination-bullet{
    width:22px;
    height: 6px;
    display:block;
    border-radius: 0;
}

.swiper-pagination-bullet-active{background-color:var(--green)}


/*20221230*/
.socialBNList{
    padding:30px 15px 70px;
}

.socialBNList li{
    padding:5px 10px;
}




/****************************** 行動版天地************************************/

/*PC*/
@media (max-width:1400px) {
    header .logo{padding-left:20px;letter-spacing:0}
}


@media (max-width:1200px) {
    footer .FC{padding: 2em 2em 1em;}

}

@media (max-width:1024px) {
    footer .FR{width:50px;}
    :root{
        --headerH:166px;
    }
}


/*IPAD*/	
@media (max-width:960px) {

    header {padding-right: 80px;}
    header .hrLeft{flex:0}
    header .logo{padding-left:30px}

    .contactNav button{width:100px}
    .topNav{height:var(--headerH) ;} 

    :root{
        --headerH:80px;
    }

    footer .FC{
        flex-direction: column;
        align-items: flex-start;
    }

}


/*手機尺吋*/	
@media (max-width: 767px) {

	:root{
		--headerH:80px;
	}

    header{padding-right:65px}
    header .logo{padding-left:10px;width:120px;}
    header .btnContact{display:none;}


    /*Footer*/

    footer .FL{width:100px;}
    footer .FR{display:none;}
    footer .FC{
        align-items: flex-start;
        flex-direction: column;
        padding: 40px 20px;
    }

    footer .FC p{letter-spacing:0;font-size:12px;}

    .footerLink{display:flex;flex-wrap: wrap;margin-top:10px;}


    /*FooterEnd*/


/******************************mobile End************************************/
}

@supports (-webkit-overflow-scrolling: touch)  and (max-width: 767px)  {


}