#NewsBox{padding: 105px 0;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;position: relative;overflow: hidden;}
#NewsBox:before{content:url(/images/23/new-left.png);position: absolute;bottom: -10px;left: -10px;}
#NewsBox:after{content:url(/images/23/about-left.png);position:absolute;top: -40px;right: -170px;transform: rotateY(180deg);}
#NewsBox .webframe{width:1160px;display: flex;justify-content: space-between;}
#NewsBox .speBox{width: 25%;animation-name: fadeInLeft;-webkit-animation-name: fadeInLeft;z-index: 2;}
#NewsBox .speBox .titleSet{}
#NewsBox .speBox .titleSet .speBoxTitle{font-weight: 600;font-size: 15px;color: #9a9c9d;line-height: 110%;margin-bottom: 5px;font-family: 'Lato', sans-serif;text-transform: uppercase;}
#NewsBox .speBox .titleSet .submore{font-size: 40px;line-height: 120%;color: #403f3f;position: relative;}
#NewsBox .speBox .titleSet .submore:after{content:'';width: 35px;height: 1px;background: #9a9c9d;display: block;margin: 30px 0 40px;}
#NewsBox .speBox .titleSet .submore a,#product .subBoxTitle a{display:inline-block;border:1px solid #d0d0d0;font-size:13px;padding:12px 55px;color:#545454;position:relative;transition:all linear .2s}
#NewsBox .speBox .titleSet .submore a:before,#product .subBoxTitle a:before{content:'+';position:absolute;left:12px;top:10px;color:#d0d0d0;font-size:24px}
#news{width: 75%;}
#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}
#news .newsList {animation-name: fadeInRight;-webkit-animation-name: fadeInRight;}
#news .newsList ul li {padding: 30px 0;border-bottom: 1px #edeceb solid;position: relative;}
#news .newsList ul li:first-child {border-top: 1px #edeceb solid;}
#news .newsList ul li a{display: flex;flex-direction: row;flex-wrap: wrap;}
#news .newsList ul li a .top_news_list_head {font-size: 12px;color: #9B9B9B;width: 200px;}
#news .newsList ul li .top_news_list_head span { display: inline-block; font-weight: 500; font-size: 13px; letter-spacing: 2px;}
#news .newsList ul li .top_news_list_head span:nth-child(1) { width: 90px; margin-right: 20px; position: relative; font-family: 'Lato', sans-serif; letter-spacing: 0;}
#news .newsList ul li .top_news_list_head span:nth-child(1):after { content: ""; background: #DCDDE3; width: 1px; height: 8px; position: absolute; right: 0px; top: calc(50% - 4px); display: block;}
#news .newsList ul li .top_news_list_title {padding-right: 55px;position: relative;font-weight: 500;font-size: 16px;color: #000;overflow: hidden;height: 27px;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;width: calc(100% - 260px);}
#news .newsList ul li .top_news_list .news_list_btn { top: 14px;}
#news .newsList ul li .news_list_btn {height: 0px;width: 0px;position: absolute;top: 50%;right: 20px;transform: translate(50%,-50%);border: 4px solid #1c6b96;border-radius: 50px;transition: all .3s;}
#news .newsList ul li .news_list_btn:after {content: "";background: url(/images/23/news_arrow.svg) no-repeat center / contain;width: 10px;height: 7px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%) scale(0);transition: all .4s;}
#news .newsList ul li:hover .news_list_btn:after { transform: translate(-50%,-50%) scale(1);}
#news .newsList ul li:hover .news_list_btn { height: 37px; width: 37px; border: 1px solid #1c6b96;}
#news .newsList ul li .time { font-size: 12px; color: #404040; }
#news .newsList ul li .txt { height: 60px; -webkit-line-clamp: 2; }

#aboutFunc{padding:95px 0;position:relative;}
#aboutFunc:before{content:url(/images/23/about-left.png);position:absolute;top: -60px;left: -170px;}
#aboutFunc .bgTxt{position:absolute;right: 0;top: calc(50% - 120px);}
#aboutFunc .webframe{width: 1200px;}
#aboutFunc .speBox{overflow:hidden;display:flex;justify-content: space-between;align-items: center;}
#aboutFunc .youtubebox{width: 60%;}
#aboutFunc #about-slide{width: 35%;}
#youtube{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;height:100%}
#youtube .UTwo{position:relative;padding-bottom:56.25%;padding-top: 70px;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/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{animation-name: fadeInRight;-webkit-animation-name: fadeInRight;}
#about-slide .about .speBoxTitle{font-size: 40px;line-height:120%;color: #403f3f;position: relative;}
#about-slide .about .speBoxTitle:after{content:'';width: 35px;height: 1px;background: #9a9c9d;display: block;margin: 30px 0 40px;}
#about-slide .about .subBoxTitle{font-weight: 600;font-size:15px;color: #9a9c9d;line-height:110%;margin-bottom: 5px;font-family: 'Lato', sans-serif;}
#about-slide .about .arts,#about-slide .free p{font-size: 15px;line-height:180%;margin:40px 0;color: #575757;text-align: justify;}
#about-slide .about .more{}
#about-slide .about .more a{font-weight:400;color:#fff;font-size: 16px;transition:all linear .2s;background: #1c6b96;padding: 25px 60px;border-radius: 50px;display: inline-block;}
#threeBox{display:flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;align-items: center;}
#leftphotoBox{width:70%;}
#fakeNumber{width:30%}
#fakeNumber ul{margin:0 60px;}
#fakeNumber .eva{}
#fakeNumber .eva p{color:#403f3f;font-size:40px;font-weight: bold;line-height: 100%;}
#fakeNumber .eva p b{display:block;font-size: 190px;font-family: 'Lato', sans-serif;text-align: end;line-height: 100%;font-weight: 900;color: #283b42;}
#fakeNumber .eva h2{color: #403f3f;font-size: 40px;font-weight: bold;line-height: 120%;text-align: end;}
#fakeNumber .eva h4{text-align:end;margin-top: 35px;}
#fakeNumber .eva h4 a{font-weight: 400;color: #fff;font-size: 16px;transition: all linear .2s;background: #1c6b96;padding: 25px 60px;border-radius: 50px;display: inline-block;}
#fakeNumber .eva h4 a:hover{background:#283b42;}
#product{padding:50px 0;background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
#product .titleSet{margin:70px}
#product .titleSet .speBoxTitle,#bookBox .speBox h2{font-weight:400;text-align:center;font-size:36px;line-height:110%;font-family:'Merriweather',serif}
#product .titleSet .subBoxTxt,#bookBox .speBox p a{text-align:center;font-size:17px;font-weight:400;color:#6d6d6d;margin-top: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 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{background:#d0d0d0;color:#fff}
#about-slide .about .more a:hover{ background: #283b42;}
#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}
}
@media screen and (max-width: 1680px) {
#leftphotoBox{width: 65%;}
#fakeNumber{width: 35%;}
}
@media screen and (max-width: 1440px) {
#leftphotoBox{width: 60%;}
#fakeNumber{width: 40%;}
}
@media screen and (max-width: 1366px) {
#leftphotoBox{width: 55%;}
#fakeNumber{width: 45%;}
}
@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) {
#fakeNumber .eva p, #fakeNumber .eva h2{font-size: 30px;}
#fakeNumber .eva p b{font-size: 140px;}
#aboutFunc .webframe{width:90%;}
#aboutFunc:before{display:none;}
#youtube .UTwo{padding-bottom: 76.25%;}
#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:after{display:none;}
}
@media screen and (max-width: 1024px) {
#NewsBox .webframe{width:90%;flex-wrap: wrap;}
#NewsBox{padding:50px 0;}
#NewsBox .speBox{width:100%;animation-name: fadeInDown;-webkit-animation-name: fadeInDown;}
#news{width: 100%;}
#NewsBox .speBox .titleSet .speBoxTitle, #NewsBox .speBox .titleSet .submore{text-align:center;}
#NewsBox .speBox .titleSet .submore:after{margin: 30px auto 40px;}
#news .newsList .news-info{width:calc(100% - 130px)}
#bookBox #book{width:95%}
}
@media screen and (max-width: 768px) {
#NewsBox:before{display:none;}
#fakeNumber .eva p, #fakeNumber .eva h2, #fakeNumber .eva h4{text-align: center;}
#fakeNumber .eva p b{text-align: center;}
#leftphotoBox{width: 100%;}
#fakeNumber{width: 100%;}
#fakeNumber ul{ margin: 60px}
#aboutFunc #about-slide{width:100%;}
#aboutFunc .youtubebox{width:100%;margin-bottom: 20px;z-index: 2;}
#aboutFunc .speBox{ flex-wrap: wrap;}
#aboutFunc{padding: 55px 0;}
#aboutFunc:before{display:block;top: 50%;left: 20%;}
#aboutFunc .bgTxt{display:none;}
}
@media screen and (max-width: 640px) {
#news .newsList ul li a{}
#news .newsList ul li a .top_news_list_head{width:100%;}
#news .newsList ul li .top_news_list_title{width: calc(100% - 55px);}
#fakeNumber ul{margin: 60px 20px;}
#aboutFunc:before{top: 31%;left: 20%;zoom: 60%;}
#youtube .UTwo{padding-bottom: 46.25%;}
#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{}
#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 .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 .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{}
#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: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 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;
}

}