*{
    margin: 0;
    padding: 0;
    border: 0;
}
.container2 {
    max-width: 1200px;
    margin: 0 auto;
}
html{
    font-family:Verdana,'Noto Sans TC', "微軟正黑體", sans-serif;
    background:url("../images/bg.jpg") top center repeat;
    font-size: 16px;
    scroll-behavior: smooth;
}
.scrollup {
    width: 100px;
    height: 140px;
    position: fixed;
    bottom: 30px;
    right: 10px;
    display: none;
    z-index: 9999;
}
body{

    margin: auto;
    max-width: 1920px;
}
.price2{ color:#c00;
text-align:center;}
#logo{
    width: 220px;
    height: 60px;
}

:focus { outline: 0; }
li{ 
    list-style:none;
    transition-duration:.3s;
} 
li:hover{
    transform: scale(1);
}
a { text-decoration:none;}
:root {
	--title: #291609;
	--font: #291609;
	--focus: #f55668; 
}

h2{
  
    color: var(--title);
    text-align: center;

    padding: 0 0 60px 0;
    margin: 0px auto -80px;
 
}
.title02{
    background:url("../images/title-bg2.png") top center no-repeat;
}
.title03{
    background:url("../images/title-bg3.png") top center no-repeat;
}
.title04{
    background:url("../images/title-bg4.png") top center no-repeat;
    margin: 1% auto;
}
h3{
    font-size: 1.1rem;
    color: var(--font);
    text-align: center;
    line-height: 1.8rem;
    margin:50px 0 20px ;
	    font-weight: normal;
}
h4{
    font-size: 1.1rem;
    color: var(--font);
    text-align: center;
    line-height: 1.2rem;

}
p{
    font-size: 1.4rem;
    color: var(--font);
}
.booktext{
	line-height: 1.8;
	background-image:url(../images/check.png);
	background-repeat:no-repeat;
	padding-left:45px;
	font-size: 1.25rem;
	color:#000;
	}
	.money{ color:#999; font-size:12px;}
.price{
    font-size: 1.2rem;
    color:#111111;

}
.price strong{
    font-size: 150%;
    color: #f44336;
    font-weight: 700;
}

header{
    margin: auto;
    background: #e6e6e6;
	position: relative;
}
header img{
    display: block;
	max-width: 100%;
}
.kv{ position:absolute; top:30px; display:block; margin:0 33%;}
nav{ max-width:1000px; display:block; text-align:center; margin:0 auto; }
nav ul{
	position: absolute;top:500px;
}
nav li{float:left;
}

  
.container{max-width:1200px;margin: 0 auto;padding-top:20px;}
.container2{max-width:1200px;margin: 0 auto;
}
nav li:hover{
   
}
.bg01{ background-color:#e6e6e6;
background-repeat:no-repeat; padding-bottom:70px;}
.bg011{ background-image:url(../images/y_bg.jpg);
background-repeat:no-repeat; height:1020px;}
.bg02{ background-image:url(../images/b_bg.jpg);
background-repeat:no-repeat;}
.bg05{ background-image:url(../images/b_bg.jpg);
background-repeat:repeat;}
.bg03{background-color:#fdf3cb;
padding-bottom:50px;}
.bg033{ background-color:#fdf3cb;
padding-bottom:50px;}
.bg04{ background-color: #e6e6e6;
padding-bottom:50px;}
.bg044{  background-color:#e6e6e6;
padding-bottom:50px;}
nav li a{
    color: #fff;
    font-size: 1.7rem;
    line-height: 1;
    white-space: nowrap;
}
main{
    max-width: 1200px;
    margin: auto;
}
.mustBuy3{
    border-radius: 10px;
    background:#2d9b68 url("../images/plaid.png") top center repeat;
    padding:20px;
    margin: 0 auto 20px;
}
.mustBuy3 ul{
    display: flex;
}
.mustBuy3 li{
	border: 10px solid #ffffff;
	border-radius: 15px;
    width: 75%;
    background: #fff;
    padding: 0 30px 20px;
    margin: 10px auto;
    position: relative;
    overflow: hidden;
}
.mustBuy3 span{
    color: #fff;
    font-size: 1.2rem;
    display: block;
    text-align: center;
    font-weight: 500;
}
.mustBuy3 .row{
   display: flex;
   margin-bottom: 20px;
   align-items: center;
}
.mustBuy4{
    border-radius: 10px;
    background:#ee4517 url("../images/plaid.png") top center repeat;
    padding: 40px 20px 20px;
    margin: 0 auto 0px;
}
.mustBuy4 ul{
    display: flex;
}
.mustBuy4 li{
	border: 1px solid #ffffff;
    border-radius: 15px;
    width: 100%;
    background: #fff;
    padding-bottom: 20px;

}
.mustBuy4 li p{
	font-size:1.25rem;

}
.mustBuy4 span{
    color: #fff;
    font-size: 1.2rem;
    display: block;
    text-align: center;
    font-weight: 500;
}
.mustBuy4 .row{
   display: flex;
   margin-bottom: 20px;
   align-items: center;
}
.mustBuy2{
    border-radius: 10px;
    background:#ee4517 url("../images/plaid.png") top center repeat;
    padding: 20px 20px 20px;
    margin: 0 auto 20px;
}
.mustBuy2 ul{
    display: flex;
}
.mustBuy2 li{
	border-radius: 15px;
    width: 100%;
    background: #fff;
    padding: 10px 20px 10px;
    margin: 8px;
    position: relative;
    overflow: hidden;
}
.font{ padding-left:80px;}
.mustBuy2 span{
    color: #fff;
    font-size: 1.2rem;
    display: block;
    text-align: center;
    font-weight: 500;
}
.mustBuy2 .row{
   display: flex;
   margin-bottom: 20px;
   align-items: center;
}
.mustBuy{
    border-radius: 30px;
    background:#fadc32 ;
    padding:20px;
    margin: 0 auto 0px;
}
.mustBuy ul{
    display: flex;
}
.mustBuy li{
	border-radius: 15px;
    width: 100%;
    background: #fff;
    padding: 0 30px 20px;
    margin: 8px;
    position: relative;
    overflow: hidden;
}
.vd li{
border-radius: 15px;
    width: 100%;
    background: #fff;
    padding: 0 30px 20px;
    margin: 8px;
    position: relative;
    overflow: hidden;
	}
.vd{ width:70%;
margin:0 auto!important;    padding: 0px!important;
    border: 5px solid #fff;
	 border-radius:0!important;}
.mustBuy span{
    color: #fff;
    font-size: 1.2rem;
    display: block;
    text-align: center;
    font-weight: 500;
}
.mustBuy .row{
   display: block;
   margin-bottom: 20px;
   align-items: center;
}
.mustBuy .font{
	display: block;
    margin: 0 auto;
    padding-right: 16px;
	float: left;
}
.mustBuy img{
    
}
.mustBuy .price::after{
    content: "立即購買";
    padding: 4px 20px;
    background: var(--focus);
    color: #fff;
    margin-left:10px;
    position: relative;
    bottom: 4px;
    white-space: nowrap;
}

.video{
    border-radius: 10px;
    background:#088fec url("../images/plaid.png") top center repeat;
    padding: 40px 20px 2px;
    margin: 0 auto 20px;
}
.inner {
    display: flex;
    margin-bottom: 2%;
}
.video iframe{
    margin: 8px;
}
.video ul{
    display: flex;
}
.video li{
    background: #fff;
    padding: 10px;
    margin: 1%;
    text-align: center;
}
.video img{
    width: 100%;
}
.video .price{
    font-size: 1rem;
    text-align: center;
}
.video .price strong{
    font-size: 120%;
}
.topic{
    border-radius: 30px;
    background:#fadc32;
    padding:20px;
    margin: 0 auto 20px;
}
.topic ul{
    display: flex;
}
.topic li{
    background: #fff;
	text-align: center;
}
.topic img{
    display: block;
    object-fit: contain;
}
.topic h3 { 
    background: #f44336;
    color: #ffffff;
    margin: 20px 5px 0 0px;
    padding: 3px 10px;
    white-space: nowrap;
    border-radius: 20px;
    display: inline-block;

}
.btn{padding: 2px 15px 6px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 5px;
    white-space: inherit;
    border-radius: 5px;
    color: #00a7df;
    background-color: #ffffff;
    font-size: 24px;
	border:3px solid #00a7df;
    border-radius: 30px;
    margin: 15px auto;
     display: inline-block;
    z-index: 3;}
	.btn2{padding: 2px 15px 6px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 5px;
    white-space: inherit;
    border-radius: 5px;
    color: #90c31f;
    background-color: #ffffff;
    font-size: 24px;
	border:3px solid #90c31f;
    border-radius: 30px;
    margin: 15px auto;
     display: inline-block;
    z-index: 3;}
	.btn3{padding: 2px 15px 6px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 5px;
    white-space: inherit;
    border-radius: 5px;
    color: #f44336;
    background-color: #ffffff;
    font-size: 24px;
	border:3px solid #f44336;
    border-radius: 30px;
    margin: 15px auto;
     display: inline-block;
    z-index: 3;}
	
.topic p{
    font-size: 1.4rem;
    text-align: left;
    margin: 20px 0px 0px 20px;
    line-height: 1.3;
    padding-bottom: 20px;
    font-weight: bold;
}
.topic .price{
    font-size: 1.1rem;
    text-align: center;
}
.topic .price p{
    font-size: 1.1rem;
}
.topic .price strong{
    font-size: 200%;
}
.topic2{
    border-radius: 30px;
    background:#fadc32;
    padding: 20px;
    margin: 0 auto 20px;
}
.topic2 .add{ text-align:left;display: flex;
    padding: 0 10px;   height: 65px;
	font-size: 1.1rem;color: #f44336;}
.topic2 ul{
    display: flex;
}
.topic2 li{
    background: #fff;
	    border-radius: 30px;
}
.topic2 img{
    width: 100%;
    display: block;
    object-fit: contain;
}
.topic2 h3 {
	    float: left;
    background: #f44336;
    color: #ffffff;
    margin: 15px 0 0 30px;
    padding: 3px 10px;
    white-space: nowrap;
    border-radius: 20px;
    display: inline-block;
  
}
.info{text-align:left;
    padding: 20px;
	font-size: 1.1rem;color: #111111;}
.topic2 p{font-weight:bold;
    text-align: center;
    margin: 10px;
}
.topic2 .price{
    font-size: 1rem;
    text-align: center;
}
.topic2 .price strong{
    font-size: 200%;
}
.topic3{
    border-radius: 30px;
    background:#fadc32 ;
    padding:20px;
    margin: 0 auto 20px;
}
.topic3 ul{
    display: flex;
}
.topic3 li{
    background: #ffffff;
	margin:10px 0 20px;
	    border-radius: 30px;
}
.topic3 img{
    width: 100%;
    display: block;
    object-fit: contain;
}
.topic3 h3 {
  background: #cccccc;
    color: #111111;
    margin: 10px 20px 0px;
    padding: 3px 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-radius: 20px;
 display: inline;

}
.topic3 p{font-weight:bold;
    text-align: center;
    margin: 10px;
	height: 60px;
}

.topic3 .price{
	padding: 10px;
    font-size: 1rem;
    text-align: center;
	color:#FFF;
	background-color:#1c4599;
}
.topic3 .box{width: 49%;
    float: left;
	padding:5px 0;    margin: 10px 0;

	border-right:1px solid #2d9b68;    color: #f44336;
    font-weight: bold;}
	.topic3 .box2{width: 49%;
    float: left;
	padding:5px 0;    margin: 10px 0;
	    color: #f44336;
    font-weight: bold;
}
.topic4{
    border-radius: 30px;
    background:#fadc32;
    padding:20px;
    margin: 0 auto 20px;
}
.topic4 ul{
    display: flex;
}
.topic4 li{
	border-radius:30px;
    background: #ffffff;
	margin:20px;
}
.topic4 img{
    width: 100%;
    display: block;
    object-fit: contain;
}
.topic4 h3 {
  background: #cccccc;
    color: #111111;
    margin: 10px 20px 0px;
    padding: 3px 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-radius: 20px;
 display: inline;

}
.topic4 p{font-weight:bold;
    text-align: center;
    margin: 10px;
}

.topic4 .price{
	padding: 10px 0;
    font-size: 1.1rem;
    text-align: center;
}
.topic4 .box{width: 49%;    color: #f44336;
    font-weight: bold;
    float: left;
	padding:5px 0;    margin: 10px 0;

	border-right:1px solid #f0692b;}
	.topic4 .box2{width: 49%;    color: #f44336;
    font-weight: bold;
    float: left;
	padding:5px 0;    margin: 10px 0;
}

.bg{

}
.bg2{
	
	display: flex;
}
.topic3 .price strong{
    font-size: 200%;
}
.notext li{
    padding-bottom: 0;
}
.sort{
    margin: 1% auto;
}
.sort ul{
    display: flex;
}
.sort li{
    background: url("../images/sort.png") top center /100% no-repeat;
    margin: 14px;
    width: 100%;
}
.sort a{
    padding: 8% 8% 13%;
    color: #fff;
    font-size: 1.7rem;
    text-align: center;
    display: block;
    font-weight: 500;
}
.digital{
    margin: auto;
    text-align: center;
	padding: 10px;
}
.digital ul{
    display: flex;
    justify-content: center;
}
.digital li{
    margin: 2px;
    background-color: #fff;


}
.keyWord{
    margin: auto;
    text-align: center;
    padding: 0 10%;
}
.keyWord ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.keyWord li{
    margin: 8px;
    background-color: #fff;
    border: solid 2px var(--font);
    border-radius: 10px;
    box-shadow: 2px 3px #281609;
}
.keyWord a{
    color: var(--font);
    display: block;
    padding: 8px 20px;
    font-size: 1.2rem;
}
.banner{
    display: flex;
    margin: 30px auto 50px;
}
.banner ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.banner li{
    margin: 0.6%;
    border-radius: 10px;
    width: 32%;
    overflow: hidden;
}
.banner img{
    width: 100%;
}
.box{
max-width: 1200px;
    margin: auto;}
	
	.box h4{
		font-size:.8rem;
color:#CCCCCC;
font-weight:normal;
text-align:center;
    margin:0 auto;}
footer{
   
    padding: 20px 20px;
    background-color: #1c4599;
  
}
footer p{  text-align: left; color: #fff; font-size:1rem;

}
.products-tab{ display: block;
    text-align: center;}
	
	.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot {
       color: #fff!important;
    font: inherit;
    font-size: 36px!important;
    width: 45px!important;
    background-color: #f44336!important;
    margin: 10px 10px!important;
    line-height: 45px;
    border-radius: 100px;
}.m_no{ display: block;}
	.pc_no{ display:none;}
@media screen and ( max-width: 920px ){
   html{
       font-size: 12px;
   }
   h2, .title02, .title03, .title04{
       background-size: 56%;
       padding: 3% 0 3%;
   }
   .inner{
    flex-wrap: wrap;
    justify-content: center;
    }
    .inner iframe{
        width: 100%;
        height: 40vw;
        margin: 1%;
    }
    h4{
        font-size: 1.4rem;
        line-height: 1.8rem;
        margin: 2% 0;
    }
    .video .price{
        font-size: 1.4rem;
    }
   
}
.tab4{ 
display:inline-block;
} 
.tab5{ 
display:inline-block;
} 
@media screen and ( max-width: 768px ){
	.topic4{
    margin: 0 2%!important;
}
	.topic4 li {
    margin: 0px!important;
}
	.topic h3 {
    padding: 6px 10px!important;
}
	.m_no{ display:none;}
	.pc_no{ display: block;}
	.carousel-in-tab .item {
		
    padding: 20px 0 20px 0!important;
}
	.topic3 p {
    height: 40px!important;
}
	.topic2 img {
      width: 100%!important;
}
	.topic3 img {
    width: 100%!important;
}
	.dab-link {
    padding: 10px 0px!important;
}
	.cab-link {
    padding: 10px 0px!important;
}
.eab-link {
 padding: 10px 0px!important;
}
	.tab3{ width:33%;float: left;
    width: 25%;
    margin: 0!important;
    padding: 0!important;
}
.tab4{ width:80PX;
display:inline-block;
} 
.tab5{ width:140PX;
display:inline-block;
}  
 
	.bg01{ background-color:#e6e6e6!important;
	background-image:none!important;
	background-repeat:no-repeat; }
	.bg044 {
   background-color:#e6e6e6!important;
	background-image:none!important; 
   
}
	.bg02 {
		background-color:#e9e6e6!important;
	background-image:none!important;
    height: 760px;
  
}
.btn {
    padding: 2px 15px 6px!important;
   
}
.bg03 {
  
   background-color:#e9e6e6!important;
	background-image:none!important;
}
.bg033 {
  
     background-color:#e9e6e6!important;
	background-image:none!important;
}
.bg011 {
    background-color: #FC0!important;
    background-image: none!important;
  
}

.bg04 {
     background-color:#e6e6e6!important;
	background-image:none!important;
    height: 980px;
}

	.topic4 img {
    width: 100%!important;

}
.tab-link {
    width: 23%!important;
}
.container {
    padding-top: 20px!important;
}
	.mustBuy2 .row {
    display: block;

}
.mustBuy2 li {
    padding: 5px;
	}
		
    nav li{
      padding: 0 0 0 2px;
    width: 90px;
    margin: 0 auto;
    text-align: center;

    }
    nav li a{
        white-space: normal;
    }
    .mustBuy li{
        padding: 2% 3%;
    }
    .mustBuy, .video, .topic  {
        margin: 2%;
        border-radius: 30px;
    }
	 .mustBuy2  {
        margin: 2%;
       border-radius: 30px;
    }
	 .mustBuy3  {
        margin: 2%;
        border-radius: 30px;
    }
	
	.topic2 {
        margin: 2%;
        border-radius: 30px;
    }
	.topic3 {
        margin: 2%;
        border-radius: 30px;
    }
	.vd {

    margin: 0 auto!important;
    padding:5px!important;
    border: 0; 
    border-radius: 10px!important;
	background: #fff;
}
    .topic ul{
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .topic li {
        width: 80%;
        margin: 1% auto;
        padding-bottom: 3%;
    }
  
    .sort ul {
        flex-wrap: wrap;
        justify-content: center;
    }
    .sort li{
        width: 25%;
        margin: 1%;
    }
    .keyWord{
        padding: 0 1%;
    }
    .keyWord li{
        margin: 1%;
    }
    .banner{
        margin: 2%;
    }

}
@media screen and ( max-width: 640px ){
	nav ul {
    top: 600px!important;
}
	.vd {
    width: 92%;}
	.info {
    padding: 0px;
}
	
    #logo{
        width: 30vw;
        height: 8.3vw;
    }
    nav li a{
        font-size: 1.4rem;
    }
    .mustBuy ul{
        flex-wrap: wrap;
    }
    .mustBuy li{
    padding: 0 5% 3%;
    }

    h2, .title02, .title03, .title04{
        background-size: 65%;
        font-size: 2rem;
        padding: 3.5% 0 4%;
    }
    .video li{
        margin: 1%;
        padding: 1%;
    }
    .video .price{
        font-size: 1rem;
        white-space: normal;
    }
    .banner li{
        width: 47%;
        margin: 1%;
    }
    .notext li{
        padding-bottom: 0;
    }

           
 }
 @media screen and ( max-width: 520px ){
	 .font {
    padding-left: 0px!important;
}
    h2, .title02, .title03, .title04{
        background-size: 80%;
        font-size: 1.8rem;
        padding: 4% 0 15%;
    }
    h4{
        font-size: 1rem;
        line-height: 1.2rem;
        margin: 2% 0;
    }
    .sort li{
        width: 30%;
    }

    .sort a{
        font-size: 1.5rem;
        padding: 7% 7% 13%;
        white-space: nowrap;
    }
    .keyWord a{
        padding: 1vw 3vw;
    }


            
 }
 
 .tab-link {
    cursor: pointer;
    display: inline-block;
  padding: 0;

}

.tab-link.active {
   
}

.responsive{ max-width:100%;
height:auto;}

.video-container {
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;left: 0;
width: 100%;
height: 100%;}