body{opacity: 0; overflow-x: hidden;}

.wrapper {
    position: relative;
    width: 100%;
    text-align: left;
    font-family:"微軟正黑體","Microsoft JhengHei","Apple LiGothic Medium", Arial, Helvetica, sans-serif;
    transition: all 0.2s; overflow: hidden; padding: 0 0 100px 0;
}

.wrapper img {
    border: 0;
    vertical-align: top; width: 100%;
}
.wrapper .mainArea{width: 90%; max-width: 1220px; margin: 0 auto; text-align: center; position: relative;}




.wrapper.headerr{padding: 0;}
.headerr{height: 941px; }
.headerr .bgTop{position: absolute; background:url(../images/bgTop.jpg) center top no-repeat;     width: 100%;  height: 100%;
	}
.headerr .bgTop2{position: absolute; background:url(../images/bgTop2.jpg) center top no-repeat; width: 100%;  height: 100%;
	}
.headerr .bgTopAnimation{transform:translate3d(0,0,0);
	-ms-animation: bgTop 24s linear; 
	-moz-animation: bgTop 24s linear; 
	-webkit-animation: bgTop 24s linear; 
	animation: bgTop 24s linear;
}
.headerr h1{position: relative; background:url(../images/title.png) center top no-repeat; width:100%; height: 100%; text-indent: -9999px;}
.headerr video{position: absolute; width: 100%;}

.headerr .cloud{
        margin-top: -550px;
    position: relative;
    width: 100%;}

-ms-@keyframes bgTop {
   0% { -ms-opacity: 100; transform:translate3d(0,0,0) scale(1);}
   8% { -ms-opacity: 100; transform:translate3d(0,0,0) scale(1);}
   15% { -ms-opacity: 0; transform:translate3d(0,0,0) scale(1.5);}
   95% { -ms-opacity: 0; transform:translate3d(0,0,0) scale(1);}
   100% { -ms-opacity: 100; transform:translate3d(0,0,0) scale(1);}
}
-moz-@keyframes bgTop {
   0% { opacity: 100; transform:translate3d(0,0,0) scale(1);}
   8% { opacity: 100; transform:translate3d(0,0,0) scale(1);}
   15% { opacity: 0; transform:translate3d(0,0,0) scale(1.5);}
   95% { opacity: 0; transform:translate3d(0,0,0) scale(1);}
   100% { opacity: 100; transform:translate3d(0,0,0) scale(1);}
}
-webkit-@keyframes bgTop {
   0% { opacity: 100; transform:translate3d(0,0,0) scale(1);}
   8% { opacity: 100; transform:translate3d(0,0,0) scale(1);}
   15% { opacity: 0; transform:translate3d(0,0,0) scale(1.5);}
   95% { opacity: 0; transform:translate3d(0,0,0) scale(1);}
   100% { opacity: 100; transform:translate3d(0,0,0) scale(1);}
}
@keyframes bgTop {
   0% { opacity: 100; transform:translate3d(0,0,0) scale(1);}
   8% { opacity: 100; transform:translate3d(0,0,0) scale(1);}
   15% { opacity: 0; transform:translate3d(0,0,0) scale(1.5);}
   95% { opacity: 0; transform:translate3d(0,0,0) scale(1);}
   100% { opacity: 100; transform:translate3d(0,0,0) scale(1);}
}







.btnTab1{transition: all 0.3s;    padding: 15px 45px 15px 55px; background: rgba(0,0,0,0.7); text-align: center; position: fixed;  
	right: -100%; bottom: 40px;     border-radius: 4em 0 0 4em; z-index: 99;}
.btnTab1 img{width: auto; height: 36px;}
.btnTab1 img.iconArrow{margin: 0 0 0 10px; 
	-ms-nimation:iconArrow 0.6s linear infinite alternate;
	-moz-animation:iconArrow 0.6s linear infinite alternate;
	-webkit-animation:iconArrow 0.6s linear infinite alternate;
	animation:iconArrow 0.6s linear infinite alternate;
}

.btnTab2{transition: all 0.3s;    padding: 15px 50px 15px 45px; background: rgba(0,0,0,0.7); text-align: center; position: fixed;     
	left:-100%; bottom: 40px;     border-radius: 0 4em 4em 0; z-index: 99;}
.btnTab2 img{width: auto; height: 36px;}
.btnTab2 img.iconArrow{margin: 0 20px 0 0; 
	-ms-nimation:iconArrow 0.6s linear infinite alternate;
	-moz-animation:iconArrow 0.6s linear infinite alternate;
	-webkit-animation:iconArrow 0.6s linear infinite alternate;
	animation:iconArrow 0.6s linear infinite alternate;
}

-ms-@keyframes iconArrow {
   from { transform: translateX(0px);}
     to { transform: translateX(10px); }
}
-moz-@keyframes iconArrow {
   from { transform: translateX(0px);}
     to { transform: translateX(10px); }
}
-webkit-@keyframes iconArrow {
   from { transform: translateX(0px);}
     to { transform: translateX(10px); }
}
@keyframes iconArrow {
   from { transform: translateX(0px);}
     to { transform: translateX(10px); }
}

.btnTab1:hover{background: rgba(0,0,0,1); transform: translateX(10px);}
.btnTab2:hover{background: rgba(0,0,0,1); transform: translateX(-10px);}

a.strokeBtn {
    display: block;
    color: #471a05;
    width: 330px;
    padding: 20px 0;
    text-align: center;
    background: rgba(255,255,255,0.5);
    border: solid 1px #471a05;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 50px;
    animation:strokeBtn 0.4s linear infinite alternate;
    transition: all 0.2s;
}
a.strokeBtn img{width: auto; height: 28px;
    margin: 0 0 0 10px; animation:strokeBtnImg 0.4s linear infinite alternate;}
a.strokeBtn:hover{animation: paused; transform: translateX(-50%) translateY(5px); box-shadow: 0 2px 2px rgba(0,0,0,0.3);}
@keyframes strokeBtn {
   from { filter: brightness(1);}
     to { filter: brightness(1.2); }
}
@keyframes strokeBtnImg {
   from { transform: translateX(0); }
     to { transform: translateX(5px); }
}




.wrapper h2{height: 200px; position: relative;
    text-align: center;
    margin-top: 50px; z-index: 10;}
.wrapper h2 img{width: auto; height: 100%; }
.wrapper.areaAbout h2{margin-top: -35px;}




.areaAbout{background: url(../images/bgAbout.jpg) center top no-repeat;  position: relative;}
.areaAbout .content{width: 58%; max-width: 770px;  background: #fff7f2 url(../images/bgg1.jpg) right bottom no-repeat; box-shadow: 0px 0px 8px rgba(0,0,0,0.5); 
    position: relative; left: 50%;
    margin: -69px 0 0 -160px;     padding-bottom: 154px;}
.areaAbout .content p{
    padding: 78px 0 0 53%;
    width: 98%;}
.areaAbout .content p span{ color: #125683; }
.areaAbout .content p b{color: #9b3e12; border-color: #9b3e12;}
.areaAbout .content iframe{ position: absolute;
        margin: 85px 0 0 -59%;
    width: 108%;
    height: 90%; }


.areaReason{background: url(../images/bgReason.jpg) center top no-repeat; position: relative; }
.areaReason .box {width: 31.5%; vertical-align: top;
    margin: 1.5% 2% 0 0; text-align: center;     display: inline-block;}
.areaReason .box:last-child{margin: 1.5% 0 0 0;}
.areaReason .box .picture{position: relative; box-shadow: 0 0 8px rgba(225,225,225,0.8);}
.areaReason .box .picture span{width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    position: absolute;
    left: 0;
    top: 0; transition: all 0.5s;}
 .areaReason .box:hover .picture span{opacity: 0;}

 .areaReason .box .picture p{color: #fff;
         transform: translate(-50%,-50%);
    position: absolute; left: 50%; top: 50%; width: 100%; transition: all 0.5s;
}
 .areaReason .box:hover .picture p{opacity: 0;}

.areaReason .box .bottom { width: 90%;
    margin: 13px auto; }
.areaReason .box .bottom .icon{ text-align: center; position: relative;}
.areaReason .box .bottom .icon img{width: auto;
    height: 145px;}
.areaReason .box .bottom .icon:before , .areaReason .box .icon:after{content: ""; border-bottom: 6px solid #fff; width: 30%;
    position: absolute;
    top: 50%; transform: translateY(-50%);}
.areaReason .box .bottom .icon:before{left: 0;}
.areaReason .box .bottom dt{color: #9b3e12; display: inline-block;  padding: 6px 12px; background: #fff; border-radius: 2em; margin: 13px 0 0 0;}
.areaReason .box .bottom .content{color: #fff; margin: 18px 0 0 0;}



.areaIntroduce{background: url(../images/bgIntroduce.jpg) center top no-repeat;     padding: 0 0 186px 0; position: relative;}
.areaIntroduce .mainArea .box{padding: 60px; border: solid 3px #808080; border-radius: 0.3em; background: rgba(255,255,255,0.5);       
	width: 650px;
    position: relative;
    left: 50%; top: 18px;
    transform: translateX(-50%);
	text-align: left; letter-spacing: 0;
	}
.areaIntroduce dt{display: inline-block;     border: solid 2px;
    border-radius: 2em;
   padding: 2px 20px 2px 0;     line-height: 1.2;}
.areaIntroduce dt span{background: #000;
    color: #fff;
    margin-right: 10px;
    border-radius: 2em 0 0 2em;
    padding: 0 14px 0 20px;}
.areaIntroduce dd{display: inline-block; color: #9b3e12; margin-left: 10px;}

.areaIntroduce ul{
        width: 91%;
    margin: 0 auto;
    }
.areaIntroduce li{
    margin: 22px 0;
    }
.areaIntroduce li:after{    content: "";
    border-bottom: 1px solid;
    width: 96%;
    display: block;
    float: right;}
.areaIntroduce li p{display: inline-block; vertical-align: top;}
.areaIntroduce li p.time{    width: 25%; color: #125683;}
.areaIntroduce li p.schedule{ width: 75%;}

.areaIntroduce .d4{width: 445px;
    position: absolute;
    left: -378px;
    top: 149px;}
.areaIntroduce .d5{width: 69px; position: absolute; left: -49px;
    top: 48px;}
.areaIntroduce .d6{width: 63px; position: absolute; right: 19px;
    top: -31px;}
.areaIntroduce .d7{width: 66px; position: absolute; right: 20px;
    bottom: 20px;}







.areaRoute{background: url(../images/bgRoute.jpg) center top no-repeat; position: relative;}

.areaRoute .dd{position: absolute; width: 320px;}
.areaRoute .d8{    left: 18px;
    top: 12px;}
.areaRoute .d9{left: 19px;
    bottom: 263px;}
.areaRoute .d10{right: 14px;
    top: 251px;}
.areaRoute .d11{right: 20px;
    bottom: 26px;}



.areaInterview{background: url(../images/bgInterview.jpg) center top repeat-y; position: relative; }
.areaInterview li{width: 30%; margin: 0 1.5%; display: inline-block;     vertical-align: top; position: relative;}
.areaInterview li b{    display: inline-block; background: #892c01; color: #fff; border-radius: 2em; padding: 0 28px; margin: 15px auto;     font-weight: 500;}
.areaInterview li h3{ color: #892c01; margin: 25px auto; line-height: 1; }
.areaInterview li h5{ margin: 6px auto; line-height: 1;     font-weight: 600;}
.areaInterview li a {    display: inline-block; position: relative;
    color: #000;
    border: solid 1px;
    border-radius: 0.2em;
    padding: 12px 54px 12px 16px;
    background: #fff;     margin: 20px auto; transition: all 0.2s;
}
.areaInterview li a i {
    display: inline-block;
    background: #000;
    color: #fff;
    font-size: 130%;
    position: absolute;
    right: 0;
    top: 0;
        width: 40px;
    height: 100%;
    padding: 15px 0 0 0; transition: all 0.2s;
}
.areaInterview li > i{width: auto;
    border-right: 1px dashed;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0; margin-right: -5%;}

.areaInterview li a:hover{color: #892c01;}
.areaInterview li a:hover i{width: 50px; background: #892c01;}






.areaApply{background:#f6ece2 url(../images/bgApply.jpg) center top no-repeat; position: relative; }

.areaApply a.downloadBtn {
    display: inline-block;
    color: #471a05;
    width: 260px;
    padding: 20px 0;
    text-align: center;
    background: rgba(255,255,255,0.5);
    border: solid 1px #471a05;
    animation:strokeBtn 0.4s linear infinite alternate;
    transition: all 0.2s;
}
.areaApply a.downloadBtn:hover{transform:translateY(5px); box-shadow: 0 2px 2px rgba(0,0,0,0.3);}

.areaApply .leftBox{width: 40%; position: relative;     margin: 40px 0 0 0; display: inline-block;} 
.areaApply .leftBox h3{color: #603926; }
.areaApply .leftBox p {
    width: 90%;
    margin: 11px auto;
}
.areaApply .leftBox b{display: block;}
.areaApply .leftBox b img {
    width: 85%;
    margin: 13px auto;
}
.areaApply .leftBox b.transform img{transform: scale(-1); margin: 30px auto;}
.areaApply .leftBox small {
    line-height: 1.2;
    display: block;
    width: 90%;
    margin: 0 auto;
}
.areaApply .leftBox p small{display: inline; font-size: 80%; letter-spacing: 0;}

.areaApply .mainArea .box {
    padding: 4%;
    border: solid 3px #808080;
    border-radius: 0.3em;
    background: rgba(255,255,255,0.5);
    text-align: left;
    letter-spacing: 0;
    width: 54%; 
    margin:40px 5% 0 0;
    display: inline-block;
    vertical-align: top;
}
.areaApply dt{display: inline-block;     border: solid 2px;
    border-radius: 2em;
   padding: 2px 20px 2px 0;     line-height: 1.2;}
.areaApply dt span{background: #000;
    color: #fff;
    margin-right: 10px;
    border-radius: 2em 0 0 2em;
    padding: 0 14px 0 20px;}
.areaApply dd {
    display: block;
    margin: 0px 0 25px 5px;
}

.areaApply ul{
        width: 97%;
    margin: 0 auto;
    }
.areaApply li{
    margin: 22px 0;
    }
.areaApply li:after{    content: "";
    border-bottom: 1px solid;
    width: 96%;
    display: block;
    float: right;}
.areaApply li p{display: inline-block; vertical-align: top;}
.areaApply li p.time{    width: 38%; color: #125683;}
.areaApply li p.schedule{ width: 62%;}


.mow {display: none; position: fixed; left: 20px; bottom: 50px; z-index: 99;}
.mow a {
    display: block;
    border-radius: 50%;
    background: #000;
    color: #fff;
    text-align: center;
    font-family:"微軟正黑體","Microsoft JhengHei","Apple LiGothic Medium", Arial, Helvetica, sans-serif;
    font-size: 14px;
    margin: 6px 0;
    width: 64px;
    height: 64px;
    padding: 15px 0 0 0;
    line-height: 1.2;
    transition: all 0.2s;
}
.mow a:hover{color: #000; background: rgba(255,255,255,0.7); box-shadow: 2px 2px 2px rgba(0,0,0,0.5); }

.mow a:last-child{padding: 0; background: none; text-align: center;}
.mow a:last-child img{width: 110%;     margin: 0 0 0 -5%; animation:mowApply 0.3s linear infinite alternate;}
@keyframes mowApply {
   from { transform: scale(1);}
     to { transform: scale(1.05);}
}
.mow a:hover img{animation: paused; transform: scale(1.05); filter: brightness(1.1);}



.areaSettour{background:url(../images/bgSettour.jpg) center 26px no-repeat; position: relative;}
.areaSettour h2{margin-top: -50px;}
.areaSettour h5 {display: inline-block;     margin: 30px 0 100px 1.5%;  position: relative;     width: 22.5%;}
.areaSettour h5:first-child {    margin: 30px 0 100px 3.5%; }
.areaSettour h5 p{    position: absolute;
    width: 100%;
    bottom: 0;
    padding: 15px 0;
    background: rgba(0,0,0,0.5);
    color: #fff;     font-weight: 400;}
.areaSettour h5 i{display: block; position: absolute; width: 100%;     width: 100%;
    font-style: normal;     padding: 15px 0;}







.wrapper .swiper-container {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
      margin-top: 20px;
  overflow: visible; transition: all 0.2s;
}
.wrapper .swiper-pagination-bullet{opacity: .5;}
.wrapper .swiper-pagination-bullet-active{background: #9b3e12; opacity: 1; transform: scale(1.3);}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{bottom: -20px;}

.wrapper .swiper-slide {
	height: 630px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.wrapper .swiper-slide.sp1{background: url(../images/sp1.jpg) center top no-repeat;}
.wrapper .swiper-slide.sp2{background: url(../images/sp2.jpg) center top no-repeat;}
.wrapper .swiper-slide.sp3{background: url(../images/sp3.jpg) center top no-repeat;}
.wrapper .swiper-slide.sp4{background: url(../images/sp4.jpg) center top no-repeat;}
.wrapper .swiper-slide.np1{background: url(../images/np1.jpg) center top no-repeat;}
.wrapper .swiper-slide.np2{background: url(../images/np2.jpg) center top no-repeat;}
.wrapper .swiper-slide.np3{background: url(../images/np3.jpg) center top no-repeat;}
.wrapper .swiper-slide.np4{background: url(../images/np4.jpg) center top no-repeat;}

.wrapper .swiper-pagination-bullet{width: 12px; height: 12px;}

.wrapper .swiper-slide .box{position: relative; width: 428px; height: 492px; background:rgba(0,0,0,0.6); margin: 0 0 0 -665px; border-radius: 0.2em; text-align: center; color: #fff;}
.wrapper .swiper-slide .box:before{content: ""; width: 96%; height: 96%; border: solid 2px #fff; border-radius: 0.2em; 
display: block;
    position: absolute;
    margin: 2%; opacity: 0.5;}
.wrapper .swiper-slide .box i.d13{margin: 27px 0 0 0; display: block;}
.wrapper .swiper-slide .box i.d13 img{width:auto; height: 39px;}
.wrapper .swiper-slide .box h3{font-size: 42px; font-weight: 700;    padding: 7px 0; text-shadow: 1px 1px 2px rgba(0,0,0,0.5);}
.wrapper .swiper-slide .box h3:after{content: ""; width: 76%; margin: 30px auto 15px; display: block; border-bottom: 1px solid #fff;}
.wrapper .swiper-slide .box p {
    width: 78%;
    margin: 0 auto; font-size: 16px; line-height:1.5; font-weight: 400; letter-spacing: 0.05em; text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

@media screen and (max-width:1240px){
	.wrapper .swiper-slide .box{
	margin: 0;
    position: absolute;
    left: 5%;
	}
}/*media*/

.bgC26{background: url(../images/bgC26.jpg) center bottom no-repeat; position: fixed; width: 100%; height: 1004px; bottom: 0;     z-index: -1; opacity: 0;}