#mtkContainer,#mtkContainer * { box-sizing: border-box; }
#mtkContainer { position: relative; }

:root {
    --culture-color: #a21b00;
    --culture-background-color: #a21b00;

    --camping-color: #1d6c93 ;
    --camping-background-color: #1d6c93 ;
    --camping-boder: 1px solid #1d6c93;

    --indigenous-color: #118534 ;
    --indigenous-background-color: #118534 ;
    --indigenous-boder: 1px solid #118534;

    --farm-color: #abb845 ;
    --farm-background-color: #abb845 ;
    --farm-boder: 1px solid #abb845;


    --sea-color: #447bdf ;
    --sea-background-color: #447bdf ;
    --sea-boder: 1px solid #447bdf;


    --pet-color: #c86f26 ;
    --pet-background-color: #c86f26;
    --pet-boder: 1px solid #c86f26;

    --item-max-width:1150px;
}


header.header { position: relative; width: 100%; height: 426px; }
header.header h1 { position: absolute; top: -1000px; left: 1000px; display: block; font-size: 0; opacity: 0; line-height: 0;}
.culture header.header { background: url(../images/header_culture.jpg) top center no-repeat; overflow: hidden; }
.pet header.header { background: url(../images/header_pet.jpg) top center no-repeat; overflow: hidden; }
.camping header.header { background: url(../images/header_camping.jpg) top center no-repeat; overflow: hidden; }
.indigenous header.header { background: url(../images/header_indigenous.jpg) top center no-repeat; overflow: hidden; }
.farm header.header { background: url(../images/header_farm.jpg) top center no-repeat; overflow: hidden; }
.sea header.header { background: url(../images/header_sea.jpg) top center no-repeat; overflow: hidden; }
.family header.header { background: url(../images/header_family.jpg) top center no-repeat; overflow: hidden; }




.localMenu { display: flex; position: sticky; top:0; width: 100%; background: #ebeff3; z-index: 10; justify-content: center;}
.localMenu a { display: inline-block; position: relative; padding: 10px 25px; font:17px/1.5 "微軟正黑體"; color: #666666; letter-spacing: 2px;}
.localMenu a::after { content: ""; position: absolute; top:calc(100% - 2px); left: 0; width: 100%; height: 2px; 
    background-color: var(--culture-background-color); z-index: 1;opacity: 0; transition: .5s;}
.localMenu a:hover {  font-weight: bold; }
.localMenu a.on::after,
.localMenu a:hover::after { opacity: 1; }

.promo .ph-menu,
.promo .ph-group-title { display: none;}
.promo .ph-group-content { display: flex; margin: 0 auto; padding: 60px 0 0 0; max-width: 1150px;}
.promo .ph-group-content-photo { display: inline-block; width: 30%;}
.promo .ph-group-content-photo img { width: 100%; }
.promo .ph-group-content-text { display: inline-block; padding: 20px; width: 70%;}
.promo .ph-group-content-text-name { display: flex; margin-bottom: 10px; font:24px/1 "微軟正黑體"; color: var(--culture-color); letter-spacing: 2px; align-items: center; vertical-align: middle; }
.promo-text h2 span { display: inline-block; padding: 5px 10px; color: white; background-color: var(--culture-background-color); }
.promo .ph-group-content-text-detail { padding: 0 0px; font:17px/1.5 "微軟正黑體"; color: #666666; letter-spacing: 2px; }
.promo .ph-group-content-otherlink a { display: inline-block; margin-right: 10px; padding: 5px 8px; font:15px/1.5 "微軟正黑體";  color: var(--culture-color); letter-spacing: 2px;
    border-radius: 99em; border: 1px solid #a21b00; }
.promo .ph-group-content-otherlink a:hover { color: white; background: var(--culture-background-color); border:none; }




.item { position: relative; padding: 70px 0;}
.item .ph { position: relative; text-align: center; margin-bottom: 50px; z-index: 5;}
.item .ph-menu {display: block; margin: 0 auto; max-width: var(--item-max-width); }
.item .slidecontain { position: relative; display: flex; margin: 0 auto 20px auto; max-width: var(--item-max-width); }
.item .slidecontain li { display: inline-block;}
.item .slidecontain a { display: inline-block; padding: 5px 12px; font:17px/1.5 "微軟正黑體"; color: var(--culture-color); }
.item .slidecontain a:hover ,
.item .slidecontain .on a { color: white; background: var(--culture-background-color);}
.item .slidecontain::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background: var(--culture-background-color);}

.item .ph-title { display: block !important; margin: 0 auto; padding-bottom: 5px; max-width: var(--item-max-width); font:24px/1 "微軟正黑體"; color: var(--culture-color); letter-spacing: 2px; text-align: left;} 

.item .ph-group-title { display: none; margin-bottom: 10px;  }
.item .ph-group-title.on { display: block;}
.item .ph-group-title span { display: inline-block; position: relative; font:20px/1 "微軟正黑體"; color: var(--culture-color); letter-spacing: 2px; }
.item .ph-group { display: none;  margin: 0 auto 25px auto; padding: 15px 0 15px 0; max-width: var(--item-max-width);/*overflow-x: scroll*/; }
.item .ph-group.on { display:block; }
.item.bg .ph-group { /*background: rgba(255,255,255,0.7)*/;}
.item .ph-group-content { padding: 10px; text-align: left; flex-shrink: 1; /*background: white*/; }

.item .ph-group-content-photo{position: relative;}
.item .ph-group-content-tag{position: absolute;top: 0px;left: 0px;background:#000;color:#FFF; padding: 5px 10px;}

.item .ph-group-content:first-child { margin-left: 0;}    
.item .ph-group img { width: 100%;}
.item .ph-group-content-text { padding: 10px;}
.item .ph-group-content-text-name { font:bold 18px/1.7 "微軟正黑體"; color: #333; letter-spacing: 2px;  }
.item .ph-group-content-text-price { display: block; margin-top: 20px; font:20px/1 "arial","微軟正黑體"; color: var(--culture-color); letter-spacing: 0px; text-align: right; }
.item .ph-group-content-text-price span { font-size: 0.5em; line-height: 2.2em;}
.item .ph-group-content-text-sale{margin: 10px auto;font:14px/1.5 "微軟正黑體";color:#575757;letter-spacing: 2px;}
.item .ph-group-content-text-detail{margin: 10px auto; font: 14px/1.5 "微軟正黑體";color: #575757;letter-spacing: 2px;}
.item .ph > a {  display: none; margin-right: 10px; padding: 5px 8px; font:15px/1.5 "微軟正黑體";  color: var(--culture-color); letter-spacing: 2px;
    border-radius: 99em; border: 1px solid #a21b00; }
.item .ph > a.on { display: inline-block; } 
.item .ph > a:hover { color: white; background: var(--culture-background-color); }




.item .ph-group.listMode { margin: 0 auto 0 auto;}
.item .ph-group.listMode .ph-group-content { display: inline-block; padding: 5px 0 0 0; width:100%; border-bottom:1px dotted rgba(0,0,0,0.25)}
.item .ph-group.listMode img { display: none;}
.item .ph-group.listMode .ph-group-content-text { padding: 0 0 5px 0;}
.item .ph-group.listMode .ph-group-content-text-name { font-size: 16px;}
.item .ph-group.listMode .ph-group-content-text-price { margin-top: 0 ;}

.item .ph-group.listMode .ph-group-content .ph-group-content-photo .ph-group-content-tag {position: static;}

.item .ph-group.listMode .ph-group-content {padding: 15px 0 0px 0;}
.item .ph-group.listMode .ph-group-content-text {margin-top: 10px;}


.viewChange { margin: 0 auto; width: 90%; max-width: var(--item-max-width);  text-align:  right;}
.viewChange a { position: relative; display: inline-block; padding: 0 ; width: 20px; height: 20px; cursor: pointer; }
.viewChange .box span { position: absolute; width: 45%; height: 45%; background: #aaa;}
.viewChange .box span:nth-child(1) {  top:0; left: 0;}
.viewChange .box span:nth-child(2) {  top:0; right: 0;}
.viewChange .box span:nth-child(3) {  bottom:0; left: 0;}
.viewChange .box span:nth-child(4) {  bottom:0; right: 0;}

.viewChange .list span { position: absolute; width: 100%; height: 20%; background: #aaa; }
.viewChange .list span:nth-child(1) {  top:0; right: 0;}
.viewChange .list span:nth-child(2) {  top: calc(50% - 10%); right: 0;}
.viewChange .list span:nth-child(3) {  bottom:0; right: 0;}

/*新原民*/

.areaBase{padding: 42px 0;}
/*.areaBase:nth-of-type(even) {background: #f4f1ec;}*/
.areaBase h2 {text-align: center;font:bold 36px/1.4 "微軟正黑體";color:var(--indigenous-color);}
.areaBase h3 {text-align: center;font:24px/1.4 "微軟正黑體";background: var(--indigenous-color);display: block;padding:  5px 10px;border-radius: 30px;color:#FFF;margin: 5px auto;width:200px; }

/*條列模組*/
.itemBase{width: 80%;margin: 0 auto;}
.itemBase .ph{margin: 20px auto;max-width: 1400px;background: #FFF;box-shadow: 0px 0px 15px rgba(0,0,0,0.2);}
.itemBase .ph-group{padding: 40px 40px 10px 40px;}
.itemBase .ph-group-title{display: none;}
.itemBase .ph-menu{display: none;}
.itemBase .ph .ph-group .ph-group-content{position: relative;padding: 0 0 55px 0;margin: 0 0 15px 0px;border-bottom: dashed #878787 1px;}
.itemBase .ph .ph-group .ph-group-content:last-of-type{border-bottom: none;}
.itemBase .ph .ph-group .ph-group-content:nth-of-type(1){padding: 0 0 15px 0 ;}
.itemBase .ph .ph-group .ph-group-content:nth-of-type(1) .ph-group-content-photo{display: inline-block;width:20%;min-width: 150px;position: relative;}
.itemBase .ph .ph-group .ph-group-content:nth-of-type(1) .ph-group-content-photo .ph-group-content-tag{position: absolute;top: 0;left:0;background: #c37f24;font:14px/1.4 "微軟正黑體";color:#FFF;padding: 5px;}
.itemBase .ph .ph-group .ph-group-content:nth-of-type(1) .ph-group-content-text{display: inline-block;width: 65%;margin-left: 10px;}
.itemBase .ph .ph-group .ph-group-content:nth-of-type(1) .ph-group-content-photo img{width: 100%;}

.itemBase .ph .ph-group .ph-group-content .ph-group-content-text-detail{font:16px/1.4 "微軟正黑體";color:var(--indigenous-color);margin: 5px auto 0 auto;}
.itemBase .ph .ph-group .ph-group-content .ph-group-content-photo{display: none;}
.itemBase .ph .ph-group .ph-group-content-text-name {font:bold 22px/1.4 "微軟正黑體";color:#3e3e3e;}

.itemBase .ph .ph-group .ph-group-content-text-sale{font:18px/1.4 "微軟正黑體";margin-top: 5px;color:#c37f24;}
.itemBase .ph .ph-group .ph-group-content-otherlink{display: none;}
.itemBase .ph .ph-group .ph-group-content .ph-group-content-text-price {position: absolute;right: 0px;bottom: 15px;border-radius: 30px;border:1px solid var(--indigenous-color);padding: 5px 20px;font:18px/1.4 "微軟正黑體";color:var(--indigenous-color);transition: 0.3s;}
.itemBase .ph .ph-group .ph-group-content .ph-group-content-text-price span{font:14px/1.8 "微軟正黑體";}
.itemBase .ph .ph-group .ph-group-content:hover .ph-group-content-text-price{ background: var(--indigenous-color);color:#FFF;}


@media only screen and (max-width:950px){
.itemBase{width: 95%;}
.itemBase .ph .ph-group .ph-group-content-text-name {font:18px/1.4 "微軟正黑體";}
.itemBase .ph .ph-group .ph-group-content:nth-of-type(1){padding: 0 0 55px 0 ;}

}


@media only screen and (max-width:600px){
.itemBase .ph .ph-group .ph-group-content .ph-group-content-text-price {font:16px/1.4 "微軟正黑體";}
.itemBase .ph .ph-group .ph-group-content .ph-group-content-text-price span{font:14px/1.6 "微軟正黑體";}

.itemBase .ph .ph-group .ph-group-content:nth-of-type(1) .ph-group-content-photo {width: 100%;}
.itemBase .ph .ph-group .ph-group-content:nth-of-type(1) .ph-group-content-text{width: 100%;margin-left: 0;}
.itemBase .ph-group {padding: 20px;}

.itemBase .ph .ph-group .ph-group-content-text-name{display: block;margin-top: 15px;}


.areaBase h2{font:bold 30px/1.4 "微軟正黑體";}
.areaBase h3{font:20px/1.4 "微軟正黑體";}

}



/*原民部落模組*/
.tourBase{padding: 40px 0;}
.tourBase .ph-menu{display: none;}
.tourBase .ph-group-title{display: none;}
.tourBase{width: 60%;margin: 0 auto;}
.tourBase .ph{margin: 20px auto;max-width: 1400px;}
.tourBase .ph .ph-group .ph-group-content{display: inline-flex;flex-wrap: wrap;margin: 20px auto;}
.tourBase .ph .ph-group .ph-group-content .ph-group-content-photo{width: 30%;position: relative;z-index: 0;border:8px solid #FFF;box-shadow: 0px 0px 10px rgba(0,0,0,0.2);}
.tourBase .ph .ph-group .ph-group-content .ph-group-content-photo img{width: 100%;}
/*.tourBase .ph .ph-group .ph-group-content .ph-group-content-photo::before{content: "";position: absolute;width: 100%;height: 100%;background: #FFF;z-index:-1;}*/

.tourBase .ph .ph-group .ph-group-content .ph-group-content-text{width: 65%;margin: 0 20px;letter-spacing: 1;}
.tourBase .ph .ph-group .ph-group-content-text-name {font:bold 28px/1.4 "微軟正黑體";color:#3e3e3e;padding: 0 0 0 30px;position: relative;}
.tourBase .ph .ph-group .ph-group-content-text-name::before{content: "";width: 5px;height: 90%;position: absolute;left: 10px;top: 5%;background:#3e3e3e; }
.tourBase .ph .ph-group .ph-group-content .ph-group-content-text-detail{font:16px/1.6 "微軟正黑體";color:var(--indigenous-color);margin: 5px auto 0 auto;letter-spacing: 1;}
.tourBase .ph .ph-group .ph-group-content-otherlink{display: none;}
.tourBase .ph .ph-group .ph-group-content-text-price {display: none;}

.tourBase .ph .ph-group .ph-group-content:nth-of-type(even) .ph-group-content-photo{order: 0;}
.tourBase .ph .ph-group .ph-group-content:nth-of-type(even) .ph-group-content-text{order: 1;}
.tourBase .ph .ph-group .ph-group-content:nth-of-type(odd) .ph-group-content-photo{order: 1;}
.tourBase .ph .ph-group .ph-group-content:nth-of-type(odd) .ph-group-content-text{order: 0;}

/*.tourBase .ph .ph-group .ph-group-content:nth-of-type(odd) .ph-group-content-photo::before{right: -10px;bottom: -10px;}
.tourBase .ph .ph-group .ph-group-content:nth-of-type(even) .ph-group-content-photo::before{left: -10px;bottom: -10px;}
*/
@media only screen and (max-width:1400px){
.tourBase{width: 80%;}

}

@media only screen and (max-width:1000px){
.tourBase .ph .ph-group .ph-group-content .ph-group-content-text {width: 60%;}
}

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

.tourBase{width: 90%;}
.tourBase .ph .ph-group .ph-group-content .ph-group-content-photo{width: 40%;}
.tourBase .ph .ph-group .ph-group-content .ph-group-content-text{width: 50%;}
}

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

.tourBase {padding: 30px 0;}
.tourBase .ph .ph-group .ph-group-content .ph-group-content-photo{width:100%;margin: 0 auto;}
.tourBase .ph .ph-group .ph-group-content .ph-group-content-text{width: 100%;}
.tourBase .ph .ph-group .ph-group-content:nth-of-type(odd) .ph-group-content-photo{order: 0;}
.tourBase .ph .ph-group .ph-group-content:nth-of-type(odd) .ph-group-content-text{order: 1;}
.tourBase .ph .ph-group .ph-group-content .ph-group-content-text{margin: 10px auto;}
.tourBase .ph .ph-group .ph-group-content .ph-group-content-text-name {font:bold 20px/1.4 "微軟正黑體";}
}

@media only screen and (max-width:400px){
.tourBase {padding: 10px 0;}
}


/*新原民BN*/
.bnad {text-align: center;margin:30px auto;}
.bnad img.m{display: none;}

@media only screen and (max-width: 1250px){
.bnad {width: 92%;margin: 20px auto;}
.bnad img{width: 100%;}

}

@media only screen and (max-width: 600px){
.bnad img.m{display: block;}
.bnad img.pc{display: none;}
}







@media only screen and (max-width: 980px){
header.header { height: 37vw;background-size: 185% !important;}

}

@media only screen and (max-width: 800px) {
#linePage .localMenu{justify-content: center;}

.localMenu { flex-wrap: nowrap; justify-content: center; overflow: hidden;overflow-x: scroll; justify-content: left;  }
.localMenu a { flex-shrink: 0;}
}


@media only screen and (max-width: 550px) {
    .localMenu { background: var(--culture-background-color);}
    .localMenu a { margin:1% 2% 1% 0; padding: 1% 2%; font: 14px/1.5 "微軟正黑體"; color: white; border-right:1px solid white;}
    #linePage .localMenu a:last-of-type{border-right:none;}


    .promo .ph-group-content { display: flex; flex-wrap: wrap; padding: 0;}
    .promo .ph-group-content-photo , 
    .promo .ph-group-content-text { display: block; padding: 20px; width: 100%; flex-shrink: 0;}

    .item { padding: 0 0 10% 0;}    
    .item .ph { padding: 2% 7%;}
    .item .ph-group-content { width: 100%;}

}








/*****以下為主題相關CSS修改，無關乎RWD，重要度低，因此放最下面*******/






/****各個顏色主題 START****/
/*--露營 START--*/
.camping .promo-text h2 span,
.camping .promo .ph-group-content-otherlink a:hover,
.camping .item .ph > a:hover,
.camping .item .slidecontain a:hover ,
.camping .item .slidecontain .on a,
.camping .item .slidecontain::after,
.camping .localMenu a::after   { color: white; background-color: var(--camping-background-color);}

.camping .promo .ph-group-content-text-name,
.camping .promo .ph-group-content-otherlink a,
.camping .item .ph > a,
.camping .item .slidecontain a,
.camping .item .ph-title,
.camping .item .ph-group-title span,
.camping .item .ph-group-content-text-price  { color: var(--camping-color);}

.camping .promo .ph-group-content-otherlink a,
.camping .item .ph > a  {  border: var(--camping-boder); }
/*--露營 END--*/


/*--原民 START--*/
.indigenous .promo-text h2 span,
.indigenous .promo .ph-group-content-otherlink a:hover,
.indigenous .item .ph > a:hover,
.indigenous .item .slidecontain a:hover ,
.indigenous .item .slidecontain .on a,
.indigenous .item .slidecontain::after,
.indigenous .localMenu a::after   { color: white; background-color: var(--indigenous-background-color);}

.indigenous .promo .ph-group-content-text-name,
.indigenous .promo .ph-group-content-otherlink a,
.indigenous .item .ph > a,
.indigenous .item .slidecontain a,
.indigenous .item .ph-title,
.indigenous .item .ph-group-title span,
.indigenous .item .ph-group-content-text-price  { color: var(--indigenous-color);}

.indigenous .ph-group-content-otherlink a,
.indigenous .item .ph > a  {  border: var(--indigenous-boder); }
/*--原民 END--*/



/*--農場 START--*/
.farm .promo-text h2 span,
.farm .promo .ph-group-content-otherlink a:hover,
.farm .item .ph > a:hover,
.farm .item .slidecontain a:hover ,
.farm .item .slidecontain .on a,
.farm .item .slidecontain::after,
.farm .localMenu a::after   { color: white; background-color: var(--farm-background-color);}

.farm .promo .ph-group-content-text-name,
.farm .promo .ph-group-content-otherlink a,
.farm .item .ph > a,
.farm .item .slidecontain a,
.farm .item .ph-title,
.farm .item .ph-group-title span,
.farm .item .ph-group-content-text-price  { color: var(--farm-color);}

.farm .ph-group-content-otherlink a,
.farm .item .ph > a  {  border: var(--farm-boder); }
/*--農場 END--*/




/*--海洋 START--*/
.sea .promo-text h2 span,
.sea .promo .ph-group-content-otherlink a:hover,
.sea .item .ph > a:hover,
.sea .item .slidecontain a:hover ,
.sea .item .slidecontain .on a,
.sea .item .slidecontain::after,
.sea .localMenu a::after   { color: white; background-color: var(--sea-background-color);}

.sea .promo .ph-group-content-text-name,
.sea .promo .ph-group-content-otherlink a,
.sea .item .ph > a,
.sea .item .slidecontain a,
.sea .item .ph-title,
.sea .item .ph-group-title span,
.sea .item .ph-group-content-text-price  { color: var(--sea-color);}

.sea .ph-group-content-otherlink a,
.sea .item .ph > a  {  border: var(--sea-boder); }
/*--海洋 END--*/



/*--寵物 START--*/
.pet .promo-text h2 span,
.pet .promo .ph-group-content-otherlink a:hover,
.pet .item .ph > a:hover,
.pet .item .slidecontain a:hover ,
.pet .item .slidecontain .on a,
.pet .item .slidecontain::after,
.pet .localMenu a::after   { color: white; background-color: var(--pet-background-color);}

.pet .promo .ph-group-content-text-name,
.pet .promo .ph-group-content-otherlink a,
.pet .item .ph > a,
.pet .item .slidecontain a,
.pet .item .ph-title,
.pet .item .ph-group-title span,
.pet .item .ph-group-content-text-price  { color: var(--pet-color);}

.pet .ph-group-content-otherlink a,
.pet .item .ph > a  {  border: var(--pet-boder); }
/*--寵物 END--*/



@media only screen and (max-width: 550px) {
.camping .localMenu { background: var(--culture-background-color);}
.indigenous .localMenu { background: var(--indigenous-background-color);}
.farm .localMenu { background: var(--farm-background-color);}
.sea .localMenu { background: var(--sea-background-color);}
.pet .localMenu { background: var(--pet-background-color);}

}


/****各個顏色主題 END****/








.slick-prev:before, .slick-next:before { color: black;}
.header-menu-level1 li.on { background: #2d7cd1;}
.header-menu-level1 li.on a { color: white !important;  }

.bg { }
.bg::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; z-index: 1px;
    background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));}
.bg::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100px; z-index: 1px;
    background: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,0));}
.bg-culture-1 { background: url(../images/bg-culture-1.jpg) top center no-repeat;}  
.bg-culture-2 { background: url(../images/bg-culture-2.jpg) top center no-repeat;}  

.bg-indigenous-1 { background: url(../images/bg-indigenous-1.jpg) top center no-repeat;}
.bg-indigenous-2 { background: url(../images/bg-indigenous-2.jpg) top center no-repeat;}
.bg-indigenous-3 { background: url(../images/bg-indigenous-3.jpg) top center repeat-y;}
.bg-indigenous-4 { background: url(../images/bg-indigenous-4.jpg) top center repeat-y;}
.bg-indigenous-5 { background: url(../images/bg-indigenous-5.jpg) top center repeat-y;}
.bg-indigenous-6 { background: url(../images/bg-indigenous-6.jpg) top center repeat-y;}


.bg-farm-1 { background: url(../images/bg-farm-1-1.jpg) top center no-repeat;}  
.bg-farm-2 { background: url(../images/bg-farm-2-1.jpg) top center no-repeat;}  

.bg-sea-1 { background: url(../images/bg-sea-1.jpg) top center no-repeat;}  
.bg-sea-2 { background: url(../images/bg-sea-2.jpg) top center no-repeat;}  
.bg-family-1 { background: url(../images/bg-family-1.jpg) top center no-repeat;}