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

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 */
#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)}
[data-action="loader"] .loader_circle {width:50px;height:50px;border-radius:50%}

/* #lodbg */
[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 .menu {background:var(--primary)}

/* #menubtn */
header #menubtn[data-type="1"] a span {background:var(--secondary)}

/* #wrap */
#wrap {z-index:6}
#wrap .page_area {margin:auto;width:100%;z-index:2}
#wrap .shadow {box-shadow:0 0 20px rgba(var(--black-rgb),.2)}
#wrap aside {display:none}

/* #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:rgba(var(--black-rgb),.4);top:0;left:0;z-index:2;content:""}

/* #page_title */
#page_title>div {margin:auto}
#page_title .pag_tit {line-height:1.3em;letter-spacing:.15em;font-size:2em}
.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}
.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>ul {margin-top:5vw}
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 15px}
aside>ul>li h4 a {padding:10px 5px 10px 10px;font-weight:300;font-size:18px}
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}

/* #articlePage */
#articlePage .list_box {display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 22px;margin:0;padding:0;list-style:none;white-space:normal!important}
#articlePage .list_box>li {position:relative;display:block!important;width:100%!important;min-width:0;aspect-ratio:1/1;margin:0;padding:0;overflow:hidden;background: #e8e8e8;border:1px solid #dce3e8;transition:transform .4s cubic-bezier(.22,.61,.36,1),border-color .35s ease}
#articlePage .list_box>li>img {display:block;width:100%;height:100%;object-fit:cover;transition:transform .85s cubic-bezier(.22,.61,.36,1),filter .4s ease}
#articlePage .list_box>li:before {content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(5,39,67,0) 38%,rgba(5,39,67,.08) 55%,rgba(5,39,67,.82) 100%);transition:opacity .4s ease}
#articlePage .list_box>li:after {content:"";position:absolute;left:0;bottom:0;z-index:5;width:0;height:3px;background:linear-gradient(90deg,#ef4438,#ff972d);transition:width .45s cubic-bezier(.22,.61,.36,1);pointer-events:none}
#articlePage .list_box>li>.h3 {left:25px;right:25px;bottom:24px;z-index:3;margin:0;padding:0 45px 0 0;overflow:hidden;color:#fff!important;font-size:19px;font-weight:700;line-height:1.55;letter-spacing:.04em;text-align:left;white-space:nowrap;text-overflow:ellipsis;transition:opacity .3s ease,transform .4s cubic-bezier(.22,.61,.36,1);height:auto}
#articlePage .list_box>li>.h3:before {content:"";display:block;width:32px;height:2px;margin-bottom:12px;background:linear-gradient(90deg,#ef4438,#ff972d)}
#articlePage .list_box>li>.atag_item {inset:0;z-index:4;width:100%;height:100%}
#articlePage .list_box .info_box {left:0;right:0;bottom:0;z-index:6;padding:29px 27px 27px;background:linear-gradient(145deg,rgba(5,43,73,.97) 0%,rgba(7,50,82,.98) 100%);color:#fff;opacity:0;transform:translateY(35px);transition:opacity .4s ease,transform .45s cubic-bezier(.22,.61,.36,1)}
#articlePage .list_box .info_box:before {content:"ARTICLE";display:block;margin-bottom:9px;color:#ff9a48;font-size:9px;font-weight:700;line-height:1.5;letter-spacing:.2em}
#articlePage .list_box .info_box>p {display:-webkit-box;margin:0;overflow:hidden;color:#fff!important;font-size:25px;font-weight:700;line-height:1.55;letter-spacing:.04em;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;height:auto}
#articlePage .list_box .info_box .cate {position:relative;z-index:8;max-width:100%;margin-top:10px;padding-left:18px;color:#ff9a48!important;font-size:15px;font-weight:600;line-height:1.6;letter-spacing:.1em;display:flex;align-items:center}
#articlePage .list_box .info_box .cate:before {content:"";position:absolute;left:0;top:50%;width:9px;height:1px;background:#ef4438;transform:translateY(-50%)}
#articlePage .list_box .info_box article {display:-webkit-box;min-height:50px;margin-top:15px;overflow:hidden;color:rgba(255,255,255,.67);font-size:13px;line-height:1.8;letter-spacing:.03em;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}
#articlePage .list_box .info_box .more_btn {position:relative;z-index:8;margin-top:20px;padding:0 42px 0 0;background:transparent!important;color:#fff!important;font-size:10px;font-weight:600;line-height:1.6;letter-spacing:.12em}
#articlePage .list_box .info_box .more_btn:before {content:"";position:absolute;right:0;top:50%;width:28px;height:1px;background:#ef4438;transform:translateY(-50%);transition:width .35s ease}
#articlePage .list_box .info_box .more_btn:after {content:"";position:absolute;right:0;top:50%;width:6px;height:6px;margin-top:-3px;border-top:1px solid #ef4438;border-right:1px solid #ef4438;transform:rotate(45deg)}
#articlePage .list_box .info_box>.atag_item {inset:0;z-index:7;width:100%;height:100%}
#articlePage .list_box .info_box .cate,#articlePage .list_box .info_box .more_btn {pointer-events:none}
#articlePage .list_box>li:hover {border-color:rgba(10,49,85,.25);transform:translateY(-6px)}
#articlePage .list_box>li:hover>img {transform:scale(1.06);filter:brightness(.78)}
#articlePage .list_box>li:hover:after {width:100%}
#articlePage .list_box>li:hover>.h3 {opacity:0;transform:translateY(15px)}
#articlePage .list_box>li:hover .info_box {opacity:1;transform:translateY(0)}
#articlePage .list_box>li:hover .more_btn:before {width:36px}

/* #news_list */
#news_list {display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px;margin:0;padding:0;list-style:none;white-space:normal !important}
#news_list>li {position:relative;display:flex;flex-direction:column;width:100%;min-width:0;padding:0;overflow:hidden;border:1px solid #dce3e8;background:#fff;transition:transform .4s cubic-bezier(.22,.61,.36,1),border-color .35s ease}
#news_list>li>.over_hid {aspect-ratio:4 / 3;background:#eef2f4}
#news_list>li>.over_hid:after {content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,45,77,0) 55%,rgba(6,45,77,.1) 100%);pointer-events:none}
#news_list img {display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
#news_list .info_box {flex:1;padding:24px 25px 27px}
#news_list .info_box:after {content:"";position:absolute;left:0;bottom:0;width:0;height:3px;background:linear-gradient(90deg,#ef4438,#ff972d);transition:width .45s cubic-bezier(.22,.61,.36,1)}
#news_list .info_box>p {display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 15px;white-space:normal}
#news_list .info_box>p>a {position:relative;z-index:6;max-width:55%;padding-left:18px;color:#ef4438;font-size:13px;font-weight:700;line-height:1;letter-spacing:.1em;display:flex;align-items:center}
#news_list .info_box>p>a:before {content:"";position:absolute;left:0;top:50%;width:9px;height:2px;background:#ef4438;transform:translateY(-50%)}
#news_list .time {flex:none;color:#97a1aa;font-size:13px;font-weight:500;line-height:1.5;letter-spacing:.05em}
#news_list .info_box .h3 {display:-webkit-box;min-height:62px;margin:0;overflow:hidden;color:#0a3155;font-size:20px;font-weight:700;line-height:1.6;letter-spacing:.035em;-webkit-box-orient:vertical;-webkit-line-clamp:2;transition:color .35s ease}
#news_list .atag_item {inset:0;z-index:5;width:100%;height:100%}
#news_list>li:hover {border-color:rgba(10,49,85,.22);transform:translateY(-6px)}
#news_list>li:hover img {transform:scale(1.055)}
#news_list>li:hover .info_box .h3 {color:#ef4438}
#news_list>li:hover .info_box:after {width:100%}
#news_list>li:before {content:"NEWS";position:absolute;z-index:3;top:18px;left:18px;padding:7px 11px;background:rgba(7,45,76,.9);color:#fff;font-size:12px;font-weight:700;line-height:1;letter-spacing:.18em;pointer-events:none}

/* #faq_list */
#faq_list {counter-reset:faqItem;width:100%;margin:0;padding:0;list-style:none;border-top:1px solid #dce3e8}
#faq_list>li {position:relative;counter-increment:faqItem;margin:0;padding:0;border-bottom:1px solid #dce3e8;transition:border-color .35s ease}
#faq_list>li:before {content:"";position:absolute;left:0;bottom:-1px;z-index:2;width:0;height:2px;background:linear-gradient(90deg,#ef4438,#ff972d);transition:width .45s cubic-bezier(.22,.61,.36,1)}
#faq_list li .title {position:relative;padding:31px 80px 31px 75px;color:#0a3155;transition:color .3s ease}
#faq_list li .title:before {content:counter(faqItem,decimal-leading-zero);position:absolute;left:0;top:50%;color:#cdd5db;font-size:20px;font-weight:300;line-height:1;letter-spacing:.06em;transform:translateY(-50%);transition:color .3s ease}
#faq_list li .title font {position:relative;padding-left:25px;color:inherit;font-size:19px;font-weight:700;line-height:1.65;letter-spacing:.04em}
#faq_list li .title font:before {content:"";position:absolute;left:0;top:.78em;width:8px;height:2px;background:#ef4438;transition:width .35s ease}
#faq_list li .title i {position:absolute;top:50%;right:6px;display:flex;align-items:center;justify-content:center;width:42px;height:42px;margin-top:-21px;border:1px solid #d4dce2;border-radius:50%;color:#0a3155;font-size:14px;line-height:1;transform:rotate(0);-webkit-transform:rotate(0);transition:all .35s cubic-bezier(.22,.61,.36,1);-webkit-transition:all .35s cubic-bezier(.22,.61,.36,1)}
#faq_list li .title:hover {color:#ef4438}
#faq_list li .title:hover:before {color:#ef4438}
#faq_list li .title:hover font:before {width:14px}
#faq_list li .title:hover i {border-color:#ef4438;color:#ef4438}
#faq_list li.current:before {width:100%}
#faq_list li.current .title {color:#0a3155}
#faq_list li.current .title:before {color:#ef4438}
#faq_list li.current .title font:before {width:14px}
#faq_list li.current .title i {border-color:#ef4438;background:#ef4438;color:#fff;transform:rotate(180deg);-webkit-transform:rotate(180deg)}
#faq_list li .info {padding:0 80px 37px 100px;color:#66737d;font-size:14px;line-height:2;letter-spacing:.035em}
#faq_list li .info>*:first-child {margin-top:0}
#faq_list li .info>*:last-child {margin-bottom:0}
#faq_list li .info p {margin:0 0 18px}
#faq_list li .info p+p {margin-top:18px}
#faq_list li .info b,#faq_list li .info strong {color:#0a3155;font-weight:700}
#faq_list li .info b span,#faq_list li .info strong span {color:inherit}
#faq_list li .info a {color:#ef4438;text-decoration:none;border-bottom:1px solid rgba(239,68,56,.35);transition:color .3s ease,border-color .3s ease}
#faq_list li .info a:hover {color:#0a3155;border-color:#0a3155}
#faq_list li.current .info {position:relative}
#faq_list li.current .info:before {content:"ANSWER";display:block;margin-bottom:13px;color:#ef4438;font-size:9px;font-weight:700;line-height:1.5;letter-spacing:.2em}

/* #book_list */
#book_list {display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 22px;margin:0;padding:0;list-style:none;white-space:normal!important}
#book_list>li {position:relative;display:block!important;width:100%!important;min-width:0;padding:0;overflow:hidden;background:#fff;border:1px solid #dce3e8;transition:transform .4s cubic-bezier(.22,.61,.36,1),border-color .35s ease}
#book_list .img_box {position:relative;width:100%;aspect-ratio:4 / 3;overflow:hidden;background:#eef2f4}
#book_list .img_box:after {content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(5,39,67,0) 45%,rgba(5,39,67,.58) 100%);transition:background .4s ease}
#book_list .img_box img {display:block;width:100%;height:100%;object-fit:cover;transition:transform .85s cubic-bezier(.22,.61,.36,1)}
#book_list .atag_item {inset:0;z-index:3;align-items:flex-end;width:100%;height:100%;padding:0}
#book_list .atag_item:before {content:"PROJECT CASE";position:absolute;left:24px;bottom:65px;z-index:2;color:rgba(255,255,255,.62);font-size:9px;font-weight:700;line-height:1.5;letter-spacing:.18em}
#book_list .atag_item:after {content:"";position:absolute;right:24px;bottom:30px;z-index:2;width:32px;height:1px;background:#ef4438;transition:width .35s ease}
#book_list .badge {position:relative;z-index:2;display:block;width:100%;max-width:none;margin:0;padding:28px 78px 27px 24px;overflow:hidden;background:transparent!important;color:#fff!important;border-radius:0;font-size: 20px;font-weight:700;line-height:1.5;letter-spacing:.045em;text-overflow:ellipsis;white-space:nowrap;height: auto;text-align: left;}
#book_list>li:after {content:"";position:absolute;left:0;bottom:0;z-index:4;width:0;height:3px;background:linear-gradient(90deg,#ef4438,#ff972d);transition:width .45s cubic-bezier(.22,.61,.36,1)}
#book_list>li:hover {border-color:rgba(10,49,85,.22);transform:translateY(-6px)}
#book_list>li:hover .img_box img {transform:scale(1.055)}
#book_list>li:hover .img_box:after {background:linear-gradient(180deg,rgba(5,39,67,.04) 30%,rgba(5,39,67,.76) 100%)}
#book_list>li:hover .atag_item:after {width:45px}
#book_list>li:hover:after {width:100%}

/* #album_list */
#album_list {display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;align-items:stretch}
#album_list>div {position:relative;min-width:0;overflow:hidden;border:1px solid #dce3e8;background:#eef2f4;transition:transform .4s cubic-bezier(.22,.61,.36,1),border-color .35s ease}
#album_list>div:before {content:"";position:absolute;left:0;bottom:0;z-index:3;width:0;height:3px;background:linear-gradient(90deg,#ef4438,#ff972d);transition:width .45s cubic-bezier(.22,.61,.36,1);pointer-events:none}
#album_list>div:after {content:"\f002";position:absolute;right:20px;top:20px;z-index:3;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid rgba(255,255,255,.65);border-radius:50%;background:rgba(6,45,77,.45);color:#fff;font-family:"FontAwesome";font-size:14px;font-weight:normal;line-height:1;opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease,background .35s ease;pointer-events:none;backdrop-filter:blur(5px)}
#album_list a {position:relative;width:100%;aspect-ratio:4 / 3;overflow:hidden}
#album_list a:after {content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(5,39,67,0) 40%,rgba(5,39,67,.22) 100%);opacity:.45;transition:opacity .4s ease,background .4s ease;pointer-events:none}
#album_list img {display:block;width:100%;height:100%;object-fit:cover;transition:transform .85s cubic-bezier(.22,.61,.36,1),filter .45s ease}
#album_list>div:hover {border-color:rgba(10,49,85,.25);transform:translateY(-5px)}
#album_list>div:hover:before {width:100%}
#album_list>div:hover:after {opacity:1;transform:translateY(0);background:rgba(239,68,56,.9)}
#album_list>div:hover a:after {opacity:1;background:linear-gradient(180deg,rgba(5,39,67,.04) 30%,rgba(5,39,67,.38) 100%)}
#album_list>div:hover img {transform:scale(1.06)}

/* #content_wrap */
#content_wrap {padding:5vw 0;z-index:1}
#content_wrap h1 {margin-bottom:5px;padding:0 20px 5px;border-bottom:1px rgba(var(--black-rgb),.1) solid;line-height:130%}
#content_wrap .top_box {padding:0 20px}
#content_wrap .quote_box {margin-right:30px}

/* #pagenav */
#pagenav {padding:20px}
#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 2em}
#describe * {vertical-align:bottom}

/* #form1 */
#form1 {--form-navy:#0a3155;--form-red:#ef4438;--form-orange:#ff972d;--form-text:#596771;--form-muted:#8b969f;--form-line:#dce3e8;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 24px;width:100%;margin:0;padding:48px 52px;border:1px solid #dce3e8;background:#fff}
#form1>article,#form1>.large {grid-column:1 / -1}
#form1>article {margin:0 0 6px;color:var(--form-text);font-size:15px;line-height:2;letter-spacing:.03em}
#form1>article>*:first-child {margin-top:0}
#form1>article>*:last-child {margin-bottom:0}
#form1>article strong,#form1>article b {color:var(--form-navy);font-weight:700}
#form1>p {position:relative;margin:0}
#form1 .note {margin:0 0 10px;padding-bottom:20px;border-bottom:1px solid var(--form-line);color:#8b969f;font-size:12px;line-height:1.7;letter-spacing:.04em}
#form1 .note span {margin-right:5px;color:var(--form-red)!important}
#form1 input[type="text"],#form1 input[type="email"],#form1 input[type="tel"],#form1 select,#form1 textarea {display:block;width:100%;margin:0;padding:0 18px;border:1px solid var(--form-line);border-radius:0;outline:0;background:#fff;color:var(--form-navy);font-family:inherit;font-size:14px;line-height:1.5;letter-spacing:.035em;box-shadow:none;transition:border-color .3s ease,background .3s ease}
#form1 input[type="text"],#form1 input[type="email"],#form1 input[type="tel"],#form1 select {height:56px}
#form1 textarea {min-height:180px;padding-top:17px;padding-bottom:17px;line-height:1.9;resize:vertical}
#form1 input::placeholder,#form1 textarea::placeholder {color:#9aa4ac;opacity:1}
#form1 input:focus,#form1 select:focus,#form1 textarea:focus {border-color:#0a3155;background:#fcfdfe}
#form1 select {appearance:none;-webkit-appearance:none;padding-right:50px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%230a3155' stroke-width='1.4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center;background-size:12px 8px}
#form1 select option {color:#333;background:#fff}
#form1 .checknum {display:flex;align-items:center}
#form1 .checknum>font {display:flex!important;align-items:center;width:100%;white-space:normal!important}
#form1 .checknum #Checknum {flex:1;min-width:0}
#form1 .checknum #rand-img {flex:none;height:55px;min-width:110px;margin-left:10px;padding:12px 10px;border:1px solid var(--form-line)!important;background:#f7f9fa;object-fit:contain}
#form1>p:last-child {display:flex;align-items:center;justify-content:flex-end}
#form1 #btnOK {position:relative;z-index:1;min-width:170px;margin:0;padding:17px 62px 17px 30px;overflow:hidden;border:1px solid var(--form-navy);border-radius:0;background:var(--form-navy)!important;color:#fff!important;font-size:13px;font-weight:600;line-height:1.5;letter-spacing:.1em;transition:border-color .35s ease,color .35s ease}
#form1 #btnOK:before {content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--form-red),var(--form-orange));transform:translateX(-101%);transition:transform .4s cubic-bezier(.22,.61,.36,1)}
#form1 #btnOK:after {content:"";position:absolute;right:27px;top:50%;width:28px;height:1px;background:#fff;transform:translateY(-50%);transition:width .35s ease}
#form1 #btnOK:hover {border-color:var(--form-red)}
#form1 #btnOK:hover:before {transform:translateX(0)}
#form1 #btnOK:hover:after {width:38px}
#form1 p:has(#Title),#form1 p:has(#Name),#form1 p:has(#Phone),#form1 p:has(#Email) {position:relative}
#form1 p:has(#Title):before,#form1 p:has(#Name):before,#form1 p:has(#Phone):before,#form1 p:has(#Email):before {content:"";position:absolute;left:0;bottom:0;z-index:2;width:0;height:2px;background:linear-gradient(90deg,var(--form-red),var(--form-orange));transition:width .35s ease;pointer-events:none}
#form1 p:has(#Title):focus-within:before,#form1 p:has(#Name):focus-within:before,#form1 p:has(#Phone):focus-within:before,#form1 p:has(#Email):focus-within:before {width:100%}
[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 */
#lodbg {opacity:1;z-index:99999}

/* @media */
@media screen and (max-width:1199px) {
  #articlePage .list_box { gap: 20px 18px }
  #articlePage .list_box>li>.h3 { left: 21px; right: 21px; bottom: 21px; font-size: 17px }
  #articlePage .list_box .info_box { padding: 24px 22px 23px }
  #articlePage .list_box .info_box>p { font-size: 17px }
  #news_list { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 25px 18px }
  #news_list .info_box { padding: 21px 20px 24px }
  #news_list .info_box .h3 { font-size: 17px }
  #album_list { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px }
}
@media screen and (max-width:991px) {
  #articlePage .list_box { grid-template-columns: repeat(2,minmax(0,1fr)) }
  #news_list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 18px }
  #news_list .info_box .h3 { min-height: 54px }
  #faq_list li .title { min-height: 95px; padding: 27px 65px 27px 58px }
  #faq_list li .title:before { font-size: 17px }
  #faq_list li .title font { padding-left: 20px; font-size: 17px }
  #faq_list li .title i { right: 0; width: 38px; height: 38px; margin-top: -19px }
  #faq_list li .info { padding: 0 65px 32px 78px }
  #book_list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 18px }
  #book_list .badge { font-size: 17px }
  #album_list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px }
  #form1 { padding: 40px 35px; gap: 18px }
}
@media screen and (max-width:767px) {
  #faq_list li .title { min-height: 82px; padding: 22px 48px 22px 42px }
  #faq_list li .title:before { font-size: 14px }
  #faq_list li .title font { padding-left: 15px; font-size: 16px; line-height: 1.6 }
  #faq_list li .title font:before { width: 6px }
  #faq_list li .title i { right: 0; width: 34px; height: 34px; margin-top: -17px; font-size: 12px }
  #faq_list li .info { padding: 0 10px 28px 57px; font-size: 14px; line-height: 1.9 }
  #form1 { grid-template-columns: 1fr; padding: 30px 22px; gap: 15px }
  #form1>article,#form1>.large { grid-column: auto }
  #form1>article { font-size: 14px; line-height: 1.9 }
  #form1 input[type="text"],#form1 input[type="email"],#form1 input[type="tel"],#form1 select { height: 52px }
  #form1 textarea { min-height: 150px }
  #form1 .checknum #rand-img { height: 52px!important; min-width: 100px }
  #form1>p:last-child { justify-content: flex-start; margin-top: 8px }
  #form1 #btnOK { width: 100%; min-width: 0 }
}
@media screen and (max-width:640px) {
  #articlePage .list_box { grid-template-columns: 1fr; gap: 16px }
  #articlePage .list_box>li { aspect-ratio: auto; overflow: visible; background: #fff }
  #articlePage .list_box>li>img { position: relative; width: 100%; aspect-ratio: 4/3; object-fit: cover }
  #articlePage .list_box>li:before { display: none }
  #articlePage .list_box>li>.h3 { display: none }
  #articlePage .list_box .info_box { position: relative!important; left: auto; right: auto; bottom: auto; padding: 23px 20px 24px; opacity: 1; transform: none; background: #0a3155 }
  #articlePage .list_box .info_box>p { font-size: 17px }
  #articlePage .list_box .info_box article { min-height: 0 }
  #articlePage .list_box>li:hover { transform: none }
  #articlePage .list_box>li:hover>img { transform: none; filter: none }
  #news_list { grid-template-columns: 1fr; gap: 18px }
  #news_list .info_box { padding: 20px 19px 22px }
  #news_list .info_box .h3 { min-height: 0; font-size: 17px }
  #news_list>li:before { top: 14px; left: 14px }
  #book_list { grid-template-columns: 1fr; gap: 16px }
  #book_list .badge { padding: 25px 65px 23px 20px; font-size: 16px }
  #book_list .atag_item:before { left: 20px; bottom: 58px }
  #book_list .atag_item:after { right: 20px; bottom: 26px }
  #album_list { grid-template-columns: 1fr; gap: 14px }
  #album_list>div:after { right: 15px; top: 15px; width: 36px; height: 36px; font-size: 13px }
  #page_title .pag_tit { font-size: 1.25em }
  #sub_banner a,#page_title { height: 280px }
  #sub_banner a img { object-position: 10% 50% }
}
@media screen and (max-width:550px) {
  #community { margin-top: 10px }
  #pagenav p a i,#pagenav p:last-child a i { margin: 0 }
}
@media screen and (max-width:480px) {
  #faq_list li .title { padding-left: 35px; padding-right: 42px }
  #faq_list li .title font { font-size: 15px }
  #faq_list li .info { padding-left: 35px; padding-right: 0 }
  #form1 { padding: 25px 17px }
  #form1 .checknum>font { display: grid!important; grid-template-columns: minmax(0,1fr) 100px; gap: 8px }
  #form1 .checknum #rand-img { width: 100%!important; min-width: 0; margin-left: 0 }
}
@media screen and (max-width:450px) {
  #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 }
}
@media screen and (min-width:1281px) {
  #sub_banner a,#page_title { padding-top: 100px; height: 400px }
  header #webmenu nav>ul>li>p a { color: white }
  aside>ul>li:hover h4 a,aside>ul>li:hover h4 i { color: var(--primary) }
  #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) }
}