@charset "utf-8";
@import url("normalize.css");
@import url("header.css");
@font-face {
  font-family: '華康黑體 Std W3';
  src: url('../../fonts/DFHEISTD-W3.woff') format("woff"),
      url('../../fonts/DFHEISTD-W3.ttf') format("truetype"),
      url('../../fonts/DFHEISTD-W3.eot') format("embedded-opentype");
}
@font-face{
    /*font-family: 'Futura BK';*/
    font-family: 'Futura BK';
    src:url('../../fonts/Futura-Book-2.ttf');
}
/*載入字體
@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);
    */
.LoadHeader{
    width: 100%;
    min-height: 30px;
    position: fixed;
    z-index: 9999;
    /*background: #000000;*/
    font-size: 0;
    top:0;
    transition: all 0.7s ease-out;
    margin: 0 auto;
}
.LoadHeader.hide{
    top: -80px;
}
.header_box{
    width: 100%;
    max-width: 768px;
    margin: 0 auto;
    padding-top: 20px;
}
.header_logo{
    min-height: 50px;
    width: 100%;
    max-width: 200px;
    /*background: url(../images/logo1.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;*/
    margin: 0 auto;
}
.header_logo>a{
    width: 100%;
    height: 100%;
    display: block;
    min-height: 50px;
}
.nav{
    text-align: center;
}
.nav ul{
    display: inline-block;
    padding: 10px;
    color: #FFF;
    margin: 0 auto;
}
.nav ul>li{
    display: inline-block;
    padding: 10px;
    transition: 1s;
    -webkit-transition: 1s;
}
.nav ul>li:hover{
    color: #ffe759;
}
.nav ul>li a{
    font-size: 20px;
    line-height: 170%;
    letter-spacing: 2px;
}
.nav ul>li a .nav_icon{
   width: 100%;
    max-width: 30px;
    display: inline-block;
    margin-right: 8px;
    position: relative;
    top: 8px;   
}
.header_box{
    padding-bottom: 20px;
}
.LoadHeader .openBtn {
    width: 30px;
    height: 30px;
    display: inline-block;
    position: relative;
    top: 0px;
    padding-top: 13px;
    cursor: pointer;
}
.LoadHeader .opener{
    width: 100%;
    height: 3px;
    background-color: #fff;
    transition: all 0.3s ease-out ;
    margin: auto;
}
.LoadHeader .opener::after, .LoadHeader .opener::before {
    content: '';
    display: block;
    background-color:#fff;
    width: 100%;
    height: 100%;
    transition: 0.2s all ease;
}
.LoadHeader .opener::after {
    -webkit-transform: translateY(300%);
    -ms-transform: translateY(300%);
    transform: translateY(300%);
}
.LoadHeader .opener::before {
    -webkit-transform: translateY(-400%);
    -ms-transform: translateY(-400%);
    transform: translateY(-400%);
}
.LoadHeader .opener.action {
    background: transparent;
    transform: rotate(90deg);
}
.LoadHeader .opener.action::after {
    -webkit-transform: translateY(-100%) rotate(-45deg);
    -ms-transform: translateY(-100%) rotate(-45deg);
    transform: translateY(-100%) rotate(-45deg);
}
.LoadHeader .opener.action::before {
    -webkit-transform: translateY(0%) rotate(45deg);
    -ms-transform: translateY(0%) rotate(45deg);
    transform: translateY(0%) rotate(45deg);
}

.LoadHeader .header_mobile_nav {
    display: block;
    position: absolute;
    right: 10px;
    z-index: 99;
}

.mobile_nav_show {
    display: inline-block;
    padding-bottom: 10px;
        margin-right: 10px;
}
.mobile_nav_show li {
    display: inline-block;
    margin-right: 10px;
}
.mobile_nav_show li img {
    width: 30px;
}


.LoadHeader .nav {
    width:100%;
    height:0vh;
    position: fixed;
    left: 0px;
    top: 0px;
    float: none;
    background-color: rgba(23, 23, 23, 0.9);
    overflow:hidden;
    transition: all 0.5s ease-out ;
}

.LoadHeader  .nav.action {
    height:100vh;
    overflow:auto;
    padding-top: 70px ;
}
.LoadHeader  .nav ul {
    width:100%;
    height:auto;
    margin: 0 auto;
}
.LoadHeader  .nav ul>li {
    width: 100%;
    height: auto;
    padding: 5px;
    float: none;
}

/*avg nav*/
.avg_nav ul{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.avg_nav ul>li{
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.avg_nav ul>li.dropdown_li .dropdown_menu{
    width: 100%;
}
.avg_nav ul{
    display: block;
}
/*avg nav*/
    
/*dropdown*/
.dropdown_li{
        position: relative;
}
.dropdown_li .dropdown_menu{
    background: rgba(0,0,0,0.4);
    position: absolute;
     z-index: 99;
    left: 99999px;
    top: 100%;
   min-width: 180px;
    opacity: 0;
    /*display: none;*/
    -webkit-transition: opacity 0.3s;
        transition: opacity 0.3s;
    
}
.dropdown_li .dropdown_menu .dropdown_item{
    color: #FFF;
    display: block;
    padding: 10px;
    font-size: 16px;
}
.dropdown_li:hover .dropdown_menu{
    /*display: block;*/
    opacity: 1;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    left: -1px;
}
.dropdown_li .dropdown_menu .dropdown_item:hover{
    color: #ffe759;
    background: #000;
    transition: 0.2s;
    -webkit-transition: 0.2s;
}
.dropdown_li .dropdown_menu{
    background: none;
    position: static;
    z-index: 99;
    left: 0;
    top: 0;
    min-width: 180px;
    opacity: 1;
    display: block;
}
.dropdown_li .dropdown_menu .dropdown_item:hover{
    background: none;
}
/*dropdown*/

/*sideBySide*/
.header_box.sideBySide{
    padding: 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items:center;
    position: relative;
}
.header_box.sideBySide .header_logo{
    max-width:165px; 
    margin: 10px;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.header_box.sideBySide .nav{
    max-width: 768px; 
    left: 50%;
    transform: translateX(-50%);
    text-align: right;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.header_box.sideBySide .nav ul{
    text-align: center;
    padding: 0;
}
.header_box.sideBySide .nav ul.ul_left{
    text-align: left;
    padding: 10px;
}
.header_box.sideBySide .nav ul.ul_right{
    text-align: right;
    padding: 10px;
}    
.header_box.sideBySide .nav ul>li{
    padding: 0px;
    padding-bottom:  0px;
}
.testHeight {
    height: 50px;
    width: 100%;
    background: #FFF;
}
.Top {
    width:100%;
}
.Top img{
    width:100%;
}
.Logo{
    /*width:20.57292%;
    position:absolute;
    right:0px;
    left:0px;
    margin:0px auto;
    bottom: 5%;*/
    width: 8.57292%;
    position: absolute;
    right: 5%;
    left: unset;
    margin: unset;
    bottom: 5%;
}
.Logo img{
    width:100%;
}
.menu{
    width:100%;
    position:fixed;
    left:0px;
    bottom:0px;
    background-color:#4c4c4c;
    height:50px;
    white-space:nowrap;
    z-index:999;
	display:none;
}
.MenuBlock{
    width:33%;
    display:inline-block;
    position:relative;
    border-right: 1px solid #adadad;
    height: 50px;
}
.Pencil{
    width:29.5858%;
    position:absolute;
    left:0px;
    right:0px;
    margin:0px auto;
    top: 9px;
    bottom:10px;
}
.Map{
    width:29.98028%;
    position:absolute;
    left:0px;
    right:0px;
    margin:0px auto;
    top:9px;
}
.Tel{
    width:29.98028%;
    position:absolute;
    left:0px;
    right:0px;
    margin:0px auto;
    top:9px;
}
.VideoPic{
    width:86.71875%;
    margin: 10% 6.6%;
}
.VideoPic img{
    width:100%;
}
.play{
    width:19.53125%;
    position:absolute;
    left:0px;
    right:0px;
    margin:0px auto;
    top: 32%;
    transform:translateY(-50%);
}
.play img{
    width:100%;
}
.VideoText{
    color: #c9c1a5;
    font-family: '華康黑體 Std W3';
    font-size: 18px;
    font-weight: 100;
    line-height: 150%;
    letter-spacing: 3px;
    width: fit-content;
    white-space: nowrap;
    text-align: center;
    margin: 25px auto;
}
.Pic1{
    width:100%;
}
.Pic1 img{
    width:100%;
}
.PicDescribe{
    color:#fff;
    font-family:'華康黑體 Std W3';
    font-weight:500;
    font-size: 12px;
    width:auto;
    position:absolute;
    left:2%;
    bottom:2%;
}
.Pic2{
    width:100%;
}
.Pic2 img{
    width:100%;
}
.Pic3{
    width:100%;
}
.Pic3 img{
    width:100%;
}
.RightText{
    color: #fff;
    font-family: '華康黑體 Std W3';
    font-size: 18px;
    font-weight: 100;
    line-height: 166%;
    letter-spacing: 3px;
    width: 89.71875%;
    white-space: nowrap;
    text-align: right;
    margin: 13px auto;
}
.DivLine{
    white-space:nowrap;
    text-align:center;
}
.DivLeft{
    display:inline-block;
    width:6.90104vw;
    margin-right: 25%;
}
.DivLeft img{
    width:100%;
}
.DivRight{
    display:inline-block;
    width:7.55208vw;
}
.DivRight img{
    width:100%;
}
.DivForm{
    width: 286px;
    margin: 0px auto;
}
.DataRow{
    white-space:nowrap;
}
.DataColumn{
    display:inline-block;
    color: #c9c1a5;
    font-family: '華康黑體 Std W3';
    font-size: 18px;
    font-weight: 100;
    vertical-align: bottom;
    letter-spacing: 3px;
}
.DataInput{
    display:inline-block;
}
[type="checkbox"], [type="radio"] {
    box-sizing: border-box;
    padding: 0;
    width:10px;
    height:10px;
}
.DataRow .container {
    display: inline-block;
    /* width: 70px; */
    padding: 0px 10px;
    font-size: 30px;
    color: #c9c1a5;
    position: relative;
    padding-left: 22px;
    /* margin-bottom: 20px; */
    cursor: pointer;
    font-size: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: bottom;
    padding-top: 10px;
}
.HalfText{
    display: inline-block;
    width: 54px;
    padding: 1px 15px;
}

@media screen and (max-width: 480px) {
.LoadHeader .header_mobile_nav {
    top: 18px;
}
}

@media screen and (max-width: 390px) {
.LoadHeader .openBtn {
    width: 35px;
    height: 35px;
    top: 4px;
}
}
.header_box.sideBySide .nav ul>.phone_li{
    display: none;
}
@media screen and (max-width: 1024px) {
.header_box.sideBySide .nav ul>.phone_li{
    display: inline-block;
}
}

/*header end*//*header end*//*header end*//*header end*/
html{
    width: 100%;
    background-color: #000;
}
body{
    font-size: 16px;
	width: 100%;
    /*max-width: 768px;*/
    position:relative;
    background-color: #000;
    font-family: 'Noto Sans TC', Arial , 'Microsoft JhengHei'; 
    margin: 0 auto;
    overflow-y: scroll;
}

* {
    margin: 0;
    padding: 0;
    border: none;
    list-style:none;
    background-repeat:no-repeat;
    text-decoration:none;/*去底線*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

}

a {
    color: inherit;
}

h1, h2, h3, h4, h5, h6, p {
    line-height: 100%;
    font-weight: normal;
}

h1 {font-size: 4em;
     line-height: 120%;
}
h2 {font-size:  3.3em; 
     line-height: 120%;
}
h3 {font-size: 2em;
     line-height: 120%;
}
h4 {font-size: 1.7em;
     line-height: 120%;
}
h5 {font-size: 1.5em;
     line-height: 120%;
}
h6 {font-size: 1.2em;
     line-height: 120%;
}
p {font-size: 1em;
    line-height: 170%;
}
@media screen and (max-width: 370px) {
h2 {font-size:  2.2em;
}
h3 {font-size: 1.8em;
}
h4 {font-size: 1.6em;
}
h5 {font-size: 1.3em;
     line-height: 120%;
 }
}
@media screen and (max-width: 320px) {
h2 {font-size:  1.8em;
}
h3 {font-size: 1.6em;
}
h4 {font-size: 1.4em;
}
h5 {font-size: 1.2em;
}

}
/*LOADING*/
.loading {
    width: 100%;
    max-width: 768px;
    height: 100%;
    background-color:rgba(0, 0, 0, 0.65);
    z-index:999;
    position:fixed;
}
.loading > .box {
    width:90%;
    max-width: 320px ;
    height: 150px;
    margin: auto;
    padding-top: 90px;
    position:absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    /*background-image: url(../images/menu_logo.png);*/
    background-size: 100% auto;
    background-position: 50% 0%;
}
.loading > .box > div {
    width: 15px;
    height: 15px;
    background-color: #edeea9;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.loading > .box .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loading > .box .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}
/*LOADING*/

/*main*/
.wrapper{
    padding-top: 0px;
    width: 100%;
    height: auto;
    overflow-x: hidden;
}
.group_row {
    display: block;
    width: 100%;
    height: auto;
    color: #636363;
    position: relative;
    
}
.group_background{
    background: #000;
}
.right_navbox{
    display: block;
    padding: 30px;
    height: 100%;
    position: fixed;
    z-index: 9;
    right: 0;
    top: 0;
}
.right_navbox .right_nav{
    position: absolute;
    top: 40%;
    right: 20px;
}
.right_navbox .right_nav a{
    display: block;
    margin: 0px;
    border: 1px solid #cecece;
    margin: 10px 5px;
    top: 50%;
    height: 80px;
    padding: 1em .5em;
    transition: all .3s;
    cursor: pointer;
    color: #cecece;
    opacity: .6;
    position: relative;
}
.right_navbox .right_nav a.active{
    opacity:1;
    background: rgba(206,206,206,0.7);
    color: #000;
}
.right_navbox{display: none;}
.right_navbox .right_nav{display: none;}
/*main*/

/*cover*/
.cover .photo {
     height:100vh;
     overflow:hidden;
     background:#000;  
}

.cover .photo:before {
    width:50%; content:"";
    position:absolute;
    z-index:999;
    height:100%;
    background-color:#EBEBEB;
    transform:scaleX(0);
    transform-origin:0 50%;
    }
.cover  img { 
    display:block; 
    width:100%; 
    height:100%; 
    object-fit:cover; 
     }
.cover .con { 
    display:inline-block; 
    position:absolute; 
    top:30%; 
    left:160px; 
    width:70%; 
    color: #FFF;
}
.cover .con h3 { 
    margin-bottom:.7em; 
}
.cover .con h2 { 
    margin-bottom:.7em; 
}
.cover .con h5 { 
    margin-bottom:.6em; 
}
.cover .con h6 { 
    left:160px; 
    margin-top:.8em; 
}
.cover .con p {  
}
.cover .comment{
    position: absolute;
    right: 10px;
    bottom: 10px;
    color: #FFF;
    text-shadow: 3px 3px 3px #000000;
}
.cover .comment.comment_left{
    right: auto;
    left: 10px;
}

.cover .photo{
    height: 100vh;
}

/*swiper*/
.multiple_swiper .swiper-pagination-bullets {
    bottom: 50%;
    left: auto;
    right: 10px;
    width: auto;
    height: auto;
}
.multiple_swiper  .swiper-pagination-bullets .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 13px;
    display: block;
    background: #EEE;
    opacity: 0.6;
    transition: all 0.5s ease-out;
}
.multiple_swiper  .swiper-pagination-bullets .swiper-pagination-bullet-active {
    opacity: 1;
}
/*swiper*/
/*文字位置con*/
.cover .con_right{
    text-align: right;
    left: auto;
    right: 160px;
}
.cover .con_center{
    text-align: center;
    left: 15.5%;
    right: auto;
}
.cover .con_background{
    width: auto;
    background: rgba(0,0,0,0.65);
    padding: 20px;
}
.cover .con_bottom{
    top: auto;
    bottom: 10%;
}

.cover .square .con {
    left: 10%;
}
.cover .square  .con_right{
    left: auto;
    right: 10%;

}
.cover .square  .con_center{
    left: 15.5%;
    right: auto;
}
.cover .square  .con_bottom{
    top: auto;
    bottom: 10%;
}
.cover .square  .con_background {
    left: auto;
    right: auto;
    width: 100%;
}


@media screen and (max-width: 460px) {
.wrapper {
    padding-top: 0px;
}
.cover .photo {
    height: 100vh;
}
/*.multiple_swiper .swiper-wrapper .swiper-slide{
    height: 100vh;
}
.cover .con {
    position: static;
    width: 100%;
    margin: 0 auto;
    margin-top: -100px;
    display: block;
    padding: 0 30px;
}
.cover .con h3{
    position: relative;
    top: -10px;
}
.cover .con h2{
    position: relative;
    left: 0;
    top: -33px;
    margin-bottom: .2em;
}
.cover .con p{
    position: relative;
    left: 0;
    top: -22px;
    color: #000;
}
.cover .con_background p{
    color: #fff;
}
.cover .con.con_bottom {
    margin-top: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
 }
.cover .con.con_bottom h3{
    position: static;
    color: #636363;
}
.cover .con.con_bottom h2{
    position: static;
    color: #636363;
}
.cover .con.con_bottom p{
    position: static;
}
.cover .con.con_background.con_bottom h3{
    position: static;
    color: #eee;
}
.cover .con.con_background.con_bottom h2{
    position: static;
    color: #eee;
}
*/


}
@media screen and (max-width: 370px) {
 .cover .con {
    margin-top: -83px;
    padding: 20px 10px;
}   

}

/*文字位置con*/


/*cover*/



/*half*/
/*多對多*/
.half .half_multiple_swiper  li{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items:center;
}
.half .half_multiple_swiper .photo{
    height: 100%;
    position: relative;
    overflow: hidden;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;    
}
.half .half_multiple_swiper .photo img{
   display: block;
    width: 100%;
    object-fit: cover; 
    } 
/*多對一*/
.half .half_mImgToSingeleText_box{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items:center;
}
.half .half_mImgToSingeleText_box .half_mImgToSingeleText_swiper{
    height: 100%;
    overflow: hidden;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;    
}

.half .half_mImgToSingeleText_swiper .photo img{
   display: block;
    width: 100%;
    object-fit: cover; 
    } 
.half .con{
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding-top: 30px;
    padding-bottom: 30px;
}
.half .con h3{
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
}
.half .con h2{
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
}
.half .con h5{
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
}
.half .con p{
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
}
.half .comment{
    position: absolute;
    right: 10px;
    bottom: 10px;
    color: #FFF;
    z-index: 9;
    text-shadow: 3px 3px 3px #000000;
}
.half .comment.comment_left{
    right: auto;
    left: 10px;
}
.half  .pagination_wrap{
    width: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    bottom: 20px;
    z-index: 9999;
}
.half  .pagination_neighbor{
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.half .pagination{
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.half  .swiper-pagination{
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    position: static;
}
.half_multiple_swiper .swiper-pagination-bullets .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 13px;
    display: inline-block;
    background: #eee;
    opacity: 0.6;
    transition: all 0.5s ease-out;
}
.half_multiple_swiper .swiper-pagination-bullets .swiper-pagination-bullet-active {
    opacity: 1;
}
.half .half_mImgToSingeleText_swiper .swiper-pagination {
    max-width: 100%;
    position: absolute;
}
.half_mImgToSingeleText_swiper .swiper-pagination-bullets .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 13px;
    display: inline-block;
    background: #eee;
    opacity: 0.6;
    transition: all 0.5s ease-out;
}
.half_mImgToSingeleText_swiper  .swiper-pagination-bullets .swiper-pagination-bullet-active {
    opacity: 1;
}

/*reverse*/
.half .reverse .con{
    order: 1;
}
.half .half_multiple_swiper.reverse  .photo{
    order: 2; 
}
.half .half_mImgToSingeleText_box.reverse .half_mImgToSingeleText_swiper{
    order: 2; 
}
.half .reverse .pagination_neighbor{
    order: 1; 
}
.half .reverse .pagination{
    order: 2;
}
/*reverse*/

.half .half_multiple_swiper  li {
    display: block;
}
.half .half_multiple_swiper  .photo {
    flex: none;
}
.half .con{
    flex: none;
    padding: 30px;
}
.half .pagination_wrap {
    position: static;
    display: block;
}
.half  .pagination_neighbor{
    display: none;
}
.half .pagination{
    display: block;
}
.half_multiple_swiper .swiper-pagination-bullets .swiper-pagination-bullet {
    background: #ccc;
}
.half .half_mImgToSingeleText_box{
    display: block;
}
.half .half_mImgToSingeleText_box .half_mImgToSingeleText_swiper {
    flex: none;
}
.half .half_mImgToSingeleText_swiper .swiper-pagination {
    bottom: 0;
}
/*half*/

/*fullImgWithText*/
.fullImgWithText .photo {
     height:100vh;
     overflow:hidden;
     background:#000;  
}
.fullImgWithText .ph2 {
    
}
.fullImgWithText  img { 
    display:block; 
    width:100%; 
    height:100%; 
    object-fit:cover; 
     }
.fullImgWithText .comment{
    position: absolute;
    right: 10px;
    bottom: 10px;
    color: #FFF;
    text-shadow: 3px 3px 3px #000000;
}
.fullImgWithText .comment.comment_left{
    right: auto;
    left: 10px;
}
.fullImgWithText .con_box{
    width: 90%;
    height: 90%; 
    position: absolute;
    top: 5%;
    left: 5%;    
    color: #FFF;
}
.fullImgWithText .con_box .conY{
    position: absolute;
    width: 100%;
    top: 120px;
}
.fullImgWithText .con_box .conY_center{
    top: 20vh;
    bottom: auto;
}
.fullImgWithText .con_box .conY_bottom{
    top: auto;
    bottom: 0;  
}
.fullImgWithText .con_box .conY .conX{
    width: 50%;
    margin-left: 0;
    margin-right: auto;
}
.fullImgWithText .con_box .conY .conX_center{
    margin-left: auto;
    margin-right: auto;
}
.fullImgWithText .con_box .conY .conX_right{
    margin-left: auto;
    margin-right: 0;
}
.fullImgWithText .con_box .conY .conX .con_align{
    padding: 20px 20px 40px;
    text-align: left;
}
.fullImgWithText .con_box .conY .conX .con_align_center{
    text-align: center;
}
.fullImgWithText .con_box .conY .conX .con_align_right{
    text-align: right;
}
.fullImgWithText .con_box .conY .conX .con_background{

    background: rgba(0,0,0,0.6);
}
#fp-nav ul li a span, .fp-slidesNav ul li a span{
    border:1px solid  #fff;
}
#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span{
    background: #FFF;
}

.fullImgWithText .con_box .conY_center{
}
.fullImgWithText .con_box .conY .conX{
    width: 100%;
}

@media screen and (max-width: 460px) {
.fullImgWithText .con_box{
    width: 100%;
    height: 100%; 
    top: 0%;
    left: 0%;    
}
.fp-controlArrow {
    top: 55vh;
}
.fp-controlArrow.fp-next{
    border-width: 20px 0 20px 20px;
}
.fp-controlArrow.fp-prev {
    border-width: 20px 20px 20px 0;
}
}

.maptest{
    overflow: hidden;
    width: 100%;
    height: 50vh;
}

.fp-controlArrow.fp-next {
    border-width: 0;
    background: url(../images/slide_arrow_r.png);
    width: 50px;
    height: 50px;
    background-size: 50px 50px;
}
.fp-controlArrow.fp-prev {
    border-width: 0;
    background: url(../images/slide_arrow_l.png);
        width: 50px;
    height: 50px;
    background-size: 50px 50px;
}

/*youtube預設影片寬高比固定*/
.youtube_box{
    position: fixed;
    overflow: hidden;
    height: auto;
    width: 100%;
    min-height: 100vh;
    background: #000;
    top: 0px;
    left: 0px;
    display: none;
    z-index: 100;
}
.youtube_box .video_box {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    position: absolute;
    overflow: hidden;
    padding-bottom: 56.25%;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
.youtube_box .video_box .video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.youtube_box .video_box .video .player {
    width: 100%;
    height: 100%;
}
.youtube_box .inline-YTPlayer{
     top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);   
}
/*youtube預設影片寬高比固定*/
.youtube_box .video_box.video_box_fullHeight{
    padding-bottom: 0%;
    height: 100vh;
}
#player2 .video-stream{
    height: 100vh !important;
}

.youtube_box .arrow_down{
    width: 70px;
    height: 70px;
    position: absolute;
    left: 50%;
    bottom: 0px;
    margin-left: -35px;
    z-index: 50;
    color: #fff;
    text-shadow: 2px 2px 1px rgba(0,0,0,0.4);
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    /*font-family: "Times New Roman";*/
    letter-spacing: 2px;
    cursor: pointer;
}
.youtube_box .arrow_down .arrow {
    width: inherit;
    height: inherit;
    position: absolute;
    left: 0px;
    top: 0px;
    background-image: url(../images/img_scroll.png);
    background-position: 50% 50%;
    background-size: 50% 30%;
    -webkit-animation: down 1s ease 0s infinite;
    animation: down 1s ease 0s infinite;
}
@keyframes down {
  0% {
    top: -3px;
  }
  50% {
    top: 3px;
  }
  100% {
    top: -3px;
  }
}



@keyframes downtwo {
  0% {
    top: 3px;
  }
  50% {
    top: 9px;
  }
  100% {
    top: 3px;
  }
}


@media screen and (max-width: 768px) {
.youtube_box .arrow_down{
    width: 58px;
    height: 36px;
    margin-left: -29px;
}
.youtube_box .arrow_down .arrow{
    background-image: url(../images/img_scroll.png);
    background-position: 50% 50%;
    background-size: 29px 18px;
    -webkit-animation: downtwo 1s ease 0s infinite;
    animation: downtwo 1s ease 0s infinite;
}
}
@media screen and (max-width: 480px) {
.youtube_box .arrow_down .arrow {
    background-image: url(../images/img_scroll.png);
    background-position: 50% 50%;
    background-size: 15px 8px;
    -webkit-animation: downtwo 1s ease 0s infinite;
    animation: downtwo 1s ease 0s infinite;
}
}




@media screen and (max-width: 1024px) and (orientation:landscape) {
header .rotation {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0;
    z-index: 100;
    background-color: #363636;
    border: 15px solid #c2a45b;
    background-image: url(../images/landscape.jpg);
    background-position: 50% 50%;
}
}
/*@media screen and(min-aspect-ratio: 1/1){
header .rotation {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0;
    z-index: 100;
    background-color: #363636;
    border: 15px solid #c2a45b;
    background-image: url(../images/landscape.jpg);
    background-position: 50% 50%;
}
}*/
/*聯絡表單*/
.contact_box{
    background: url(../images/contact_bg.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    padding-top: 110px;
    padding-bottom: 70px;
    z-index: 11111;
}
.contact{
    width: 90%;
    max-width: 470px;
    color: #f3f3f3;
    margin: 0 auto;
    text-align: center;
}
.contact h6{
line-height: 180%;
font-weight: bold;
margin-bottom: 30px;
}
.contact p{
line-height: 160%;
margin-bottom: 20px;
}
form{
    text-align: left;
}
input::placeholder {
    vertical-align:baseline;
    color: #FFF;
}
input{
    background: rgba(0,0,0,0.2);
    border-bottom: 1px solid #7a7a7a;
    padding: 6px 15px;
    color: #FFF;
    width: 195px;
    box-sizing: border-box;
    -webkit-appearance: none;
    border-radius: 0;
}

.nameWrap label , .phoneWrap label{
    width: 80px;
    display: inline-block;
}
.container {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    cursor: pointer;
    /*font-size: 22px;*/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 9px;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: rgba(0,0,0,0.2);
    border: 1px solid #7a7a7a;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    background-color: rgba(0,0,0,0.2);
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
    
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.genderBox .container{
    display: inline-block;
    width: 90px;
}
.agreeWrap .container{
     display: inline-block;
    width: 120px;   
}
.privateInfo{
    text-decoration: underline;
    display: block;
    width: 130px;
    /* float: right; */
    color: #c9c1a5;
    font-size: 16px;
    vertical-align: bottom;
    /* margin-top: 11px; */
    display: inline-block;
    margin-bottom: 12px;
}
.sent_btn{
    width: 150px;
    margin: 0 auto;
}
.link_btn{
    display: block;
    margin: 20px auto 0;
    background: #5d5d5d;
    border: none;
    padding: 11px 40px;
    color: #FFF;
    font-family: 'TrajanProRegular';
    cursor: pointer;
    transition: 0.3s all ease;
}
.link_btn:hover{
    background-color: #242121;
}
.nameWrap , .phoneWrap , .agreeWrap{
    margin-bottom: 10px;
}
.agreeWrap{
    padding-top: 20px;
}



.black {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    right: 0;
    background-color: rgba( 0, 0, 0, 0.95);
    z-index: 1111111;
    margin: 0 auto;
}
.infoWrap {
    margin: 0 auto;
    max-width: 768px;
    position: relative;
    height: 90%;
}
.close_box{
    margin: 0 auto;
    max-width: 768px;
    position: relative;  
}
.closeBtn{
    height: 50px;
    position: absolute;
    right: 20px;
    top: 70px;
}
.infoBox{
    width: 100%;
    height: calc( 100% - 150px);
    padding: 50px 14px;
    position: absolute;
    left: 0px;
    top: 130px;
    overflow: auto;
    line-height: 20px;
    color: #FFF;
    text-align: left;  
}
.infoBox h3{
    font-size: 24px;
    margin-bottom: 10px;
}

footer{
    z-index: 11111;
    position: relative;
}

.form_box{
    width: 100%;
    height: 100vh;
    position: relative;
    background-color: #000;
    background-size: cover;
    background-position: 50%,50%;
}
.form_box .photo{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
.con_txt {
    width: 90%;
    max-width: 650px;
    height: auto;
    text-align: center;
    color: #fefefe;
    font-size: 2rem;
    padding: 0 2%;
    /* margin-top: 5%; */
    z-index: 10;
    margin: 5% auto 0;
    line-height: 150%;
    letter-spacing: 1px;
    font-family: Microsoft JhengHei;
    /* opacity: 0; */
}
.form_con_box {
    width: 90%;
    max-width: 650px;
    position: relative;
    margin: 3% auto;
    line-height: 180%;
    /* opacity: 0; */
}
.input_box {
    width: 100%;
    border: 2px solid #578c95;
    color: #578c95;
    font-size: 1.5rem;
    padding: 2% 3%;
    letter-spacing: 1.5px;
    font-family: Microsoft JhengHei;
    background-color: #00262a;
    margin: 5% auto;
}

input::-webkit-input-placeholder { /* WebKit browsers */ 
color: #578c95; 
} 
input::-moz-placeholder { /* Mozilla Firefox 19+ */ 
color: #578c95; 
} 
input::-ms-input-placeholder { /* Internet Explorer 10+ */ 
color: #578c95; 
} 
.input_boxs {
    width: 100%;
    /* color: #1f4a4e; */
    font-size: 1.8rem;
    padding: 2% 0%;
    letter-spacing: 1.5px;
    font-family: Microsoft JhengHei;
    margin: 5% auto;
}
.chacks {
    width: 20%;
    display: inline-block;
}
.chack_box{
    width: 4vw;
    height: 4vw;
    margin-right: 2%;
    background-color: #00262a;
    border: 2px solid #578c95;
    display: inline-block;
    vertical-align: middle;
}
.chack_txt{
    width: auto;  
    color: #fff;
    font-size: 1.8rem;
    font-family: Microsoft JhengHei;
    letter-spacing: 1.5px;  
    display: inline-block;
    vertical-align: middle;
}

.agree_box {
    width: 90%;
    max-width: 650px;
    position: relative;
    margin: 5% auto;
    line-height: 180%;
    overflow: hidden;
}
.agree_chacks{
    width: 40%;  
    float: left;
    display: inline-block;
    vertical-align: middle;
}
.agree_txt{
    width: auto;  
    float: right;
    color: #fff;
    font-size: 1.8rem;
    font-family: Microsoft JhengHei;
    letter-spacing: 1.5px;  
    display: inline-block;
    vertical-align: middle;
    border-bottom: 2px #fff solid;
    padding-bottom: 1%;
}
.btn_box{
    width: 130px;
    left: 0;
    right: 0;
    margin: 10% auto;
}
.btn_con{
    width: 130px;
    background-color: #c9c1a5;
    font-family: 'Futura BK';
    font-size: 18px;
    text-align: center;
    color: #000;
    /* padding: 5%; */
    max-width: unset;
    font-family: 'Futura BK';
    letter-spacing: 2px;
}

.chacks input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    /* width: 0; */
    /* pointer-events: none; */
}
.agree_box input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    /* width: 0; */
    /* pointer-events: none; */
}
.open_check:after {
    display: block;
    content: "";
    width: 2vw;
    height: 2vw;
    margin: 0vw;
    -ms-transform: rotate(45deg);
    background-color: #578c95;
    transform: translate(40%, 40%);
}
@media screen and (max-width: 500px){

.con_txt {
    font-size: 1rem;
    margin: 25% auto 0;
}
.input_box {
    font-size: .8rem;
}
.input_boxs {
    font-size: 1rem;
}
.chack_txt{
    font-size: 1rem;
}
.agree_txt{
    font-size: 1rem;
}
.btn_con{
    font-size: 1.2rem;  
}
}

@media screen and (max-width: 320px){
.open_check:after {
    transform: translate(20%, 20%);
}
.agree_txt {
    padding-bottom: 0%;
}
}
.BottomLogo {
    width:13.93229%;
    position:absolute;
    left:0px;
    right:0px;
    margin:0px auto;
    top:42%;
}
.BottomLogo img{
    width:100%;
}