/*inaboutJabout*/
.inaboutJabout{position:relative;display:grid;grid-template-columns:40% 50%;padding:70px 0px;justify-content:space-between;align-items:center}
.about{position:relative}
.about .arts .maimfo h3{margin-bottom:10px}
.about .arts .maimfo ul{display:flex;flex-wrap:wrap;margin:40px 0 8px;flex-direction:column}
.about .arts .maimfo ul li{margin:0px 0px 10px 20px;list-style-type:circle;list-style-position:inherit}
.about .contentcall,b.close{cursor:pointer}
.showboxJ{position:fixed;width:100%;bottom:0;left:0;z-index:9999}
.inaboutJabout .index-aboutJbox{display:flex;padding:0px 20px}

.inaboutJabout .index-aboutJbox:before{position: absolute;content:"";background: url(/images/23/teath.png);width: 5vw;height: auto;aspect-ratio: 1/1;background-size: contain;background-repeat: no-repeat;left: 32vw;animation: sway2 5s 
linear infinite;}
@keyframes sway2 {
    0% {transform:translateY(0px) rotate(2deg);}
    50% {transform: translateY(35px) rotate(-2deg);}
    100% {transform:translateY(0px) rotate(2deg);}
}

.title-about{display:flex;margin-top:0px;flex-direction:column}
.inaboutJabout .arts{padding:5px 5px 5px}
.inaboutJabout .arts p{font-size:17px;line-height:200%}
.indJbox{display:flex;margin-top:10px}
.title-about .speBoxTitle{font-size:32px;font-weight:400;margin-right:10px;margin-bottom:12px;display:flex;align-items:center;color:#434f68;line-height:85%}
.title-about h3.speBoxTitle{text-transform:uppercase;font-weight:500;font-size:53px;color:#7e8aa4}
.title-about .speBoxTitle span{position:relative;display:flex;width:214px;height:1px;margin-top:3px;margin-left:22px;background:#434f68}


/*contantusm*/
.contantusm{position:absolute;bottom:0}
.contantusm .canbar{position:relative;display:flex;box-shadow:2px 2px 8px 3px rgba(0,0,0,0.2);width:90%}
b.close{position:absolute;top:15px;left:15px;display:flex;padding:0;width:50px;height:50px;border-radius:500px;border:#999999 1px solid;flex-direction:column;align-items:center;justify-content:center}
.contantusm .calistbox{display:flex;width:100%;background:white;padding-left:100px}
.contantusm .calistbox .canlist{display:flex;flex-direction:column;padding:36px 18px 20px}
.contantusm .calistbox .canlist b{color:#2a1a5e;opacity:0.3;text-transform:uppercase;font-size:22px;font-family:'Merriweather',serif}
.contantusm .calistbox .Jpand{display:flex}
.contantusm .calistbox .canlist .Jpand p{margin-right:11px}
.contantusm .calistbox .canlist p{display:flex;border-bottom:#9d9d9d87 1px solid;width:fit-content;font-size:20px;align-items:center;padding:20px 0}
.contantusm .calistbox .canlist p img{width:33px;margin-right:13px;-webkit-animation-name:shake-slow;-ms-animation-name:shake-slow;animation-name:shake-slow;-webkit-animation-duration:5s;-ms-animation-duration:5s;animation-duration:1s;-webkit-animation-iteration-count:infinite;-ms-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:ease-in-out;-ms-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-delay:0s;-ms-animation-delay:0s;animation-delay:0s;-webkit-animation-play-state:running;-ms-animation-play-state:running;animation-play-state:running}
.contantusm .moregobox{display:flex;flex-direction:column;align-items:center;width:129px;padding:23px 34px;background:#1766b1}
.contantusm .moregobox a{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}

.contantusm .moregobox:hover{
  background: #2c3e50;
}
@keyframes shake-slow {
  0% {transform: translate(0px, 0px) rotate(0deg)}
  25% {transform: translate(0px, -6px) rotate(-20.5deg)}
  50% {transform: translate(0px, -4px) rotate(20.5deg)}
  75% {transform: translate(0px, -6px) rotate(0deg)}
  100% {transform: translate(0px, 0px) rotate(-0.5deg)}
}

#NewsBox{padding:100px 0;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;background: #efeae670;}
#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%}
@keyframes rotate2 {
0% {
  transform: rotate(0deg);
}
50% {
  transform: rotate(180deg);
}
100% {
  transform: rotate(360deg);
}
}
.submore a:hover:before{transform:rotate(180deg);top:12px}
.submore a{display:flex;border:1px solid #d0d0d0;font-size:13px;padding:11px 56px 11px 25px;color:#ffffff;position:relative;transition:all linear .2s;border-radius:5px;font-size: 16px;background:#7e8aa4;align-items:center}
.submore a:hover{background: #4cbcef;}
.seemore{margin-left:15px}
.seemore a:hover{padding:11px 85px 11px 25px}
.seemore a{display:inline-block;border:1px solid #8cb6d8;font-size:13px;padding:11px 56px 11px 25px;color:#ffffff;position:relative;transition:all linear .2s;border-radius:5px;font-size:18px;background:#8cb6d8}
.seemore span{margin-left:5px;color:#e89591}
.seemore a:before{content:'+';position:absolute;right:19px;top:9px;color:#f5f5f5;font-size:24px}
.submore a:before{content:'+';position:absolute;right: 19px;top: 9px;color: #f5f5f5;font-size:24px;transition: all linear 0.3s;}
#caenter{position:relative;padding: 40px 0 200px;background:linear-gradient(to top,white,#f0f2f8)}
#caenter .popotitle{display:flex;flex-direction:column;align-items:center;margin-bottom:40px}
#caenter .popotitle h2{font-size:70px;text-transform:uppercase;line-height:120%;color:#7e8aa4;letter-spacing:0.10em}
#caenter .popotitle h3{font-size:30px;line-height:100%;font-weight:400;color:#5b5854}
#caenter .popobox{position:relative;display:flex;justify-content:space-between}
#caenter .popobox .poosickJ{display:flex;flex-direction: column;width: 100%;}
#caenter .popobox .popolist{display: grid;grid-template-columns: 40% 60%;background:white;border-radius:20px;margin: 5px 15px;padding: 20px;box-shadow: #e8e8e8 1px 1px 5px 3px;align-items: center;}
#caenter .popobox .popolist img{border-radius:20px 0px 0px 20px}
#caenter .popobox .popolist .ittemJ{position:relative;display:flex;flex-direction:column}
#caenter .popobox .popolist .ittemJ img{height:100%;object-fit:cover;aspect-ratio: 1/1;}
#caenter .itttext{display:flex;flex-direction:column;padding:0 40px;}
#caenter .itttext .topem{margin-bottom:20px}
#caenter .itttext .imfo{overflow:hidden;margin:10px 0;height: 48px;text-align:center;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp: 2;-webkit-box-orient:vertical;font-size: 15px;}
#caenter .itttext .submore{display:flex;justify-content:flex-end;margin-top:45px;margin-bottom: 0;}
#caenter .itttext .topem h4{font-size: 30px;color:#7e8aa4;line-height:100%;overflow: hidden;margin: 10px 0;height: 32px;text-align: left;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
#caenter .itttext .topem p{font-size:16px;color: #ffffff;background: #8cb6d8;padding: 10px 18px;text-transform:uppercase;margin-left:5px;position: absolute;width: auto;right: 37px;top: 0;line-height: 1;border-radius: 0px 0px 12px 12px;}
#soogan{position:relative;display:flex;background-image:url(/images/23/JJSBack.webp);padding: 0px 0 180px;}
#soogan:before{content: "";background-image: url(/images/23/index_new_bg.png);position: absolute;width: 100%;aspect-ratio: 190 / 13;background-size: cover;background-repeat: no-repeat;top: 0;}
#soogan:after{content:"";background-image: url(/images/23/index_new_bg-2.png);position: absolute;width: 100%;aspect-ratio: 190/13;background-size: cover;background-repeat: no-repeat;bottom: 0;}

#soogan .tittle{position: relative;display:flex;flex-direction:column;align-items:center;background:#ffffff;width:600px;margin:0 auto 50px;padding: 20px 5px 30px;border-radius: 20px;margin-top:-54px;box-shadow: rgb(81 86 102 / 33%) 0px 11px 16px 3px;z-index: 2;}
#soogan .tittle img{width: 120px;}
#soogan .tittle h2{font-size: 33px;line-height:120%;color:#434f68;margin-bottom:10px}
#soogan .tittle p{color:#434f68;font-size: 16px;}
#soogan .soJbox{position:relative;display:flex}
#soogan .soJbox .itemsoJ{width:calc(100% - 120px);display:flex;justify-content:space-around;padding:70px 60px}
#soogan .soJbox .itemsoJ .boxJ{width:250px;margin:0 10px;display:flex;flex-direction:column;align-items:center;padding: 30px 10px 100px;border-radius:20px;background-image: url(/images/23/teath_bg.png);background-size: contain;background-position: 50%;background-repeat: no-repeat;}
#soogan .soJbox .itemsoJ .boxJ:hover img{display:inline-block;animation:rotate 1s ease-in-out infinite}
@keyframes rotate {
0% {
  transform: rotate(0deg);
}
33.3% {
  transform: rotate(10deg);
}
  66.7% {
  transform: rotate(-10deg);
}
100% {
  transform: rotate(0deg);
}
}
#soogan .soJbox .itemsoJ .boxJ p{font-size: 16px;color:#7987a1;line-height:120%;font-weight:400}
#soogan .soJbox .itemsoJ .boxJ img{width: 100px;margin-bottom: 5px;}
#soogan .soomorre{display:flex;justify-content:center;margin:25px 0 0}
#soogan .soomorre a{padding: 15px 30px;font-size: 16px;background:#ffffffe6;border-radius:8px;display:flex;align-items:center}
#soogan .soomorre a:hover{background-color:white}
#soogan .soomorre a:hover .coo02{border:#588fc5 2px solid;background:#588fc5}
#soogan .soomorre a:hover svg{fill:#f4f4f4}
#soogan .soomorre .coo01{color:#7987a1;font-weight:600;font-size: 18px;}
#soogan .soomorre .coo02{position:relative;display:flex;width:30px;height:30px;flex-direction:column;align-items:center;justify-content:center;border:#d7d7d7 2px solid;border-radius:100px;margin-left:20px;transition:all linear 0.3s}
#soogan .soomorre .coo02 svg{fill:#7987a1}

#news{display:inline-block;width:calc(100% - 615px);margin-right:-4px}
#news .newsList >div{margin-bottom:35px}
#news .newsList .border{position:relative;overflow:hidden;display: flex;flex-direction: column;width: 94%;margin: 0 auto;}
#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;border-radius: 10px;}
#news .newsList .photo img,#product #prolay .photo img{width:100%;}
#news .newsList .news-info{display: flex;margin-left: 0;width: calc(100% - 0px);flex-direction: column;}
#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;overflow: hidden;margin: 10px 0;height: 29px;text-align: left;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
#news .newsList .news-info .describe{color:#888;font-weight:400;font-size:16px;position:relative;display: flex;flex-direction: column;}
#news .newsList .news-info .describe h4{font-weight:400;width: calc(100% - 0px);overflow: hidden;margin: 10px 0;height: 22px;text-align: left;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
#news .newsList .more{position: relative;right:0;top:0;font-family:'Merriweather',serif;padding-bottom:15px;font-size:13px;display: flex;display: none;}
#news .newsList .more b{font-weight:400;color:#5f5f5f}
#news .newsList .more:after{content:'';display:block;position: absolute;right: 0;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;right: 0;bottom:0;width:30px;height:1px;background:#bd8655;transition:all linear .2s;transition-delay:.2s}
#aboutFunc .youtubebox{width: 100%;display: flex;}

#aboutFunc .youtubebox:before{position: absolute;content:"";background: url(/images/23/teath_bg-fly.png);width: 11vw;height: auto;aspect-ratio: 1/1;background-size: contain;background-repeat: no-repeat;left: -7vw;bottom: -3vw;animation: sway2 7s 
linear infinite;}
#aboutFunc #about-slide{width:50%;background:#333;color:#fff}
#youtube{width: 100%;display: flex;background-repeat:no-repeat;background-position:50% 50%;background-size: contain;border-radius: 20px;aspect-ratio: 1015/662;}
#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{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{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{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: 1470px) {
  .contantusm .calistbox{padding-left:102px}
  .contantusm .calistbox .canlist{padding:20px 70px 20px 20px}
  .contantusm .calistbox .canlist p{font-size:19px;padding:18px 0}
  .contantusm .calistbox .canlist p img{width:30px}
  #NewsBox .speBox{width:500px}
  #news{width:calc(100% - 510px)}
  .inaboutJabout{padding:50px 0;grid-template-columns: 48% 50%;}
  .inaboutJabout .contentcall img{width:520px}
  #caenter .popotitle h2{font-size: 54px;}
  #caenter .popotitle h3{font-size: 22px;}
  .title-about .speBoxTitle{font-size: 22px;}
  #caenter .itttext .topem h4{font-size: 22px;}
  #caenter .itttext .topem{margin-bottom: 0px;}
  #caenter .itttext .topem p{font-size:14px}
  #caenter .popobox .popolist{padding: 30px 20px 20px;}
  #caenter .itttext .submore{margin-top: 10px;}
  #caenter{padding: 40px 0 150px;}
  .submore a{font-size:16px}
  #soogan{padding: 60px 0 130px;}
  #soogan .tittle h2{font-size: 31px;}
  #soogan .tittle p{font-size: 15px;}
  #soogan .tittle{margin-bottom: 18px;margin-top: -115px;}
  #soogan .soJbox .itemsoJ .boxJ p{font-size:21px}
  #soogan .soomorre .coo01{font-size:21px}
}
@media screen and (min-width: 1281px) {
  #aboutFunc .speBox{overflow:hidden;display:flex;background-image: url(/images/23/about_bg.png);}
  #youtube{width:100%}
  #youtube .useU2{display:table-cell;vertical-align:middle}
}
@media screen and (max-width: 1280px) {
  .inaboutJabout .index-aboutJbox{width:50%}
  b.close{top:-44px;background:#fffffff0}
  .contantusm .calistbox{padding-left:0px;width:100%}
  .contantusm .calistbox .canlist{padding:20px 17px 20px 20px}
  .contantusm .webframe{width:1137px}
  .contantusm .moregobox{width:82px;display:flex;justify-content:center}
  .contantusm .calistbox .canlist b{font-size:19px}
  #NewsBox .speBox{width:400px}
  #news{width:calc(100% - 400px)}
  #news .newsList .photo{width: 100%;}
  #news .newsList .news-info{width:calc(100% - 190px)}
  #news .newsList .news-info h3{margin: 4px 0 6px;font-size: 18px;height: 20px;}
  #NewsBox .speBox .titleSet .speBoxTitle{font-size:42px}
  #NewsBox .speBox .titleSet{margin:0 70px}
  #aboutFunc .youtubebox{}
  #aboutFunc #about-slide{width:100%}
}
@media screen and (max-width: 1024px) {
  .contantusm .canbar{width:100%}
  .contantusm{width:100%}
  #soogan .soJbox .itemsoJ{display:flex;flex-wrap:wrap}
  #soogan .soJbox .itemsoJ .boxJ{margin:10px 0;width:calc(50% - 40px)}
  #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: 800px){
  #caenter .popobox .popolist{flex-direction:column;border-radius:10px;display: flex;}
  #caenter .popobox .popolist img{border-radius:10px 10px 0px 0px}
  #caenter .itttext{width:calc(100% - 40px);padding:25px 20px}
  #caenter .itttext .submore{margin-top:0px;margin-bottom:0px}
  .inaboutJabout{display:flex;flex-direction:column}
  .inaboutJabout .arts{padding:20px 5px 30px}
  .title-about{margin-top:40px}
  .inaboutJabout .index-aboutJbox{width:100%;padding:0 0 30px}
  #aboutFunc .youtubebox{width:100%;height: 250px;}
  #youtube{background-position:50% 100%}

}
@media (max-width:768px) {
  .contantusm{bottom:0;position:relative}
  .contantusm .calistbox{display:flex;flex-direction:column}
}

@media screen and (max-width: 640px) {
  .inaboutJabout .index-aboutJbox:before{width: 20vw;left: auto;right: -7vw;top: 34vw;}
  b.close{left:auto;right:0px;top:-9px}
  .contantusm .moregobox{width:63px;padding:0 20px}
  #soogan .tittle{background:unset;margin-top:0;width:100%}
  #soogan .tittle img{display:none}
  #soogan .tittle h2{font-size: 28px;color:white}
  #soogan .soJbox .itemsoJ .boxJ p{font-size:18px}
  #soogan .tittle p{font-size:15px;color:white}
  #caenter .itttext .topem h4{font-size:33px}
  #caenter .itttext .topem p{font-size:13px}
  #caenter .itttext .topem{margin-bottom:5px}
  #caenter .itttext .imfo{height:73px;-webkit-line-clamp:3;font-size:14px;margin-bottom:24px}
  #soogan .soJbox .itemsoJ{padding:10px 6px;width:calc(100% - 12px)}
  #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 >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}
  #soogan .soJbox .itemsoJ .boxJ{width:calc(50% - 30px)}
  #aboutFunc .youtubebox:before{display:none;}
}
@media screen and (max-width:480px){
  .title-about h3.speBoxTitle{font-size: 39px;}
  .title-about .speBoxTitle{font-size: 24px;}
  .seemore{display:flex;flex-direction:column}
  .title-about .speBoxTitle span{width:184px}
  .inaboutJabout{padding:20px 0}
  #caenter .popotitle h2{font-size: 39px;}
  #caenter{padding:10px 0 80px}
  #caenter .popotitle h3{font-size:21px}
  #caenter .popobox{display:flex;flex-direction:column}
  #caenter .popobox .popolist{width:100%;display:flex;flex-direction: column;}
  #caenter .popobox .popolist .ittemJ{width: 100%;}
  .seemore a{padding:9px 56px 9px 25px}
  .seemore a:before{top:8px}
  .submore a{font-size:14px;padding:9px 56px 9px 25px}
  .submore a:before{top:11px;font-size:20px}
  #caenter .itttext{width: 100%;padding:12px 10px}
  #caenter .itttext .topem h4{font-size:30px}
  #caenter .itttext .topem p{font-size:12px}
  #soogan .soJbox .itemsoJ .boxJ img{width:94px}
  .contantusm .calistbox .canlist{padding:17px 10px}
  .contantusm .moregobox{width:73px;padding:10px;position:absolute;right:0;bottom:0}
  .contantusm .moregobox img{width:76%}
  .contantusm .calistbox .canlist b{font-size:16px}
  .contantusm .calistbox .canlist p{width:100%;font-size:17px;padding:10px 0}
  .contantusm{position:relative;bottom:0}
  #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 3px;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: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}
  #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;}
  #soogan{padding: 100px 0 130px;}
  #soogan:before{width: 170%;top: -2px;}
  #soogan:after{width: 161%;bottom: -1px;}
  #soogan .soJbox .itemsoJ .boxJ{width:100%;}
  #soogan .soomorre .coo01{font-size: 18px;}
}