#NewsBox{padding:100px 0;background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
#NewsBox .speBox{display:inline-block;width:611px;vertical-align:top}
#NewsBox .speBox .titleSet{margin:0 100px}
#NewsBox .speBox .titleSet .speBoxTitle{font-size:50px;line-height:120%;font-weight:400;font-family:'Merriweather',serif}
#NewsBox .speBox .titleSet .subBoxTitle{color:#9a9a9a;font-size:15px;font-weight:400;margin:30px 0 50px;line-height:160%}
#NewsBox .speBox .titleSet .submore a, #product .subBoxTitle a ,#about-slide .about .more a{display:inline-block;border:1px solid #d0d0d0;font-size: 13px;padding: 15px 80px 15px 55px;color: #ffffff;position:relative;transition:all linear .2s;background: #252525;font-weight: 400;}
#NewsBox .speBox .titleSet .submore a:before, #product .subBoxTitle a:before , #about-slide .about .more a:before{content: "";position:absolute;right: 20px;top: 7px;color: #ffffff;font-size:24px;background: url(/images/23/rightgo2.svg);width: 30px;height: 30px;}
#news{display:inline-block;width:calc(100% - 615px);margin-right:-4px}
#news .newsList >div{margin-bottom:35px}
#news .newsList .border{position:relative;overflow:hidden}
#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}
#news .newsList .photo img,#product #prolay .photo img{width:100%}
#news .newsList .news-info{float:left;margin-left:30px;width:calc(100% - 340px)}
#news .newsList .news-info p{font-size:14px;color:#000}
#news .newsList .news-info h3{font-size:24px;line-height:110%;font-weight:400;margin:7px 0 20px;color:#3c3838;font-family:'Noto Serif TC',serif;transition:all linear .2s}
#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)}
#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:#bd8655;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:#bd8655;transition:all linear .2s;transition-delay:.2s}
#aboutFunc{position:relative;margin-top: -105px;z-index: 2;}
#aboutFunc .youtubebox{width: 50%;}
#aboutFunc #about-slide{width: 50%;background: #fff;color: #3f4041;position: absolute;right: 0;top: 15%;webkit-box-shadow: 0 5px 15px rgb(33 32 36 / 10%);box-shadow: 0 5px 15px rgb(33 32 36 / 10%);}
#aboutFunc .flytite{right: 23%;position: absolute;top: 19%;}
#aboutFunc .flytite p{
    width: auto;
    height: 100%;
    webkit-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
    font-size: 1.15em;
}
#aboutFunc .flytite:before{
    content:"";
    position: absolute;
    top: 13px;
    right: -132%;
    height: 2px;
    width: 115px;
    background: #3f4041;
}
#aboutFunc .flytite:after{
    content:"";
    position: absolute;
    top: 12px;
    right: -43%;
    height: 4px;
    width: 33px;
    background: #3f4041;
}

#youtube{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;height:100%}
#aboutFunc .openvideo{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 5;
}
.fancybox-content{
    height:100%!important;
    margin: 0 auto!important;
}
#youtube .UTwo{position:relative;padding-bottom: 56.25%;padding-top: 0px;height:0;overflow:hidden}


#youtube .UTwo a{display: flex;width:100px;height:100px;text-align:center;line-height:100px;border-radius:50%;background: rgb(255 255 255 / 76%);position:absolute;z-index:5;color: #2b4374;font-size:30px;left:calc(50% - 50px);top:calc(50% - 50px);transition:all linear .3s;flex-direction: column;align-items: center;justify-content: center;}
#youtube .UTwo a .fa{margin-left: 5px;}
#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/23/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{padding:100px;}

#about-slide .about .subBoxTitle{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:18px;line-height:180%;margin:40px 0;width:70%;color:#e2e2e2}
#about-slide .imfo{
    width: 98%;
}
#about-slide .imfo p ,#product .mmfo p{
    font-size: 1.05em;
    line-height: 1.75em;
    color: #3f4041;
}
#about-slide .about .more{
    margin-top: 4em;
}
#about-slide .about .more a{font-weight:400;color:#fff;transition:all linear .2s}
#product{padding: 150px 0 390px;background-repeat:no-repeat;background-position: 50% 50%;background-size:cover}
#product .titleSet:before{
    content:"";
    position: absolute;
    top: -150px;
    left: 10px;
    width: 2px;
    height: 115px;
    background: #505050;
}
#product .titleSet:after{
    content:"";
    position: absolute;
    top: -90px;
    left: 9px;
    width: 4px;
    height: 36px;
    background: #505050;
}
#product .titleSet{
    position: relative;
    margin: 100px 0px 39px 0px;
}
#product .toptitleJ, #about-slide .about .subBoxTitle , #ssbanner-title h3{
    font-size: 37px;
    color: #252525;
    line-height: 120%;
    font-weight: 700;
    font-family: 'Merriweather',serif;
    text-transform: uppercase;
}

#product .titleSet .speBoxTitle, #bookBox .speBox h2, #about-slide .about .speBoxTitle, #aboutFunc #about-slide .about .speBoxTitle ,#ssbanner-title h2{font-weight:400;font-size: 2.75em;color: #252525;line-height:110%;font-weight: 800;}
#product .titleSet .subBoxTxt,#bookBox .speBox p a{text-align:center;font-size:17px;font-weight:400;color:#6d6d6d;margin-top:5px}
#product #prolay{
    position: relative;
    display: flex;
}
#product .mJinfo{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 15px;
    margin-top: 130px;
}
#product #prolay .mJpd{
    position: absolute;
    width: 76%;
    right: -6%;
}
#product .slick-prev{ 
    z-index: 989; 
    left: 30.3%;
}
#product .slick-prev:before{
    content:"";
    position: absolute;
    width: 50px;
    height: 50px;
    display: flex;
    background: url(/images/23/prev.png);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 9;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 1;
}
#product .slick-next{
    z-index: 989;
    right: 33.3%;
}
#product .slick-next:before{
    content:"";
    position: absolute;
    width: 50px;
    height: 50px;
    display: flex;
    background: url(/images/23/neext.png);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 9;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 1;
}

#product #prolay .mJpd .slick-list{
    padding: 46px 10px!important;
}
#product #prolay .slick-slide{
    opacity:0;
    transition: all linear 0.3s;
}
#product #prolay .slick-slide:hover .p-info{
    background-color: #252525;
}
#product #prolay .slick-slide.slick-active{
    opacity:1;
}
#product #prolay .slick-slide.slick-center{
    -moz-transform:scale(0.8);
    -webkit-transform:scale(0.8);
    -o-transform:scale(0.8);
    -ms-transform:scale(0.8);
    transform:scale(1.2);
}
#product #prolay .p-box{position:relative;margin: 10px 24px;}
#product #prolay .p-box:hover .photo{
    background-size: 120%;
}
#product #prolay .photo{background-repeat:no-repeat;background-position:50% 50%;background-size: 104%;position:relative;transition: all linear 0.3s;}
#product #prolay .photo:after{content:'';display:block;width:50px;height:1px;background: #ffffff;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: #ffffff;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: 0;position: relative;bottom: 0px;padding: 15px 30px;z-index: 2;background-color: #3f4041;border-top: #ffffff9c 1px solid;transition: all linear 0.5s;}
#product .p-border:before{
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top,rgb(0 0 0 / 0.75) 0%,rgb(0 0 0 / 13%) 30%);
    content: "";
    z-index: 1;
    }
#product #prolay .p-info .describe{color:#ac793c;font-weight:400;font-size: 15px;position:relative;padding-bottom:5px;display: none;}
#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: 17px;letter-spacing:.05em;color: #ffffff;margin: 0 0;font-family:'Noto Serif TC',serif;margin-left: 11px;}
#product #prolay .p-info h3:before{
    content:"";
    position:absolute;
    width: 7px;
    height: 7px;
    background: #ffffff;
    border-radius: 200px;
    top: 23px;
    left: 22px;
}
#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{margin-top: 2em;}
#bookBox{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;padding:70px 0 100px}
#bookBox .speBox{margin-bottom:50px}
#bookBox .speBox p{text-align:center}
#bookBox .speBox p a{transition:all linear .2s}
#bookBox #book{width:900px;margin:0 auto}
#bookBox #book .bList{overflow:hidden}
#bookBox #book .bList >div{float:left;width:50%;text-align:center;margin-bottom:30px}
#bookBox #book .bList >div:nth-child(even){margin-top:80px}
#bookBox #book .mofd{display:inline-block;position:relative}
#bookBox #book .photo{background-repeat:no-repeat;background-position:50%;background-size:auto 100%;margin-right:50px;background-color:#000;transition:all linear .2s}
#bookBox #book .photo a{display:block}
#bookBox #book .photo img{width:100%}
#bookBox #book h3{background:#fff;padding:25px 30px;position:absolute;bottom:-22px;right:0;max-width:calc(60% - 60px);word-break: break-all;}
#bookBox #book h3 a{color:#383838;font-size:20px;font-family:'Noto Serif TC',serif}
@media (min-width: 1025px) {
#NewsBox .speBox .titleSet .submore a:hover, #product .subBoxTitle a:hover, #about-slide .about .more a:hover{color:#fff;padding-right: 120px;}
#about-slide .about .more a:hover{}
#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 .photo:hover{background-size:auto 110%}
#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{color:#d2ab52}
#bookBox .speBox p a:hover{color:#ad925f}
}

}

#aboutFunc .speBox{overflow:hidden;display:flex;justify-content: flex-start;}
#youtube{display: flex;width:100%;flex-direction: column;align-items: center;justify-content: center;}
#youtube .useU2{display:table-cell;vertical-align:middle;width: 100%;}
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

#aboutFunc  .gogofly{
    position: absolute;
    left: 19%;
    top: -152px;
    z-index: 6;
    width: 135px;
}
#aboutFunc  .gogofly2{
    position: absolute;
    left: 14%;
    bottom: -27%;
    z-index: 6;
    width: 135px;
    
}
#aboutFunc  .gogofly img , #aboutFunc  .gogofly2 img{animation: float 3s ease-in-out infinite;}
@media screen and (max-width: 1460px) {
    #product{
        padding: 150px 0 310px;
    }
    #product .mJinfo{
        margin-top: 42px;
    }
    #aboutFunc .gogofly{
        width: 107px;
        top: -117px;
        left: 21%;
    }
    #aboutFunc .gogofly2{
    left: -1%;
    bottom: -38%;
    width: 140px;
}
#NewsBox .speBox{width:500px}
#news{width: calc(100% - 510px);}
    #product .toptitleJ, #about-slide .about .subBoxTitle{
        font-size: 30px;
    }
    #product .titleSet .speBoxTitle, #bookBox .speBox h2, #about-slide .about .speBoxTitle{
        font-size: 47px;
    }
    #product #prolay .mJpd{
        width: 75%;
        right: -5%;
    }
    #NewsBox .speBox .titleSet .submore a, #product .subBoxTitle a, #about-slide .about .more a{
        font-size: 19px;
        padding: 15px 69px 15px 41px;
    }
    #NewsBox .speBox .titleSet .submore a:before, #product .subBoxTitle a:before, #about-slide .about .more a:before{
        top: 12px;
        width: 25px;
        height: 25px;
    }
    #about-slide .about, #about-slide .free{
        padding: 50px;
    }
    #aboutFunc .flytite{
    top: calc(20% - 15px);
}
    #aboutFunc .flytite:before{
}
    #aboutFunc .flytite:after{
}
@media screen and (max-width: 1280px) {
    #product #prolay .mJpd{
    width: 68%;
}
#NewsBox .speBox{width:400px}
#news{width:calc(100% - 400px)}
#news .newsList .photo{width:100px}
#news .newsList .news-info{width:calc(100% - 190px)}
#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}
#aboutFunc .youtubebox{width:100%;}
#aboutFunc #about-slide{width:100%;position: relative;}
}
@media screen and (max-width: 1024px) {
    #aboutFunc .speBox{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #aboutFunc .flytite{
    top: 6%;
    right: 4%;
}
#NewsBox .speBox{width:100%}
#news{width:calc(100% - 140px);margin:70px 70px 0}
#news .newsList .news-info{width:calc(100% - 130px)}
#bookBox #book{width:95%}
}
@media screen and (max-width: 980px){
    #product #prolay{
    display: flex;
    flex-direction: column;
}
    #product #prolay .mJpd{
        width: 100%;
        position: relative;
        right: 0;
    }
    
}
@media screen and (max-width: 640px) {
    #aboutFunc .flytite{
        display: none;
    }
    #product{
        padding: 75px 0 150px;
    }
    #product #prolay .p-box{
        margin: 0 3px;
    }
    #product .slick-prev{
        left: -1px;
    }
    #product .slick-prev:before{
    width: 38px;
    height: 38px;
}
    #product .slick-next{
        right: 15px;
    }
    #product .slick-next:before{
    width: 38px;
    height: 38px;
}
    #product .titleSet:after ,#product .titleSet:before{
        display: none;
    }
    #product .toptitleJ, #about-slide .about .subBoxTitle{
        font-size: 24px;
        display: flex;
        order: 2;
    }
    #product .titleSet .speBoxTitle, #bookBox .speBox h2, #about-slide .about .speBoxTitle{
    font-size: 40px;
}
    #product .titleSet{
        margin: 17px 0;
        display: flex;
        align-items: center;
    }
    #product .subBoxTitle{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#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%;display: flex;flex-direction: column;align-items: center;}
#about-slide .about,#about-slide .free{padding: 20px 20px 20px;}
#product #prolay .p-info h3{font-size:20px;margin:17px 0 10px}
#bookBox #book .bList .photo{    margin-right: 0;}
#bookBox #book .bList >div{margin-bottom: 0;}
#bookBox #book .bList h3{    bottom: 0;
    padding: 15px 20px;max-width: calc(60% - 40px);}
#bookBox #book .bList h3 a{font-size: 18px;}
#bookBox #book .bList >div:nth-child(even){margin-top: 0;}

}
@media screen and (max-width: 480px) {
#NewsBox{padding:70px 0}
#news{width:100%;margin:50px 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:20px;width:calc(100% - 120px)}
#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:30px}
#about-slide .about,#about-slide .free{padding: 18px 15px 15px 15px;}
#about-slide .imfo{
    width: 100%;
}
    #about-slide .about .arts,#about-slide .free p{margin:20px 0;font-size:16px;line-height:160%}
#about-slide .slick-dots li{margin:0}
#product .titleSet .speBoxTitle,#bookBox .speBox h2{font-size:30px}
#product .titleSet{margin: 0;padding-bottom: 25px;display: flex;justify-content: flex-start;}
    #product{
        padding: 30px 0 150px;
    }
    #product #prolay .p-info{
    padding: 10px 10px;
}
    #product .mmfo p{
        font-size: 15px;
    }
    #product .mJinfo{
        padding: 19px 10px;
    }
    #NewsBox .speBox .titleSet .submore a, #product .subBoxTitle a, #about-slide .about .more a{
        font-size: 14px;
        padding: 10px 61px 10px 37px;
    }
    #NewsBox .speBox .titleSet .submore a:before, #product .subBoxTitle a:before, #about-slide .about .more a:before{
    width: 19px;
    height: 19px;
    top: 11px;
}
#product #prolay .p-box{margin: 0 5px;}
#product #prolay .p-info h3{font-size:18px;padding-left: 14px;}
    #product #prolay .p-info h3:before{
    top: 32px;
    left: 7px;
}
#product #prolay .p-info .price span.now b{font-size:16px}
#bookBox #book .photo{margin-right:20px}
#bookBox #book h3{padding:15px 20px;max-width:calc(70% - 40px)}
#bookBox #book h3 a{font-size:17px}
#bookBox #book .bList h3{
    padding: 10px 15px;
    max-width: calc(80% - 30px);
}
#bookBox #book .bList h3 a{
    font-size: 16px;
}

}