@charset "UTF-8";

/*載入字型*/
@font-face{ font-family:"HelveticaNeueLTStd"; src:url(../../../font/HelveticaNeueLTStd-MdCn.otf);}
@font-face{ font-family:"HelveticaNeueLTStdBD"; src:url(../../../font/HelveticaNeueLTStd-Bd.otf);}
@font-face{ font-family:"HelveticaNeueLTStdHvCn"; src:url(../../../font/HelveticaNeueLTStd-HvCn.otf);}
@font-face{ font-family:"HelveticaNeueLTStdMd"; src:url(../../../font/HelveticaNeueLTStd-Md.otf)}
@font-face{ font-family:"HelveticaNeueLTStdLt"; src:url(../../../font/HelveticaNeueLTStd-Lt.otf);}
@font-face{ font-family:"HelveticaNeueLTStdHv"; src:url(../../../font/HelveticaNeueLTStd-Hv.otf);}
@font-face{ font-family:"HelveticaNeueLTStdThCn"; src:url(../../../font/HelveticaNeueLTStd-ThCn.otf);}

body {margin:0; padding:0; font-family:"HelveticaNeueLTStd", "儷黑 Pro", "微軟正黑體"; letter-spacing:1pt; background:#2d2e30; font-size:90%;}
h1, h2, h3, h4, h5, lo, li, ul{margin:0; padding:0; list-style:none;}

input,button,select,textarea{outline:none}
textarea{resize:none}

a{border:none; text-decoration:none;}

/*去掉safari默認樣式*/
input[type="submit"], input[type="reset"], input[type="button"], button { -webkit-appearance: none; }


#lastArea{height:1800px; width:100%;}
/*彈跳視窗區*/
#onTopArea{position:fixed; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:200; display:none; overflow:auto;}
.topStuff{position:absolute; top:50%; left:50%; display:none;}
.clipFrame{position:absolute; top:72px; left:49px; z-index:2;}

/*Navigation*/
#navigationTop{width:100%; height:80px; border-top:6px solid #f76252; background:rgba(28,37,47,0.9); background-image:url(../IMAGES/navigation_BG.png); background-position:top center; background-repeat:no-repeat; position:absolute; top:0; left:0; z-index:100;}
#topBar{max-width:978px; margin:0 auto; position:relative;}
#topBar h1{display:block; width:206px; height:80px;}
#topBar h1 a{display:block; width:206px; height:80px; overflow:hidden; text-indent:-999px; background:url(../IMAGES/basic/LOGO.png) no-repeat;}
#titleNShare{position:absolute; top:32px; right:0; height:23px; line-height:23px; color:#8e8e8f; font-size:65%; font-family:'HelveticaNeueLTStdMd'; font-weight:normal;}
#titleNShare .series{ color:#f76252; font-family:'HelveticaNeueLTStdHv'; font-style:italic;}
#titleNShare .separate{padding:0 13px;}
.shareArea{height:23px; display:inline-block;}
.shareArea h2{font-size:70%; color:#fff; font-family:'HelveticaNeueLTStdLt'; letter-spacing:0; display:inline-block; margin-right:2px;}
.shareArea a{display:inline-block; margin-left:3px; vertical-align:middle; background:url(../IMAGES/basic/socialShareBG.png) no-repeat center; background-size:0 0; transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s;}
.shareArea a:hover{background-size:23px 23px;}
.shareArea a img{vertical-align:middle;}

/*common*/
.partContent{width:978px; margin:0 auto; position:relative;}

/*indexArea*/
#indexArea{position:relative; width:100%; height:535px; background:url(../IMAGES/index_BG.jpg) no-repeat center top #351d2f; z-index:10;}

 
/*PART1*/
#part1{width:100%; height:602px;  background:url(../IMAGES/p1BG.jpg) repeat-x center; position:relative; z-index:9;}
#part1 .BG1{margin-left:-545px;}
#part1 .BG2{position:absolute; top:0; left:0;}
#part1 .quote{position:absolute; bottom:0; left:0;}

#p1Btn{position:absolute; top:214px; right:22px;}
.btn{background:rgba(53,29,47,0.5) no-repeat top left; height:53px; border-radius:5px; text-indent:-999px; overflow:hidden; position:relative; transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; cursor:pointer;}
#p1Btn .btn{width:233px; margin-bottom:9px;}
#p1Btn .btn.btn1{background-image:url(../IMAGES/p1Btn1.png);}
#p1Btn .btn.btn2{background-image:url(../IMAGES/p1Btn2.png);}
.btn .btnArrow{position:absolute; top:14px; right:20px; opacity:0.7;}
.btnArrow{display:block; width:21px; height:21px; background:url(../IMAGES/btnArrow.png) no-repeat top left; border-radius:30px; border:2px solid #fff; transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s;}
#p1Btn .btn:hover, #p2Btn .btn:hover{background-color:rgba(53,29,47,1);}
.btn:hover .btnArrow, .CB2:hover .btnArrow{background-position:top right; opacity:1;}

/*part2*/
#part2{width:100%; height:397px; background:url(../IMAGES/p2BG.jpg) no-repeat center #e7d0c0;}
#p2Btn{position:absolute; top:227px; right:24px;}
#p2Btn .btn{width:350px; background:url(../IMAGES/p2Btn.png) no-repeat top left #f76252; }
#p2Btn .btn .btnArrow{opacity:1;}

.comingSoon{opacity:0; position:absolute; text-indent:0; overflow:visible; width:201px; height:136px; transition:all 0.5s; -webkit-transition:all 0.5s; -moz-transition:all 0.5s;}
.specialBtn{opacity:0; position:absolute; text-indent:0; overflow:visible; width:201px; height:136px; transition:all 0.5s; -webkit-transition:all 0.5s; -moz-transition:all 0.5s;}

#p2Btn .comingSoon{top:-101px; left:77px;}
#p2Btn:hover .comingSoon{top:-141px; opacity:1;}


/*part3*/
#part3{height:500px; width:100%; background:#f3f3f8; position:relative; z-index:8;}
#part3 .BG1{position:absolute; top:0; right:0; width:50%; height:500px; background:#f76252;}
#part3 .partContent{position:absolute; left:50%; top:0; margin-left:-489px;}
#part3 .text{position:absolute; top:0; left:0;}

#p3Clip{position:absolute; top:38px; right:24px;}
#p3Clip .clip{width:346px; height:205px; background:no-repeat top left; margin-bottom:12px; cursor:pointer; position:relative;}
#p3Clip .clip.clip1{background-image:url(../IMAGES/p4Clip-01.jpg);}
#p3Clip .clip.clip2{background-image:url(../IMAGES/p4Clip-02.jpg);}

#p3Clip .clip .comingSoon{top:auto; bottom:9px; left:74px;}
#p3Clip .clip:hover .comingSoon{bottom:49px; opacity:1;}

#p3Clip .clips{width:346px; height:205px; margin-bottom:12px; position:relative;}
#p3Clip .clips .clipIMG{background:no-repeat center; background-size:100% 100%; width:346px; height:162px; cursor:pointer; padding:0; margin:0; transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease;}
#p3Clip .clips .clipIMG:hover{background-size:110% 110%;}
#p3Clip .clips .clipInfos{margin:0; padding:0; width:346px; height:43px;}
#p3Clip #clip1.clips .clipIMG{background-image:url(../IMAGES/clip1.jpg);}
#p3Clip #clip1.clips .clipInfos{ background:url(../IMAGES/clip1-02.jpg) no-repeat;}
#p3Clip #clip2.clips .clipIMG{background-image:url(../IMAGES/clip2.jpg);}
#p3Clip #clip2.clips .clipInfos{ background:url(../IMAGES/clip2-02.jpg) no-repeat;}


/*part4*/
#part4 {width:100%; height:658px; background:#b8b0b6; z-index:7; position:relative;}
#part4 .BG1{position:absolute; top:0; left:0; width:50%; height:658px; background:url(../IMAGES/p4BG_1.jpg) repeat-x;}
#part4 .BG2{position:absolute; top:0; right:0; width:50%; height:658px; background:url(../IMAGES/p4BG_2.jpg) repeat-x;}
#part4 .partContent{position:absolute; left:50%; top:0; margin-left:-489px;}

#p4Btn{position:absolute; top:227px; left:19px;}
.CB{width:199px; height:199px; background:rgba(53,29,47,0.77);  border-radius:120px; transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; float:left; margin-right:9px; position:relative; z-index:1; cursor:pointer;}
.CB span{display:block; width:173px; height:173px; border-radius:120px; background:no-repeat center; transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; margin:13px; background-size:173px 173px;}
.CB.btn1{z-index:2;}
.CB.btn2{z-index:3;}
.CB.btn3{z-index:1;}
.CB.btn1 span{background-image:url(../IMAGES/p4Btn-01.png);}
.CB.btn2 span{background-image:url(../IMAGES/p4Btn-02.png);}
.CB.btn3 span{background-image:url(../IMAGES/p4Btn-03.png);}
.CB:hover{background:#000;}
.CB:hover span{background-size:195px 195px;}
.CB .comingSoon{top:auto; bottom:100px; left:50px; z-index:4;}
.CB:hover .comingSoon{bottom:120px; opacity:1;}

#p4Btn2{position:absolute; top:250px; right:13px;}
.CB2{width:200px; height:200px; background:url(../IMAGES/p4Btn2_text.png) no-repeat center #564251; border:13px solid #dcd8db; border-radius:300px; transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; cursor:pointer; position:relative;}
.CB2 .btnArrow{margin:131px auto 0;}
.CB2:hover{background-color:#000; border-color:#564251;}
.CB2 .comingSoon{top:auto; bottom:120px; left:15px;}
.CB2:hover .comingSoon{bottom:140px; opacity:1;}


/*footer*/
#footer{width:100%; padding:40px 0; background:#351d2f;}
#footer .partContent{margin:0 auto; padding:0; position:relative;}
#footer, #footer a{color:#27303b; font-family:'HelveticaNeueLTStdLt';}
#footer a:hover{color:#fff;}

#backLastPage{height:15px; line-height:15px; position:absolute; top:0; left:0;}
#backLastPage a{display:block; height:15px; line-height:15px; float:left; color:#f76252}
#backLastPage a .icon{display:block; float:left; width:21px; height:15px; background:url(../IMAGES/basic/backIcon.png) no-repeat top left; overflow:hidden; transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease;}
#backLastPage a .title{display:block; float:left; font-size:15px; height:15px; line-height:15px; font-family:"HelveticaNeueLTStdLt"; padding-top:1px; transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease;}
#backLastPage a:hover .icon{background-position:top right;}

#footerInfos{float:right; color:#f76252;}
#footerInfos .title{font-size:65%; font-family:'HelveticaNeueLTStdMd'; font-weight:normal; margin-bottom:10px;}
#footerInfos .title .series{font-family:'HelveticaNeueLTStdHv'; font-style:italic;}
#footerInfos .list{font-size:75%; letter-spacing:0; margin-bottom:45px;}
#footerInfos .list li{display:block; margin-bottom:5px;}
#footerInfos .list li span{display:inline-block; padding-right:5px; border-right:1px solid #27303b; margin-right:5px;}

#companyInfos h1{display:block; width:95px; height:43px; float:left; margin-right:25px;}
#companyInfos h1 a{display:block; width:95px; height:43px; background:url(../IMAGES/basic/footerLogo.png) no-repeat; text-indent:-999px; overflow:hidden;}
#companyInfos li{display:block; float:left; width:43px; height:43px; margin-right:3px;}
#companyInfos li a{display:block;width:41px; height:41px; border-radius:22px; background:url(../IMAGES/basic/socialIcon.png) no-repeat #27303b; text-indent:-999px; overflow:hidden; transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s;}
#companyInfos li a:hover{background-color:#fff; border-radius:5px;}
#companyInfos li a.facebook{background-position:0 0;}
#companyInfos li a.weibo{background-position:0 -41px;}
#companyInfos li a.instagram{background-position:0 -82px;}

#copyright{clear:both; font-size:70%; letter-spacing:0; padding-top:20px;} 

.clearBoth{clear:both;}