@charset "utf-8";
/* CSS Document */
*{margin:0; padding:0;}
body{background-color:#fff;font-family:sans-serif, 微軟正黑體, Arial;font-size: 14px;position:relative; padding: 0;margin: 0;}
a{text-decoration:none!important; color:inherit;}
a:hover{color:inherit;}
ul, li, ol {text-decoration:none; list-style:none;}
p{font-size: 14px; line-height:1.8;}
.img-responsive{display: block;
    max-width: 100%;
    height: auto;}
h3{margin-bottom:30px;text-align:center;}
h4{margin-bottom:20px;text-align:center;}


.w90{width:90%;}	
.backHome{ text-align:center; color:#1765af; margin-top:50px;}

.w10p{width:10%;}
.w20p{width:20%;}
.w30p{width:30%;}
.w40p{width:40%;}
.w60p{width:60%;}
.w70p{width:70%;}
.w80p{width:80%;}
.w90p{width:90%;}

/*******font*****************/
.f13     {font-size:13px; color:#31738a;}
.f15B700 {font-size:15px; font-weight:700; color:#1765af;}
.f16B700 {font-size:16px; font-weight:700; color:#1765af;}
.f18B700 {font-size:18px; font-weight:700; color:#1765af;}
.boldfont{font-weight:700;}
.hr0{ height:1px;border:none;border-top:1px solid #999;}
.borderNone{border:0;}
.overflowHidden{overflow:hidden;}
/******padding & margin **********************/
.paddingR10  {padding-right:10px;}
.paddingT50  {padding-top:50px;}
.marginB20   {margin-bottom:20px;}
.marginB50   {margin-bottom:50px;}
.marginT20   {margin-top:20px;}
.marginT50   {margin-top:50px;}
.marginR5    {margin-right:5px;}
.marginR10   {margin-right:10px;}
.marginLR10  {margin-right:10px;margin-left:10px;}
.marginLR20  {margin-right:20px;margin-left:20px;}
.marginL20R5 {margin-right:5px;margin-left:20px;}
.marginL10R5 {margin-right:5px;margin-left:10px;}
.marginL20   {margin-left:20px;}
.marginL10   {margin-left:10px;}
.paddingT15  {padding-top:15px;}


/************* btn **********************/
.blueBorderB {border-bottom:#1765af 1px solid;padding-bottom:5px;width:80%;}
.bbton5-20{padding:5px 20px; color:#31738a; background-color:#fff; border-radius:5px; border:1px #1765af solid;float:right;}
.bbton5-20:hover{color:#fff;background-color:#1765af; border:1px #fff solid;}


/***************topper*********************/

.topper{width:100%; z-index:1000;position:fixed; background-color:rgba(96,96,96,0.8);color:#fff; font-size:16px; font-weight:600;padding:10px 0 10px 0;}
.navItem{float:left; display:inline-block; padding:0 10px 0 10px; margin-top:4.5px;margin-bottom:4.5px; border-right:1px solid #fff;line-height:18px;}
.navItem:last-child {border-right:none;}



#banner{position:relative;}
#demo .carousel-item>div{ background-size:cover; background-position:center center; background-repeat:no-repeat;width:100%;height:61vw;margin-top:47px;}
#slideNo1{background-image:url(../images/main6.jpg);}
#slideNo2{background-image:url(../images/main2.jpg);}
#slideNo3{background-image:url(../images/main1_mb.jpg);}
#slideNo4{background-image:url(../images/main3.jpg);}


.sloganArea{position:absolute; left:0; top:0; width:100%; height:100vw ;color:#ffffff; z-index:100;}
.slogan{position:relative;width:100%; height:100vh ;  }
.slogan-1{ position:absolute;font-size:60px; height:120px; display:inline-block; text-align:center;font-weight:400;left:25%;top:calc(50% - 60px);width:50%;line-height:120px; }
.slogan-2{ position:absolute;font-size:16px; }
.slogan-3{ position:absolute;font-size:13px; }
.slogan-4{ position:absolute;font-size:14px; font-weight:600; left:20px;  bottom:20px;}
.slogan-5{ position:absolute;font-size:14px; font-weight:600; right:20px;  bottom:20px;}

/************luca2***************/

/*.contentArea{background-image:url(../images/global-bg.jpg); background-size:100%;background-repeat:repeat-y; height:4000px;background-attachment:fixed;  }

.contentArea:before {
  content: ' ';
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(../images/global-bg.jpg) center 0 no-repeat;
  background-size: cover;
}*/

.contentArea{
    background-image: url(../images/global-bg.jpg);
    background-repeat: no-repeat;
    -webkit-background-size:100%;
    background-size:cover;
    -webkit-background-size: cover !important; 
    -moz-background-size: cover !important; 
    -o-background-size: cover; 
    background-attachment:fixed;
   
}

@media screen and (max-width:767px){
    .contentArea{background-position: -99999px -99999px;}
    .contentArea:before {
        content: ""; 
        background-image: inherit; 
        position: fixed; 
        top: 0; 
        left: 0; 
        height: 100vh; 
        width: 100%; 
        -webkit-background-size: cover !important; 
        -moz-background-size: cover !important; 
        -o-background-size: cover; 
        background-size: cover !important;
        z-index: -1;
    }
}




.bannerPic{background-size:100%; background-repeat:no-repeat; width:100%; height:37vw;}
.whiteBlock{padding:60px 3%;  background-color:rgba(255, 255, 255, 0.85);}
.whiteBlock h2{font-size:26px; margin-bottom:20px;text-align:center;}
.whiteBlock p{}

.bg1{background-color:rgba(255, 98, 21, 0.8);}
.bg2{background-color:rgba(185,156,70,0.8);}
.bg3{background-color:rgba(138,126,218,0.5)}
.bg4{background-color:rgba(218, 37,78,0.5);}

.bg5{background-color:rgba(202,202,0,0.6)}


.textpicBlock, .pictextBlock{ flex-direction: column; display:flex;}
.text{padding:10% 3% 10% 3%; text-align:center;}
.pic img{width:100%; height:auto;}

.borderBtn{font-size:14px; margin-top:20px; letter-spacing:2px; border:1px solid #000; padding:10px 15px; display:inline-block; }

.borderBtn:hover { background-color:transparent; border:1px solid #000;
			-webkit-animation: changebgcolor 2s /*linear infinite*/forwards;
            animation: changebgcolor 2s /*linear infinite*/forwards; }
			
@-webkit-keyframes changebgcolor {
    
    0% {background-color:transparent;border:1px solid #000;}
	100% {background-color:#fff;border:1px solid #fff; }
   
}
@keyframes changebgcolor {
    
    0% {background-color:transparent;border:1px solid #000;}
	100% {background-color:#fff;border:1px solid #fff;  }

}

#demoG1 .carousel-item>div, #demoG2 .carousel-item>div ,#demoG3 .carousel-item>div, #demoG4 .carousel-item>div ,#demoG5 .carousel-item>div{ background-size:cover; background-position: center center; background-repeat:no-repeat;width:100%;height:100vw;}
#slideG01-1{background-image:url(../images/g01-1.jpg);}
#slideG01-2{background-image:url(../images/g01-2.jpg);}
#slideG01-3{background-image:url(../images/g01-3.jpg);}	
#slideG01-4{background-image:url(../images/g01-4.jpg);}
#slideG01-5{background-image:url(../images/g01-5.jpg);}	

#slideG02-1{background-image:url(../images/g02-1.jpg);}
#slideG02-2{background-image:url(../images/g02-2.jpg);}
#slideG02-3{background-image:url(../images/g02-3.jpg);}	
#slideG02-4{background-image:url(../images/g02-4.jpg);}
#slideG02-5{background-image:url(../images/g02-5.jpg);}	

#slideG03-1{background-image:url(../images/g03-1.jpg);}
#slideG03-2{background-image:url(../images/g03-2.jpg);}
#slideG03-3{background-image:url(../images/g03-3.jpg);}	
#slideG03-4{background-image:url(../images/g03-4.jpg);}
#slideG03-5{background-image:url(../images/g03-5.jpg);}	

#slideG04-1{background-image:url(../images/g04-1.jpg);}
#slideG04-2{background-image:url(../images/g04-2.jpg);}
#slideG04-3{background-image:url(../images/g04-3.jpg);}	
#slideG04-4{background-image:url(../images/g04-4.jpg);}
#slideG04-5{background-image:url(../images/g04-5.jpg);}	

#slideG05-1{background-image:url(../images/g05-1.jpg);}
#slideG05-2{background-image:url(../images/g05-2.jpg);}
#slideG05-3{background-image:url(../images/g05-3.jpg);}	
#slideG05-4{background-image:url(../images/g05-4.jpg);}
#slideG05-5{background-image:url(../images/g05-5.jpg);}	

/************footer************************/

.footer{padding:50px 3%;font-size:20px; text-align:center;color:#666;}

.footer p{font-size:16px;}

.whiteBtn{font-size:14px; margin-top:20px; letter-spacing:2px; border:1px solid #666; padding:10px 15px; display:inline-block;background-color:#fff; color:#333;}

.whiteBtn:hover { 
			-webkit-animation: bgtonone 1s forwards;
            animation: bgtonone 1s forwards; }
			
@-webkit-keyframes bgtonone {
    
    0% {background-color:#fff;color:#333;}
	100% {background-color:transparent;color:#666;}
   
}
@keyframes bgtonone {
    
    0% {background-color:#fff;color:#333;}
	100% {background-color:transparent;color:#666;}

}


.footer_3>div {float:left; width:18%; margin:0 5%;}


@media (min-width: 480px) {
	



@media (min-width: 576px) {

}


@media (min-width: 768px) {
	
}



@media (min-width: 1024px) {
.w90{width:70%;}	
#demoG1 .carousel-item>div, #demoG2 .carousel-item>div, #demoG3 .carousel-item>div, #demoG4 .carousel-item>div, #demoG5 .carousel-item>div{height:50vw;}


#demo .carousel-item>div{ height:32.8vw;margin-top:47px;}
#slideNo1{background-image:url(../images/main1.jpg);}
#slideNo2{background-image:url(../images/main2.jpg);}
#slideNo3{background-image:url(../images/main6.jpg);}
#slideNo4{background-image:url(../images/main3.jpg);}


.slogan-2{ font-size:16px; }
.slogan-3{ font-size:13px; }
.slogan-4{ font-size:20px; left:50px;  bottom:50px;}
.slogan-5{ font-size:20px; right:50px;  bottom:50px;}

.textpicBlock, .pictextBlock{align-items: stretch;display:flex;flex-direction: row; }

.whiteBlock{padding:100px 15% ;  }
.whiteBlock h2{margin-bottom:50px;}
.whiteBlock p{ font-size:16px;}



.text{float:left; width:50%; height:50vw;padding:5% 5% 0 5%;}
.text p {font-size:16px;  }
.pic {float:left; width:50%; height:50vw;}

.borderBtn{font-size:18px;  padding:10px 30px;margin-top:50px; }
.textpicBlock .text{order: 1;}
.textpicBlock .pic {order: 2;}
.pictextBlock .text{order: 2;}
.pictextBlock .pic {order: 1;}
	

.footer_3>div {float:left; width:15%; margin:0 2%;}


} 
@media (min-width: 1200px) { 



}
	 
@media (min-width: 1400px) { 
.text{padding:10% 5% 0 5%;}
.text p {font-size:20px;  }
h3{font-size:30px;}
h4{font-size:26px;}
}

@media (min-width: 1700px) { 
.text{padding:15% 5% 0 5%;}
}