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

/* layout.less */
aside b .fa{transform:rotate(0);-webkit-transform:rotate(0);transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out;}aside > ul > li .subUL{transform:translate(0,30px);-webkit-transform:translate(0,30px);}aside > ul > li[data-type="2"] .h4 b .fa{transform:rotate(180deg);-webkit-transform:rotate(180deg);}aside > ul > li[data-type="2"] .subUL{transform:translate(0,0);-webkit-transform:translate(0,0);}#faq_list li .title i{transform:rotate(0);-webkit-transform:rotate(0);transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out;}#faq_list li.current .title i{transform:rotate(180deg);-webkit-transform:rotate(180deg);}#book_list li .img_box:before,#book_list li .img_box:after{transform:scaleY(0);-webkit-transform:scaleY(0);}#book_list li .img_box:after{transform-origin:center bottom;-webkit-transform-origin:center bottom;}@media (min-width:1281px){#book_list li:hover .img_box:before,#book_list li:hover .img_box:after{transform:scaleY(1);-webkit-transform:scaleY(1);}}[data-action="loader"] .loader_circle{width:50px;height:50px;border-radius:50%;}[data-action="loader"]#lodbg .loader_circle{-webkit-animation:circle infinite 0.75s linear;animation:circle infinite 0.75s linear;}@keyframes circle{0%{transform:rotate(0);-webkit-transform:rotate(0);}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);}}@-webkit-keyframes circle{0%{transform:rotate(0);-webkit-transform:rotate(0);}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);}}

/* header */
header .menu {}
header #menubtn[data-type="1"] a span {background: #c2c2c2;}

/* wrap */
#wrap {z-index: 6;background: radial-gradient(circle at 78% 20%, rgba(255, 180, 0, 0.09), transparent 28%), radial-gradient(circle at 12% 82%, rgba(255, 180, 0, 0.055), transparent 30%), linear-gradient(145deg, #000000 0%, #101112 48%, #070809 100%);}
#wrap .page_area {margin: auto;width: 100%;z-index: 2;}
#wrap .shadow { box-shadow: 0 0 20px rgba(var(--black-rgb), .2); }

/* sub_banner */
#sub_banner { top: 0; left: 0; }
#sub_banner a , #page_title { padding-top: 70px; height: 400px; }
#sub_banner a img { height: 100%; }
#sub_banner a:after {position: absolute;width: 100%;height: 100%;background: linear-gradient(0deg, rgb(19 25 12 / 62%), transparent);top: 0;left: 0;z-index: 2;content: "";}
#sub_banner a:before {content: "";position: absolute;left: 0;right: 0;bottom: 0;height: 1px;background: linear-gradient(90deg,rgba(216,173,114,0),rgba(216,173,114,.45),rgba(216,173,114,0));}


/* page_title */
#page_title >div { margin: auto; }
#page_title .pag_tit { line-height: 1.3em; letter-spacing: .15em; font-size: 2em; }

/* waylink */
.waylink ol { padding-top: 5px; }
.waylink ol li , .waylink ol li a {letter-spacing: 1.5px;font-weight: 300;font-size: 13px;vertical-align: bottom;color: white;}
.waylink ol li:after { margin: 0 10px; display: inline-block; font-weight: 100; font-size: 12px; color: var(--white); content: "/"; }
.waylink ol li:last-child:after { margin: 0; content: ""; }

/* aside */
aside >ul {margin-top: 5vw;display: flex;flex-wrap: wrap;gap: 10px;justify-content: center;}
aside ul li b { padding: 5px 10px; }
aside ul li b .fa:before { content: "\f107"; }
aside >ul >li { position: relative; display: inline-block; }
aside >ul >li .h4 {padding: 0;}
aside >ul >li .h4 a {padding: 13px 27px 10px;font-weight: 300;font-size: 18px;border: #b69060 1px solid;border-radius: 220px;color: #b69060;font-weight: 500;}

aside >ul >li .h4 a.activeJ{background: #d09404;color:white;}
aside >ul >li .h4 a:hover{background: var(--primary);}
aside >ul >li.action .h4 a , aside >ul >li.action .h4 i { color: var(--primary); }
aside >ul >li .subUL { position: absolute; margin-top: 10px; width: 180px; background: var(--white); left: calc((100% - 180px) / 2); }
aside >ul >li .subUL >li { border-bottom: 1px rgba(var(--gray-rgb), .1) solid; }
aside >ul >li .subUL >li a { padding: 3px 15px; display: block; line-height: 140%; font-weight: 300; }
aside >ul >li .subUL >li .subULHead a { padding: 10px 15px; color: var(--primary); }
aside >ul >li .subUL >li b { display: none; }
aside >ul >li .sub2UL { margin: 0 10px 10px; }
aside >ul >li[data-type="1"] { overflow: hidden; }
aside >ul >li[data-type="1"] .subUL { box-shadow: 0 0 15px rgba(var(--black-rgb), 0); opacity: 0; z-index: -1; }
aside >ul >li[data-type="2"] { overflow: visible; }
aside >ul >li[data-type="2"] .subUL { box-shadow: 0 0 15px rgba(var(--black-rgb), .15); opacity: 1; z-index: 1; }

/* list_box */
.list_box li { margin: 0 15px 50px; }
.list_box li img { background: rgba(var(--primary-rgb), .05); }

/* article_list */

#article_list { position: relative; display: grid !important; grid-template-columns: repeat(4,1fr); gap: 24px; margin: 0; padding: 0; list-style: none; white-space: normal !important; }
#article_list::before { content: ""; position: absolute; left: 50%; top: 50%; width: 78%; height: 1px; transform: translate(-50%,-50%); background: linear-gradient(90deg,rgba(216,173,114,0),rgba(216,173,114,.28),rgba(216,173,114,0)); pointer-events: none; }
#article_list > li { position: relative; display: block !important; width: auto !important; margin: 0 !important; padding: 0 !important; aspect-ratio: 3/4.15; border-radius: 30px; overflow: hidden; background: linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.03)),rgba(10,14,7,.34); border: 1px solid rgba(216,173,114,.16); box-shadow: 0 22px 58px rgba(0,0,0,.26); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .42s ease,border-color .42s ease,box-shadow .42s ease; }
#article_list > li::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg,rgba(8,16,6,.08) 0%,rgba(8,16,6,.22) 42%,rgba(8,16,6,.86) 100%),radial-gradient(circle at 50% 16%,rgba(216,173,114,.16),rgba(216,173,114,0) 46%); pointer-events: none; }
#article_list > li::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px; z-index: 5; background: linear-gradient(90deg,rgba(216,173,114,.95),rgba(216,173,114,0)); opacity: .85; }
#article_list > li:hover { transform: translateY(-10px); border-color: rgba(216,173,114,.36); box-shadow: 0 34px 86px rgba(0,0,0,.42); }
#article_list > li > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; transform: scale(1.06); transition: transform 4.8s ease,filter .42s ease; }
#article_list > li:hover > img { transform: scale(1.14); filter: saturate(1.05) brightness(.9); }
#article_list > li > .h3 {left: 50%;top: 50%;z-index: 4;width: calc(100% - 48px);margin: 0;transform: translate(-50%,-50%);font-size: clamp(24px,2vw,34px);line-height: 1.35;letter-spacing: .08em;color: #fff !important;font-weight: 500;text-shadow: 0 12px 32px rgba(0,0,0,.55);transition: opacity .35s ease,transform .35s ease;height: auto;}
#article_list > li > .h3::before { content: ""; position: absolute; left: 50%; top: -22px; width: 42px; height: 42px; border-radius: 100% 0 100% 0; border: 1px solid rgba(216,173,114,.72); transform: translateX(-50%) rotate(-22deg); opacity: .72; }
#article_list > li:hover > .h3 { opacity: 0; transform: translate(-50%,-58%); }
#article_list > li > .atag_item { inset: 0; z-index: 6; }
#article_list .info_box { left: 0; right: 0; bottom: 0; z-index: 8; padding: 34px 28px 30px; transform: translateY(calc(100% - 104px)); background: linear-gradient(180deg,rgba(10,14,7,0) 0%,rgba(10,14,7,.78) 24%,rgba(10,14,7,.96) 100%); transition: transform .45s cubic-bezier(.19,1,.22,1); }
#article_list > li:hover .info_box { transform: translateY(0); }
#article_list .info_box::before { content: ""; position: absolute; left: 28px; top: 18px; width: 48px; height: 1px; background: linear-gradient(90deg,rgba(216,173,114,.95),rgba(216,173,114,0)); }
#article_list .info_box p { position: relative; z-index: 2; margin: 0 0 12px; font-size: 24px; line-height: 1.35; letter-spacing: .06em; color: #fff !important; font-weight: 500; }
#article_list .info_box article { position: relative; z-index: 2; margin: 0; min-height: 0; font-size: 15px; line-height: 1.85; letter-spacing: .04em; color: rgba(255,255,255,.76); -webkit-line-clamp: 2; }
#article_list .info_box .more_btn { position: relative; z-index: 3; margin-top: 22px; padding: 12px 24px; border-radius: 999px; background: linear-gradient(135deg,rgba(216,173,114,.95),rgba(129,88,42,.95)) !important; color: #fff !important; font-size: 13px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; border: 1px solid rgba(255,232,181,.22); box-shadow: 0 12px 28px rgba(0,0,0,.2); transition: transform .35s ease,box-shadow .35s ease; }
#article_list .info_box .more_btn::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 10px; border-top: 1px solid rgba(255,255,255,.9); border-right: 1px solid rgba(255,255,255,.9); transform: rotate(45deg); vertical-align: 1px; }
#article_list .info_box .more_btn:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(216,173,114,.18); }
#article_list .info_box .atag_item { inset: 0; z-index: 2; }
@media screen and (max-width:1180px) {
  #article_list { grid-template-columns: repeat(2,1fr); gap: 20px; }
  #article_list > li { aspect-ratio: 4/3.8; }
}
@media screen and (max-width:760px) {
  #article_list { grid-template-columns: 1fr; gap: 18px; }
  #article_list > li { aspect-ratio: 4/3.6; border-radius: 24px; }
  #article_list > li > .h3 { font-size: 26px; }
  #article_list .info_box { padding: 30px 24px 26px; transform: translateY(calc(100% - 94px)); }
  #article_list .info_box p { font-size: 22px; }
  #article_list .info_box article { font-size: 14px; line-height: 1.8; }
}
@media screen and (max-width:480px) {
  #article_list > li { aspect-ratio: 3/3.8; }
  #article_list .info_box { transform: translateY(calc(100% - 88px)); }
}




/* news_list */
#news_list {position: relative;display: grid;grid-template-columns: repeat(3,minmax(0,1fr));gap: 28px 22px;width: min(calc(100% - 80px),1500px);margin: 0 auto;padding: 3px 0 125px;font-size: 0;list-style: none;counter-reset: newsItem;}
#news_list::before {
  content:"";
  position:absolute;
  top: 0;
  left:0;
  width:100%;
  height:2px;
  pointer-events:none;
  background:linear-gradient(
		90deg,transparent 0%,rgba(255,180,0,0.1) 16%,rgba(255,180,0,0.7) 36%,#fff1b0 50%,#ffb400 64%,rgba(255,180,0,0.1) 84%,transparent 100%
	);
  background-repeat:no-repeat;
  background-size:190px 100%;
  background-position:-190px center;
  filter:drop-shadow(0 0 4px rgba(255,180,0,0.95))
		drop-shadow(0 0 10px rgba(255,180,0,0.5));
  animation:newsListLineFlow 3.5s linear infinite;
}
#news_list::after { content: "NEWS & INSIGHTS"; position: absolute; top: 10px; right: 0; color: transparent; font-family: "Arial Black",Arial,sans-serif; font-size: clamp(48px,5.5vw,90px); font-weight: 900; font-style: italic; line-height: 1; letter-spacing: -0.07em; white-space: nowrap; -webkit-text-stroke: 1px rgba(255,255,255,0.055); pointer-events: none; }
#news_list > li {
  position:relative;display:flex;flex-direction:column;width:100%;max-width:none;min-width:0;padding:0;overflow:hidden;background:linear-gradient(
		145deg,rgba(25,26,27,0.98),rgba(8,9,10,0.99)
	);border:1px solid rgba(255,255,255,0.13);clip-path:polygon(
		0 0,calc(100% - 34px) 0,100% 34px,100% 100%,34px 100%,0 calc(100% - 34px)
	);box-shadow:0 25px 58px rgba(0,0,0,0.32);counter-increment:newsItem;transition:transform 0.45s ease,border-color 0.45s ease,box-shadow 0.45s ease;
}
#news_list > li::before { content: counter(newsItem,decimal-leading-zero); position: absolute; top: 18px; right: 22px; z-index: 8; color: rgba(255,255,255,0.14); font-family: "Arial Black",Arial,sans-serif; font-size: 56px; font-weight: 900; font-style: italic; line-height: 1; letter-spacing: -0.08em; pointer-events: none; transition: color 0.45s ease,transform 0.45s ease; }
#news_list > li::after {
  content:"";position:absolute;left:0;bottom:0;z-index:8;width:100%;height:3px;background:linear-gradient(
		90deg,#ffb400,rgba(255,180,0,0)
	);transform:scaleX(0.3);transform-origin:left center;pointer-events:none;transition:transform 0.5s ease;
}
#news_list > li:hover { border-color: rgba(255,180,0,0.42); box-shadow: 0 34px 75px rgba(0,0,0,0.48),0 0 30px rgba(255,180,0,0.08); transform: translateY(-9px); }
#news_list > li:hover::before { color: rgba(255,180,0,0.25); transform: translateX(-6px); }
#news_list > li:hover::after { transform: scaleX(1); }

#news_list > li > .over_hid { position: relative; display: block; width: 100%; height: 300px; overflow: hidden; background: #111; }
#news_list > li > .over_hid::before {
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(
			180deg,rgba(0,0,0,0.03) 0%,rgba(0,0,0,0.05) 48%,rgba(0,0,0,0.74) 100%
		),linear-gradient(
			90deg,rgba(0,0,0,0.17),transparent 60%
		);transition:background 0.5s ease;
}
#news_list > li > .over_hid::after {
  content:"";position:absolute;inset:0;z-index:3;opacity:0.14;pointer-events:none;background-image:radial-gradient(
		circle at 1px 1px,rgba(255,255,255,0.55) 1px,transparent 1.2px
	);background-size:18px 18px;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);
}
#news_list > li > .over_hid img {
  display:block;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(0.7)
		contrast(1.08)
		brightness(0.78);transform:scale(1.025);transition:transform 0.85s cubic-bezier(0.19,1,0.22,1),filter 0.55s ease;
}
#news_list > li:hover > .over_hid img {
  filter:saturate(0.96)
		contrast(1.06)
		brightness(0.92);transform:scale(1.09);
}
#news_list > li:hover > .over_hid::before {
  background:linear-gradient(
			180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.02) 48%,rgba(0,0,0,0.62) 100%
		);
}
#news_list > li .info_box {
  position:relative;z-index:4;display:flex;flex:1;flex-direction:column;min-height:165px;padding:25px 27px 29px;background:linear-gradient(
		145deg,rgba(25,26,27,0.98),rgba(9,10,11,0.99)
	);border-top:1px solid rgba(255,255,255,0.09);
}
#news_list > li .info_box::before {
  content:"";position:absolute;top:-1px;left:27px;width:75px;height:2px;background:linear-gradient(
		90deg,#ffb400,rgba(255,180,0,0)
	);transition:width 0.45s ease;
}
#news_list > li:hover .info_box::before { width: 125px; }
#news_list > li .info_box > p { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; margin: 0 0 15px; font-size: 0; }
#news_list > li .info_box > p > a { position: relative; z-index: 12; display: inline-flex; align-items: center; width: auto; max-width: 55%; min-height: 28px; padding: 5px 12px 5px 26px; overflow: hidden; color: #ffb400; font-size: 11px; font-weight: 800; line-height: 1.5; letter-spacing: 0.14em; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; background: rgba(255,180,0,0.07); border: 1px solid rgba(255,180,0,0.22); }
#news_list > li .info_box > p > a::before { content: ""; position: absolute; left: 11px; top: 50%; width: 6px; height: 6px; background: #ffb400; transform: translateY(-50%) rotate(45deg); }
#news_list > li .info_box .time { display: inline-block; flex: 0 0 auto; width: auto; color: rgba(255,255,255,0.42); font-family: Arial,sans-serif; font-size: 11px; font-weight: 700; line-height: 1.5; letter-spacing: 0.1em; text-align: right; }
#news_list > li .info_box h3 { display: -webkit-box; margin: 0; overflow: hidden; color: #fff; font-size: clamp(18px,1.35vw,23px); font-weight: 800; line-height: 1.55; letter-spacing: 0.025em; text-align: left; text-overflow: ellipsis; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; transition: color 0.35s ease,transform 0.35s ease; }
#news_list > li:hover .info_box h3 { color: #ffbf19; transform: translateX(5px); }
#news_list > li .atag_item { position: absolute; inset: 0; z-index: 10; display: block; width: 100%; height: 100%; font-size: 0; }
#news_list > li .atag_item::before { content: "READ MORE"; position: absolute; right: 55px; bottom: 31px; color: rgba(255,255,255,0.42); font-family: Arial,sans-serif; font-size: 9px; font-weight: 800; line-height: 1.5; letter-spacing: 0.16em; opacity: 0; transform: translateX(-8px); transition: opacity 0.35s ease,transform 0.35s ease; }
#news_list > li .atag_item::after {
  content:"";position:absolute;right:25px;bottom:32px;width:25px;height:10px;background:linear-gradient(
		#ffb400,#ffb400
	) left 5px/21px 1px no-repeat;opacity:0;transform:translateX(-8px);transition:opacity 0.35s ease,transform 0.35s ease;
}
#news_list > li:hover .atag_item::before,#news_list > li:hover .atag_item::after { opacity: 1; transform: translateX(0); }
#news_list > li .info_box > p > a { pointer-events: none; }
@keyframes newsListLineFlow {
  0% { background-position: -190px center; }
  70%,100% { background-position: calc(100% + 190px) center; }
}
@media screen and (max-width:1280px) {
  #news_list { width: calc(100% - 70px); gap: 24px 20px; padding-top: 78px; padding-bottom: 110px; }
  #news_list > li > .over_hid { height: 275px; }
  #news_list > li:nth-child(1) > .over_hid { height: 395px; }
  #news_list > li .info_box { padding-right: 23px; padding-left: 23px; }
  #news_list > li .info_box::before { left: 23px; }
}
@media screen and (max-width:1024px) {
  #news_list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #news_list > li:nth-child(1) { grid-column: span 2; }
  #news_list > li > .over_hid { height: clamp(280px,39vw,360px); }
  #news_list > li:nth-child(1) > .over_hid { height: clamp(390px,54vw,510px); }
}
@media screen and (max-width:767px) {
  #news_list { width: calc(100% - 40px); gap: 20px; padding-top: 67px; padding-bottom: 85px; }
  #news_list::after { top: 18px; font-size: 48px; }
  #news_list > li,#news_list > li:nth-child(1) { grid-column: auto; }
  #news_list > li > .over_hid,#news_list > li:nth-child(1) > .over_hid { height: 350px; }
  #news_list > li:nth-child(1) .info_box { min-height: 165px; padding: 25px 27px 29px; }
  #news_list > li:nth-child(1) .info_box h3 { font-size: clamp(18px,1.35vw,23px); }
}
@media screen and (max-width:550px) {
  #news_list { grid-template-columns: 1fr; width: calc(100% - 30px); padding-top: 58px; padding-bottom: 72px; }
  #news_list::before { top: 28px; }
  #news_list::after { display: none; }
  #news_list > li {
    clip-path:polygon(
			0 0,calc(100% - 28px) 0,100% 28px,100% 100%,28px 100%,0 calc(100% - 28px)
		);
  }
  #news_list > li > .over_hid,#news_list > li:nth-child(1) > .over_hid { height: 290px; }
  #news_list > li::before { top: 14px; right: 16px; font-size: 47px; }
  #news_list > li .info_box,#news_list > li:nth-child(1) .info_box { min-height: 150px; padding: 22px 20px 25px; }
  #news_list > li .info_box::before { left: 20px; }
  #news_list > li .info_box > p { gap: 10px; margin-bottom: 13px; }
  #news_list > li .info_box > p > a { max-width: 52%; min-height: 26px; padding-right: 9px; padding-left: 23px; font-size: 10px; }
  #news_list > li .info_box > p > a::before { left: 9px; width: 5px; height: 5px; }
  #news_list > li .info_box .time { font-size: 10px; }
  #news_list > li .info_box h3,#news_list > li:nth-child(1) .info_box h3 { font-size: 17px; line-height: 1.5; }
  #news_list > li .atag_item::before { display: none; }
  #news_list > li .atag_item::after { right: 19px; bottom: 25px; }
}
/* faq_list */
#faq_list li {position: relative;margin-bottom: 30px;clip-path: polygon(0 0, calc(100% - 21px) 0, 100% 21px, 100% 100%, 21px 100%, 0 calc(100% - 21px));box-shadow: 0 35px 80px rgba(0, 0, 0, 0.48);}
#faq_list li .title font {padding: 20px 65px 20px 25px;background: #1a1a1a;font-size: 18px;box-shadow: 0 0 15px rgba(var(--black-rgb), .2);}
#faq_list li .title i { font-size: 26px; top: calc((100% - 26px) / 2); right: 25px; }
#faq_list li .info {padding: 25px;font-size: 14px;-webkit-transition: none;-moz-transition: none;-ms-transition: none;-o-transition: none;transition: none;background: #141414;}
#faq_list li.current { box-shadow: 0 0 15px rgba(var(--black-rgb), .2); }
#faq_list li.current .title font {background: var(--primary);box-shadow: none;color: var(--white);}
#faq_list li.current .title i { color: var(--white); }
#faq_list .info li{
    clip-path: unset;
}
#faq_list .info li::before{
    display: none;
}
#faq_list li::before {
  content:"";position:absolute;top:0;left:0;right:0;height:1px;z-index:5;background:linear-gradient(
			90deg,transparent,rgba(255,180,0,0.55) 20%,rgba(255,255,255,0.16) 50%,rgba(255,180,0,0.55) 80%,transparent
		);
}

/* book_list */

#book_list {position: relative;display: grid;grid-template-columns: repeat(3,minmax(0,1fr));gap: 30px 24px;width: min(calc(100% - 80px),1500px);margin: 0 auto;padding: 3px 0 120px;font-size: 0;list-style: none;counter-reset: bookCase;}
#book_list::before {content: "";position: absolute;top: 0;left: 0;width: 190px;height: 2px;background: linear-gradient(90deg,#ffb400,rgba(255,180,0,0));box-shadow: 0 0 10px rgba(255,180,0,0.3);}
#book_list::after { content: "PROJECT CASE"; position: absolute; top: 12px; right: 0; color: transparent; font-family: "Arial Black",Arial,sans-serif; font-size: clamp(42px,5vw,82px); font-weight: 900; font-style: italic; line-height: 1; letter-spacing: -0.06em; white-space: nowrap; -webkit-text-stroke: 1px rgba(255,255,255,0.055); pointer-events: none; }
#book_list > li {
  position:relative;display:block;width:100%;max-width:none;padding:0;overflow:hidden;background:#111213;border:1px solid rgba(255,255,255,0.13);clip-path:polygon(
		0 0,calc(100% - 34px) 0,100% 34px,100% 100%,34px 100%,0 calc(100% - 34px)
	);box-shadow:0 25px 55px rgba(0,0,0,0.32);counter-increment:bookCase;transition:transform 0.45s ease,border-color 0.45s ease,box-shadow 0.45s ease;
}
#book_list > li::before { content: counter(bookCase,decimal-leading-zero); position: absolute; top: 19px; right: 22px; z-index: 7; color: rgba(255,255,255,0.12); font-family: "Arial Black",Arial,sans-serif; font-size: 55px; font-weight: 900; font-style: italic; line-height: 1; letter-spacing: -0.08em; pointer-events: none; transition: color 0.45s ease,transform 0.45s ease; }
#book_list > li::after { content: ""; position: absolute; left: 0; bottom: 0; z-index: 8; width: 100%; height: 3px; background: linear-gradient(90deg,#ffb400,rgba(255,180,0,0)); transform: scaleX(0.25); transform-origin: left center; pointer-events: none; transition: transform 0.5s ease; }
#book_list > li:hover { border-color: rgba(255,180,0,0.42); box-shadow: 0 34px 70px rgba(0,0,0,0.48),0 0 28px rgba(255,180,0,0.08); transform: translateY(-9px); }
#book_list > li:hover::before { color: rgba(255,180,0,0.25); transform: translateX(-6px); }
#book_list > li:hover::after { transform: scaleX(1); }
#book_list > li .img_box { position: relative; display: block; width: 100%; height: clamp(280px,23vw,390px); overflow: hidden; background: #111; }
#book_list > li .img_box::before {
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(
			180deg,rgba(0,0,0,0.06) 0%,rgba(0,0,0,0.06) 48%,rgba(0,0,0,0.88) 100%
		),linear-gradient(
			90deg,rgba(0,0,0,0.2),transparent 55%
		);transition:background 0.5s ease;
}
#book_list > li .img_box::after {
  content:"";position:absolute;inset:0;z-index:3;opacity:0.14;pointer-events:none;background-image:radial-gradient(
		circle at 1px 1px,rgba(255,255,255,0.55) 1px,transparent 1.2px
	);background-size:18px 18px;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.07);
}
#book_list > li .img_box img {
  display:block;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(0.72)
		contrast(1.08)
		brightness(0.78);transform:scale(1.025);transition:transform 0.85s cubic-bezier(0.19,1,0.22,1),filter 0.55s ease;
}
#book_list > li:hover .img_box img {
  filter:saturate(0.96)
		contrast(1.06)
		brightness(0.92);transform:scale(1.09);
}
#book_list > li:hover .img_box::before {
  background:linear-gradient(
			180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.03) 48%,rgba(0,0,0,0.78) 100%
		);
}
#book_list > li .atag_item { position: absolute; inset: 0; z-index: 10; display: flex; align-items: flex-end; width: 100%; height: 100%; padding: 0; color: #fff; text-decoration: none; }
#book_list > li .atag_item::before { content: "PROJECT CASE"; position: absolute; left: 30px; bottom: 77px; color: #ffb400; font-family: Arial,sans-serif; font-size: 9px; font-weight: 800; line-height: 1.5; letter-spacing: 0.2em; text-transform: uppercase; transition: letter-spacing 0.4s ease,transform 0.4s ease; }
#book_list > li .atag_item::after { content: ""; position: absolute; right: 25px; bottom: 32px; width: 32px; height: 12px; background: linear-gradient(#ffb400,#ffb400) left 5px/28px 1px no-repeat; transition: transform 0.4s ease; }
#book_list > li .atag_item:hover::before { letter-spacing: 0.26em; transform: translateX(5px); }
#book_list > li .atag_item:hover::after { transform: translateX(6px); }
#book_list > li .badge {
  position:relative;display:block;width:100%;min-height:105px;margin:0;padding:52px 80px 25px 30px;overflow:hidden;color:#fff;font-size:clamp(18px,1.45vw,24px);font-weight:800;line-height:1.45;letter-spacing:0.035em;text-align:left;text-overflow:ellipsis;white-space:nowrap;background:linear-gradient(
			180deg,rgba(8,9,10,0) 0%,rgba(8,9,10,0.82) 34%,rgba(8,9,10,0.98) 100%
		);border:0;border-radius:0;text-shadow:0 5px 16px rgba(0,0,0,0.8);
}
#book_list > li .badge::before { content: ""; position: absolute; top: 51px; left: 30px; width: 55px; height: 2px; background: linear-gradient(90deg,#ffb400,rgba(255,180,0,0)); transform: translateY(-14px); transition: width 0.45s ease; }
#book_list > li .badge::after { content: ""; position: absolute; right: 29px; bottom: 33px; width: 9px; height: 9px; border-top: 1px solid #ffb400; border-right: 1px solid #ffb400; transform: rotate(45deg); transition: transform 0.4s ease; }
#book_list > li:hover .badge::before { width: 100px; }
#book_list > li:hover .badge::after { transform: translateX(6px) rotate(45deg); }
#book_list > li:nth-child(3n + 2) { transform: translateY(35px); }
#book_list > li:nth-child(3n + 2):hover { transform: translateY(26px); }
@media screen and (max-width:1280px) {
  #book_list { width: calc(100% - 70px); gap: 24px 20px; padding-top: 75px; padding-bottom: 110px; }
  #book_list > li .img_box { height: 330px; }
}
@media screen and (max-width:1024px) {
  #book_list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #book_list > li:nth-child(3n + 2) { transform: none; }
  #book_list > li:nth-child(3n + 2):hover { transform: translateY(-9px); }
  #book_list > li:nth-child(even) { transform: translateY(30px); }
  #book_list > li:nth-child(even):hover { transform: translateY(21px); }
  #book_list > li .img_box { height: clamp(300px,42vw,390px); }
}
@media screen and (max-width:767px) {
  #book_list { width: calc(100% - 40px); gap: 20px; padding-top: 65px; padding-bottom: 85px; }
  #book_list::after { top: 18px; font-size: 48px; }
  #book_list > li,#book_list > li:nth-child(even),#book_list > li:nth-child(3n + 2) { transform: none; }
  #book_list > li:hover,#book_list > li:nth-child(even):hover,#book_list > li:nth-child(3n + 2):hover { transform: translateY(-7px); }
  #book_list > li .img_box { height: 330px; }
  #book_list > li .badge { min-height: 95px; padding: 48px 70px 22px 24px; font-size: 19px; }
  #book_list > li .badge::before { left: 24px; }
  #book_list > li .atag_item::before { left: 24px; bottom: 70px; }
  #book_list > li .atag_item::after,#book_list > li .badge::after { right: 23px; }
}
@media screen and (max-width:550px) {
  #book_list { grid-template-columns: 1fr; width: calc(100% - 30px); padding-top: 0; padding-bottom: 0; }
  #book_list::before { top: 28px; width: 130px; }
  #book_list::after { display: none; }
  #book_list > li {
    clip-path:polygon(
			0 0,calc(100% - 28px) 0,100% 28px,100% 100%,28px 100%,0 calc(100% - 28px)
		);
  }
  #book_list > li .img_box { height: 300px; }
  #book_list > li::before { top: 15px; right: 17px; font-size: 48px; }
  #book_list > li .badge {min-height: 90px;padding: 46px 60px 20px 20px;font-size: 18px;}
  #book_list > li .badge::before { left: 20px; width: 45px; }
  #book_list > li .atag_item::before { left: 20px; bottom: 66px; font-size: 8px; }
  #book_list > li .atag_item::after,#book_list > li .badge::after { right: 19px; }
}
/* album_list */
#album_list { flex-wrap: wrap; }
#album_list >div {margin: 0 1px 1px 0;height: 400px;flex-grow: 1;}
#album_list >div img {width: auto;min-width: 100%;height: 400px;}

/* content_wrap */
#content_wrap {padding: 5vw 0;z-index: 5;max-width: 100%;}
#content_wrap .workframe{position: relative;}
#content_wrap .h1 {position: relative;margin-bottom: 5px;padding: 0 20px 5px 60px;border-bottom: 1px rgba(var(--black-rgb), .1) solid;line-height: 130%;color: #d8ad72;font-size: 2rem;DISPLAY: NONE;}
#content_wrap .top_box { padding: 0 20px;  }
#content_wrap .quote_box { margin-right: 30px; }
#content_wrap .h1::before { content: ""; position: absolute; left: 0; top: 50%; width: 48px; height: 1px; background: linear-gradient(90deg,#d8ad72,rgba(216,173,114,0)); }
#content_wrap:before { content: ""; position: absolute; top: -160px; left: -11vw; width: 13vw; height: 1050px; border-right: 1px solid rgb(255 180 0/35%); transform: skewX(-28deg); }
#content_wrap:after { content: ""; position: absolute; top: -9.5vw; right: 8vw; width: 2vw; height: 3vw; transform: skewX(-28deg); background: #f6b314; z-index: 0; }

/* pagenav */
#pagenav { padding-top: 50px; }
#pagenav a , #pagenav strong { margin: 0 2px; width: 35px; height: 35px; background: rgba(var(--black-rgb), .1); border-radius: 5px; display: inline-block; text-align: center; line-height: 35px; font-weight: 400; }
#pagenav strong { background: var(--primary); color: var(--white); }
#pagenav a:first-child , #pagenav a:last-child { line-height: 30px; }
#pagenav p a { margin: 0; padding: 0 20px; width: auto; border-radius: 20px; }
#pagenav p a i { margin: 0 5px 0 0; }
#pagenav p a font { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
#pagenav p:last-child a i { margin: 0 0 0 5px; }

/* describe */
#describe {margin: 2em 0 2vw;}
#describe * {vertical-align: bottom;color: #e0e0e0;}

/* form_box */
#form1 { position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; width: min(calc(100% - 60px),1180px); margin: 80px auto 120px; padding: 58px 60px 62px; overflow: hidden; color: #fff; background: radial-gradient(circle at 88% 10%,rgba(255,180,0,0.09),transparent 28%),linear-gradient(145deg,rgba(25,26,27,0.98),rgba(8,9,10,0.99)); border: 1px solid rgba(255,255,255,0.13); border-left: 4px solid #ffb400; box-shadow: 0 35px 85px rgba(0,0,0,0.45),0 0 35px rgba(255,180,0,0.05); }
#form1::before {
  content:"";position:absolute;top:0;left:0;z-index:1;width:100%;height:3px;pointer-events:none;background:linear-gradient(
			90deg,transparent 0%,rgba(255,180,0,0.1) 16%,rgba(255,180,0,0.7) 36%,#fff1b0 50%,#ffb400 64%,rgba(255,180,0,0.1) 84%,transparent 100%
		);background-repeat:no-repeat;background-size:190px 100%;background-position:-190px center;filter:drop-shadow(0 0 4px rgba(255,180,0,0.95))
		drop-shadow(0 0 10px rgba(255,180,0,0.5));animation:contactFormLineFlow 3.5s linear infinite;
}
#form1::after { content: "CONTACT"; position: absolute; right: 35px; bottom: -16px; z-index: 0; color: transparent; font-family: "Arial Black",Arial,sans-serif; font-size: clamp(80px,10vw,150px); font-weight: 900; font-style: italic; line-height: 1; letter-spacing: -0.07em; white-space: nowrap; -webkit-text-stroke: 1px rgba(255,255,255,0.035); pointer-events: none; }
#form1 > * { position: relative; z-index: 2; box-sizing: border-box; }
#form1 > article.large {
  grid-column:1/-1;position:relative;margin:0 0 10px;padding:25px 28px 25px 31px;color:rgba(255,255,255,0.73);font-size:16px;font-weight:300;line-height:1.95;letter-spacing:0.045em;background:linear-gradient(
			135deg,rgba(255,255,255,0.06),rgba(255,255,255,0.018)
		);border:1px solid rgba(255,255,255,0.1);border-left:3px solid #ffb400;
}
#form1 > article.large::before { content: "PROFESSIONAL ENGINEERING CONSULTATION"; display: block; margin-bottom: 8px; color: #ffb400; font-family: Arial,sans-serif; font-size: 10px; font-weight: 800; line-height: 1.5; letter-spacing: 0.19em; }
#form1 > article.large span { color: #ffb400 !important; font-weight: 700; }
#form1 > p { min-width: 0; margin: 0; }
#form1 > p.large,#form1 > p.note { grid-column: 1/-1; }
#form1 > p.note { margin: 0 0 4px; padding-left: 3px; color: rgba(255,255,255,0.48); font-size: 13px; font-weight: 400; line-height: 1.7; letter-spacing: 0.04em; }
#form1 > p.note span { color: #ffb400; font-weight: 800; }
#form1 input,#form1 select,#form1 textarea { display: block; width: 100%; margin: 0; color: #fff; font-family: inherit; font-size: 15px; font-weight: 400; line-height: 1.5; letter-spacing: 0.035em; background-color: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.14); border-left: 2px solid rgba(255,180,0,0.5); border-radius: 0; outline: none; box-shadow: none; transition: border-color 0.35s ease,background-color 0.35s ease,box-shadow 0.35s ease; }
#form1 input,#form1 select { height: 58px; padding: 0 19px; }
#form1 textarea { min-height: 185px; padding: 18px 19px; line-height: 1.85; resize: vertical; }
#form1 select {
  padding-right:52px;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#ffb400 50%),linear-gradient(135deg,#ffb400 50%,transparent 50%),linear-gradient(
			90deg,rgba(255,255,255,0.1),rgba(255,255,255,0.1)
		);background-position:calc(100% - 22px) 25px,calc(100% - 16px) 25px,calc(100% - 46px) 50%;background-size:6px 6px,6px 6px,1px 30px;background-repeat:no-repeat;
}
#form1 select option { color: #111; background: #fff; }
#form1 input::placeholder,#form1 textarea::placeholder { color: rgba(255,255,255,0.5); opacity: 1; }
#form1 input:hover,#form1 select:hover,#form1 textarea:hover { border-color: rgba(255,180,0,0.45); background-color: rgba(255,255,255,0.065); }
#form1 input:focus,#form1 select:focus,#form1 textarea:focus { border-color: rgba(255,180,0,0.8); border-left-color: #ffb400; background-color: rgba(255,180,0,0.055); box-shadow: 0 0 0 3px rgba(255,180,0,0.07),0 0 22px rgba(255,180,0,0.08); }
#form1 input:-webkit-autofill,#form1 input:-webkit-autofill:hover,#form1 input:-webkit-autofill:focus { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 1000px #171819 inset; transition: background-color 9999s ease-in-out 0s; }
#form1 > p.checknum { grid-column: 1/2; }
#form1 > p.checknum font.nowrap_box {display: grid;grid-template-columns: minmax(0,1fr) auto;align-items: center;gap: 10px;width: 100%;font-size: 0;}
#form1 #Checknum { min-width: 0; height: 58px; text-transform: uppercase; }
#form1 #rand-img {display: block;width: auto !important;padding: 5px 9px;object-fit: contain;background: #fff;border: 2px solid rgba(255,180,0,0.55) !important;cursor: pointer;transition: border-color 0.35s ease,box-shadow 0.35s ease,opacity 0.35s ease;}
#form1 #rand-img:hover { opacity: 0.88; border-color: #ffb400 !important; box-shadow: 0 0 18px rgba(255,180,0,0.18); }
#form1 > p:last-child { grid-column: 2/3; display: flex; align-items: center; justify-content: flex-end; }
#form1 #btnOK {
  position:relative;display:inline-flex;align-items:center;justify-content:space-between;width:230px;height:58px;margin:0;padding:0 68px 0 32px;overflow:hidden;color:#111;font-size:16px;font-weight:800;line-height:1;letter-spacing:0.12em;text-decoration:none;background:linear-gradient(
			135deg,#ffd044 0%,#ffb400 68%,#e99000 100%
		);border:1px solid rgba(255,220,112,0.78);border-radius:0;box-shadow:0 16px 38px rgba(0,0,0,0.38),0 0 30px rgba(255,180,0,0.12);transition:transform 0.35s ease,box-shadow 0.35s ease;
}
#form1 #btnOK::before { content: ""; position: absolute; top: -70%; left: -50%; width: 30%; height: 240%; background: rgba(255,255,255,0.38); transform: rotate(22deg); transition: left 0.55s ease; }
#form1 #btnOK::after { content: ""; position: absolute; top: 50%; right: 28px; width: 30px; height: 12px; background: linear-gradient(#111,#111) left 5px/26px 2px no-repeat; transform: translateY(-50%); }
#form1 #btnOK span { position: relative; z-index: 2; }
#form1 #btnOK:hover { color: #111; transform: translateY(-5px); box-shadow: 0 22px 45px rgba(0,0,0,0.45),0 0 34px rgba(255,180,0,0.25); }
#form1 #btnOK:hover::before { left: 125%; }
#form1 #btnOK:hover::after { transform: translate(6px,-50%); }
#form1 > p:last-child::after { content: ""; position: absolute; top: 50%; right: 29px; z-index: 5; width: 9px; height: 9px; border-top: 2px solid #111; border-right: 2px solid #111; transform: translateY(-50%) rotate(45deg); pointer-events: none; transition: right 0.35s ease; }
#form1 > p:last-child:hover::after { right: 23px; }
@keyframes contactFormLineFlow {
  0% { background-position: -190px center; }
  70%,100% { background-position: calc(100% + 190px) center; }
}
@media screen and (max-width:1024px) {
  #form1 { width: calc(100% - 60px); margin-top: 70px; margin-bottom: 100px; padding: 48px 42px 52px; }
}
@media screen and (max-width:767px) {
  #form1 {
    grid-template-columns:1fr;gap:14px;width:calc(100% - 40px);margin-top:55px;margin-bottom:80px;padding:38px 28px 42px;clip-path:polygon(
			0 0,calc(100% - 32px) 0,100% 32px,100% 100%,32px 100%,0 calc(100% - 32px)
		);
  }
  #form1 > article.large,#form1 > p.large,#form1 > p.note,#form1 > p.checknum,#form1 > p:last-child { grid-column: 1; }
  #form1 > article.large { padding: 22px 21px 22px 24px; font-size: 14px; line-height: 1.85; }
  #form1 > p:last-child { justify-content: flex-start; margin-top: 8px; }
  #form1 #btnOK { width: 220px; }
}
@media screen and (max-width:550px) {
  #form1 { width: calc(100% - 30px); margin-top: 45px; margin-bottom: 65px; padding: 31px 19px 35px; }
  #form1::after { display: none; }
  #form1 > article.large { padding: 19px 17px 19px 20px; font-size: 13px; }
  #form1 > article.large::before { font-size: 8px; letter-spacing: 0.13em; }
  #form1 input,#form1 select { height: 54px; padding-left: 15px; font-size: 14px; }
  #form1 textarea { min-height: 160px; padding: 15px; font-size: 14px; }
  #form1 #Checknum {height: 54px;width: 100%;max-width: 100%;}
  #form1 #rand-img {min-width: 73px;height: auto;padding-right: 5px;padding-left: 5px;}
  #form1 #btnOK { width: 100%; height: 54px; }
  #form1 > p:last-child::after { right: 28px; }
}
/* lodbg */
[data-action="loader"] { width: 100vw; height: 100vh; background: rgba(var(--black-rgb), .3); line-height: 100vh; top: 0; left: 0; opacity: 0; z-index: -1; }
[data-action="loader"] .loader_circle { border: 2px rgba(var(--black-rgb), .6) solid; border-left-color: rgba(var(--white-rgb), .4); }
#lodbg { opacity: 1; z-index: 99999; }

@media screen and (min-width: 1281px){
	#sub_banner a, #page_title {padding-top: 80px;height: 400px;}
	aside >ul >li:hover .h4 a , aside >ul >li:hover .h4 i {color: #ffffff;}
	#article_list li:hover .h3 { opacity: 0; }
	#article_list li img { height: 500px; }
	#article_list li:hover .info_box {bottom: 0;opacity: 1;}
	
	#pagenav a:hover { background: var(--primary); color: var(--white); }
	#pagenav a:hover font , #pagenav a:hover i , #pagenav a:hover i:before { color: var(--white); }
}
@media screen and (max-width: 1024px){

}
@media screen and (max-width: 768px){
	#article_list li img { height: 50vw; }
	
}
@media screen and (max-width: 640px){
	#article_list li img { height: 320px; }
	
	#album_list >div , #album_list >div img { height: 40vw; }
}
@media screen and (max-width: 550px){
	aside >ul{margin: 50px 0 30px;}
	aside >ul >li .h4 a{font-size: 16px;}
	#community { margin-top: 10px; }
	#pagenav p a i , #pagenav p:last-child a i { margin: 0; }
	#sub_banner a, #page_title{height: 250px;}
}
@media screen and (max-width:480px) {
  #content_wrap:after { top: 33px; display: none; }
  #content_wrap .h1 { font-size: 1.75rem; }
  #album_list >div,#album_list >div img { height: 250px; }
  #pagenav a,#pagenav strong { margin: 0; width: 24px; height: 24px; line-height: 24px; font-size: 14px; }
  #pagenav a:first-child,#pagenav a:last-child { line-height: 20px; }
  #pagenav p a i,#pagenav p:last-child a i { font-size: 20px; }
}