@charset "utf-8";
/* CSS Document */


body{}


.box01{width: 100%; position: relative; background-color: #a2e9ff; margin-bottom: 40px; overflow: hidden; background-image: url("../img/bg.png"); background-position: bottom; background-repeat: no-repeat; background-size: cover;}

.sky{width: 100%; height: 140px;  background-image: url("../img/sky.png"); background-position: bottom; background-repeat: no-repeat; background-size: cover; position: absolute; bottom: 0; z-index: 88;}

.sky2{width: 100%; height: 140px;  background-image: url("../img/sky2.png"); background-position: bottom; background-repeat: no-repeat; background-size: cover; position: absolute; top: -140px; z-index: -1;}

.ac{width: 950px; height: 500px; margin: 0 auto; position: relative; z-index: 8;}

.logo_bf{position: absolute; top:140px; left: 0;}

.logo_bf h1{font-size: 90px; color: #fff; letter-spacing: 8px; font-weight: bold; margin-bottom: 26px; text-shadow: 2px 2px 6px rgba(0,50,100,0.7);}

.logo_bf h2{font-size: 44px; color: #fffabb; text-shadow: 2px 2px 6px rgba(0,50,100,0.7); margin-bottom: 20px; letter-spacing: 2px; font-weight: bold;}

.logo_bf p{font-size: 15px; color: #005397; letter-spacing: 1px; text-indent: 4px;}


.man{width:300px; position: absolute; right: 24px; top:50px; z-index: 1;}



@media screen and (max-width: 980px) {
    
    .ac{width: 100%; height: 420px; overflow: hidden;}
    
    .logo_bf{top:100px; left: 30px; z-index: 99;}
    
    .logo_bf h1{font-size: 88px;}
    .logo_bf h2{font-size: 40px;}
    
    .man{right: -70px; width:320px; top:30px;}
    
    .sky{height: 120px;}

}

@media screen and (max-width: 736px) {
    
    .logo_bf h1{font-size: 62px; margin-bottom: 20px;}
    .logo_bf h2{font-size: 25px; margin-bottom: 16px;}
    
     .logo_bf{top:48px; left: 16px; z-index: 99;}
    
    .ac{width: 100%; height: 448px; }
    
    .logo_bf p{line-height: 1.5; padding-right: 16px; text-indent: 0px;}
    
    
    .man{right: 16px; width:220px; bottom:-90px; top:inherit;}
    
    .sky{height: 100px;}
    
    .sky2{display: none;}
    
 
}



@media screen and (max-width: 320px) {
    
    .logo_bf{top:40px; left: 16px; z-index: 99;}
    .logo_bf h2{font-size: 24px;}
    
    
}


.page{width: 950px; margin: -20px auto 30px; position: relative; padding-bottom: 0;}

.page2{width: 950px; margin: 0px auto 0; position: relative; padding:40px 0 80px; z-index: 99;}

.page3{width: 950px; margin: 0px auto 0;}

.wbg{width: 100%; background-color: #e2ffff; position: relative; background-image: url("../img/hbg.png"); background-position: bottom; background-size: contain; background-repeat: no-repeat;}




@media screen and (max-width: 980px) {
    
    .page{width: 100%;} 
    .page2{width: 100%; padding:40px 20px 40px;} 
    .page3{width: 100%;} 


}

@media screen and (max-width: 736px) {
    
    .page{ margin: -30px auto 0px;} 
    
    
    .wbg{background-size: 920px;}
    
  

}






.box02{width: 100%; background-image: url("../img/bgway.png"); background-position: bottom; background-size: contain; background-repeat: no-repeat; }

.box02s h3{font-size: 28px; color: #0062bd;  font-weight: bold; letter-spacing: 2px;   border-bottom: 3px solid #0062bd; padding: 0 0 8px; display: inline-block; border-radius: 0px; }

.box02s{width: 100%; text-align: center; margin:0 auto 80px; }



.an3{width: 100%;  height: 260px;}

.an3 ul{}

.an3 li{width: 300px; height: 110px; margin-right:25px; float: left; padding: 24px 20px 18px; line-height: 1.4; font-size: 18px;  cursor: pointer; color: #fff; background-color: #00a0e9; 
    transition:all .3s; position: relative; border:0px solid #00a0e9; border-radius: 16px;}

.an3 li:nth-child(1){box-shadow: 4px 4px 8px rgba(0,0,100,0.2);}


.an3 li:nth-child(2){box-shadow: 0px 4px 8px rgba(0,0,100,0.2);}


.an3 li:nth-child(3){box-shadow: -4px 4px 8px rgba(0,0,100,0.2);}





.qq{width: 200px; height: 42px; line-height: 46px; text-align: center; position: absolute; top:-26px; left: 50%; margin-left: -100px; background-color: #ffee31; color: #004a8f; border-radius: 8px; 
    font-size: 22px; font-weight: bold; text-indent: 8px; letter-spacing: 3px; z-index: 9;}



.playp{ width:40px; height: 116px;  position: absolute; left: 50%; bottom:-85px; margin-left: -20px;  transition:all .3s;}

.pm1{background-image: url("../img/play01.png"); background-position: center; background-size: cover; background-repeat: no-repeat;}
.pm2{background-image: url("../img/play02.png"); background-position: center; background-size: cover; background-repeat: no-repeat;}
.pm3{background-image: url("../img/play03.png"); background-position: center; background-size: cover; background-repeat: no-repeat;}

.anm1{bottom:-185px; margin-left: -75px; transform-origin: bottom; transform: scale(1.8) rotate(-3deg); background-image: url("../img/play01_2.png");}
.anm2{bottom:-185px; transform-origin: bottom; transform: scale(1.8); background-image: url("../img/play02_2.png");}
.anm3{bottom:-185px; margin-left: 35px; transform-origin: bottom; transform: scale(1.8) rotate(3deg); background-image: url("../img/play03_2.png"); }


.an3 li:hover{color: #fff; background-color: #004a8f; border:0px solid #004a8f;}
 
.an3 li:last-child{margin-right: 0;}

.tab li.active {color: #fff; background-color: #004a8f; border:0px solid #004a8f;  transform: scale(1.10); z-index: 9; }

.box03bg{background-color: #ccc !important; padding: 1px !important;}


.an3 li.active:nth-child(1):before{content: ""; width: 30px; height: 17px; position: absolute; bottom:-16px ; right:135px; background-image: url("../img/bbsay.png"); background-position: center; background-size: cover; background-repeat: no-repeat;}


.an3 li.active:nth-child(2):before{content: ""; width: 30px; height: 17px; position: absolute; bottom:-16px ; right:85px; background-image: url("../img/bbsay.png"); background-position: center; background-size: cover; background-repeat: no-repeat;}

.an3 li.active:nth-child(3):before{content: ""; width: 30px; height: 17px; position: absolute; bottom:-16px ; left:135px; background-image: url("../img/bbsay2.png"); background-position: center; background-size: cover; background-repeat: no-repeat;}



@media screen and (max-width: 980px) {
    

    
    .an3 li{width:230px; height: 120px; margin:0 13px;}
    
    .playp{bottom:-100px;}
    
    .anm1{bottom:-190px;}
    .anm2{bottom:-190px}
    .anm3{bottom:-190px;}
    
    .an3 li.active:nth-child(1):before{right:115px;}
    .an3 li.active:nth-child(2):before{right:60px;}
    .an3 li.active:nth-child(3):before{left:115px;}
    
    .box02s{ margin:0 auto 60px; }
    
    .tab li.active { transform: scale(1); }
    
    



}

@media screen and (max-width: 736px) {
    
    
    .box02s{padding: 0 16px; margin:0 auto 30px;}
    .box02s h3{font-size: 20px;}
    
    
    .an3 li{width:calc(100% / 3); height: auto; background-color: rgba(0,0,0,0); border:0; box-shadow: none!important; margin: 0; padding: 0 6px}
    .an3 li p{display: none;}
    
    .qq{width: 100%; height: 40px; line-height: 42px; font-size: 15px; position: inherit; top:auto; left: auto; margin: 0; letter-spacing: 0; text-indent: 3px; box-shadow: 0px 2px 4px rgba(0,0,100,0.2);}
    
    .playp{transform: scale(0.7); z-index: 10; bottom:-92px;}
    
    .anm1{margin-left: -20px; transform: scale(1.45); bottom:-162px;}
    .anm2{transform: scale(1.45); bottom:-162px;}
    .anm3{margin-left: -20px; transform: scale(1.45); bottom:-162px;}
    
    .mm1{margin-left: -50px;}
    .mm3{margin-left: 10px;}
    

    .an3{height: 100px;}
    
    .tab li.active {border:0px solid #004a8f;  transform: scale(1); background-color: rgba(0,0,0,0)}
    
    .an3 li.active:nth-child(1):before{content: ""; width: 20px; height: 11px; position: absolute; right: 40%; bottom:-11px; background-image: url("../img/ybsay.png"); background-position: center; background-size: cover; background-repeat: no-repeat; z-index: 10;}
    
    .an3 li.active:nth-child(2):before{content: ""; width: 20px; height: 11px; position: absolute; right: 20%; bottom:-11px; background-image: url("../img/ybsay.png"); background-position: center; background-size: cover; background-repeat: no-repeat; z-index: 10;}

.an3 li.active:nth-child(3):before{content: ""; width: 20px; height: 11px; position: absolute; left: 40%; bottom:-11px; background-image: url("../img/ybsay2.png"); background-position: center; background-size: cover; background-repeat: no-repeat; z-index: 10;}
    
    


}












.box03{width: 100%; background-color: #00823a; padding: 8px; position: relative; z-index: 10; margin-bottom: 0px; transition:all .3s;}

.tabcontent {
    display: none;
    padding: 28px 32px;
    width: 100%;
    height: 500px;
    background-color: #fffde9;
    /*position: relative;*/
}

.psr{position: relative;}

.tabcontent h3{font-size: 28px; line-height: 1.5; color: #0062bd; font-weight: bold; margin-bottom: 16px;}

.tabcontent h4{font-size: 24px; line-height: 1.5; color: #000; font-weight: bold; margin-bottom: 16px;}

.tabcontent p{font-size: 18px; line-height: 1.5; color: #444; margin-bottom:24px; letter-spacing: 2px;}


.tabcontent strong {    color: #000; font-weight: bold;}


.tabcontent img{margin-bottom: 16px;}

.ss{margin-bottom: 0px; font-size: 12px; color: #888; margin-top: -8px;}

.tname{margin-bottom: 18px; font-size: 14px; color: #666; overflow: hidden;}

.tname ul{overflow: hidden;}

.tname li{float:left; margin-right: 20px; }



#London ul{overflow: hidden; margin-top: 48px;}

#London li{width: calc(100% / 4); float: left; text-align: center;}

#London h5{font-size: 20px; color:#424242; font-weight: bold;}

#London img{width: 180px;}



#Paris{height: auto;}


.sec {width: 100%; margin-bottom: 24px; line-height: 1.5; font-size: 18px; color: #444;  padding: 0 2px}

.sec h1{display: inline-block;}

.sec select{width:200px; height: 30px; padding:0 8px; box-sizing: border-box; font-size: 16px; border-radius: 4px;
 font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", "新細明體", PMingLiU, sans-serif; }


.sec input{width:200px; height: 30px; padding:0 8px; box-sizing: border-box; font-size: 16px; border-radius: 4px; border:1px solid #BBB;
 font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", "新細明體", PMingLiU, sans-serif; }


.moneyta{width: 100%;}

.bt{border-top:1px solid #ccc;}
.bg01{background-color:#e8e8e8;}
.bg02{background-color:#f0f8f9;}
.bg03{background-color:#f6f4e8;}

.moneyta ul {overflow: hidden;  border-left:1px solid #ccc; border-right:1px solid #ccc; }

.moneyta li{ height: 46px; line-height: 46px; text-align: center; float: left; border-right:1px solid #ccc; border-bottom:1px solid #ccc; font-size: 16px; }

.moneyta li:nth-child(1){width: 20%}
.moneyta li:nth-child(2){width: 40%}
.moneyta li:nth-child(3){width: 40%}

.moneyta li:last-child{border-right:0}

#Tokyo{height: auto; overflow: hidden; /*padding-right: 16px;*/}





.go{width: 200px; height: 40px; line-height: 40px; text-align: center; font-size: 20px; background-color:#00a0e9; color: #fff; border-radius: 8px; position: absolute; right:32px; bottom:28px; transition:all .3s;}


.go:hover{background-color:#0062bd; }





.f2{ width: 100%; height: 50px; line-height: 50px; font-size: 26px; color: #666; margin-bottom: 50px; font-weight: bold; letter-spacing: 2px; background-color: #ddd; box-sizing: border-box; text-align: center;}




@media screen and (max-width: 980px) {
    
    .tabcontent{height: auto;}
    .tabcontent h3{font-size: 26px}
    #London img{width: 150px;}
    #London ul{margin-top: 40px; margin-bottom: 80px;}
    #London h5{font-size: 15px; }


}

@media screen and (max-width: 736px) {

    .tabcontent{padding: 16px;}
    .tabcontent h3{font-size: 20px;}
    .tabcontent h4{font-size: 20px;}
    .tabcontent p{font-size: 16px;}
    
    
    #London li{width: calc(100% / 2); float: left; text-align: center; margin-bottom: 20px;}
    
    
    #London ul{margin-top: -8px; margin-bottom: 16px;}
    
    #London img{width: 100px; margin-bottom: 3px;}
    
    
    .go{position: inherit; width: 100%;}
    
    .tname li{ margin-right: 24px; margin-bottom: 8px; }
    
    
 
    
    .moneyta li{font-size: 13px; height: 36px; line-height: 36px;}
    
    .sec{font-size: 16px; margin-bottom: 16px;}
    .sec h1{margin-bottom: 8px;}
    .sec select{width: 100%;}
    
    
.moneyta li:nth-child(1){width: 25%}
.moneyta li:nth-child(2){width: 30%}
.moneyta li:nth-child(3){width: 45%}
    
    
}




.box04{width: 100%; }

.box04 h2{font-size: 28px; color: #fff; margin-bottom: 50px; font-weight: bold; letter-spacing: 2px; width: 100%; padding-bottom: 4px;  background-color: #a0a0a0; box-sizing: border-box; text-align: center;}

.box04s h3{font-size: 26px; color: #0062bd;  font-weight: bold;  border-bottom: 3px solid #0062bd; padding-bottom: 8px; display: inline-block; border-radius: 0px; }

.box04s{width: 100%; text-align: center; margin:0 auto 24px; }

/*.box04 h3:before{content: ""; margin-right: 12px; width: 8px; height: 8px; background-color: #00a0e9; margin-top: 12px; float: left;}*/


.box04 ul{overflow: hidden; margin-bottom: 60px;}


.box04 li{width: 224px; height: 224px; margin-right: 18px; float: left; background-color: #000; overflow: hidden; position: relative; border:0px solid #ddd;  transition:all .3s; border-radius: 0px;}

.box04 li:nth-child(4n+4){margin-right: 0}

.photo{opacity: 0.7;  transition:all .3s;}

.box04 li:hover .wf{background-color: #fff;}
.box04 li:hover .photo{opacity: 1; transform: scale(1.1);}


.wf{position: absolute; bottom:0; left: 0; width: 100%;  text-align: center; line-height: 1.5; background-color: rgba(255,255,255,0.9); padding: 8px 8px 6px; z-index: 9;}

.wf h4{font-size: 22px; margin-bottom: 2px; color: #000;}

.wf h5{font-size: 16px; color: #666;}




@media screen and (max-width: 980px) {
    
    .box04 li{width: 168px; height: 168px;}
    .wf h4{font-size: 18px;}
    .wf h5{font-size: 14px;}



}

@media screen and (max-width: 736px) {
    .box04 h3{font-size: 20px;}
    
    .box04 li{width:calc(50% - 8px); height: 158px; margin-right: 16px; margin-bottom: 16px;}
    .box04 li:nth-child(2n+2){margin-right: 0;}
    
    .box04 li:nth-child(3){margin-bottom: 0;}
    .box04 li:nth-child(4){margin-bottom: 0;}
    
    .box04 ul{margin-bottom: 40px;}
    
    
    .wf h4{font-size: 16px;}
    .wf h5{font-size: 14px;}
    
}









#back-to-top {
    position: fixed;
    bottom: 15%;
    right: 50px;
    z-index:10000;
    width: 60px;
    height: 60px;
	border-radius:30px;
	background-color:#9fa0a0;
    cursor: pointer;
    border: 0;
    transition: opacity 0.2s ease-out;
    opacity: 0;
    background-image:url(../img/top.png); background-position: center; background-repeat: no-repeat; background-size: cover; 
}
#back-to-top:hover {
   background-color:#434343;  transition: all 0.2s linear;
}
#back-to-top.show {
    opacity: 1;
}


@media screen and (max-width: 980px) {
    
    #back-to-top {display: none;}
    
    .blackbar{display: none!important}


}

@media screen and (max-width: 736px) {
    
    .blackbar{display: none!important}

}





#Tokyo img{margin-bottom: 0;}





.aaa{width: 100%;}


.aaa ul{overflow: hidden;}


.aaa li{width: calc( 100% / 2); float: left;}

.aaa li:nth-child(1){width: 45%; height: 207px; overflow: hidden; }
.aaa li:nth-child(2){ width: 55%; padding-left: 16px; height: 154px; overflow : hidden;}

.aaa li p{overflow : hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical; line-height: 1.8; margin-top: -4px;}



.web{display: block;}
.mob{display: none;}

@media screen and (max-width: 980px) {
    
    
    .aaa li p{overflow : hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical; line-height: 1.6;}
    
    .aaa li:nth-child(1){  height: 165px;}
    .aaa li:nth-child(2){  height: 108px;}

}

@media screen and (max-width: 736px) {
    
    .web{display: none}
    .mob{display: block;}
    

    
    #Tokyo img{margin-bottom: 10px;}
    
    
    .ss{margin-bottom: 16px;}    
    .tname{margin-bottom: 8px;}
    
    .aaa li p{overflow : hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical; margin-top: 0px;}
    
    .aaa li:nth-child(1){width: 100%; height: auto;}
    .aaa li:nth-child(2){ width:100%;}
    
    .aaa li:nth-child(2){ padding-left: 0px; height: auto; overflow : hidden;}
    

}


.blackobg{position: fixed; top:0; right:0; bottom: 0; left: 0; z-index: 100; background-color: rgba(0,0,0,0);}