@import url("page/home.css");
@import url("page/intro.css");
@import url("page/others.css");
@import url("page/recommend.css");
@import url("page/contact.css");
@import url("page/swiper.css");


.v-center {
    top: 50%;
    transform: translateY(-50%);
}

.mainImg{position:relative;background-size: cover;}
.mainImg img{object-fit:cover;width:100%;height:100%;}

.parallax { 
    position:relative;
    background-attachment:fixed;
    background-repeat: no-repeat;
    height:800px;
    
}

@media (min-width:1920px) {
    .parallax { 
        background-size:cover;
    }
}

.mainHeader{margin-left:50%;margin-bottom:100px;padding-right:2em;}
.mainHeader h2{color:#C4A089;display:inline-block;border-right:2px solid #C4A089;font-size:52px;padding-right:.5em;line-height:.9;font-weight:600}
.mainHeader h3{color:var(--blue);font-size:36px;margin:.8em 0;font-weight:600;line-height:1.5}
.mainHeader p{font-size:18px;line-height:2.2;max-width:620px}

.subHeader{margin:100px auto; padding:0 10%;color:var(--blue);}
.subHeader h2{font-size:70px;letter-spacing:.15em;line-height:1.5;}
.subHeader h3{font-size:25px;margin:.8em 0;line-height:1;display:inline-block;padding-right:1em;border-right: 1px solid var(--blue);}

.discription{
    margin:30px auto 90px;
    font-size:18px;
    /*padding-right: 50%;*/
    padding-left:10%;
    line-height:1.8;
}


.imgTxt{
    position:absolute;
    color:#fff;
    right:30px;
    bottom: 30px;
    font-size:13px !important;
    z-index: 10;
}

/*圖文2*/

:root{
    --layoout2imgH: 850px;
}

.layout2{
    padding:150px 0;
}

.layout2 .mainHeader{
    flex: 1;
    max-width:none;
    padding:0 12%;
    margin-left: 0;
}

.layout2 .imgZone{
    width: 50%;
    /*padding:150px 0;*/
    position:relative;
    text-align:left;
    padding-right: 80px;
}

.layout2 .imgZone aside{
    position:relative;
    display:inline-block;
    height: var(----layoout2imgH);
}

.layout2 .imgZone aside img{

}

/*********************button*****************/
.mainBtn{
    width:130px;
    line-height: 3;
    background-color:#eaebee;
    color:#333;
    display:block;
    margin:auto;
    border-radius:1.5em;
    margin-bottom: 1em;
    font-size:17px;
}
.mainBtn:hover{opacity:.9;}
.mainBtn .ico{height:15px;}


.circleBtn{
    width: 60px;
    height: 60px;
    background-color:#b02426;
    color:#fff;
    border-radius: 100%;
}

.circleBtn:hover{
    background-color:#e2c5af;
    color:#b02426;
}



.orgBtn{
    background-color:#b02426;
    color:#fff;
}

.closeBtn{
    background-color:#e1c5af;
    width: 70px;
    height: 70px;
}

.closeBtn:after{
    width:20px;
    height: 20px;
    display: block;
    margin: auto;
    content: "";
    background:no-repeat url(../images/ico/x.svg);
    background-size: contain;
}

.closeBtn:hover{
      background-color:#FFF;
}

.btnMore{color:var(--blue);margin:40px 0;display:block;width: 100%;}
.btnMore *{transition:.5s;}

.btnMore:after{
    content:"了解更多";
    margin-left:-4.5em;
    font-weight:bold;
    transition:.5s;
    opacity:0;
    color:var(--blue);
}

.btnMore:before{
    content: "...";
    background:var(--blue);
    color:#fff;
    width:35px;
    height:35px;
    border-radius:100%;
    display:inline-flex;
    align-items:center;
    justify-content: center;
    line-height:1;
    margin-right:10px;
    padding-bottom: 10px;
    transform: rotate(90deg);
    vertical-align: middle;
    transition:.3s;
}

.btnMore:hover:before{
     transform: rotate(180deg);
}

.btnMore:hover b{ opacity:0;}
.btnMore:hover:after{ opacity:1;}


/*********************button end*****************/


/*kv*/
.kv{height:inherit;overflow:hidden;}
.kv .kv_title h2{ writing-mode: vertical-lr;letter-spacing:.5em;line-height: 0;margin-bottom: 0;}


.video_con{
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
}
.video_frame{
	position: relative;
	display: block;
	width: 100%;
	padding-bottom: 56.25%;
	overflow: hidden;
}
.video_frame iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.video_frame video{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.swipeZone_info{
	position: absolute;
	bottom: -50px;
	left: 100px;
}
.index_spzs_frame{
	position: relative;
	width: 100%;
	padding-bottom: 40%;
	overflow: hidden;
	margin-bottom: 150px;
}
.index_spzs_box{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.object-left{
	object-position: center left;
}


/*Small PC*/
@media (max-width:1200px) {

    .parallax{ background-size:cover}

    .mainHeader p{font-size:17px;}
    .imgTxt{right:15px;bottom:15px;}

	.swipeZone_info{
		left: 15px;
	}
	.index_spzs_box .swipeZone{
		padding: 0;
	}
}

@media (max-width:1024px) {

    .parallax{
        background-attachment:scroll !important;
        background-position:center !important;
        background-size:cover;
    }
}

@supports (-webkit-touch-callout: none) {
  /* CSS specific to iOS devices */ 

      .parallax{
        background-attachment:scroll !important;
        background-position:center !important;
        background-size:cover;
    }
    
}


@media (max-width:960px) {
   .mainHeader p{ line-height: 2.2;}
   .subHeader h2{font-size:57px;}

	.swipeZone_info{
		position: relative;
		bottom: 0;
		left: 0;
		padding: 20px 10px;
	}
	.index_spzs_frame{
		padding-bottom: 0;
	}
	.index_spzs_box{
		position: relative;
		height: auto;
	}
}


/*Phone******************************************/    
@media (max-width:767px) {


    .mainHeader{margin-left:2em;margin-bottom:50px;}
    .mainHeader h3{font-size: 33px;}

    .parallax{
        height:500px !important; 
    }

    .mainImg{height:400px;}

    .subHeader h3{font-size:22px;}
    .subHeader h2{font-size:32px;letter-spacing:.1em;}


    .layout2{flex-direction:column;padding:80px 0;}
    .layout2 .imgZone{width:100%;padding:0 30px;}

    .discription{padding:0 12%;}
	.mainImg_autoHeight{
		height: auto;
	}
}

/* 2023.06.06 */
.page_slick_div{
	padding: 0 150px 100px;
    position: relative;
    margin-bottom: 100px;
	background-color: #dcdcdc;
}
.slick_item{
	display: none;
}
.slick_item:first-child{
	display: block;
}

@media (max-width: 1200px){
	.page_slick_div{
		padding: 0 80px 80px;
	}
}

@media (max-width: 960px){
	.page_slick_div{
		padding: 0 40px 40px;
	}
}

@media (max-width: 767px){
	.page_slick_div{
		padding: 0 20px 20px;
	}
	.page_slick_div .mainImg{
		height: 300px;
	}
	.swiper-button-next{
		right: 20px;
	}
	.swiper-button-prev{
		left: 20px;
	}
}