.mmtmore{display:flex;margin-top:50px}
.mmtmore a{background:var(--secondary);display:flex;color:#fff;align-items:center;padding:15px 18px 15px 21px;border-radius:1000px;font-size:14px;width:220px;justify-content:space-between}
.mmtmore a .fas{background:#fff;padding:4px;border-radius:500px;color:#1f3349;font-size:12px}
.mmtmore a:hover{background: var(--primary);}
.mmtmore a:hover .fas{color: var(--primary);}
.mmtmore a svg{width:30px;aspect-ratio:1/1;fill:#0087ca;background:#fff;border-radius:555px;margin:10px;padding:9px;margin-right:30px}
.mmtmore a svg path{fill:#0087ca}

.JJtitle{position: relative;margin-bottom:20px}
.JJtitle .BJJtitle{font-weight:700;font-size: max(3.2*(1vw + 1vh) / 2,34px);text-transform:uppercase;color:var(--secondary);line-height:100%;margin-bottom: 10px;}
.JJtitle .cnlittle{font-weight:400;font-size: max(1.6*(1vw + 1vh) / 2,17px);text-transform:uppercase;padding-left:40px;display:flex;align-items:center;}
.JJtitle .cnlittle:before{content:"";position:absolute;width: 20px;aspect-ratio: 4/4;left:0;background-position:50%;background-repeat:no-repeat;background-color: #565656;-moz-transform-origin: bottom;-moz-transform:skewX(20deg);-webkit-transform-origin:bottom;-webkit-transform:skewX(20deg);-o-transform-origin:bottom;-o-transform:skewX(20deg);-ms-transform-origin:bottom;-ms-transform:skewX(20deg);transform-origin:bottom;transform:skewX(20deg);margin-bottom: 4px;}

/*h1*/
h1.pageh1{
    position: relative;
    z-index: 1;
    opacity: 1;
    color: #909090;
    font-weight: 500;
    font-size: 20px;
    padding: 10px 0;
    margin-top: 21px;
    margin-bottom: 60px;
}
h1.pageh1:before{content:"";position: absolute;width: 53vw;left: -10vw;height: 1px;top: -7px;background: #e7e7e7;}

#NewsBox{padding:100px 0;background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
#NewsBox .webframe{
    display: grid;
    grid-template-columns: 46% 50%;
    justify-content: space-between;
    align-items: center;
}
#NewsBox .speBox .titleSet .subBoxTitle{color:#9a9a9a;font-size:15px;font-weight:400;margin:30px 0 50px;line-height:160%}
#NewsBox .speBox {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
#news .newsList >div{margin-bottom:35px}
#news .newsList .border{position:relative;overflow:hidden;background: #ffffff;display: grid;align-items: center;grid-template-columns: 25% 70%;}
#news .newsList .border a,#product #prolay .p-box a{position:absolute;display:block;width:100%;height:100%;left:0;top:0;z-index:5}
#news .newsList .photo{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;float:left;height: 100%;}
#news .newsList .photo img,#product #prolay .photo img{width:100%;}
#news .newsList .news-info{float:left;margin-left:30px;}
#news .newsList .news-info p{font-size:14px;color:#000}
#news .newsList .news-info h3{font-weight:400;transition:all linear .2s;overflow: hidden;margin: 0px 0 10px;height: 39px;width: 100%;line-height: 200%;text-align: left;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;font-size: 20px;}
#news .newsList .news-info .describe{color:#888;font-weight:400;font-size:16px;position:relative}
#news .newsList .news-info .describe h4{font-weight:400;width:calc(100% - 80px);overflow: hidden;margin: 0px 0 10px;height: 51px;line-height: 180%;text-align: left;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;font-size: 15px;}
#news .newsList .more{position:absolute;right:0;top:0;font-family:'Merriweather',serif;padding-bottom:15px;font-size:13px}
#news .newsList .more b{font-weight:400;color:#5f5f5f}
#news .newsList .more:after{content:'';display:block;position:absolute;left:21px;bottom:0;width:15px;height:1px;background: #bcbcbc;transform:rotate(35deg);transform-origin:center right;transition:all linear .2s}
#news .newsList .more:before{content:'';display:block;position:absolute;left:6px;bottom:0;width:30px;height:1px;background: #bcbcbc;transition:all linear .2s;transition-delay:.2s}
#aboutFunc{position: relative;background: var(--secondary);color: #fff;padding: 110px 0;}
#aboutFunc:before{content:"";position: absolute;width: 100px;aspect-ratio: 1/1;background: #ffffff;left: -40px;top: -50px;z-index: 2;}

#aboutFunc .youtubebox{width:50%}
#aboutFunc #about-slide{}
#youtube{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;height:100%}
#youtube .UTwo{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden}
#youtube .UTwo a{display:block;width:100px;height:100px;text-align:center;line-height:100px;border-radius:50%;background:rgba(0,0,0,0.6);position:absolute;z-index:5;color:#dcdcdc;font-size:30px;left:calc(50% - 50px);top:calc(50% - 50px);transition:all linear .3s}
#youtube .UTwo a:hover{width:110px;height:110px;line-height:110px;left:calc(50% - 55px);top:calc(50% - 55px);font-size:34px}
#youtube .UTwo iframe{position:absolute;top:0;left:0;width:100%;height:100%}
#about-slide .slick-prev{opacity:0}
#about-slide .slick-next{right:30px;height:40px}
#about-slide .slick-next:before{background-image:url(/images/00/index-about-sccrow.jpg);width:23px;height:46px;content:'';display:block}
#about-slide .slick-dots{top:10px;text-align:right;height:30px;width:auto;right:0}
#about-slide .slick-dots li button:before{font-size:10px;color:#fff}
#about-slide .about,#about-slide .free{text-align: center;}
#about-slide .about img{
    width: 110px;
}
#about-slide .about .speBoxTitle,#about-slide .free h3{font-size: 35px;line-height:120%;text-align: center;color: #ffffff;margin-top: 20px;}
#about-slide .about .subBoxTitle{font-family:'Merriweather',serif;font-weight:400;font-size:15px;color:#a7a7a7;line-height:110%;margin-top:5px;width:70%}
#about-slide .about .arts,#about-slide .free p{font-size: 16px;line-height:180%;margin: 40px auto 0;width: 960px;color: #fff;text-align: center;}
#about-slide .about .more{width:70%;text-align:right}
#about-slide .about .more a{font-family:'Merriweather',serif;font-weight:400;color:#fff;font-size:14px;transition:all linear .2s}
#product{padding:50px 0;background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
#product .titleSet{margin:70px}
#product .titleSet .speBoxTitle, .speBox h2{font-weight:400;text-align:center;font-size: max(3.2*(1vw + 1vh) / 2,34px);line-height:110%;font-family: 'Roboto', sans-serif;text-transform: uppercase;font-weight: 500;}
#product .titleSet .subBoxTxt, #bookBox .speBox a, .speBox p{text-align:center;font-size: 18px;font-weight: 500;color:#6d6d6d;margin-top:5px;letter-spacing: 5px;}
#product #prolay .p-box{position:relative;margin:10px 30px}
#product #prolay .photo{background-repeat:no-repeat;background-position:50% 50%;background-size:contain;position:relative}
#product #prolay .photo:after{content:'';display:block;width:50px;height:1px;background:#e2b774;position:absolute;left:calc(50% - 25px);top:50%;z-index:2;transition:all linear .2s;opacity:0}
#product #prolay .photo:before{content:'';display:block;width:20px;height:1px;background:#e2b774;position:absolute;left:calc(50% - 15px);top:50%;z-index:2;transform:rotate(35deg) translate(17px,-12px);transform-origin:right center;transition:all linear .2s;opacity:0}
#product #prolay .photo img{transition:all linear .2s}
#product #prolay .p-info{margin-top:20px}
#product #prolay .p-info .describe{color:#ac793c;font-weight:400;font-size:15px;position:relative;padding-bottom:5px}
#product #prolay .p-info .describe:after{content:'';display:block;background:#ac793c;width:30px;height:1px;position:absolute;bottom:0;left:0}
#product #prolay .p-info h3{line-height:130%;font-weight:400;font-size:24px;letter-spacing:.05em;color:#1d1c1c;margin:25px 0 18px;font-family:'Noto Serif TC',serif}
#product #prolay .p-info .price span{line-height:120%;display:block;color:#999;font-size:12px}
#product #prolay .p-info .price span b{font-weight:400;vertical-align:initial}
#product #prolay .p-info .price span.now{line-height:150%}
#product #prolay .p-info .price span.now b{font-size:18px;margin:0 5px;font-family:'Merriweather',serif;color:#000}
#product .subBoxTitle{text-align:center;margin-top:80px}
#bookBox{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;padding: 70px 0 90px;background-image: url(/images/00/bookbg.png);}
#bookBox .mmtmore{display: flex;justify-content: center;}
#bookBox .speBox{margin-bottom:50px}
#bookBox .speBox p{text-align:center}
#bookBox .speBox p a{transition:all linear .2s;margin-top: 0;}
#bookBox #book{width: 85%;margin:0 auto;}
#bookBox #book .bList{overflow:hidden;justify-content: center;display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 50px;}
#bookBox #book .bList >div{text-align:center;}
#bookBox #book .mofd{position:relative;height: 100%;}
#bookBox #book .photo{background-repeat:no-repeat;background-position:50%;background-size:auto 100%;transition:all linear .2s;height: 100%;overflow: hidden;}
#bookBox #book .photo a{display:block}
#bookBox #book .photo img{width:100%;height: 100%;object-fit: cover;transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;}
#bookBox #book h3 a{color: #ffffff;font-size: 16px;width: 100%;height: 100%;background: rgb(31 31 31 / 0.2);top: 0;left: 0;position: absolute;text-align: center;line-height: 285px;font-weight: normal;opacity: 0;transition: all linear .2s;}
#bookBox #book h3 a:hover{opacity:1;}

#about_area{display:flex;justify-content:flex-end;align-items:center;padding: 160px 0 70px;}
#about_area:before{content:"";width: 17%;height: 170%;aspect-ratio:1/1;position:absolute;background: rgb(226 226 226 / 40%);right: 0%;top: -30%;border-radius:0;z-index: 0;}
#about_area .maJimg{animation:float 3s ease-in-out infinite;width:45%}
#about_area .maJinfoo{position:relative;display: grid;grid-template-columns: 50% 50%;z-index: 1;justify-content:center}
#about_area .maJinfoo .tctextbox{margin-top:50px}
#about_area .maJinfoo .tadJmimg{position:relative;}
#about_area .maJinfoo .tadJmimg:before{content:"";position: absolute;width: 150px;aspect-ratio: 1/1;background: #adadad;left: -66px;bottom: -30px;z-index: -1;}
#about_area .maJinfoo .tadJmitem{position:relative;display:grid;align-items:center;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);grid-template-areas:". tounbox01 ." "tounbox02 tounbox03 tounbox04" ". tounbox05 .";width:min(610px ,100%);justify-content:center;gap:4%;margin-top:-100px}
#about_area .maJinfoo .tadJmitem:before{content:"";position:absolute;width:72%;top:10%;left:16%;aspect-ratio:1/1;background-image:url(/images/40/out-coun.png);background-size:contain;background-repeat:no-repeat;z-index:-1}
#about_area .maJinfoo .tctextbox .tminfo p{overflow:hidden;margin: 40px 0 10px;height: 98px;width:84%;line-height: 200%;text-align:center;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp: 3;-webkit-box-orient:vertical;font-size:16px;text-align:left;}



@media (min-width: 1025px) {
    #NewsBox .speBox .titleSet .submore a:hover,#product .subBoxTitle a:hover{background:#d0d0d0;color:#fff}
    #about-slide .about .more a:hover{color:#7b7b7b}
    #product #prolay .p-box:hover .photo img{background:rgba(0,0,0,0.41)}
    #product #prolay .p-box:hover .photo:after,#product #prolay .p-box:hover .photo:before{opacity:1}
    #bookBox #book .mofd:hover img{-moz-transform: scale(1.2);-webkit-transform: scale(1.2);-o-transform: scale(1.2);-ms-transform: scale(1.2);transform: scale(1.2);}
    #news .newsList .border:hover .more:after{transform:rotate(0deg);opacity:0}
    #news .newsList .border:hover .more:before{width:0;left:30px}
    #news .newsList .border:hover .news-info h3{}
    #bookBox .speBox p a:hover{color:#ad925f}
}
@media screen and (min-width: 981px){
	.mbshowbox{display:none;}
}
@media screen and (max-width: 1470px) {
    #NewsBox .speBox{width:500px}
    #news{}
    #about_area .maJinfoo .tctextbox:before{height:140px;top:-140px}
	#about_area .maJimg{width:43%}
	#about_area .maJinfoo .tadJmitem{width:min(550px ,100%)}
	#about_area .maJinfoo .tadJmitem:before{width:74%;left:14%;top:12%}
	#about_area{height:610px}
	#about_area:before{top:141px}
}
@media screen and (min-width: 1281px) {
    #youtube{display:table;width:100%}
    #youtube .useU2{display:table-cell;vertical-align:middle}
}
@media screen and (max-width: 1280px) {
    #NewsBox .speBox{width:400px}
    #news .newsList .news-info h3{margin:4px 0 15px;font-size:20px}
    #NewsBox .speBox .titleSet .speBoxTitle{font-size:42px}
    #NewsBox .speBox .titleSet{margin:0 70px}
    #bookBox #book h3 a{line-height: 220px;}
    #aboutFunc .youtubebox{width:100%}
    #aboutFunc #about-slide{width:100%}
}
@media screen and (max-width: 1024px) {
	.mmtmore{display: flex;flex-direction: column;align-items: center;margin-top: 30px;}
	#NewsBox .webframe{display: flex;flex-direction: column;}
    #NewsBox .speBox{width:100%;}
    #news{width: calc(100% - 137px);margin: 10px 70px 0;}
    #news .newsList .news-info{width: calc(100% - 10px);padding: 10px;margin: 5px;}
    #bookBox #book{width:95%;padding-bottom: 20px;}
    #bookBox #book h3 a{line-height: 300px;}
    #about-slide .about .arts, #about-slide .free p{width: 80%;}
    #about_area .maJinfoo .tctextbox:before{top:-85px;height:85px}
	#about_area .maJinfoo .tctextbox:after{width:85px}
	#about_area:before{top:84px;width: 4vw;}
	#about_area .maJimg{width:40%}
	#about_area .maJinfoo .tctextbox{width:58%}
	#about_area{height:384px}
}


@media screen and (max-width: 980px){
    #about_area .maJinfoo{display:flex;flex-direction:column}
	#about_area{height:auto;padding-bottom:60px}
	#about_area .maJinfoo .tctextbox{width:100%;margin-bottom:50px;padding: 30px 0;}
	#about_area .maJimg{width:100%;animation:unset}
    .pcshowbox{display:none}
	#news .newsList .more{display:none;}
	#news .newsList .news-info .describe h4{
    width: 100%;
}
}
@media screen and (max-width: 640px) {
    #news{width:calc(100% - 60px);margin:70px 30px 0}
    #NewsBox .speBox .titleSet{margin:0 30px}
    #news .newsList .news-info p.more{display:none}
    #news .newsList .news-info .describe h4,#about-slide .about .arts,#about-slide .free p,#about-slide .about .more{width:100%}
    #about-slide .about,#about-slide .free{padding:100px 80px 50px}
    #product #prolay .p-info h3{font-size:20px;margin:17px 0 10px}
    #bookBox #book .bList .photo{    margin-right: 0;}
    #bookBox #book .bList{grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 15px;}
    #bookBox #book .bList >div:last-child{display:block;}
    #about_area .maJimg{position:relative;top:0;width:100%;margin-bottom:60px}
	#about_area .maJinfoo{width:100%}
	#about_area .maJinfoo .tctextbox{width:90%;margin:15px auto}
	#about_area{display:flex;flex-direction:column;height:auto;padding: 70px 0 20px;}
    #about_area:after,#about_area:before,#aboutFunc:before{display:none}
}
@media screen and (max-width: 480px) {
	#news .newsList .border{display: flex;flex-direction: column;}
	#news .newsList .photo{width:100%;}
    #NewsBox{padding: 60px 0;}
    #news{width:100%;margin: 10px 0 0;}
    #news .newsList .news-info .describe h4{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    #news .newsList .news-info h3{margin:0 0 10px;font-size:18px}
    #news .newsList .news-info{margin-left: 0;width: calc(100% - 30px);padding: 16px 0px;}
    #NewsBox .speBox .titleSet .speBoxTitle{font-size:35px}
    #NewsBox .speBox .titleSet .subBoxTitle{margin:10px 0 30px}
    #about-slide .slick-next{right:15px}
    #about-slide .about .speBoxTitle,#about-slide .free h3{font-size: 22px;}
    #about-slide .about,#about-slide .free{padding: 30px 50px 30px 40px;}
    #about-slide .about .arts,#about-slide .free p{margin:20px 0;font-size: 15px;line-height:160%;}
    #aboutFunc{padding: 20px 0;}
	#bookBox{padding: 50px 0 60px;}
    #about-slide .slick-dots li{margin:0}
    #product .titleSet .speBoxTitle,#bookBox .speBox h2{font-size:30px}
    #product .titleSet{margin:40px}
    #product #prolay .p-box{margin:0 10px}
    #product #prolay .p-info h3{font-size:18px}
    #product #prolay .p-info .price span.now b{font-size:16px}
    #bookBox #book .photo{margin-right:20px}
    #bookBox #book .bList h3 a{font-size: 16px;line-height: 160px;}
}