:root{
  --poi-padding: 10px;
}

/* .poi-sale , .poi-flight{
    margin-top: var(--padding);
  } */

  
.poi-sale .ph {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.03em;
    margin: 0 auto;
    color: #333333;
    width: 90%;
}   

.poi-sale .ph a{
	color: #333333;
}

.poi-sale .ph-title{
	display: none;
}

.poi-sale .ph-menu{
	display: block;
    text-align: center;
}

.poi-sale .ph-menu .slidecontain{
    display: inline-flex;
    flex-wrap: nowrap;
    justify-content: center;
    background-color: #ffa43f;
   font-size: 20px;
     /* max-width: 1000px; */
    /*width: 100%;*/
    margin: 0 auto;
    gap: 1em;
    border-radius: 30px;
    padding: 5px 10px;
}

.poi-sale .ph-menu .slidecontain li{
    flex-grow: 0;
}

.poi-sale .ph-menu .slidecontain li.on{
    background: #fff;
    color:#ffa43f;
    border-radius: 20px;
    
}
.poi-sale .ph-menu .slidecontain li:hover a{
    color: rgb(255, 255, 119);
}


.poi-sale .ph-menu .slidecontain li.on a{
    color:#ffa43f; 
}

.poi-sale .ph-menu .slidecontain a{
        color: #FFF;
        padding:5px 10px;
        display: block;

}
.poi-sale .ph-group {
    display: none;
    justify-content: center;
    flex-wrap: wrap;
}


.poi-sale .ph-group.on{
    display: flex;
}
.poi-sale .ph-group-title{
	display:none;
    text-align: center;
    margin:20px auto;

}

.poi-sale .ph-group-title.on{
	display:block
}



.poi-sale .ph-group-title span{
    color: #ff8e0d;
    font-size: 36px;
    font-weight: 700;
    
}
.poi-sale .ph-group-content {
	position: relative;
    width: calc(25% - 2em);
    margin: 3em 1em;
    background: white;
    border:solid 1px #333333;
}
.poi-sale .ph-group-content:hover{
	transform: translate(-2px,-2px);
	box-shadow: 6px 6px 2px rgba(0,0,0,0.2);
}

.poi-sale .ph-group-content-photo {
	position: relative;
}

.poi-sale .ph-group-content-photo a{display: block;}

.poi-sale .ph-group-content-photo img {
    width: 100%;
}

.poi-sale .ph-group-content-tag {
	font-size: 20px;
    position: absolute;
    left: 0;
    top: -2.2em;
    font-weight: 500;
    letter-spacing: 0.1em;
    white-space: nowrap;
    padding: 0.4em 0.8em 0.2em;
}

.poi-sale .ph-group-content-text{
	padding: 1em;
}

.poi-sale .ph-group-content-text-name {
	display: block;
}

.poi-sale .ph-group-content-text-sale{
   
    margin:var(--poi-padding) 0;
}

.poi-sale .ph-group-content-text-sale a {
	display: inline-block;
    font-size: 14px;
    background: #ffe2ec;
    color: #666666;
    letter-spacing: 0.1em;

}

.poi-sale .ph-group-content-text-detail a {
	display: block;
    color: #666666;
    font-size: 14px;
    line-height: 1.5;
}

.poi-sale .ph-group-content-text-price {
	display: block;
	font-size: 28px;
    font-weight: 500;
    text-align: center;
    border-top: solid 1px #333333;
    margin-top: var(--poi-padding);
    padding-top: var(--poi-padding);
    width: calc(100% + 32px);
    transform: translateX(-16px);
}

.poi-sale .ph-group-content-text-price span {
    font-size: 14px;
    vertical-align: middle;
}


.poi-sale.poi-green .ph-group-content-tag{
	background: url(../images/circle-green.png) left center no-repeat;
	background-size: contain;
}
.poi-sale.poi-green .ph-group-content-text-price{
	color: #009d49;
}
.poi-sale.poi-red .ph-group-content-tag{
	background: url(../images/circle-red.png) left center no-repeat;
	background-size: contain;
}
.poi-sale.poi-red .ph-group-content-text-price{
	color: #db6f4b;
}


@media screen and (max-width:1220px) {
	.poi-sale .ph{ font-size: 14px; }
	.poi-sale .ph-group-content-tag{ font-size: 16px; }
	.poi-sale .ph-group-content-text-sale a{ font-size: 12px; }
	.poi-sale .ph-group-content-text-detail a{ font-size: 12px; }
	.poi-sale .ph-group-content-text-price{ font-size: 24px; }
	.poi-sale .ph-group-content-text-price span{ font-size: 12px; }

	.poi-sale .ph-group-content-text-price{
		width: 100%;
		transform: none;
	}
    .poi-sale .ph {
        width: 95%;
    }
}


@media screen and (max-width:960px) {
	.poi-sale .ph-group-content {
	    width: 48%;
	    margin: 3em 1% 1.5em;
	}
    .poi-sale .ph-menu .slidecontain{
        flex-wrap: wrap;
        gap:  0 0.3em;
        font-size: 15px;
        border-radius: 15px;
    }

    .poi-sale .ph-group-title span{

        font-size: 30px;

        
    }    
}

@media screen and (max-width:480px) {
	.poi-sale .ph-group-content {
	    width: 100%;
	    margin: 3em 0% 1.5em;
	}
}