.wrap { position: relative; padding-top: 0; z-index: 998; background-image: url(/images/46/web_bg.jpg); background-position: 50% 0%; }
.wrap #wrapBox { position: relative; }
.wrap #wrapBox>div { position: relative; }
.wrap #wrapBox .bg { position: relative; width: 100%; height: 100%; top: 0; left: 0; opacity: 1 }
.seebox {position: relative;margin: 0 auto;width: min(90%,1460px);}
.titlrJ { position: relative; margin-bottom: 40px; display: flex; flex-direction: column }
.titlrJ h2 { font-size: max(2.4 * (1vw + 1vh)/2,31px); font-weight: 600; color: white; }
.titlrJ h2::first-letter { color: #ebb612; }
.titlrJ p { font-size: max(2.4 * (1vw + 1vh)/2,25px); font-weight: 600; color: #ffffff; letter-spacing: 2px }
#NewsBox .titlrJ p { margin-left: 15px; margin-top: 9px; letter-spacing: 0.15em }
.JJlink { display: flex; align-items: center }
.JJlink a { display: flex; align-items: center; background: #ebb612; padding: 10px 40px; border-radius: 60px; }
.JJlink a:hover { background: #dc732c; }
.JJlink a:hover svg { margin-left: 30px; }
.JJlink a span { color: white; font-size: max(1 * (1vw + 1vh)/2,15px); padding: 0 10px; font-weight: 400 }
.JJlink a span.smallJ { font-size: 17px }
.JJlink a svg { fill: white; width: 14px; aspect-ratio: 1/1; margin-left: 15px; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; }
/*section-header*/
.section-header { text-align: center; margin-bottom: 40px; color: #fff; display: flex; flex-direction: column; align-items: center; }
.section-header .section-title { font-family: 'Black Ops One',cursive; font-size: 60px; margin: 0; letter-spacing: 2px; color: #e0e0e0; text-shadow: 2px 2px 4px rgba(0,0,0,0.8); text-transform: uppercase; background: -webkit-linear-gradient(#fff,#999); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.section-header .subtitle {font-size: 16px;color: #1f1f1f;letter-spacing: 1px;margin-top: 10px;display: block;font-weight: 500;}
.section-header .section-title img { height: 65px; }
/*view-more-btn*/
.view-more-btn { display: inline-block; background: #e65c00; color: #fff; padding: 12px 40px; font-size: 16px; font-weight: bold; text-decoration: none; transform: skewX(-20deg); transition: background 0.3s; }
.view-more-btn span { display: block; transform: skewX(20deg); color: white; }
.view-more-btn:hover { background: #ff7b1a; }
.btn-wrapper { text-align: center; margin-top: 50px; }
/*productBox*/
.product-section { position: relative; padding: 60px 0 80px 0; overflow: hidden; }
.product-section .section-header .subtitle { color: white; }
.product-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at center,rgba(255,255,255,0.03) 0%,transparent 60%); z-index: 1; pointer-events: none; }
#productBox .container { width: 98%; margin: 0 auto; position: relative; z-index: 2; padding: 0; max-width: 100%; }
#productBox .slick-slide { padding: 10px; }
#productBox .product-card { background: #fff; border-radius: 12px; overflow: hidden; transition: transform 0.3s ease; display: block; text-decoration: none; color: #333; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
#productBox .product-card:hover { transform: translateY(-5px); }
#productBox .img-box { background: #f0f0f0; padding: 20px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; 35/FONT-VARIANT: JIS83; }
#productBox .img-box::after { content: ''; position: absolute; width: 140px; height: 140px; background: rgba(0,0,0,0.05); border-radius: 50%; z-index: 0; transition: all .4s ease-out; }
#productBox .product-card:hover .img-box::after { -moz-transform: scale(4); -webkit-transform: scale(4); -o-transform: scale(4); -ms-transform: scale(4); transform: scale(4); }
#productBox .img-box::before { content: ''; background: url(/images/46/coo_po_bg.png); width: 100%; aspect-ratio: 1/1; position: absolute; background-size: cover; }
#productBox .img-box img { max-width: 100%; max-height: 100%; object-fit: contain; position: relative; z-index: 1; filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.2)); }
#productBox .txt-box { padding: 15px 20px; background: #f9f9f9; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #eee; }
#productBox .product-name { font-size: 16px; font-weight: 700; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
#productBox .arrow-btn { width: 32px; height: 32px; background: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; transition: all 0.3s ease; }
#productBox .product-card:hover .arrow-btn,.arrow-btn.active { background: #e65c00; transform: rotate(45deg); }
#productBox .arrow-btn i { transform: rotate(-45deg); }
#productBox .product-card:hover .arrow-btn i { transform: rotate(-45deg); }
#productBox .slick-prev,.slick-next { z-index: 10; width: 40px; height: 40px; }
#productBox .slick-prev:before,.slick-next:before { font-size: 30px; opacity: 0.5; }
#productBox .slick-prev { left: -30px; }
#productBox .slick-next { right: -30px; }
/*shotJ_about*/
.shotJ_about { padding: 30px 0 17vw; z-index: 2; position: relative; }
.shotJ_about:before {content: "";position: absolute;bottom: 0;width: 2px;height: 50%;background: rgb(255 255 255/40%);left: 12vw;}
.shotJ_about .seebox {padding: 60px 40px 80px;background: #ffffff;border-radius: 50px;box-shadow: rgb(0 0 0/41%) 2px 0px 15px;background-image: url(/images/46/seebox_bg.jpg);width: min(90%, 1520px);}
/*sunnew_box*/
.sunnew_box { position: relative; padding: 300px 0 200px; z-index: 2; }
.sunnew_box:after {content: "";position: absolute;width: 2px;height: 315px;aspect-ratio: 1/327;background: rgb(255 255 255/24%);left: 12vw;top: -51px;z-index: 0;animation: float 3s ease-in-out infinite;}
.sunnew_box .nwflybox {position: absolute;overflow: hidden;display: flex;flex-direction: column;width: min(79%,675px);top: -50px;padding: 20px;aspect-ratio: 4.7/1.8;justify-content: center;animation: float 3s ease-in-out infinite;background: #2e89af;border-bottom: #e1621a 15px solid;}
@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}
.sunnew_box .nwflybox:before { content: ""; position: absolute; font-size: max(35 * (1vw + 1vh)/2,16px); font-weight: 900; color: rgb(185 140 0/20%); left: 0%; animation: float 3s ease-in-out infinite; width: 48%; background: url(/images/46/nw_ngtext.png); aspect-ratio: 1/1; background-size: cover; }
.sunnew_box .nwflybox:after { content: ""; position: absolute; width: 100%; height: 1px; top: 50px; left: 0; background: rgb(255 255 255/38%); }
.sunnew_box .nwflybox .motext { width: 45%; position: absolute; right: 0; margin-top: 40px; }
.sunnew_box .nwflybox .motext h3 { color: white; font-weight: 600; text-transform: uppercase; margin-bottom: 22px; }
.sunnew_box .nwflybox .motext p {color: white;margin-top: 9px;width: 86%;font-size: 1.2rem;}
.sunnew_box #nwJ_box { display: flex; }
.sunnew_box .section-header { display: flex; flex-direction: column; align-items: flex-start; }
.sunnew_box .section-header .subtitle { color: white; }
.sunnew_box #nwJ_box .nwleft_box { display: flex; width: 40%; margin-top: 14px; }
.sunnew_box #nwJ_box .nwright_box {position: absolute;display: flex;right: -50%;width: 110%;flex-direction: column;bottom: 0;gap: 25px;}
.sunnew_box #nwJ_box .nwitem { background: white; margin: 0 9px; padding: 40px 30px; }
.sunnew_box #nwJ_box .nwitem:hover:before,.sunnew_box #nwJ_box .nwitem:hover:after { opacity: 1; }
.sunnew_box #nwJ_box .nwitem:before { z-index: 9; content: ""; position: absolute; top: 0; left: 9px; width: 0; height: 0; border-style: solid; border-width: 0px 58px 58px 0px; border-color: transparent transparent #ebb612 transparent; -moz-transform: rotate(3deg); -webkit-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(90deg); }
.sunnew_box #nwJ_box .nwitem:before { z-index: 9; content: ""; position: absolute; top: 0; left: 9px; width: 0; height: 0; border-style: solid; border-width: 0px 36px 36px 0px; border-color: transparent transparent #2f96bf transparent; -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; }
.sunnew_box #nwJ_box .nwitem:after { z-index: 9; content: ""; position: absolute; bottom: 0; right: 9px; width: 0; height: 0; border-style: solid; border-width: 0px 36px 36px 0px; border-color: transparent transparent #2f96bf transparent; -moz-transform: rotate(270deg); -webkit-transform: rotate(270deg); -o-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); opacity: 0; }
.sunnew_box #nwJ_box .nwitem a { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.sunnew_box #nwJ_box .nwitem .nwtopbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 36px; }
.sunnew_box #nwJ_box .nwitem .nwtopbar .CategoryName p { background: #e1621a; padding: 4px 8px; color: white; }
.sunnew_box #nwJ_box .nwitem .nwtopbar .datatime { display: flex; flex-direction: column; align-items: center; }
.sunnew_box #nwJ_box .nwitem .nwtopbar .datatime .daay { font-size: max(2 * (1vw + 1vh)/2,16px); font-weight: 600; line-height: 96%; }
.sunnew_box #nwJ_box .nwitem .nwtopbar .datatime .saye { font-size: max(0.8 * (1vw + 1vh)/2,12px); font-weight: 500; }
.sunnew_box #nwJ_box .nwitem .nwtexbox h3 { overflow: hidden; margin: 10px 0; text-align: left; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; color: #161616; font-size: max(1.5 * (1vw + 1vh)/2,16px); font-weight: 500; }
.sunnew_box #nwJ_box .nwitem .nwtexbox p {overflow: hidden;margin: 10px 0;height: 78px;text-align: left;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;color: #161616;font-size: 15px;}
.sunnew_box .coicon_box { display: flex; align-items: center; width: 53%; justify-content: flex-end; gap: 20px; }
.sunnew_box .coicon_box a { display: flex; padding: 10px; border-radius: 666px; background: #e7e7e7; }
.sunnew_box .coicon_box a.nwright,.sunnew_box .coicon_box a.nwrleft { background: unset; }
.sunnew_box .coicon_box a img { width: 20px; display: flex; flex-direction: column; align-items: center; }
.sunnew_box .coicon_box svg { width: 36px; height: auto; aspect-ratio: 1/1; }
.wrap #wrapBox .Jabottom_video { position: absolute; bottom: 0; z-index: 0; display: flex; }
.titlrJ.centerJm { margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.titlrJ.centerJm * { color: #161616; }
.titlrJ.centerJm p,.titlrJ.centerJm h2::first-letter { color: #161616; }
.titlrJ.centerJm:before { content: ""; position: absolute; width: 50px; height: 2px; background: #ebb612; bottom: 0; }
.about-block { background-repeat: no-repeat; background-size: contain; background-attachment: fixed; background-position-y: bottom }
.about-block .editor { display: flex; flex-direction: row; align-items: flex-start; justify-content: center; gap: 10rem; padding: 4rem 0 }
.about-block .editor::before,.about-block .editor::after { display: none }
.about-block .editor .part-01,.about-block .editor .part-02 { width: 600px }
.about-block .slogan-01 { font-size: 26px; color: #bdad84; font-weight: 400; letter-spacing: 2px; padding: 0 0 20px; margin: 0; font-family: 'Noto Serif TC',serif }
.about-block .slogan-02 { color: #bdad84; font-size: 20px; font-weight: 500; letter-spacing: 5px; padding: 0; margin: 0; font-family: 'Noto Serif TC',serif }
.about-block .description { color: #8a877f; font-size: 17px; font-weight: 300; letter-spacing: 4px; line-height: 2 }
.about-block .description p { font-family: 'Noto Serif TC',serif }
.about-block .description span { font-size: 30px; letter-spacing: 15px; font-weight: 400; color: #bdad84 }
.about-block .vertical-line { content: ''; height: 150px; width: 1px; background: #dcdcdc }
.wrap #wrapBox .haha_bg { background-image: url(/images/46/aka_JJ_bg.webp); width: 93%; height: 69%; position: absolute; bottom: 0; left: 0; z-index: -1 }
.flyitem img { position: absolute; top: -226px; right: 9%; width: 28%; z-index: 4; animation: tada2 11s linear infinite alternate forwards }
@keyframes tada2 {
  from { transform: scale3d(1,1,1); }
  10%,20% { transform: scale3d(1,1,1) rotate3d(0,0,1,-3deg); }
  30%,50%,70%,90% { transform: scale3d(1,1,1) rotate3d(0,0,1,3deg); }
  40%,60%,80% { transform: scale3d(1,1,1) rotate3d(0,0,1,-3deg); }
  to { transform: scale3d(1,1,1); }
}
.contoebox { padding-bottom: 30px }
@-webkit-keyframes ani-arrow-x {
  0%,100% { -webkit-transform: translateX(0) }
  50% { -webkit-transform: translateX(5px) }
}
@keyframes ani-arrow-x {
  0%,100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}
/* bookBox bookList*/
#bookBox { font-size: 0; padding-top: 160px; background-image: url(/images/46/ininbox.jpg); }
#bookBox:before { z-index: 9; content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0px 70px 70px 0px; border-color: transparent transparent #434344 transparent; -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); opacity: 1; }
#bookBox:after { z-index: 9; content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 0; border-style: solid; border-width: 0px 70px 70px 0px; border-color: transparent transparent #434344 transparent; -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); opacity: 1; }
#bookBox .JJlink { display: flex; justify-content: center; }
#bookBox .titlrJ.centerJm *,#bookBox .titlrJ h2::first-letter { color: white; }
#bookBox .deck01 { top: 30px; left: 50%; transform: translateX(-50%); position: absolute }
#bookBox .row { position: relative; width: 100% }
#bookBox #BookList { padding-bottom: 200px; margin-top: 30px; }
#bookBox #BookList ul { padding-bottom: 0; margin-bottom: 0; }
#bookBox #BookList ul li { position: relative; width: 100%; max-width: 1180px; margin: 20px }
#bookBox #BookList ul li.slick-slide { position: relative; -moz-transform: scale(0.98); -webkit-transform: scale(0.98); -o-transform: scale(0.98); -ms-transform: scale(0.98); transform: scale(0.98); z-index: 0; margin: 0 0px; }
#bookBox #BookList ul li.slick-slide a { background-size: 100%; }
#bookBox #BookList ul li.slick-slide a:hover { background-size: 115%; }
#bookBox #BookList ul li.slick-slide:after { position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ""; display: none; }
#bookBox #BookList ul li.slick-center { z-index: 1; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); filter: none }
#bookBox #BookList ul li.slick-center:after { display: none }
#bookBox #BookList ul li h3 { position: relative; width: 100%; left: 0; bottom: 0; }
#bookBox #BookList ul li h3 a { height: 45px; color: #fff; font-size: max(1.4 * (1vw + 1vh)/2,16px); font-weight: 400; text-align: center; -webkit-line-clamp: 1; opacity: 1; padding: 10px 0; }
/* bookBox */
#bookBox .nowrap_box.arrow_box { width: 110%; display: flex; flex-direction: row; justify-content: space-around; position: absolute; z-index: 20; left: 50%; top: 40%; transform: translate(-50%,-70%) }
#bookBox .arrow_box a { position: relative; background-color: #ffffff; -webkit-box-shadow: 0 8px 30px rgb(0 0 0/16%); box-shadow: 0 8px 30px rgb(0 0 0/16%); box-sizing: border-box; width: 90px; height: 60px; display: flex }
#bookBox .arrow_box a.next { -webkit-transform: scaleX(-1); transform: scaleX(-1); margin-left: 20px }
#bookBox .arrow_box a:before,#bookBox .arrow_box a:after { position: absolute; width: 15px; height: 1px; background: #808080; display: block; top: 50%; left: calc((100% - 13px)/2); -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: left; transform-origin: left; content: "" }

#bookBox .arrow_box a:after { content: ""; -webkit-transform: rotate(-45deg); transform: rotate(-45deg) }
/* serviceArea*/
.serviceArea { padding: 40px 0 110px }
.serviceArea .titleBox { display: flex; flex-direction: column; align-items: center; padding: 2vw 0 5vw }
.serviceArea .titleBox .titleTw { font-size: 36px; letter-spacing: 9.5px; font-family: 'Noto Serif TC',serif; color: #bdad84; text-align: center }
.serviceArea .titleBox .exp { padding-top: 20px; padding-bottom: 40px; display: inline-block; font-size: 17px; line-height: 180%; font-weight: 400; color: #474747; font-family: 'Noto Serif TC',serif; text-align: center; width: 100% }
.serviceList { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; width: -webkit-calc(100% + 138px); width: -moz-calc(100% + 138px); width: calc(100% + 138px); position: relative; left: -68px }
#pagination { display: flex; align-items: center; justify-content: center; margin: 20px 0 15px }
#pagination li { font-size: 23px; border: #bdad8487 1px solid; width: 20px; height: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 10px 2px; color: #bdad84; border-radius: 25px; padding: 4px 3px 4px 5px; cursor: pointer }
#pagination li.active { background: #bdad84; color: white }
.serviceList .serviceItem { width: 25%; position: relative }
.serviceList .serviceItem:before { content: ""; display: block; width: 1px; height: 100%; background-color: rgb(0 0 0/7%); position: absolute; top: 0; left: 0; bottom: auto; right: auto }
.serviceList .item { display: flex; -webkit-box-align: center; align-items: center; flex-wrap: wrap; padding: 0 48px }
.serviceList .Img { width: 100px }
.serviceList .Img img { display: block; width: 100% }
.serviceList .title { color: #bdad84; font-size: 13px; font-weight: 500; letter-spacing: 3.5px; line-height: 2.25; width: calc(100% - 120px); padding-left: 20px; display: flex; align-items: baseline }
.serviceList .title span { font-family: 'Cormorant',serif }
.serviceList .exp { color: #8a877f; font-weight: 400; padding-top: 10px; width: 100% }
.webBox .motext2 {display:flex;justify-content: center;background: #f2f2f1;padding: 20px 0;}
.webBox .motext2 .pageh1 { display: flex; position: relative; padding: 0; margin: 0; width: min(1280px,90%); text-align: center; justify-content: center; font-size: 1.5rem; letter-spacing: 0.05em; line-height: 1.5; color: #4b9aba; }

@media (max-width:1470px) {
  .seebox {width: min(1160px,87%);}
  .shotJ_about .seebox{width: min(1200px,87%);}
  .sunnew_box:after { height: 243px; }
  .sunnew_box .nwflybox .motext { width: 54%; }
  .sunnew_box #nwJ_box .nwright_box {right: -43%;width: 100%;}
  .sunnew_box #nwJ_box .nwitem { padding: 29px 17px; }
  .sunnew_box { padding: 231px 0 160px; }
  .sunnew_box .nwflybox { width: min(79%,530px); }
  .serviceList { width: 100%; left: 0; margin: 25px auto 0 }
  .serviceList .item { padding: 0 20px }
  .serviceList .title { font-size: 30px }
  #NewsBox:after { width: 250px; height: 300px; top: -132px }
  .section-header .section-title img { height: 55px; }
}
@media screen and (max-width:1280px) {
  #aboutBox .deck01,#bookBox .deck01 { display: none }
  .sunnew_box .nwflybox,.sunnew_box:after { display: none; }
  .sunnew_box #nwJ_box { flex-direction: column; }
  .sunnew_box #nwJ_box .nwright_box { position: relative; right: 0; }
  .sunnew_box { padding: 60px 0; }
  .sunnew_box #nwJ_box .nwleft_box:before { bottom: auto; top: 109px; }
  .sunnew_box #nwJ_box .nwleft_box { width: 100%; }
  .about-block .editor .part-01,.about-block .editor .part-02 { width: 390px }
  .about-block .editor { gap: 3rem }
  .flyitem img { top: -75px }
}
@media (min-width:1181px) {
  .serviceList .serviceItem:nth-child(4n+1):before { opacity: 0 }
}
@media screen and (max-width:1180px) {
  .serviceArea .titleBox .exp { padding-top: 12px }
  .serviceList .serviceItem { width: 50%; margin: 20px 0 }
  .serviceList .title { font-size: 26px; font-weight: 500; letter-spacing: 2px }
  #bookBox .arrow_box a { width: 80px; height: 45px }
  .serviceArea .titleBox { display: flex; flex-direction: column; align-items: center }
  .serviceArea .titleBox .titleTw { margin-top: 0px; font-size: 27px; letter-spacing: 5.5px }
}
@media (max-width:1180px) and (min-width:769px) {
  .serviceList .serviceItem:nth-child(odd):before { opacity: 0 }
}
@media screen and (max-width:1024px) {
  .shotJ_about:before { display: none; }
  .shotJ_about { padding: 30px 0 7vw; }
  .sunnew_box #nwJ_box .nwright_box { display: flex; flex-direction: column; align-items: center; }
  .sunnew_box .coicon_box {order: 3;display: flex;justify-content: center;width: 100%;gap: 12px;}
  .sunnew_box .newsList { width: 100%; }
  .sunnew_box #nwJ_box .nwleft_box { display: flex; flex-direction: column; align-items: center; }
  .sunnew_box .section-header { display: flex; flex-direction: column; align-items: center; }
}
@media screen and (max-width:980px) {
  #bookBox #BookList ul li.slick-slide { margin: 0 }
  #bookBox .nowrap_box.arrow_box { transform: translate(-50%,-120%); width: 160% }
  #bookBox .arrow_box a { width: 45px }
  #bookBox #BookList ul { padding-bottom: 0vh }
  #NewsBox { padding: 20px 0px 10px 0px }
  #bookBox { padding-top: 20px }
  .about-block .editor { gap: 1rem; display: flex; flex-direction: column; align-items: flex-start; padding: 3rem 0; width: 90% }
  .about-block .slogan-01 { padding: 0 0 8px }
  .about-block .slogan-01,.about-block .description span { font-size: 24px }
  .about-block .slogan-02 { font-size: 18px }
  .about-block .description span { letter-spacing: 8px }
  .about-block .description p { font-size: 14px }
  .about-block .description { font-size: 16px }
  .about-block .vertical-line { height: 40px }
  .about-block .editor .part-01,.about-block .editor .part-02 { width: auto }
  #NewsBox:after { opacity: 0.4 }
  .abcallJtop { left: 0; bottom: 0; position: relative; display: flex; flex-direction: column; align-items: center }
  .sunnew_box .coicon_box a.nwright,.sunnew_box .coicon_box a.nwrleft { padding: 0; width: 30px; }
}
@media (max-width:768px) {
  .serviceArea .titleBox { padding-bottom: 0 }
  .serviceList .serviceItem { width: 100%; margin: 0; padding: 0 0 }
  .serviceList .serviceItem:before { width: 100%; height: 1px }
  .serviceList .serviceItem:first-child:before { opacity: 0 }
  .serviceList .item { padding: 13px 0 }
  #NewsBox ul.newsList li .info_box { flex-wrap: wrap; margin-bottom: 0 }
  #NewsBox ul.newsList li .info_box .lebox { flex-wrap: wrap }
  #NewsBox ul.newsList li p.txt { width: calc(100% - 10px); margin-top: 10px }
  #NewsBox ul.newsList li p.CategoryName { margin: 0 3px }
  #NewsBox ul.newsList li p.time { justify-content: flex-start; width: 60px }
  .JJlink { width: 100%; display: flex; flex-direction: column; align-items: center }
  .JJlink a { width: auto; justify-content: center; padding: 9px 48px; }
}
@media screen and (max-width:640px) {
  #NewsBox:before,#NewsBox:after,#NewsBox .bgTxt.title::before { display: none }
  #NewsBox .workframe { display: flex; margin-bottom: 30px; flex-direction: column; align-items: center }
  #NewsBox .workframe .row { width: calc(100% - 0px); margin-left: 0; margin-top: 30px }
  #NewsBox .NewsTxt { writing-mode: inherit }
  #NewsBox .bgTxt.title { padding: 20px 40px }
  .wrap {padding-top: 0;margin-top: -2px;}
  .serviceArea { padding: 40px 0 60px }
  .serviceList .title { font-size: 20px; font-weight: 400; letter-spacing: 1px }
  #bookBox #BookList { padding-bottom: 100px; }
  .sunnew_box {padding: 30px 0 50px;}
  .shotJ_about .seebox {border-radius: 0;padding: 60px 0;width: 100%;}
  .section-header .section-title img {height: 42px;}
  .section-header .section-title{font-size:20px;}
  .webBox .motext2 .pageh1{font-size:1rem;}
}
@media screen and (max-width:480px) {
  .serviceList .title { padding-left: 10px }
  .wrap #wrapBox .haha_bg { height: 56%; width: 100% }
  #NewsBox .workframe { display: flex; flex-direction: row; margin-bottom: 10px }
  .titlrJ { margin: 0 auto; margin-bottom: 30px; width: 100%; }
  .sunnew_box .coicon_box svg{width: 25px;}
  .sunnew_box .coicon_box a img{width: 15px;}
  .sunnew_box .coicon_box a.nwright, .sunnew_box .coicon_box a.nwrleft{width: 20px;}
  #productBox .txt-box{padding: 15px 34px;}
}