/*=== page-product ===*/
.t68 {
	font-weight: bold;
    font-size: min(max(3.54vw, 48px), 68px);
    line-height: 1.1;
}
.t60 {
	font-weight: bold;
    font-size: min(max(3.125vw, 42px), 60px);
    line-height: 1.1;
}
.t58 {
	font-weight: bold;
    font-size: min(max(3vw, 42px), 58px);
    line-height: 1.1;
    margin-bottom: .5rem;
}
.t54 {
    line-height: 1.1;
	font-weight: bold;
    font-size: min(max(2.8125vw, 38px), 54px);
}
.t30 {
	font-weight: 300;
    font-size: min(max(1.563vw, 22px), 30px);
}
.t28 {
	font-weight: bold;
    font-size: min(max(1.458vw, 20px), 28px);
}
.t26 {
	font-weight: 300;
    font-size: min(max(1.354vw, 20px), 26px);
}
.t18 {
	font-weight: 300;
    font-size: min(max(0.9375vw, 14px), 18px);
}

/*=== 1)main ===*/
#page-product {
	font-family: "Montserrat", sans-serif;
	--color-gold:#c3996d;
	--top-height:36.45vw;
	--sec-height:37.5vw;
	background:#000;
    overflow: hidden;
	position:relative;
}
#page-product .fontTC {
	font-family: 'Noto Serif TC', serif;
	font-weight:bold;
}
#page-product img {
	max-width:100%;
}

.top-banner{
	position:relative;
	height:var(--top-height);	
}
.top-banner .bgBOX{
	position:absolute;
	height:var(--top-height);	
}
.top-banner .titleBOX{
	position:absolute;
	right:16.54vw;
	top:50%;
	transform:translateY(-50%);
}
.top-banner .titleBOX h2{
	color:#fff;
	font-weight: bold;
	line-height:1.1;
    font-size: min(max(4.6875vw, 64px), 90px);
}
.top-banner .titleBOX h2 span{
	display:block;
}
.top-banner .titleBOX img.icon_star{
    position: absolute;
    top: -1.041vw;
    left: 20.83vw;
    width: 7.8125vw;
    height: 7.8125vw;
}

@media (max-width: 1300px) {
.t68 {
	font-weight: bold;
    font-size: min(max(3.54vw, 38px), 68px);
    line-height: 1.1;
}
.t60 {
	font-weight: bold;
    font-size: min(max(3.125vw, 34px), 60px);
    line-height: 1.1;
}
.t58 {
	font-weight: bold;
    font-size: min(max(3vw, 32px), 58px);
    line-height: 1.1;
    margin-bottom: .5rem;
}
.t54 {
    line-height: 1.1;
	font-weight: bold;
    font-size: min(max(2.8125vw, 30px), 54px);
}
.t30 {
	font-weight: 300;
    font-size: min(max(1.563vw, 20px), 30px);
}
.t28 {
	font-weight: bold;
    font-size: min(max(1.458vw, 18px), 28px);
}
.t26 {
	font-weight: 300;
    font-size: min(max(1.354vw, 18px), 26px);
}
.t18 {
	font-weight: 300;
    font-size: min(max(0.9375vw, 16px), 18px);
}
.top-banner .titleBOX{
	right:15.54vw;
}
.top-banner .titleBOX h2{
    font-size: min(max(4.6875vw, 52px), 90px);
}
.top-banner .titleBOX img.icon_star{
    top: -1.041vw;
    left: 20.83vw;
    width: 7.8125vw;
    height: 7.8125vw;
}
}

@media (max-width: 991px) {
.s68 {
	font-weight: bold;
    font-size: min(max(7.91vw, 30px), 68px);
    line-height: 1.1;
}
.s66 {
	font-weight: bold;
    font-size: min(max(7.67vw, 28px), 66px);
    line-height: 1.1;
}
.s60 {
	font-weight: bold;
    font-size: min(max(6.98vw, 26px), 60px);
    line-height: 1.1;
    margin-bottom: .5rem;
}
.s58 {
    line-height: 1.1;
	font-weight: bold;
    font-size: min(max(6.74vw, 26px), 58px);
}
.s38 {
	font-weight: 300;
    font-size: min(max(4.42vw, 16px), 38px);
}
.s34 {
	font-weight: bold;
    font-size: min(max(3.95vw, 15px), 34px);
}
.s32 {
	font-weight: 300;
    font-size: min(max(3.72vw, 14px), 32px);
}
.s28 {
	font-weight: 300;
    font-size: min(max(3.26vw, 12px), 28px);
}
.s22 {
	font-weight: 300;
    font-size: min(max(2.56vw, 10px), 22px);
}
#page-product {
	--top-height:100vw;
	--sec-height:auto;
}
.top-banner{
	width:100vw;
	height:var(--top-height);	
}
.top-banner .bgBOX{
	width:100vw;
	height:var(--top-height);	
}
.top-banner .titleBOX{
	top:25.26vw;
	right:50%;
	transform:translateX(50%);
}
.top-banner .titleBOX h2{
    font-size: min(max(7.21vw, 28px), 62px);
}
.top-banner .titleBOX img.icon_star{
    top: -1.041vw;
    left: 30.83vw;
    width: 11.05vw;
    height: 11.05vw;
}
}
@media (max-width: 480px) {
.top-banner .titleBOX {
	top: 32.26vw;
}
.top-banner .titleBOX img.icon_star {
	left: 32.83vw;
}
}


/*=== 2)product ===*/
.sec-product{
	overflow:hidden;
	position:relative;	
}
.sec-product .bgBOX{
	position:absolute;
	top:0;	
}
.sec-product .bgBOX img{
	width:auto;
	height:var(--sec-height);	
	object-fit: cover;
}
.sec-product .itemBOX{
	position:relative;
	display:grid;
	grid-template-columns:50% 50%;
}
.sec-product .itemBOX .col-image{
	position:relative;
	top:0;
	left:6.77vw;
	width:auto;
}
.sec-product .itemBOX .col-image img{
	width:auto;
	height:var(--sec-height);	
	object-fit: cover;
}
.sec-product .itemBOX .col-text{
    color:#fff;
	position:relative;
}
.sec-product .itemBOX .col-text.left{
	left:11.45vw;
}
.sec-product .itemBOX .col-text .textBOX{
	position:absolute;
	top:50%;
	transform:translateY(-50%);	
}
.sec-product .itemBOX .col-text .heading{
	padding-bottom:2.604vw;
}
.sec-product .itemBOX .col-text .info{
    display: flex;
    justify-content: flex-start;
    align-items: center;
	margin:0 -0.78125vw;
}
.sec-product .itemBOX .col-text .info .list{
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
	padding: 0 0.78125vw 0;
}
.sec-product .itemBOX .col-text .info .list.flex-row{
    flex-direction: row;
}
.sec-product .itemBOX .col-text .info .list img{
    max-width: unset !important;
    width:auto;
	height:7.8125vw;
}
.sec-product .itemBOX .col-text .info .list p{
	padding-top:0.78125vw;
    font-size: min(max(0.625vw, 9px), 12px);
}
.sec-product .itemBOX .col-text .info .list p span{
    display:block;
}

/*<!-- 1)BubbleTea -->*/

/*<!-- 2)Latte -->*/
.Latte .t18 {
	width:41.25vw;
}
.Latte .icon_leaf{
	position:relative;
    display: block;
}
.Latte .icon_leaf img{
    position: absolute;
    width: 5.24vw;
    height: auto;
    top: -5vw;
    left: 11.6vw;
}
.sec-product .itemBOX.Latte .col-image {
    left: 0px;
}
.sec-product .itemBOX.Latte .col-text .info{
	margin:0 -2.083vw;
}
.sec-product .itemBOX.Latte .col-text .info .list{
	padding:0 2.083vw 0;
}

/*<!-- 3)PoppingBoba -->*/
.PoppingBoba .t18 {
	width:32.1825vw;
}
.sec-product .itemBOX.PoppingBoba .col-image{
	left:6.25vw;
}
.sec-product .itemBOX.PoppingBoba .col-text .info .list{
	width:auto;
	padding:0;
}
.sec-product .itemBOX.PoppingBoba .col-text .info .list img{
	height:3.02vw;
    padding: 0 0.52vw;
}
.sec-product .itemBOX.PoppingBoba .col-text .info .list p{
	display:flex;
}
.sec-product .itemBOX.PoppingBoba .col-text .info .list p span{
	display:inline-block;
    padding: 0 0.625vw;
}

/*<!-- 4)CoffeeCan -->*/
.CoffeeCan .t68 {
	color:var(--color-gold);
}
.sec-product .itemBOX.CoffeeCan .col-image {
    left: 9.9vw;
}
.sec-product .itemBOX.CoffeeCan .col-text{
	left:-2.1vw;
}
.sec-product .itemBOX.CoffeeCan .col-text .list.spec{
	width:19.8vw;
}
.sec-product .itemBOX.CoffeeCan .col-text .list p{
	text-align:left;
}
.sec-product .itemBOX.CoffeeCan .col-text .list.spec p:before {
    background: url(images/products/img-pd_icon_list.svg);
}
.sec-product .itemBOX.CoffeeCan .col-text .list.spec p.frame{
	font-weight: 800;
	border:1px solid #fff;
    padding-top: 0.3125vw;
    padding-bottom: 0.3125vw;
	text-align:center;
	margin-bottom:0.521vw;
}
.sec-product .itemBOX.CoffeeCan .col-text .list.spec p:not(.frame){
	position:relative;
	padding-left:0.9375vw;
	padding-top:0.3125vw;
}
.sec-product .itemBOX.CoffeeCan .col-text .list.spec p:not(.frame):before {
    content: "";
    position: absolute;
    width: 0.46875vw;
    height: 0.46875vw;
    margin-left: -0.625vw;
    margin-top: 0.3125vw;
}
.sec-product .itemBOX.CoffeeCan .col-text .info .list img {
    height: 5.21vw;
}
.sec-product .itemBOX.CoffeeCan .col-text .info .list:not(.spec) {
    align-items: end;
}
.sec-product .itemBOX.CoffeeCan .col-text .info .list:not(.spec) p {
    padding-left:0.521vw;
	margin-bottom:0.521vw;
}
.sec-product .itemBOX.CoffeeCan .col-text .info .list:not(.spec) p span {
    display:block;
}


/*<!-- 5)CoffeeBag -->*/
.CoffeeBag .t18 {
    padding-right:0.521vw;
}
.CoffeeBag .t18:nth-child(2) {
    padding-right: 0.521vw;
    padding-left: 0.521vw;
}
.CoffeeBag .t30 {
    padding-right: 0.521vw;
}
.sec-product .itemBOX.CoffeeBag{
	grid-template-columns:65% 35%;
}
.sec-product .itemBOX.CoffeeBag .col-image{
	left:5.73vw;
}
.sec-product .itemBOX.CoffeeBag .col-text{
	left:-5.21vw;
}
.sec-product .itemBOX.CoffeeBag .col-text .info .list img {
    height: 6.25vw;
}
.sec-product .itemBOX.CoffeeBag .col-text .info .list {
    align-items: end;
}
.sec-product .itemBOX.CoffeeBag .col-text .info .list p {
	text-align:left;
    padding-left:0.521vw;
	margin-bottom:0.521vw;
}

/*<!-- 6)CoffeeDrip -->*/
.CoffeeDrip .t30 {
    padding-right: 0.521vw;
    padding-left: 0.521vw;
}
.CoffeeDrip .t60:nth-child(2) .t30 {
    padding-right: 0.521vw;
    padding-left: 0vw;
}
.sec-product .itemBOX.CoffeeDrip .col-image{
	left:7.8125vw;
}
.sec-product .itemBOX.CoffeeDrip .col-text{
	left:5.73vw;
}
.sec-product .itemBOX.CoffeeDrip .col-text .info .list img {
    height: 2.61vw;
}

/*===========
RWD(notebook)
===========*/
@media (max-width: 1300px) {
/*=== 2)product ===*/
.sec-product .itemBOX .col-text.left {
    left: 8.45vw;
}
.sec-product .itemBOX .col-text .heading{
	padding-bottom:3.04vw;
}
.Latte .t18 {
    width: 45.25vw;
}
.Latte .icon_leaf img {
    left: 14vw;
}
.sec-product .itemBOX.Latte .col-text .info .list {
    padding: 0 0vw 0;
    width: 12vw;
}
.PoppingBoba .t18 {
    width: 38.1825vw;
}
.sec-product .itemBOX.PoppingBoba .col-image {
    left: 8.25vw;
}
.sec-product .itemBOX.PoppingBoba .col-text .info .list img {
    height: 3.8vw;
    padding: 0;
}
.sec-product .itemBOX.CoffeeCan .col-image {
    left: 7.9vw;
}
.sec-product .itemBOX.CoffeeCan .col-text {
    left: -3.8vw;
}
.sec-product .itemBOX.CoffeeCan .col-text .list.spec {
    width: 21.8vw;
}
.sec-product .itemBOX.CoffeeCan .col-text .info .list img {
    height: 5.81vw;
}
.sec-product .itemBOX.CoffeeBag {
    grid-template-columns: 60% 40%;
}
.sec-product .itemBOX.CoffeeBag .col-image {
    left: 2.23vw;
}
.sec-product .itemBOX.CoffeeBag .col-text {
    left: -2.81vw;
}
.sec-product .itemBOX.CoffeeDrip .col-text {
    left: 4.93vw;
}
}

/*===========
RWD(pad)
===========*/
@media (max-width: 991px) {
/*=== 2)product ===*/
.sec-product {
	--bg-height:180vw;
	height:var(--bg-height);
}
.sec-product .bgBOX img{
	height:var(--bg-height);	
}
.sec-product .itemBOX{
	display:flex;
	flex-direction:column;
	justify-content:center;
}
.sec-product .itemBOX .col-image{
    width: 100%;
    height: auto;
	order:1;
    left: 0 !important;
}
.sec-product .itemBOX .col-text{
    width: 100%;
	order:2;
}
.sec-product .itemBOX .col-text,
.sec-product .itemBOX .col-text.left {
	left: unset !important;
	text-align: center;
}
.sec-product .itemBOX .col-text .heading {
	padding-bottom: 3.04vw;
	padding: 0 4vw 3.04vw;
}
.sec-product .itemBOX .col-text .textBOX {
	position: relative;
    transform: none;
    top: 6vw;
}
.sec-product .itemBOX .col-text .info {
    justify-content: center;
    margin: 0 -0.78125vw;
}
.sec-product .itemBOX .col-text .info .list {
    padding: 7.2vw 3.6vw 0;
}
.sec-product .itemBOX .col-text .info .list img {
    height: 17.45vw;
}
.sec-product .itemBOX .col-text .info .list p {
    padding-top: 1.8vw;
    font-size: min(max(1.63vw, 10px), 14px);
}

.Latte .t18 {
	width: 100%;
	padding: 2vw 8vw 4vw;
}
.Latte .icon_leaf img {
    width: 8.24vw;
    top: -8vw;
    left: auto;
    right: 22vw;
}
.sec-product .itemBOX.Latte .col-text .info .list img {
	height: 13.45vw;
}
.sec-product .itemBOX.Latte .col-text .info .list {
	width: 26vw;
}
.sec-product .itemBOX.Latte .col-text .info {
    align-items: flex-start;
    margin: 0;
	padding: 0 8vw;
}
.PoppingBoba .t18 {
	width: auto;
}
.sec-product .itemBOX.PoppingBoba .col-text .textBOX {
	top: 0;
}
.sec-product .itemBOX.PoppingBoba .col-text .info {
	justify-content: center;
	margin: 0 -0.78125vw;
	flex-direction: column;
}
.sec-product .itemBOX.PoppingBoba .col-text .info .list {
    padding-bottom: 3.33vw;
}
.sec-product .itemBOX.PoppingBoba .col-text .info .list img {
	height: 8.72vw;
}
.sec-product .itemBOX.PoppingBoba .col-text .info .list p span {
    padding: 0 3.225vw;
}
.sec-product .itemBOX.PoppingBoba .col-text .info .list p {
	padding-top: 1vw;
}
.sec-product .itemBOX.CoffeeCan .col-text {
	top: -18vw;
}
.sec-product .itemBOX.CoffeeCan .col-text .info {
	flex-wrap: wrap;
	padding: 0 12vw;
}
.sec-product .itemBOX.CoffeeCan .col-text .list {
	width: 50%;
	order:1;
	padding: 2vw 2vw 1vw;
}
.sec-product .itemBOX.CoffeeCan .col-text .list.spec {
	width: 100%;
	order:2;
}
.sec-product .itemBOX.CoffeeCan .col-text .info .list img {
	height: 16.05vw;
}
.sec-product .itemBOX.CoffeeCan .col-text .info .list:not(.spec) p {
    padding-left: 1.21vw;
}
.sec-product .itemBOX.CoffeeCan .col-text .list.spec p:not(.frame):before {
    width: 1.6vw;
    height: 1.6vw;
    margin-left: -1.8625vw;
    margin-top: 0.3125vw;
}
.sec-product .itemBOX.CoffeeCan .col-text .list.spec p:not(.frame) {
    padding-left: 1.9375vw;
}
.CoffeeBag .t30 {
    padding-right: 0.921vw;
}
.CoffeeBag .t18 {
    padding-right: 0.921vw;
}
.CoffeeBag .t18:nth-child(2) {
    padding-right: 0.921vw;
    padding-left: 0.921vw;
}
.sec-product .itemBOX.CoffeeBag .col-text .textBOX {
	top: -131vw;
}
.sec-product .itemBOX.CoffeeBag .col-text .info {
	margin: 0 -0.78125vw;
	top: 86vw;
	position:relative;
}
.sec-product .itemBOX.CoffeeBag .col-text .info .list img {
    height: 16.05vw;
}
.sec-product .itemBOX.CoffeeBag .col-text .info .list p {
    padding-left: 1.021vw;
    margin-bottom: 0;
}
.CoffeeDrip .t30 {
    padding-right: 0.921vw;
    padding-left: 0.921vw;
}
.CoffeeDrip .t60:nth-child(2) .t30 {
    padding-right: 0.921vw;
}
.sec-product .itemBOX.CoffeeDrip .col-text .textBOX {
	top: -123vw;
}
.sec-product .itemBOX.CoffeeDrip .col-text .info {
	flex-direction: column;
	position: relative;
	top: 108vw;
}
.sec-product .itemBOX.CoffeeDrip .col-text .info .list img {
    height: 9.3vw;
}
.sec-product .itemBOX .col-text .info .list {
	padding: 3.6vw 3.6vw 0;
}	
}

/*===========
RWD(mobile)
===========*/
@media (max-width: 480px) {
.sec-product .itemBOX .col-text .info {
	justify-content: space-evenly;
	margin: 0;
	padding: 0 1.5vw;
}
.sec-product .itemBOX .col-text .info .list {
	padding: 3.6vw 0vw 0;
}	
#Latte.sec-product {
	--bg-height:190vw;
	background: #152414;
}
#Latte.sec-product .bgBOX img{
	height:var(--bg-height);	
}	
.sec-product .itemBOX.Latte .col-text .info .list {
	padding: 0;
}
.sec-product .itemBOX.Latte .col-text .heading {
	padding: 0 4vw 5.04vw;
}
.sec-product .itemBOX.Latte .col-text .info .list img {
	height: 14.45vw;
}

#PoppingBoba.sec-product {
	height: 194vw;
	background: #000;
}

.sec-product .itemBOX.PoppingBoba .col-text .info .list img {
	height: 48px;
}
.sec-product .itemBOX.PoppingBoba .col-text .info .list p span {
	padding: 0 10px;
}
.sec-product .itemBOX.PoppingBoba .col-text .info .list {
	padding-bottom: 0px;
	padding-top: 15px;
}

#CoffeeCan.sec-product {
	height: 189vw;
	background: #000;
}
.sec-product .itemBOX.CoffeeCan .col-text {
	top: -22vw;
}
.sec-product .itemBOX.CoffeeCan .col-text .list.spec p:not(.frame):before {
	width: 6px;
	height: 6px;
	margin-left: -8px;
	margin-top: 6px;
}
.sec-product .itemBOX.CoffeeCan .col-text .list.spec p:not(.frame) {
	padding-left: 10px;
}
.sec-product .itemBOX.CoffeeBag .col-text .info .list {
    align-items: center;
    flex-direction: column !important;
    height: 36.23vw;
    justify-content: start;
}
.sec-product .itemBOX.CoffeeBag .col-text .info .list img {
	height: 18.05vw;
}

.sec-product .itemBOX.CoffeeDrip .col-text .info .list img {
	height: 10.3vw;
}
	
}