/*貓犬對決*/
/*html { font-size: 100%; overflow-x: hidden; -webkit-tap-highlight-color: transparent;}
body { margin: 0;-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.mainframe p,.mainframe figure {margin: 0; max-width: 100%;height: auto;display:block;clear:both;font-weight: 300;}
.mainframe a { text-decoration: none; color: #333;  -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;display: inline-block;}
.mainframe a:hover { color: var(--color-link-hover); }
.mainframe a:hover, a:focus { text-decoration: none; }
*:before, *:after,*  {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
img {
    max-width: 100%;
    height: auto;
    border: 0;
}
*figure, footer, header, hgroup, main, menu, nav, section{
    display: block;
	margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}*/
.mainframe a:hover, a:focus { opacity: 1; }
/* Page Loader */
#fade{
    display:none;
    width:100%;
    height:100%;
    background: #FFF;
    position: fixed;
    top:0px;
    left:0px;
    z-index:99;
}
#fade .load_img{
    display: block;
    margin: auto;
    padding-top: 45vh;
}
#fade .load_img img{
	display: block;
	height: auto;
	width: 100px;
	background:transparent;
	/*animation: flash 3s linear infinite;*/
	margin: auto;
}
@-webkit-keyframes flash{
	0%,50%,to{opacity:1}25%,75%{opacity:0}}
@keyframes flash{0
	%,50%,to{opacity:1}25%,75%{opacity:0}}

#mainframe img{
	max-width: 100%;
	vertical-align:middle;
}
@media screen and (max-width: 760px) {
	#fade .load_img img{
			width: 80px;
	}
}
#mainframe{
	font-family: 'Inter', 'Noto Sans TC', sans-serif;
	overflow-x: hidden;
	color:#212121;
}
/*網站區塊設計*/
.p-container {
	position: relative;
	/*background: #fff;*/
	transition: background 1s ease
}
@media only screen and (min-width:1128px) {
	.p-container {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start
	}
}
.p-side {
    position: sticky;/*固定不捲動內容*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100svh;
    top: 0;
}
@media screen and (max-width: 1128px) {
	.p-side {
		/*position: relative;*/
		height: auto;
	}
}
.side-left {
    flex: 1 0;
}
.side-right {
    width: 13%;
}
.p-main {
	position: relative;
	background: #fff;
	overflow: hidden
}
@media only screen and (min-width:1128px) {
	.p-main {
		width: 38%;
	}
}

/*主視覺動畫*/
.tittle-box{
	width:100%;
	display: block;
}
dotlottie-player{
	z-index:1;
	display: block;
    position: relative;
	margin: 0 auto;
	width:90%;
	max-width:700px;
}
.dog-animation{
	width:20%;
	max-width: 105px;
    height: auto;
    display: block;
    position: absolute;
    z-index: 2;
    top: 24%;
    right: 39%;
}
.cat-animation{
	width:20%;
	max-width: 105px;
    height: auto;
    display: block;
    position: absolute;
    z-index: 2;
    top: 44%;
    left: 28%;
}

@media screen and (max-width: 1540px) {
	.dog-animation{
		 top: 23%;
		 right: 35%;
	}
	.cat-animation{
		left: 20%;
	}
}
@media screen and (max-width: 1128px) {
	.tittle-box{
		margin-top:40px;
	}
	.dog-animation{
		 top: 13%;
		 right: 40%;
	}
	.cat-animation{
		top: 46%;
		left: 30%;
	}
}
@media screen and (max-width: 800px) {
	.dog-animation{
		 top: 12%;
		 right: 37%;
	}
	.cat-animation{
		top: 45%;
		left: 25%;
	}
}
@media screen and (max-width: 640px) {
	.dog-animation{
		 top: 12%;
		 right: 33%;
	}
	.cat-animation{
		top: 42%;
		left: 25%;
	}
}
@media screen and (max-width: 530px) {
	.dog-animation{
		width:13%;
		max-width: 90px;
		top: 12%;
		right: 35%;
	}
	.cat-animation{
		width:13%;
		max-width: 90px;
		top: 36%;
		left: 22%;
	}
}
@media screen and (max-width: 400px) {
	.cat-animation{
		top: 34%;
	}
}
.cat-animation {
    opacity: 0;
    animation: fadeInScale 0.5s cubic-bezier(0.35, -0.08, 0.63, 1.1) forwards 8s, scaleUpDown 1s cubic-bezier(0.35, -0.08, 0.63, 1.1) infinite 1.2s;
}
.dog-animation {
    opacity: 0;
    animation: fadeInScale 0.5s cubic-bezier(0.35, -0.08, 0.63, 1.1) forwards 8.4s, scaleUpDown-two 1s cubic-bezier(0.35, -0.08, 0.63, 1.1) infinite 1.2s;
}
/* 淡入效果 */
@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
/* 變大變小的循環效果 */
@keyframes scaleUpDown {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}
@keyframes scaleUpDown-two {
    0%, 100% {
        transform: scale(1.2);
    }
    50% {
        transform: scale(1);
    }
}

/*前言*/
.foreword{
	width:100%;
	margin:2rem auto;
	text-align:center;
	line-height:2;
	letter-spacing:2px;
}
.foreword h4{
	font-weight:400;
	font-size:15px;	
}
@media screen and (max-width: 1128px) {
	.foreword{
		margin:3.5rem auto;
	}
	.foreword h4{
		width:80%;
		max-width:550px;
		margin:0 auto;
		text-align:justify;
	}
}
@media screen and (max-width: 640px) {
	.foreword{
		margin:2.2rem auto;
	}
}
.foreword {
    opacity: 0;
    animation: forewordAnimation 1.2s ease-in-out 8s forwards; /* 2s 是淡入时间，4s 是延迟时间 */
}

@keyframes forewordAnimation {
    to {
        opacity: 1;
    }
}


/*中間內容區域*/
.sec-1,.sec-2,.sec-3,.sec-4,.sec-5,.sec-6{
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
	justify-content: center;
}
/*團體照*/
.sec-1{
	margin:0;
	padding:0;
}
.sec-1 .pc{
	display:block;
}
.sec-1 .pad{
	display:none;
}
.sec-1 .ph{
	display:none;
}
@media screen and (max-width: 1128px) {
	.sec-1 .pc{
	display:none;
	}
	.sec-1 .pad{
		display:block;
	}
	.sec-1 .ph{
		display:none;
	}
}
@media screen and (max-width: 640px) {
	.sec-1 .pc{
	display:none;
	}
	.sec-1 .pad{
		display:none;
	}
	.sec-1 .ph{
		display:block;
	}
}
.sec-1 .cat-vs-dog img{
	width:100%;
	height:auto;
}

.img-Swiper{
	width:100%;
}
/*共用文字*/
.sec-2 .info .text,.sec-3 .info .text,.sec-4  .text,.sec-5  .text{
	width:100%;
	font-size:20px;
	font-weight:600;
	letter-spacing:2px;
	text-align:center;
	margin:30px auto 15px auto;
}
.sec-2 .text span,.sec-3 .text span,.sec-4 .text span,.sec-5 .text span{
	font-size:12px;
	line-height:2.5;
	font-weight: 400;
	letter-spacing:1px;
}
/*貓咪小物*/
.sec-2{
	margin:0 auto;
	padding:60px 0 40px 0;
	justify-content: space-evenly;
}
.sec-2 .info-text{
	width:100%;
	margin: 0 auto 40px auto;
}
.sec-2 .info-text .in{
	width:80%;
	max-width:550px;
	margin:0 auto;
	font-size: 14px;
    letter-spacing: 2px;
    line-height: 1.8;
    text-align: justify;
}
.sec-2 .views{
	clear:both;
	width:80%;
	max-width:550px;
	height:auto;
	margin: 0 auto 40px auto;
	display: flex;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
}
.sec-2 .info{
	clear:both;
	width:80%;
	max-width:550px;
	display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
	align-items: center;
}
.sec-2 .info .a{
	width: 50%;
	height: auto;
    display: block;
	margin: 0 0 40px 50%;
}
.sec-2 .info .b{
	width: 100%;
	height: auto;
	display: flex;
	justify-content: space-around;

}
.sec-2 .info .b .b-img{
	width: 33.33%;
	max-width:110px;
	display: block;
}

@media screen and (max-width: 640px) {
	.sec-2 .info-text{
		margin: 0 auto 20px auto;
	}
	.sec-2 .views{
		width:80%;
		margin: 20px auto;
	}
	.sec-2 .info{
		margin:20px auto 0 auto;
	}
	.sec-2 .info .a{
	width: 60%;
	margin: 0 0 40px 40%;
	}
}

/*狗狗小物*/
.sec-3{
	/*background:#f7f7f7;*/
	margin:0 auto;
	padding:60px 0 40px 0;
	justify-content: space-evenly;
}
.sec-3 .info-text{
	width:100%;
	margin: 0 auto 40px auto;
}
.sec-3 .info-text .in{
	width:80%;
	max-width:550px;
	margin:0 auto;
	font-size: 14px;
    letter-spacing: 2px;
    line-height: 1.8;
    text-align: justify;
}
.sec-3 .views{
	clear:both;
	width:80%;
	max-width:550px;
	height:auto;
	margin: 0 auto 40px auto;
	display: flex;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
}
.sec-3 .info{
	clear:both;
	width:80%;
	max-width:550px;
	display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
	align-items: center;
}
.sec-3 .info .a{
	width: 50%;
	height: auto;
    display: block;
	margin: 0 0 40px 50%;
}
.sec-3 .info .b{
	width: 100%;
	height: auto;
	display: flex;
	justify-content: space-around;

}
.sec-3 .info .b .b-img{
	width: 33.33%;
	max-width:110px;
	display: block;
}

@media screen and (max-width: 640px) {
	.sec-3 .info-text{
		margin: 0 auto 20px auto;
	}
	.sec-3 .views{
		width:80%;
		margin: 20px auto;
	}
	.sec-3 .info{
		margin:20px auto 0 auto;
	}
	.sec-3 .info .a{
	width: 60%;
	margin: 0 0 40px 40%;
	}
}
/*團體照區*/
.sec-bg{
	width:100%;
	margin:0 auto 40px auto;
}

/*抱枕*/
.sec-4{
	margin:0 auto;
	padding:30px 0 40px 0;
	justify-content: space-evenly;
}
.sec-4 .views{
	clear:both;
	width:80%;
	max-width:550px;
	height:auto;
	margin: 0 auto 40px auto;
	display: flex;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
}
.sec-4 .views img{
	max-width:450px;
	width: 100%;
}
.sec-4 .text{
	margin: 0 auto 15px auto;
}
.sec-4 .info-text{
	width:100%;
	margin: 0 auto 40px auto;
}
.sec-4 .info-text .in{
	width:90%;
	max-width:550px;
	margin:0 auto;
	font-size: 14px;
    letter-spacing: 2px;
    line-height: 1.8;
    text-align: center;
}
.sec-4 .info{
	clear:both;
	width:80%;
	max-width:550px;
	display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
	align-items: center;
}
.sec-4 .info .a{
	width: 50%;
	height: auto;
    display: block;
	margin: 0 0 20px 50%;
}

@media screen and (max-width: 640px) {
	.sec-4{
		padding:15px 0 40px 0;
	}
	.sec-4 .views{
		width:80%;
		margin: 20px auto;
	}
}

/*地毯*/
.sec-5{
	/*background:#f7f7f7;*/
	margin:0 auto;
	padding:30px 0 40px 0;
	justify-content: space-evenly;
}
.sec-5 .views{
	clear:both;
	width:80%;
	max-width:550px;
	height:auto;
	margin: 0 auto 40px auto;
	display: flex;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
}
.sec-5 .views img{
	max-width:450px;
	width: 100%;
}
.sec-5 .text{
	margin: 0 auto 15px auto;
}
.sec-5 .info-text{
	width:100%;
	margin: 0 auto 40px auto;
}
.sec-5 .info-text .in{
	width:90%;
	max-width:550px;
	margin:0 auto;
	font-size: 14px;
    letter-spacing: 2px;
    line-height: 1.8;
    text-align: center;
}
.sec-5 .info{
	clear:both;
	width:80%;
	max-width:550px;
	display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
	align-items: center;
}
.sec-5 .info .a{
	width: 50%;
	height: auto;
    display: block;
	margin: 0 0 20px 50%;
}

@media screen and (max-width: 640px) {
	.sec-5{
		padding:15px 0 40px 0;
	}
	.sec-5 .views{
		width:80%;
		margin: 20px auto;
	}
}

/*其他資訊*/
.sec-6{
	margin:0 auto;
	padding:0 0 50px 0;
}
.sec-6 .text{
	width:100%;
	font-size:22px;
	font-weight:600;
	text-align:center;
	margin:0 auto 20px auto;
	padding-top:40px;
}
.sec-6 .text span{
	font-size:12px;
	line-height:2.5;
	font-weight: 400;
}
.sec-6 .text {
	height: 370px;
    background-image: url(../images/bg.jpg);
    background-repeat:no-repeat;
    background-position:center;
	background-size:cover;
}
.sec-6 .info-text{
	width:100%;
	margin:0 auto 20px auto;
}
.sec-6 .info-text .in{
	width:90%;
	max-width:550px;
	margin:0 auto;
	font-size: 14px;
    letter-spacing: 2px;
    line-height: 1.8;
    text-align: center;
}
.sec-6 .about{
	width:90%;
	max-width:800px;
	background:#f7f7f7;
	margin:40px auto;
	padding:30px;
	text-align:center;
}
.weihsuan{
	width:130px;
	height:130px;
	margin: 0 auto;
}
.sec-6 .about h5{
	width:100%;
	font-size:10px;
	letter-spacing:2px;
	line-height:1.3;
	text-align:center;
	margin:0 auto;
}
.sec-6 .about h1{
	width:100%;
	font-size:20px;
	font-weight:600;
	letter-spacing:2px;
	line-height:1.8;
	text-align:center;
	margin:0 auto 20px auto;
}
.sec-6 .about h3{
	width:92%;
	font-size:14px;
	letter-spacing:2px;
	line-height:1.8;
	text-align:justify;
	margin:20px auto;
	font-weight:400;
}
.sec-6 .about h4{
	width:100%;
	font-size:14px;
	letter-spacing:2px;
	line-height:1.8;
	text-align:center;
}
.sec-6 .about a {
	display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.sec-6 .about a img{
	width:20px;
	height:20px;
	margin-right:10px;
}
@media screen and (max-width: 640px) {
	.sec-6{
		padding:0 0 40px 0;
	}
}


/*手機平板區塊隱藏*/
@media screen and (max-width: 1128px) {
    .dsk {
        display: none; 
	} 
}
.sp {
    display: none; 
}
@media screen and (max-width: 1128px) {
	.sp {
        display: block;
	} 
}
/*SHOP NOW 按鈕*/
.text .button {
	font-size:13px;
	letter-spacing: 1px;
	margin:20px auto;
	display: block;
	width:150px;
	-webkit-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
	background-color: #FFFFFF;
	color: #000000;
	border:1px #000000 solid;
	padding: 10px 20px;
}
.text .button:after {
	content: "→";
	margin-left: 0.5rem;
	top: 1px;
	position: relative;
}
.text .button:hover {
	transform: translateY(3px);
	background-color: #000000;
	color: #FFFFFF;
}

/*視窗移動接近圖片之後顯示*/
.lazy-load {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.show {
    opacity: 1;
}

/*scroll down 圖片*/
.p-side__scroll-ph {
    width: 45px;
    opacity: 0;
}
.p-side__scroll-ph,.p-side__scroll-txt {
	transition: opacity .8s ease 5s;
    opacity: 1;
}
.p-side__scroll-txt{
	font-size:12px;
	line-height:1.8;
	margin:10px auto;
}
/*滑鼠scroll*/
.mouse_scroll {
	display: block;
	margin: 0 auto;
	width: 24px;
	height: 100px;
}
.m_scroll_arrows
{
  display: block;
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
  transform: rotate(45deg);
   
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
  margin: 0 0 6px 6px;
  width: 8px;
  height: 8px;
}
.unu
{
  margin-top: 1px;
}
.unu, .doi, .trei
{
    -webkit-animation: mouse-scroll 1s infinite;
    -moz-animation: mouse-scroll 1s infinite;
    animation: mouse-scroll 1s infinite;
  
}
.unu
{
  -webkit-animation-delay: .1s;
  -moz-animation-delay: .1s;
  -webkit-animation-direction: alternate;
  
  animation-direction: alternate;
  animation-delay: alternate;
}
.doi
{
  -webkit-animation-delay: .2s;
  -moz-animation-delay: .2s;
  -webkit-animation-direction: alternate;
  
  animation-delay: .2s;
  animation-direction: alternate;
  
  margin-top: -6px;
}
.trei
{
  -webkit-animation-delay: .3s;
  -moz-animation-delay: .3s;
  -webkit-animation-direction: alternate;
  
  animation-delay: .3s;
  animation-direction: alternate;
  
  
  margin-top: -6px;
}
.mouse {
  height: 34px;
  width: 18px;
  border-radius: 14px;
  transform: none;
  border: 2px solid #333;
  top: 170px;
}
.wheel {
  display: block;
  margin: 5px auto;
  background: #333;
  position: relative;
  
  height: 2px;
  width: 2px;
  border: 2px solid #333;
  -webkit-border-radius: 8px;
          border-radius: 8px;
}
.wheel {
  -webkit-animation: mouse-wheel 0.6s linear infinite;
  -moz-animation: mouse-wheel 0.6s linear infinite;
  animation: mouse-wheel 0.6s linear infinite;
}
@-webkit-keyframes mouse-wheel{
   0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
  }
}
@-moz-keyframes mouse-wheel {
  0% { top: 1px; }
  25% { top: 2px; }
  50% { top: 3px;}
  75% { top: 2px;}
  100% { top: 1px;}
}
@-o-keyframes mouse-wheel {

   0% { top: 1px; }
  25% { top: 2px; }
  50% { top: 3px;}
  75% { top: 2px;}
  100% { top: 1px;}
}
@keyframes mouse-wheel {

   0% { top: 1px; }
  25% { top: 2px; }
  50% { top: 3px;}
  75% { top: 2px;}
  100% { top: 1px;}
}

@-webkit-keyframes mouse-scroll {

  0%   { opacity: 0;}
  50%  { opacity: .5;}
  100% { opacity: 1;}
}
@-moz-keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@-o-keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
/*END-滑鼠scroll*/