@import url('/css/community.css');

/* #h1Box */
#h1Box {position:relative}
#h1Box #banner {position:absolute;width:100%;height:100%;top:0;left:0}
#h1Box #banner .sbanner {height:100%}
#h1Box .txt {position:relative;padding:160px calc((100% - 1500px)/2) 90px;margin:0 auto 0;width:1500px;background:rgba(255,255,255,.1);z-index:2;display:flex;flex-direction:column;align-items:center}
#h1Box .txt font {display:inline-block;line-height:100%;font-weight:600;font-size:15px;color:#6b6b6b;vertical-align:text-bottom;background:#c50e1c;padding:10px 20px;border-radius:30px;color:white;margin-bottom:5px}
#h1Box .txt h1 {margin-top:10px;line-height:100%;color:#312f30;vertical-align:text-bottom;text-align:center}
.wrap {position:relative;padding:0 0 1vw;background:url(/images/35/img-bodyBg.jpg);z-index:2}
.wrap:before {position:absolute;width:90vw;height:100%;background:linear-gradient(to left,rgba(241,241,241,1) 0%,rgba(255,255,255,1) 100%);box-shadow:-4px 4px 15px rgba(26,26,51,0.2);top:-45px;left:50%;transform:translateX(-50%);content:"";z-index:1}
.wrap .workframe {padding:1vw 0 5vw;z-index:2;width:min(90%,1460px)}

/* #bannernav */
#bannernav a {color:#1d1d1d}
.waylink ol {font-size:0}
.waylink ol li {display:inline-block;font-size:17px;font-weight:300;color:#151429}
.waylink ol li a {font-size:17px;font-weight:300;color:#676263}
.waylink ol li a:after {margin:0 15px;display:inline-block;color:#151429;content:">"}
.waylink ol li:last-child a {color:#222}
.waylink ol li:last-child a:after {content:""}

/* #sideNav */
#sideNav {position:relative;margin:20px 20px 30px;text-align:right;z-index:2}
#sideNav #sideBtn {position:relative;overflow:hidden;padding:10px 20px;width:240px;background:var(--inner-primary-dark);border:1px #af1c21 solid;display:inline-block;color:#fff;z-index:2}
#sideNav #sideBtn:before {position:absolute;width:0;height:100%;background:#312f30;top:0;left:0;content:""}
#sideNav #sideBtn font {position:relative;z-index:1}
#sideNav #sideBtn i {position:absolute;top:calc((100% - 8px)/2);right:20px;z-index:2;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;-webkit-transform:rotate(0);transform:rotate(0)}
#sideNav #sideBtn[data-type="2"]:before {width:100%}
#sideNav #sideBtn[data-type="2"] font {color:#fff}
#sideNav #sideBtn[data-type="2"] i {color:#fff;-webkit-transform:rotate(180deg);transform:rotate(180deg)}
#sideNav>ul {overflow:hidden;position:absolute;width:240px;height:0;background:url(/images/35/img-news1Bg.jpg);border:1px #393842 solid;top:0;right:0;z-index:1}
#sideNav>ul.open {padding:5px 0;height:auto;top:52px}
#sideNav>ul>li {position:relative;overflow:hidden}
#sideNav>ul>li .h3 {position:relative;background:url(/images/35/img-news1Bg.jpg);z-index:2}
#sideNav ul li b[data-action="sideOpen"] {position:absolute;padding:5px 20px;display:block;color:#828282;right:0;top:0;cursor:pointer}
#sideNav ul li b[data-action="sideOpen"] i:before {content:"\f067"}
#sideNav ul a {padding:7px 53px 7px 20px;display:block;font-weight:400;color:#afafaf}
#sideNav ul a:hover {color:white}
#sideNav>ul>li>ul.subUL {position:absolute;width:100%;background:url(/images/35/img-news2Bg.jpg);border:#242323 solid;border-width:1px 0;bottom:100%;-webkit-transition-duration:.3s;transition-duration:.3s;opacity:0;z-index:1}
#sideNav ul .subULHead b[data-action="sideOpen"] {display:none}
#sideNav ul .subULHead a {padding:2px 20px;color:#817db9}
#sideNav ul .sub2ULHead a {padding:2px 37px;color:#7184ac}
#sideNav>ul>li.action {opacity:1}
#sideNav>ul>li.openlist {border-bottom:1px #3b3b3b solid}
#sideNav>ul>li.openlist .h3 a {border-bottom:1px #251e1e solid;color:#fff}
#sideNav>ul>li.openlist .h3 b {color:#fff}
#sideNav>ul>li.openlist .h3 b i:before {content:"\f068"}
#sideNav>ul>li.openlist>ul.subUL {position:relative;padding:5px 0;bottom:0;opacity:1}
#sideNav>ul>li.action .h3 a,#sideNav>ul>li.action .h3 b {color:#fff}

/* #listPage */
#listPage,#listPage * {box-sizing:border-box}
#listPage {--project-primary:var(--inner-primary,#d71920);--project-primary-dark:var(--inner-primary-dark,#aa1117);--project-secondary:var(--inner-secondary,#202832);--project-dark:var(--inner-dark,#20252d);--project-text:var(--inner-text,#626b75);--project-paper:var(--inner-paper,#fff);--project-line:var(--inner-line,rgba(32,40,50,.1));position:relative;padding:clamp(40px,8vw,50px) clamp(10px,0vw,10px) clamp(40px,9vw,50px);isolation:isolate;max-width:100%}
#listPage::before {content:"PROJECTS";position:absolute;top:-80px;left:0;z-index:-1;color:rgba(32,40,50,.032);font-family:Arial,sans-serif;font-size:clamp(100px,14vw,160px);font-weight:900;line-height:.82;letter-spacing:-.07em;white-space:nowrap;pointer-events:none}
#listPage>ul {position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:30px 24px;width:min(100%,1480px);margin:0 auto;padding:0;list-style:none;counter-reset:project-item}
#listPage>ul::before {content:"ENGINEERING PROJECTS  ·  工程實績";position:absolute;top:-48px;left:0;color:#7e8792;font-family:Arial,"Noto Sans TC",sans-serif;font-size:11px;font-weight:700;line-height:1.4;letter-spacing:.21em}
#listPage>ul::after {content:"";position:absolute;top:-40px;right:0;width:min(350px,30%);height:1px;background:linear-gradient(90deg,transparent,rgba(32,40,50,.16),var(--project-primary))}
#listPage>ul>li {position:relative;counter-increment:project-item;min-width:0;background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(247,248,249,.97));border:1px solid rgba(32,40,50,.09);border-radius:18px;box-shadow:0 20px 48px rgba(25,32,40,.08);overflow:hidden;isolation:isolate;transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .4s ease,box-shadow .45s ease}
#listPage>ul>li::before {content:counter(project-item,decimal-leading-zero);position:absolute;top:21px;right:22px;z-index:5;color:rgba(255,255,255,.72);font-family:Arial,sans-serif;font-size:13px;font-weight:700;line-height:1;letter-spacing:.15em;text-shadow:0 2px 8px rgba(0,0,0,.22);pointer-events:none}
#listPage>ul>li::after {content:"";position:absolute;top:0;left:0;z-index:6;width:105px;height:4px;background:linear-gradient(90deg,var(--project-primary),transparent);transform-origin:left;transition:width .45s ease;pointer-events:none}
#listPage .soplink {position:relative;display:block;width:100%;aspect-ratio:4/3;background:linear-gradient(135deg,#293440,#445365);overflow:hidden;text-decoration:none}
#listPage .soplink::before {content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(17,22,28,.03) 20%,rgba(17,22,28,.12) 58%,rgba(17,22,28,.74) 100%),linear-gradient(135deg,rgba(255,255,255,.09),transparent 30%);pointer-events:none}
#listPage .soplink::after {content:"ENGINEERING CASE";position:absolute;left:23px;bottom:20px;z-index:3;color:rgba(255,255,255,.76);font-family:Arial,sans-serif;font-size:9px;font-weight:700;line-height:1.4;letter-spacing:.2em;transition:color .35s ease,transform .35s ease}
#listPage .soplink img {display:block;width:100%;height:100%;object-fit:cover;transition:transform .85s cubic-bezier(.2,.8,.2,1),filter .55s ease}
#listPage .h3 {position:relative;margin:0;padding:27px 27px 29px;background:linear-gradient(145deg,#fff,#f6f7f8);overflow:hidden}
#listPage .h3::before {content:"YU TAI PROJECT APPLICATION";display:flex;align-items:center;gap:10px;margin-bottom:11px;color:var(--project-primary);font-family:Arial,sans-serif;font-size:9px;font-weight:700;line-height:1.4;letter-spacing:.17em}
#listPage .h3::after {content:"";position:absolute;right:-42px;bottom:-52px;width:115px;aspect-ratio:1;border:1px solid rgba(32,40,50,.045);border-radius:50%;box-shadow:0 0 0 18px rgba(32,40,50,.013);transition:border-color .4s ease,transform .5s ease;pointer-events:none}
#listPage .h3>a {position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:22px;width:100%;min-width:0;color:var(--project-dark);text-decoration:none;overflow:visible;transition:color .35s ease}
#listPage .project-title {display:-webkit-box;flex:1;min-width:0;overflow:hidden;color:inherit;font-size:clamp(21px,1.55vw,26px);font-weight:700;line-height:1.5;letter-spacing:-.025em;word-break:normal;overflow-wrap:break-word;-webkit-box-orient:vertical;-webkit-line-clamp:2}
#listPage .h3>a::after {content:"→";display:flex;align-items:center;justify-content:center;flex:0 0 43px;width:43px;height:43px;color:#424c58;font-family:Arial,sans-serif;font-size:17px;font-weight:400;line-height:1;background:#eceff1;border:1px solid rgba(32,40,50,.08);border-radius:50%;transition:color .35s ease,background .35s ease,border-color .35s ease,box-shadow .35s ease,transform .35s ease}
#listPage>ul>li:hover {border-color:rgba(215,25,32,.2);box-shadow:0 31px 68px rgba(25,32,40,.15);transform:translateY(-9px)}
#listPage>ul>li:hover::after {width:190px}
#listPage>ul>li:hover .soplink img {filter:saturate(1.06) contrast(1.02);transform:scale(1.055)}
#listPage>ul>li:hover .soplink::after {color:#fff;transform:translateX(5px)}
#listPage>ul>li:hover .h3::after {border-color:rgba(215,25,32,.15);transform:scale(1.1)}
#listPage>ul>li:hover .h3>a {color:#161b21}
#listPage>ul>li:hover .h3>a::after {color:#fff;background:var(--project-primary);border-color:var(--project-primary);box-shadow:0 12px 25px rgba(215,25,32,.21);transform:translateX(4px)}
#listPage .soplink:focus-visible,#listPage .h3>a:focus-visible {outline:3px solid rgba(215,25,32,.4);outline-offset:-3px}

/* #faqList */
#faqList ul li {margin-bottom:25px}
#faqList ul li .title {position:relative;padding:20px 65px 20px 25px;background:#fff;display:block;cursor:pointer}
#faqList ul li .title font {font-size:18px;color:#1f1f1f}
#faqList ul li .title span {position:absolute;width:16px;height:16px;top:calc((100% - 16px)/2);right:25px}
#faqList ul li .title span:before,#faqList ul li .title span:after {content:"";position:absolute;width:16px;height:1px;background:#696969;top:8px;left:0}
#faqList ul li .title span:after {transform:rotate(90deg);transition:.2s ease}
#faqList ul li.current .title span:after {transform:rotate(0deg)}
#faqList ul li .info {padding:15px 25px;background:#fff;line-height:1.8;color:#333}

/* #album-info */
#album-info {display: grid;grid-template-columns: repeat(3 , 1fr);gap: 6px;}
#album-info>div {margin:0 1px 1px 0;height:300px;flex-grow:1}
#album-info>div a {display:block}
#album-info>div img {width:auto;min-width:100%;height:300px;object-fit: cover;}

/* #pagenav */
#pagenav {position:relative;overflow:hidden;padding:20px 0 40px;background:url(/images/35/img-bodyBg.jpg);text-align:center;font-size:0}
#pagenav a,#pagenav strong {margin:0 10px;display:inline-block;font-weight:400;font-size:18px;color:#1a191f;vertical-align:middle}
#pagenav a i {position:relative;width:70px;height:1px;background:#1a191f}
#pagenav a i:before {position:absolute;width:0;height:0;border-style:solid;border-width:0 0 7px 13px;border-color:transparent transparent #16151b transparent;left:-1px;bottom:50%;content:""}
#pagenav a:last-child i:before {border-width:7px 0 0 13px;border-color:transparent transparent transparent #16151b;left:auto;right:-1px}
#pagenav a:first-child {padding:0 0 0 10px}
#pagenav a:last-child {padding:0 10px 0 0}
#pagenav a[class^="page-"] {float:left;width:calc(50% - 30px)}
#pagenav a[class^="page-"] i {margin:0 5px;width:45px}
#pagenav a.page-next {float:right;text-align:right}

/* #form1 */
#form1 {display:grid;grid-template-columns:1fr;gap:1.5em 2em}
#form1 p label {margin-bottom:5px;display:block;color:#252647}
#form1 p label b {margin-left:5px;color:#ff575f}
#form1 p input,#form1 select,#form1 textarea {padding:5px 15px;width:calc(100% - 34px);border:1px #adadad solid;display:block}
#form1 p select {padding:10px 15px;width:100%}
#form1 p input#Checknum {margin-right:10px;width:60px;display:inline-block}
#form1 p.send {text-align:right}
#form1 p.send a#btnOK {position:relative;padding:15px 0;width:150px;border:1px #d20320 solid;display:inline-block;text-align:center}
#form1 p.send a#btnOK font {position:relative;font-size:18px;color:#0c0b19;z-index:2;-webkit-transition-duration:.3s;transition-duration:.3s}
#form1 p.send a#btnOK span {position:absolute;width:60px;height:1px;background:#000;display:block;right:-30px;top:calc((100% - 1px)/2);z-index:3;-webkit-transition-duration:.2s;transition-duration:.2s}
#form1 p.send a#btnOK span:before {position:absolute;width:0;height:0;border-style:solid;border-width:0 16px 7px 0;border-color:transparent transparent #0c0b19 transparent;right:-1px;bottom:50%;content:""}
#form1 p.send a#btnOK:after {position:absolute;width:0;height:100%;background:#d20320;display:block;top:0;left:0;content:"";z-index:1;-webkit-transition-duration:.2s;transition-duration:.2s}

/* #Sitemap */
#Sitemap .wrap {width:100%}

/* #newsBox */
#newsBox,#newsBox * {box-sizing:border-box}
#newsBox {--news-primary:var(--inner-primary,#d71920);--news-primary-dark:var(--inner-primary-dark,#aa1117);--news-secondary:var(--inner-secondary,#202832);--news-dark:var(--inner-dark,#20252d);--news-text:var(--inner-text,#626b75);--news-light:var(--inner-light,#f3f5f7);--news-paper:var(--inner-paper,#fff);--news-line:var(--inner-line,rgba(32,40,50,.1));position:relative;padding: clamp(20px,8vw,30px) clamp(10px,5vw,10px) clamp(20px,9vw,40px);color:var(--news-dark);isolation:isolate}
#newsBox::before {content:"NEWS";position:absolute;top: -105px;left: 15px;z-index:-1;color:rgba(32,40,50,.035);font-family:Arial,sans-serif;font-size: clamp(115px,16vw,235px);font-weight:900;line-height:.82;letter-spacing:-.075em;white-space:nowrap;pointer-events:none}

#newsBox>ul {position:relative;z-index:2;width:min(100%,1380px);margin:0 auto;padding:0;list-style:none;counter-reset:news-item}
#newsBox>ul::before {content:"LATEST INSIGHTS  ·  最新消息";position:absolute;top:-48px;left:0;color:#7f8892;font-family:Arial,"Noto Sans TC",sans-serif;font-size:11px;font-weight:700;line-height:1.4;letter-spacing:.22em}
#newsBox>ul::after {content:"";position:absolute;top:-40px;right:0;width:min(350px,30%);height:1px;background:linear-gradient(90deg,transparent,rgba(32,40,50,.16),var(--news-primary))}
#newsBox .list {position:relative;counter-increment:news-item;display:grid;grid-template-columns: 120px minmax(0,1fr) 120px;align-items:stretch;gap:0;min-width:0;margin-bottom:15px;background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(247,248,249,.97));border:1px solid rgba(32,40,50,.085);border-radius:15px;box-shadow:0 17px 42px rgba(25,32,40,.06);overflow:hidden;isolation:isolate;transition:transform .42s cubic-bezier(.2,.8,.2,1),border-color .4s ease,box-shadow .42s ease,background .4s ease}
#newsBox .list:last-child {margin-bottom:0}
#newsBox .list::before {content:counter(news-item,decimal-leading-zero);position:absolute;top: 15px;right: 15px;z-index:2;color:rgba(32,40,50,.08);font-family:Arial,sans-serif;font-size: 30px;font-weight:900;line-height:1;letter-spacing:-.06em;pointer-events:none;transition:color .35s ease,transform .35s ease}
#newsBox .list::after {content:"→";position:relative;z-index:3;grid-column:3/4;grid-row:1/2;display:flex;align-items:center;justify-content:center;align-self:center;width: 55px;height: 55px;margin-right:20px;color:#414b56;font-family:Arial,sans-serif;font-size:18px;line-height:1;background:#edf0f2;border:1px solid rgba(32,40,50,.08);border-radius:50%;transition:color .35s ease,background .35s ease,border-color .35s ease,box-shadow .35s ease,transform .35s ease}
#newsBox .link {position:absolute;inset:0;z-index:5;display:block;border-radius:inherit}
#newsBox .link:focus-visible {outline:3px solid rgba(215,25,32,.4);outline-offset:-3px}
#newsBox .time {position:relative;z-index:2;grid-column:1/2;grid-row:1/2;display:flex!important;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0;padding:31px 28px;color:#fff;background:linear-gradient(145deg,#202832 0%,#2d3946 58%,#465567 100%);overflow:hidden}
#newsBox .row{margin-right: 0px;margin-left: 0px;}
#newsBox .time::before {content:"";position:absolute;top:0;left:0;width:85px;height:3px;background:linear-gradient(90deg,var(--news-primary),transparent)}
#newsBox .time::after {content:"";position:absolute;right:-44px;bottom:-55px;width:115px;aspect-ratio:1;border:1px solid rgba(255,255,255,.07);border-radius:50%;box-shadow:0 0 0 18px rgba(255,255,255,.014);pointer-events:none}
#newsBox .time font {position:relative;z-index:2;display:block;font-style:normal}
#newsBox .time font:first-child {color:#fff;font-family:Arial,sans-serif;font-size:45px;font-weight:800;line-height:1;letter-spacing:-.055em}
#newsBox .time font:last-child {margin-top:9px;color:rgba(255,255,255,.48);font-family:Arial,sans-serif;font-size:11px;font-weight:700;line-height:1.4;letter-spacing:.12em;text-transform:uppercase}
#newsBox .info {position:relative;z-index:2;grid-column:2/3;grid-row:1/2;display:block!important;min-width:0;padding:29px 38px 31px;background:transparent}
#newsBox .info::before {content:"";position:absolute;top:0;bottom:0;left:0;width:1px;background:linear-gradient(to bottom,transparent,rgba(215,25,32,.28),transparent)}
#newsBox .info .h3 {position:relative;z-index:6;margin:0;padding:0;font:inherit}
#newsBox .info .h3 .cat {position:relative;z-index:7;display:inline-flex;align-items:center;gap:8px;margin-bottom:13px;padding:6px 11px;color:var(--news-primary);font-size:11px;font-weight:700;line-height:1.4;letter-spacing:.12em;text-decoration:none;background:rgba(215,25,32,.065);border:1px solid rgba(215,25,32,.14);border-radius:99px;transition:color .3s ease,background .3s ease,border-color .3s ease}
#newsBox .info .h3 .cat::before {content:"";width:5px;height:5px;background:var(--news-primary);border-radius:50%}
#newsBox .info .h3 .cat:hover {color:#fff;background:var(--news-primary);border-color:var(--news-primary)}
#newsBox .info .h3 .cat:hover::before {background:#fff}
#newsBox .info .h3>font {display:-webkit-box;max-width:920px;overflow:hidden;color:var(--news-dark);font-size:clamp(20px,1.65vw,27px);font-weight:700;line-height:1.5;letter-spacing:-.025em;word-break:normal;overflow-wrap:break-word;-webkit-box-orient:vertical;-webkit-line-clamp:2;transition:color .35s ease,transform .35s ease;height: auto;}
#newsBox .info article {display:-webkit-box;max-width:970px;margin-top:15px;overflow:hidden;color:var(--news-text);font-size:14px;font-weight:400;line-height:1.85;letter-spacing:.01em;word-break:normal;overflow-wrap:break-word;-webkit-box-orient:vertical;-webkit-line-clamp:2}
#newsBox .info article:empty {display:none}
#newsBox .list:hover {background:linear-gradient(145deg,#fff,#f4f5f7);border-color:rgba(215,25,32,.2);box-shadow:0 26px 58px rgba(25,32,40,.12);transform:translateY(-6px)}
#newsBox .list:hover::before {color:rgba(215,25,32,.075);transform:translateY(-3px)}
#newsBox .list:hover::after {color:#fff;background:var(--news-primary);border-color:var(--news-primary);box-shadow:0 12px 25px rgba(215,25,32,.21);transform:translateX(4px)}
#newsBox .list:hover .time {background:linear-gradient(145deg,#1d252f 0%,#303d4a 58%,#4d5e71 100%)}
#newsBox .list:hover .info h3>font {color:#151a20;transform:translateX(5px)}
#newsBox .list:hover .info::before {background:linear-gradient(to bottom,transparent,var(--news-primary),transparent)}

/* @media */
@media screen and (max-width:1680px){
/* #h1Box */
#h1Box .txt {padding:159px calc((100% - 1300px)/2);width:1300px}
}
@media screen and (max-width:1470px){
/* #h1Box */
#h1Box .txt {padding:159px calc((100% - 1100px)/2);width:1100px}
.wrap .workframe{width: min(90%, 1160px);padding-bottom: 0;}
}
@media screen and (max-width:1280px){
/* #h1Box */
    #h1Box .txt font{font-size:14px;letter-spacing: 0.05rem;font-weight: 400;margin-bottom: 6px;}
#h1Box .txt {padding: 150px 0% 40px;width: 100%;}
.wrap:before {width:98vw}
}
@media screen and (max-width:1200px){
/* #listPage */
#listPage {padding-right:45px;padding-left:45px}
#listPage>ul {grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 22px}
#listPage .h3 {padding:25px}
#listPage .project-title {font-size:23px}
/* #newsBox */
#newsBox {padding-right:45px;padding-left:45px}
#newsBox .list {grid-template-columns:130px minmax(0,1fr) 55px}
#newsBox .time {padding:28px 24px}
#newsBox .time font:first-child {font-size:40px}
#newsBox .info {padding:27px 30px 29px}
#newsBox .info .h3>font {font-size:23px}
}
@media screen and (max-width:980px){
.wrap {padding:8vw 0}
.wrap:before {width:100%;top:0}
/* #album-info */
#album-info>div,#album-info>div img {height:40vw}
/* #pagenav */
#pagenav {padding:25px 0 20px}
/* #form1 */
#form1 p.send {text-align:center}
.wrap,.workframe {width:100%;max-width:100%}
.contentMain {display:block;width:100%}
/* #sideNav */
#sideNav {width:100%;max-width:100%;position:relative;margin-bottom:20px;display: flex;flex-direction: column;align-items: center;margin: 25px auto;}
#sideNav>ul{right:auto;}
/* #content */
#content {width:100%;max-width:100%;overflow:visible}
/* #describe */
#describe {width:100%;overflow:visible;word-break:break-word}
}
@media screen and (max-width:850px){
/* #newsBox */
#newsBox .list {grid-template-columns:105px minmax(0,1fr) 50px}
#newsBox .time {padding:24px 19px}
#newsBox .time font:first-child {font-size:35px}
#newsBox .time font:last-child {font-size:9px;letter-spacing:.08em}
#newsBox .info {padding:24px 24px 26px}
#newsBox .info .h3>font {font-size:21px}
#newsBox .info article {-webkit-line-clamp:3}
#newsBox .list::after {width:40px;height:40px;margin-right:14px}
}
@media screen and (max-width:768px){
/* #describe */
#describe section>div[style*="grid-template-columns"] {grid-template-columns:1fr !important;gap:14px !important}
#describe section>div[style*="repeat(2"] {grid-template-columns:1fr !important}
#describe div[style*="display:flex"][style*="gap"] {flex-direction:column !important;align-items:flex-start !important}
#describe h2,#describe .h3,#describe p,#describe li {word-break:break-word !important;white-space:normal !important}
#describe h2 {font-size:26px !important;line-height:1.35 !important}
#describe .h3 {font-size:17px !important;line-height:1.4 !important}
#describe p,#describe li {font-size:15px !important;line-height:1.8 !important}
#describe span,#describe div[style*="min-width:46px"] {min-width:auto !important}
#describe ul {padding-left:18px !important}
#album-info{
    grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width:767px){
/* #listPage */
#listPage {padding:88px 20px 95px}
#listPage::before {top:24px;font-size:82px}
#listPage>ul {grid-template-columns:1fr;gap:17px}
#listPage>ul::before {top:-38px;font-size:9px;letter-spacing:.16em}
#listPage>ul::after {top:-32px;width:100px}
#listPage>ul>li,#listPage>ul>li:nth-child(even) {margin-top:0;border-radius:14px}
#listPage .soplink {aspect-ratio:16/11}
#listPage .soplink::after {left:20px;bottom:17px}
#listPage .h3 {padding:23px 22px 25px}
#listPage .h3>a {gap:18px}
#listPage .project-title {font-size:21px}
#listPage .h3>a::after {flex-basis:40px;width:40px;height:40px}
}
@media screen and (max-width:650px){
/* #newsBox */
#newsBox {padding:88px 20px 95px}
#newsBox::before {top:24px;font-size:88px}

#newsBox>ul::before {top:-38px;font-size:9px;letter-spacing:.16em}
#newsBox>ul::after {top:-32px;width:100px}
#newsBox .list {display:grid;grid-template-columns:84px minmax(0,1fr);grid-template-rows:auto auto;margin-bottom:12px;border-radius:13px}
#newsBox .list::before {top:16px;right:16px;font-size:34px}
#newsBox .list::after {position:absolute;right:17px;bottom:17px;width:38px;height:38px;margin:0}
#newsBox .time {grid-column:1/2;grid-row:1/3;justify-content:flex-start;padding:24px 15px}
#newsBox .time font:first-child {font-size:31px}
#newsBox .time font:last-child {margin-top:7px;font-size:8px;line-height:1.5;letter-spacing:.05em}
#newsBox .info {grid-column:2/3;grid-row:1/3;padding:23px 55px 24px 20px}
#newsBox .info .h3 .cat {margin-bottom:11px;padding:5px 9px;font-size:10px}
#newsBox .info .h3>font {font-size:19px;line-height:1.55}
#newsBox .info article {margin-top:12px;font-size:13px;line-height:1.75;-webkit-line-clamp:3}
}
@media screen and (max-width:640px){

/* #pagenav */
#pagenav a,#pagenav strong {margin:0 6px;font-size:16px}
#pagenav a i {width:30px}
#pagenav a i:before {border-width:0 0 5px 10px}
#pagenav a:last-child i:before {border-width:5px 0 0 10px}
#pagenav a:first-child,#pagenav a:last-child {padding:0}
}
@media screen and (max-width:500px){
    #album-info{display:flex;flex-direction: column;}
/* #album-info */
#album-info>div,#album-info>div img {height: auto;}
}
@media screen and (max-width:480px){
.waylink ol li a ,.waylink ol li{font-size: 15px;}
.waylink ol li a:after{margin: 0 6px;}
    /* #listPage */
#listPage {padding:78px 15px 82px}
#listPage .soplink {aspect-ratio:4/3}
#listPage>ul>li::before {top:18px;right:18px}
#listPage .h3 {padding:21px 19px 23px}
#listPage .h3::before {font-size:8px;letter-spacing:.13em}
#listPage .h3>a {gap:14px}
#listPage .project-title {font-size:19px;line-height:1.55}
#listPage .h3>a::after {flex-basis:37px;width:37px;height:37px;font-size:16px}
/* #newsBox */
#newsBox {padding: 78px 15px 50px;}
#newsBox .list {grid-template-columns: 64px minmax(0,1fr);}
#newsBox .time {padding:21px 12px;justify-content: center;}
#newsBox .time font:first-child {font-size:28px}
#newsBox .time font:last-child {word-break:break-word}
#newsBox .info {padding:21px 50px 22px 16px}
#newsBox .info .h3>font {font-size:17px}
#newsBox .info article {font-size:12px;-webkit-line-clamp: 1;height: auto;}
#newsBox .list::after {right:13px;bottom:14px;width:34px;height:34px;font-size:15px;display: none;}
}
@media screen and (min-width:1281px){
/* #faqList */
#faqList li:hover .title {background:url(/images/35/img-newsHBg.jpg)}
#faqList li:hover .title font,#form1 p.send a#btnOK:hover font {color:#fff}
/* #pagenav */
#pagenav a:hover:first-child {padding:0 10px 0 0}
#pagenav a:hover:last-child {padding:0 0 0 10px}
/* #form1 */
#form1 p.send a#btnOK:hover span {right:-20px}
#form1 p.send a#btnOK:hover:after {width:100%}
}
@media screen and (min-width:769px){
/* #form1 */
#form1 {grid-template-columns:repeat(2,1fr)}
#form1 p.large {grid-column:1/3}
#form1 p.send {justify-content:flex-end}
}
@media (prefers-reduced-motion:reduce){
/* #listPage */
#listPage>ul>li,#listPage>ul>li::after,#listPage .soplink img,#listPage .soplink::after,#listPage .h3::after,#listPage .h3>a,#listPage .h3>a::after {transition:none}
/* #newsBox */
#newsBox .list,#newsBox .list::before,#newsBox .list::after,#newsBox .info::before,#newsBox .info .h3>font,#newsBox .info .h3 .cat {transition:none}
}