.title{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.title .bigN{}
.title .littlen{
    color: #b17e88;
    font-size: 24px;
    line-height: 140%;
    font-weight: 200;
}
#freebox .animation-box{
}
#freebox .animation-box img{position:absolute;animation-name:flow;animation-iteration-count:infinite;animation-direction:alternate;animation-duration:1s;z-index:1;}
#freebox .animation-box .freeicon01{bottom: -12%;right: -3%;animation-duration:2s;}
#freebox .animation-box .freeicon02{top: 16%;left: 9%;}
#freebox .animation-box .freeicon03{top: 13%;right: 7%;animation-duration:1.5s;display: none;}
@keyframes flow{0%{transform:translateY(0);}
100%{transform:translateY(-20px);}
}
@keyframes bob{0%{transform:scale(1);}
100%{transform:scale(0.5);}
}
@keyframes swim{0%{transform:rotate(2deg);}
100%{transform:rotate(-2deg);}
}
#freebox{
    padding: 50px 0 160px;
    position: relative;
    background-attachment: fixed;
}
#freebox h2{
    text-align: center;
    color: #d34e66;
    font-size: 50px;
    letter-spacing: 0.15em;
    line-height: 140%;
    border-bottom: #b17e885e 1px solid;
}
#freebox .free .photo{text-align:center;}
#freebox .free .photo img{
    width: 200px;
}
#freebox .free h3{
    font-size: 24px;
    line-height: 1.3;
    text-align: center;
    font-weight: 400;
    letter-spacing: 3px;
    margin: 0px 0 10px;
    color: #F26B83;
}
#freebox .free p{
    font-family: 'Noto Serif TC',serif;
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 2px;
    display: inline-block;
    border: 1px solid #b6b2b1;
    padding: 7px 30px;
    border-radius: 50px;
    color: #332926;
    margin-top: 20px;
}
#freebox .free:hover p{border: 1px solid #f2ced8;background: #ebbb6a;color: #fff;}
#freebox .free p img{
    display: inline-block;
    margin-left: 5px;
    vertical-align: baseline;
    transition: all linear 0.3s;
}
#freebox .free:hover p img{margin-left: 15px;-webkit-filter: contrast(0) brightness(150%);filter: contrast(0) brightness(200%);}
#freeboxlist{text-align: center;margin-top: 70px;display: flex;justify-content: center;}
#freeboxlist >div{
    display: flex;
    margin: 0 60px;
    flex-direction: column;
}
#freeboxlist >div .free{text-align:center;position: relative;}
#freeboxlist >div .free a{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}
#Extra-setting{
    padding: 50px 0;
}
#Extra-setting h2{
    text-align: center;
    margin-bottom: 60px;
}
#Extra-setting .workframe{
    text-align: center;
}
#Extra-setting .item{position: relative;display: inline-block;width: calc((100%/3) - 55px);margin: 25px;}
#Extra-setting .item .item-icon{
    display: block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    border-radius: 10px;
}
#Extra-setting .item .item-icon img{
    width: 100%;
}
#Extra-setting .item .item-info{
    position: absolute;
    right: 2px;
    top: 0;
    display: flex;
    height: 100%;
}
#Extra-setting .item .item-info .item-title{color: #d99d9d;font-size: 22px;-ms-writing-mode: tb-rl -webkit-writing-mode: vertical-rl;writing-mode: vertical-rl;letter-spacing: 3px;padding: 20px 10px;text-align: center;display: inline-block;z-index: 2;}
#Extra-setting .item:hover .item-info .item-title{color:#fff;}
#Extra-setting .item .item-info:after{content:'';width: 50px;height: 255px;background: #fff;position: absolute;top: calc(50% - 127.5px);border-radius: 7px 0 0 7px;right: -2px;transition: all 200ms cubic-bezier(0.105, 0.470, 0.955, 0.520); /* custom */transition-timing-function: cubic-bezier(0.105, 0.470, 0.955, 0.520); /* custom */}
#Extra-setting .item:hover .item-info:after{background: #f26b83;}
#Extra-setting .item .item-info .item-descript{color: #888888;font-size: 17px; line-height: 30px;}
#NewsBox{padding: 100px 0 80px;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;overflow: hidden;position: relative;}
#NewsBox:before{content:'';position:absolute;width: 560px;height: 560px;background: #f26b83;border-radius: 50%;top: -12%;left: -5%;}
#NewsBox .webframe{
    width: 93%;
}
#NewsBox .speBox{display:inline-block;width: auto;vertical-align:top;position: relative;margin-right: 200px;margin-top: 50px;}

#NewsBox .speBox .cuteimg01{
	position: absolute;
	right: 0;

	top: -82px;
	animation-name:fish;
	animation-direction:alternate;
	animation-iteration-count:infinite;
	animation-timing-function:ease-in-out;
	animation-duration:2s;
}
@keyframes fish{
	0%{
		transform-origin:top bottom;
		transform:rotate(-100deg);
	}
	100%{
		transform-origin:right bottom;
		transform:rotate(3deg);
	}
}
#NewsBox .speBox .titleSet .speBoxTitle{font-size: 25px;line-height:120%;font-weight: bold;font-family: 'Noto Serif TC',serif;color: #fff;}
#NewsBox .speBox .titleSet .subBoxTitle{color: #fff;font-size: 45px;font-weight: bold;margin: 0 0 50px;line-height:160%;font-family: 'Noto Serif TC',serif;}
#NewsBox .speBox .titleSet .submore a,#product .subBoxTitle a{display:inline-block;border:1px solid #d0d0d0;font-size: 16px;padding: 15px 50px;color: #fff;position:relative;transition:all linear .2s;font-family: 'Noto Serif TC',serif;border-radius: 50px;}
#NewsBox .speBox .titleSet .submore a img{margin-left: 35px;transition: all linear 0.3s;vertical-align: baseline;display: inline-block;-webkit-filter: contrast(0) brightness(150%);filter: contrast(0) brightness(200%);}
#NewsBox .speBox .titleSet .submore a:hover img{margin-left: 50px;}
#news{display:inline-block;width: calc(100% - 475px);margin-right:-4px;}
#news .newsList >div{margin-bottom:35px}
#news .newsList .border{position:relative;overflow:hidden;margin: 0 20px;}
#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;}
#news .newsList .photo img,#product #prolay .photo img{width:100%}
#news .newsList .news-info{
}
#news .newsList .news-info h4{
    font-size: 16px;
    color: #a56f73;
    overflow: hidden;
    height: 75px;
    text-align: justify;
    font-weight: 400;
    margin-top: 20px;
}
#news .newsList .news-info p{font-size: 16px;color: #919191;}
#news .newsList .news-info h3{font-size: 25px;line-height: 150%;font-weight: bold;margin:7px 0 20px;color:#3c3838;font-family:'Noto Serif TC',serif;transition:all linear .2s;letter-spacing: 2px;overflow: hidden;height: 37px;}
#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 .youtubebox{width:50%}
#aboutFunc #about-slide{width:50%;background:#333;color:#fff}
#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/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 .speBoxTitle,#about-slide .free h3{font-size:38px;line-height:120%;width:70%;font-family:'Noto Serif TC',serif}
#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:18px;line-height:180%;margin:40px 0;width:70%;color:#e2e2e2}
#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,#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{padding: 100px 0;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;}
#bookBox #NewsTitle{}
#NewsTitle .index-title{position:relative;z-index:2;}
#NewsTitle .index-title h2{text-align: center;margin-bottom: 60px;}
#NewsTitle .index-title p a{color:#fff;font-size:18px;line-height:110%}
#bookBox #book{z-index:3;position:relative;}
#book .blabla{width:760px;margin:0 auto;background:#fff;padding:50px 100px}
#book .blabla h2{text-align:center;font-size:40px;line-height:100%;font-weight:400;color:#383434}
#book .blabla h3{margin:20px 0;color:#ada6d3;text-align:center;font-size:18px}
#book .blabla p{color:#7a7a7a;text-align:center;font-size:14px;line-height:150%;overflow:hidden;height:23px}
#book .webframe{width:1522px;margin:0 auto}
#book .webframe ul li{width: calc(100% / 3);margin-right:-4px;vertical-align:top;display:none;transition: all linear 0.3s;}
#book .webframe ul li:nth-child(1),#book .webframe ul li:nth-child(2),#book .webframe ul li:nth-child(3),#book .webframe ul li:nth-child(4){display:inline-block}
#book .webframe ul li .mofd{margin:0 10px 20px;position:relative}
#book .webframe ul li .photo{background-size:auto 100%}
#book .webframe ul li .photo:after{content:'';position:absolute;width: 100%;height: 100%;background: linear-gradient(to bottom, rgb(0 0 0 / 0%) 80%, rgb(0 0 0 / 55%) 100%);bottom: 0;left: 0;}
#book .webframe ul li .photo a{display:block;position: relative;z-index: 2;}
#book .webframe ul li h3{position:absolute;bottom:0;left:0;width:calc(100% - 20px);padding:10px}
#book .webframe ul li h3 a{color:#fff;font-weight: bold;font-size: 20px;}
#book .webframe ul li h3 a img{margin-right:5px}
@media (min-width: 1025px) {
#NewsBox .speBox .titleSet .submore a:hover,#product .subBoxTitle a:hover{}
#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 .photo:hover{}
#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: #f26b83;}
#bookBox .speBox p a:hover{color:#ad925f}
#book .webframe ul.sOver li{width: calc(100% / 4);}
#book .webframe ul.sOver li.divOver{width:calc((100% / 4) * 2)}
#book .webframe ul li .photo a img{height:293px}
}
@media screen and (min-width: 1281px) {
#book .webframe ul li .photo a img{height:373px}
#aboutFunc .speBox{overflow:hidden;display:flex}
#youtube{display:table;width:100%}
#youtube .useU2{display:table-cell;vertical-align:middle}
}
@media screen and (min-width: 1681px) {
#book .webframe ul li .photo a img{height:480px}
}
@media screen and (max-width: 1680px) {
#book .webframe{width:1200px}
#freeboxlist >div{
    margin: 0 55px;
}
}
@media screen and (max-width: 1440px) {
    #news{width: calc(100% - 510px);}
    #Extra-setting .item .item-info:after{height: 240px;top: calc(50% - 120px);}
    #Extra-setting .item .item-info .item-title{
    	
font-size: 20px;
    	
font-weight: 400;
    	
padding: 0 10px;
    }
}
@media screen and (max-width: 1366px) {
#book .blabla h2{font-size:32px}
#book .blabla{padding:40px 100px}
}
@media screen and (max-width: 1280px) {
	#freeboxlist >div{
    width: calc((100%/3) - 35px);
    margin: 0 15px;
}
    #freebox .free h3{
        font-size: 20px;
    }
    #freebox .free p{
    margin-top: 15px;
}
	#freebox .animation-box .freeicon02{top: 1%;left: 6%;}
    #freebox .animation-box .freeicon03{top: 5%;right: 18%;animation-duration:1.5s;}
    #freebox .animation-box .freeicon01{bottom: -6%;right: 3%;width: 100px;}
    #book .webframe{width:960px}
    #news .newsList .news-info h3{margin:4px 0 15px;font-size:20px}
    #NewsBox .speBox .cuteimg01{
        right: 0px;
        top: -50px;
    }
    #NewsBox .speBox .titleSet .submore a, #product .subBoxTitle a{font-size:14px;padding: 12px 50px;}
    #aboutFunc .youtubebox{width:100%}
    #aboutFunc #about-slide{width:100%}
}
@media screen and (max-width: 1024px) {
	#book .webframe ul li h3 a{
    font-size: 16px;
}
#NewsBox .speBox .titleSet .subBoxTitle{
    font-size: 35px;
    margin: 0 0 30px;
}
	#NewsBox{
    padding: 60px 0;
}
#NewsBox .speBox .cuteimg01{
    width: 15%;
    right: 90px;
    top: -20px;
}
#Extra-setting .item{width: calc(50% - 25px);margin: 10px;}
#freebox h2{font-size: 35px;}
#freebox .free h3{font-size: 18px;}
#freebox .free p{font-size:14px;}
#book .webframe{width:90%}
#book .blabla{width:calc(90% - 200px)}
#NewsBox .speBox{
    margin: 0 auto;
    width: 250px;
    display: block;
}
#NewsBox:before{
    top: -35%;
    left: calc(50% - 285px);
}
#news{width:calc(100% - 140px);margin:70px 70px 0}
#news .newsList .news-info{}
#bookBox #book{}
}
@media screen and (max-width: 980px) {
#Extra-setting .item .item-info{
    display: block;
    position: relative;
}
#Extra-setting .item .item-info .item-title{
    writing-mode: unset;
    display: block;
    text-align: center;
    padding: 10px 0 0;
    font-size: 16px;
}
#Extra-setting .item:hover .item-info .item-title{color:#313131;}
#Extra-setting .item .item-info:after{display:none;}
#freebox .animation-box .freeicon02{top: 16%;right: 14%;width: 7%;}
#freebox .animation-box .freeicon03{top: 11%;right: 10%;animation-duration:1.5s;width: 6%;}
#freebox .animation-box .freeicon01{bottom: -3%;right: 5%;width: 10%;}
}
@media screen and (max-width: 768px) {
	.title .littlen{
        font-size: 21px;
    }
	#freeboxlist{
		display:flex;
		flex-direction: column;
		margin-top: 0;
	}
	#freeboxlist >div{
        width: 100%;
        margin-bottom: 35px;
    }
    #freebox{
    padding: 50px 0 100px;
}
    #book .webframe ul li{width: 100%;}
    #bookBox{
        padding: 20px 0;
    }
    #NewsBox:before{
        top: -40%;
    }
    #news{
        margin: 70px 0 0;
        width: 100%;
    }
}
@media screen and (max-width: 640px) {
#news{width:calc(100% - 60px);margin:70px 30px 0}
#NewsBox:before{
    top: -39%;
}
#NewsBox .speBox .cuteimg01{
    right: 50px;
    top: -10px;
}
#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 #NewsTitle{}
#freeboxlist >div{
    margin: 18px auto;
    width: 90%;
    display: block;
}
#freebox .animation-box .freeicon02{top: 7%;right: 11%;width: 7%;}
#freebox .animation-box .freeicon03{top: 5%;right: 4%;animation-duration:1.5s;width: 6%;}
#freebox .animation-box .freeicon01{top: 100%;left: 83%;width: 10%;}
#Extra-setting h2{
    margin-bottom: 40px;
}
#NewsTitle .index-title h2{
	margin-bottom: 20px;
}
}

@media screen and (max-width: 480px) {
#Extra-setting h2 img, #NewsTitle .index-title h2 img{
    width: 65%;
}
#Extra-setting .item{
    width: calc(50% - 15px);
    margin: 10px 5px;
}
#Extra-setting .item .item-info .item-title{
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.05em;
}
#freebox h2{font-size: 30px;letter-spacing: 2px;}
#NewsBox{padding: 60px 0 20px;}
#NewsBox .speBox{
    margin: -20px auto 45px;
}
#news{width:100%;margin: 80px 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{}
#NewsBox .speBox .titleSet .speBoxTitle{font-size: 30px;}
#NewsBox .speBox .titleSet .subBoxTitle{margin: 10px 0 22px;}
#about-slide .slick-next{right:15px}
#about-slide .about .speBoxTitle,#about-slide .free h3{font-size:30px}
#about-slide .about,#about-slide .free{padding:70px 50px 30px 40px}
#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}

#freebox{
    background-position: 1% 50%;
    padding: 60px 0 50px;
}
.title .littlen{
    font-size: 20px;
}
#freebox .free .photo img{
    width: 110px;
}
#product #prolay .p-info .price span.now b{font-size:16px}
#Extra-setting .workframe{
    width: 100%;
}
#news .newsList .news-info h4{
    font-size: 16px;
    height: auto;
}
#bookBox #NewsTitle{
    width: 100%;
}
#book .blabla{width: calc(90% - 60px);padding: 30px 30px;}
#book .blabla h2{font-size:24px}
#book .blabla h3{margin:15px 0}
#bookBox #book{}
#book .webframe{width:100%}
}