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

[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 {}

/* #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)}

/* #sub_banner */
#sub_banner {top:0;left:0}
#sub_banner:before {content:"";position: absolute;z-index: 2;left: 0;top: 0;width: 27%;height: 27%;background: rgb(255 255 255 / 48%);clip-path: polygon(0 0,100% 0,61% 100%,0 100%);pointer-events: none;z-index: 22;}


#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:rgb(0 0 0 / 3%);top:0;left:0;z-index:2;content:""}
#sub_banner:after {content:"";position:absolute;z-index:3;left:0;bottom:0;width:100%;height:70px;background:#ffffff;clip-path:polygon(0% 100%,100% 0%,0% 100%,33% 0%,100% 100%,50% 100%);pointer-events:none}

/* #page_title */
#page_title>div {margin:auto}
#page_title .pag_tit {line-height:1.3em;letter-spacing:.15em;font-size:2em;text-shadow: 1px 6px 4px rgb(0 0 0 / 67%);}
.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;text-shadow: 1px 2px 4px rgb(0 0 0 / 66%);}
.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:""}

/* #category_area */
#category_area {position:relative;width:min(88%,1200px);margin:0 auto 5px;z-index:30}
#category_area .category_mobile_head {display:none}
#category_area .category_nav_box {position:relative;width:100%}

/* #category_nav */
#category_nav {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;width:100%;margin:0;padding:0;list-style:none;white-space:normal}
#category_nav>li {position:relative;flex:0 0 auto}
#category_nav>li>.h4 {position:relative;display:flex;align-items:center;justify-content:center;min-height:52px;margin:0}
#category_nav>li>.h4>a {position:relative;display:flex;align-items:center;justify-content:center;min-width:145px;min-height:52px;padding:0 28px;border:1px solid #d5d5d5;background:#fff;font-size:16px;font-weight:600;line-height:1.5;letter-spacing:.05em;color:#333;transition:background .35s,border-color .35s,color .35s,transform .35s,box-shadow .35s}
#category_nav>li>.h4>a:before {content:"";position:absolute;left:-1px;top:-1px;width:3px;height:calc(100%+2px);background:#e50011;transform:scaleY(0);transform-origin:center;transition:transform .35s}
#category_nav>li>.h4>a:hover {border-color:#e50011;color:#e50011;transform:translateY(-2px);box-shadow:0 8px 20px rgba(229,0,17,.08)}
#category_nav>li>.h4>a:hover:before {transform:scaleY(1)}
#category_nav>li.current>.h4>a,#category_nav>li.action>.h4>a {border-color:#e50011;background:#e50011;color:#fff;box-shadow:0 8px 22px rgba(229,0,17,.14)}
#category_nav>li.current>.h4>a:before,#category_nav>li.action>.h4>a:before {display:none}
#category_nav>li>.h4>b {position:absolute;right:8px;top:50%;z-index:6;display:flex;align-items:center;justify-content:center;width:30px;height:30px;margin:0;border:0;background:transparent;transform:translateY(-50%);cursor:pointer}
#category_nav>li>.h4>b i {font-size:12px;color:#8e8e8e;transition:color .3s,transform .3s}
#category_nav>li>.h4>b:hover i {color:#e50011}
#category_nav>li.current>.h4>b i,#category_nav>li.action>.h4>b i,#category_nav>li[data-type="2"]>.h4>b i {color:#fff}
#category_nav>li[data-type="2"]>.h4>b i {transform:rotate(180deg)}
#category_nav>li:has(>.h4>b)>.h4>a {padding-right:43px}
#category_nav>li>ul {position:absolute;left:50%;top:calc(100%+12px);display:none;width:240px;margin:0;padding:8px;list-style:none;background:#fff;border:1px solid #dedede;box-shadow:0 16px 38px rgba(20,25,30,.12);transform:translateX(-50%);z-index:50}
#category_nav>li>ul:before {content:"";position:absolute;left:50%;top:-6px;width:10px;height:10px;background:#fff;border-top:1px solid #dedede;border-left:1px solid #dedede;transform:translateX(-50%) rotate(45deg)}
#category_nav>li>ul li {position:relative;width:100%;text-align:left}
#category_nav>li>ul li+li {margin-top:3px}
#category_nav>li>ul li a {position:relative;display:block;padding:12px 16px 12px 29px;font-size:16px;font-weight:500;line-height:1.6;letter-spacing:.03em;color:#555;transition:background .3s,color .3s,padding .3s}
#category_nav>li>ul li a:before {content:"";position:absolute;left:15px;top:50%;width:5px;height:1px;background:#e50011;transform:translateY(-50%);transition:width .3s}
#category_nav>li>ul li a:hover,#category_nav>li>ul li.current>a {padding-left:34px;background:#f7f7f7;color:#e50011}
#category_nav>li>ul li a:hover:before,#category_nav>li>ul li.current>a:before {width:10px}
#category_nav>li[data-type="2"]>ul {display:block}

/* #article_list */
#article_list li h3 {padding:10px 20px;width:calc(90% - 40px);height:34px;background:rgba(var(--white-rgb),.9);line-height:37px;font-weight:400;font-size:20px;bottom:20px;left:5%}
#article_list li img {height:35vw}
#article_list li .info_box {padding:30px;width:calc(100% - 100px);background:rgba(var(--white-rgb),.9);bottom:-100%;left:20px;opacity:0}
#article_list li .info_box p {height:34px;font-size:20px}
#article_list li .info_box .cate {z-index:2}
#article_list li .info_box article {margin:15px 0 40px;height:90px;line-height:220%;font-weight:300;font-size:14px;-webkit-line-clamp:3}

/* #news_list */
#news_list li img {height:320px}
#news_list li .info_box {padding:15px 30px}
#news_list li .info_box p a {margin-right:10px;max-width:calc(100% - 100px);font-weight:400;z-index:2}
#news_list li .info_box p .time {width:90px;font-weight:300}
#news_list li .info_box h3 {height:34px;font-size:20px}

/* #articleFaq */
#articleFaq .faq_head {display:grid;grid-template-columns:38% 62%;column-gap:7%;align-items:end;margin-bottom:55px}
#articleFaq .faq_head .inner_title_box {grid-column:1;grid-row:1;margin-bottom:24px}
#articleFaq .faq_head .inner_lead {grid-column:1;grid-row:2;margin-bottom:0}
#articleFaq .faq_intro {grid-column:2;grid-row:1 / 3;max-width:680px;padding-left:45px;border-left:1px solid #d8d8d8}
#articleFaq .faq_intro p {margin:0}
#articleFaq .faq_wrap {position:relative;border-top:2px solid #252525}
#articleFaq #faq_list {margin:0;padding:0;list-style:none}
#articleFaq #faq_list>li {position:relative;border-bottom:1px solid #d6d6d6}
#articleFaq #faq_list>li:before {content:"";position:absolute;left:0;bottom:-1px;width:0;height:2px;background:#e50011;transition:width .45s cubic-bezier(.2,.7,.2,1)}
#articleFaq #faq_list>li.current:before {width:100%}
#articleFaq #faq_list .title {position:relative;display:grid;grid-template-columns:75px minmax(0,1fr) 52px;align-items:center;min-height:105px;padding:20px 10px;color:#222;transition:background .35s}
#articleFaq #faq_list .title:hover {background:#fafafa}
#articleFaq .faq_num {position:relative;display:block;font-family:Arial,sans-serif;font-size:16px;font-weight:700;font-style:italic;line-height:1;color:#e50011}
#articleFaq .faq_num:after {content:"";display:block;width:22px;height:2px;margin-top:8px;background:#e50011;transition:width .35s}
#articleFaq .faq_question {display:block;padding-right:35px;font-size:19px;font-weight:700;line-height:1.65;letter-spacing:.025em;color:#242424;transition:color .35s,transform .35s}
#articleFaq .faq_toggle {position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:auto;border:1px solid #cfcfcf;border-radius:50%;transition:background .35s,border-color .35s,transform .35s}
#articleFaq .faq_toggle i {position:absolute;display:block;width:14px;height:1px;background:#333;transition:transform .35s,background .35s}
#articleFaq .faq_toggle i:last-child {transform:rotate(90deg)}
#articleFaq #faq_list>li:hover .faq_num:after {width:35px}
#articleFaq #faq_list>li:hover .faq_question {color:#e50011;transform:translateX(3px)}
#articleFaq #faq_list>li:hover .faq_toggle {border-color:#e50011}
#articleFaq #faq_list>li.current .title {background:#fafafa}
#articleFaq #faq_list>li.current .faq_question {color:#e50011}
#articleFaq #faq_list>li.current .faq_toggle {border-color:#e50011;background:#e50011;transform:rotate(180deg)}
#articleFaq #faq_list>li.current .faq_toggle i {background:#fff}
#articleFaq #faq_list>li.current .faq_toggle i:last-child {transform:rotate(0)}
#articleFaq #faq_list .info {position:relative}
#articleFaq .faq_answer {display:grid;grid-template-columns:75px minmax(0,1fr);padding:30px 72px 35px 10px}
#articleFaq .faq_answer_label {padding-top:4px;font-family:Arial,sans-serif;font-size:15px;font-weight:700;line-height:1.5;letter-spacing:.08em;color:#aaa}
#articleFaq .faq_editor {position:relative;padding:24px 30px;border-left:3px solid #e50011;background:#fafafa;font-size:16px;font-weight:400;line-height:2;letter-spacing:.035em;color:#626262}
#articleFaq .faq_editor p {margin:0 0 15px}
#articleFaq .faq_editor p:last-child {margin-bottom:0}
#articleFaq .faq_editor strong,#articleFaq .faq_editor b {font-weight:700;color:#222}
#articleFaq .faq_editor a {color:#e50011;text-decoration:underline;text-underline-offset:4px}
#articleFaq .faq_editor ul,#articleFaq .faq_editor ol {margin:15px 0;padding-left:22px}
#articleFaq .faq_editor li {margin-bottom:7px}
#articleFaq .faq_editor img {display:block;max-width:100%;height:auto;margin:20px 0}

/* #articleBook */
#articleBook .book_head {display:grid;grid-template-columns:34% 66%;align-items:end;gap:7%;margin-bottom:55px}
#articleBook .book_head .inner_title_box {margin-bottom:0}
#articleBook .book_head_info {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:45px}
#articleBook .book_head_info .inner_lead {margin-bottom:0}
#articleBook .book_head_info .inner_article {padding-left:35px;border-left:1px solid #d8d8d8}
#articleBook .book_head_info .inner_article p {margin:0}
#articleBook #book_list {counter-reset:book-counter;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:45px 28px;width:100%;margin:0;padding:0;list-style:none;white-space:normal}
#articleBook .booolitem {counter-increment:book-counter;position:relative;min-width:0}
#articleBook .book_inner {position:relative;height:100%}
#articleBook .bobokimgbox {position:relative;width:100%;aspect-ratio:4 / 3;overflow:hidden;background:#eee;clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%)}
#articleBook .bobokimgbox:before {content:"";position:absolute;z-index:3;inset:0;border:1px solid rgba(255,255,255,.18);pointer-events:none}
#articleBook .bobokimgbox:after {content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.38) 100%);transition:background .45s;pointer-events:none}
#articleBook .bobokimgbox img {display:block;width:100%;height:100%;object-fit:cover;transition:transform .85s cubic-bezier(.2,.7,.2,1),filter .45s}
#articleBook .book_num {position:absolute;z-index:4;left:20px;bottom:18px;padding-bottom:7px;font-family:Arial,sans-serif;font-size:27px;font-weight:700;font-style:italic;line-height:1;color:#fff}
#articleBook .book_num:before {content:counter(book-counter,decimal-leading-zero)}
#articleBook .book_num:after {content:"";position:absolute;left:0;bottom:0;width:26px;height:2px;background:#e50011;transition:width .4s}
#articleBook .book_view {position:absolute;z-index:4;right:17px;bottom:17px;display:flex;align-items:center;gap:9px;opacity:0;transform:translateY(7px);transition:opacity .35s,transform .35s}
#articleBook .book_view span {font-family:Arial,sans-serif;font-size:15px;font-weight:700;letter-spacing:.08em;color:#fff}
#articleBook .book_view em {display:flex;align-items:center;justify-content:center;width:35px;height:35px;border:1px solid rgba(255,255,255,.7);border-radius:50%;font-family:Arial,sans-serif;font-size:16px;font-style:normal;color:#fff;transition:background .35s,border-color .35s,transform .35s}
#articleBook .boboktextbox {position:relative;min-height:75px;padding:20px 42px 16px 0;border-bottom:1px solid #d7d7d7;font-size:18px;font-weight:700;line-height:1.6;letter-spacing:.025em;color:#242424;transition:color .35s,padding-left .35s}
#articleBook .boboktextbox:before {content:"";position:absolute;left:0;bottom:-1px;width:0;height:2px;background:#e50011;transition:width .45s cubic-bezier(.2,.7,.2,1)}
#articleBook .boboktextbox:after {content:"";position:absolute;right:0;top:30px;width:28px;height:1px;background:#d4d4d4;transition:width .35s,background .35s}
#articleBook .booolitem:hover .bobokimgbox img {transform:scale(1.055);filter:saturate(1.05) contrast(1.02)}
#articleBook .booolitem:hover .bobokimgbox:after {background:linear-gradient(180deg,rgba(0,0,0,0) 36%,rgba(15,0,0,.48) 100%)}
#articleBook .booolitem:hover .book_num:after {width:48px}
#articleBook .booolitem:hover .book_view {opacity:1;transform:translateY(0)}
#articleBook .booolitem:hover .book_view em {border-color:#e50011;background:#e50011;transform:rotate(45deg)}
#articleBook .booolitem:hover .boboktextbox {padding-left:5px;color:#e50011}
#articleBook .booolitem:hover .boboktextbox:before {width:100%}
#articleBook .booolitem:hover .boboktextbox:after {width:42px;background:#e50011}

/* #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-top: 10px;}
#pagenav .inner_container{display:flex;}
#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 5vw}
#describe * {vertical-align: baseline;}
.form_box {display:grid;grid-template-columns:repeat(2,1fr);gap:20px 30px}
.form_box p.large {grid-column:1/3}
.form_box p.note {margin-bottom:20px}

/* #btnOK */
.form_box p #btnOK {width:150px}
[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}

/* #articleBookDetail */
#articleBookDetail .book_detail_head {display:flex;align-items:flex-end;justify-content:space-between;gap:60px;margin-bottom:50px;padding-bottom:32px;border-bottom:1px solid #d7d7d7}
#articleBookDetail .book_detail_head .inner_title_box {flex:0 0 auto;margin-bottom:0}
#articleBookDetail .book_detail_intro {display:flex;align-items:center;gap:25px;max-width:700px}
#articleBookDetail .book_detail_intro span {flex:0 0 auto;font-family:Arial,sans-serif;font-size:16px;font-weight:700;line-height:1.5;letter-spacing:.1em;color:#e50011}
#articleBookDetail .book_detail_intro p {margin:0;padding-left:25px;border-left:1px solid #d7d7d7;font-size:16px;line-height:1.9;letter-spacing:.035em;color:#666}
#articleBookDetail .book_description {max-width:1080px;margin:0 auto;font-size:16px;font-weight:400;line-height:2;letter-spacing:.035em;color:#5f5f5f}
#articleBookDetail .book_description p {margin:0 0 20px}
#articleBookDetail .book_description p:last-child {margin-bottom:0}
#articleBookDetail .book_description strong,#articleBookDetail .book_description b {font-weight:700;color:#252525}
#articleBookDetail .book_description a {color:#e50011;text-decoration:underline;text-underline-offset:4px}
#articleBookDetail .book_description ul,#articleBookDetail .book_description ol {margin:20px 0;padding-left:25px}
#articleBookDetail .book_description li {margin-bottom:8px}
#articleBookDetail .book_description img {display:block;max-width:100%;height:auto;margin:30px auto}
#articleBookDetail .book_description table {width:100%;margin:30px 0;border-collapse:collapse}
#articleBookDetail .book_description th,#articleBookDetail .book_description td {padding:14px 16px;border:1px solid #ddd;font-size:16px;line-height:1.7}
#articleBookDetail .book_description th {font-weight:700;color:#242424}
#articleBookDetail .book_album_head {display:flex;align-items:flex-end;gap:25px;margin:80px 0 32px}
#articleBookDetail .book_album_title {flex:0 0 auto}
#articleBookDetail .book_album_title span {display:block;margin-bottom:5px;font-family:Arial,sans-serif;font-size:16px;font-weight:700;line-height:1.4;letter-spacing:.1em;color:#e50011}
#articleBookDetail .book_album_title div {font-size:25px;font-weight:800;line-height:1.5;letter-spacing:.035em;color:#222}
#articleBookDetail .book_album_line {flex:1 1 auto;height:1px;margin-bottom:10px;background:#d7d7d7}
#articleBookDetail .book_album_text {flex:0 0 auto;padding-bottom:1px;font-size:16px;line-height:1.7;color:#888}
#articleBookDetail #album_list {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:35px 24px;counter-reset:album-counter}
#articleBookDetail .album_item {counter-increment:album-counter;min-width:0}
#articleBookDetail .album_item>a {color:inherit;display:flex;flex-direction:column}
#articleBookDetail .album_img {position:relative;width:100%;aspect-ratio:4 / 3;overflow:hidden;background:#eee;clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%);display:flex}
#articleBookDetail .album_img:after {content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.28) 100%);transition:background .45s;pointer-events:none}
#articleBookDetail .album_img img {display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .4s}
#articleBookDetail .album_hover {position:absolute;right:17px;bottom:17px;z-index:4;display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(7px);transition:opacity .35s,transform .35s}
#articleBookDetail .album_hover span {font-family:Arial,sans-serif;font-size:15px;font-weight:700;letter-spacing:.08em;color:#fff}
#articleBookDetail .album_hover em {display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.75);border-radius:50%;font-family:Arial,sans-serif;font-size:17px;font-style:normal;color:#fff;transition:background .35s,border-color .35s,transform .35s}
#articleBookDetail .album_info {display:grid;grid-template-columns:45px minmax(0,1fr);align-items:center;min-height:68px;padding:15px 0;border-bottom:1px solid #d7d7d7}
#articleBookDetail .album_num {font-family:Arial,sans-serif;font-size:16px;font-weight:700;font-style:italic;color:#e50011}
#articleBookDetail .album_num:before {content:counter(album-counter,decimal-leading-zero)}
#articleBookDetail .album_name {overflow:hidden;font-size:16px;font-weight:700;line-height:1.6;letter-spacing:.03em;color:#292929;text-overflow:ellipsis;white-space:nowrap;transition:color .35s,transform .35s}
#articleBookDetail .album_item:hover .album_img img {transform:scale(1.055);filter:saturate(1.05) contrast(1.02)}
#articleBookDetail .album_item:hover .album_img:after {background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(20,0,0,.48) 100%)}
#articleBookDetail .album_item:hover .album_hover {opacity:1;transform:translateY(0)}
#articleBookDetail .album_item:hover .album_hover em {border-color:#e50011;background:#e50011;transform:rotate(45deg)}
#articleBookDetail .album_item:hover .album_name {color:#e50011;transform:translateX(4px)}
#articleBookDetail .book_detail_bottom {display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:50px;padding-top:32px;border-top:1px solid #d7d7d7}
#articleBookDetail .book_back_btn {display:inline-flex;align-items:center;gap:15px;min-height:50px;font-size:16px;font-weight:700;line-height:1.5;letter-spacing:.04em;color:#333;transition:color .3s}
#articleBookDetail .book_back_btn em {font-family:Arial,sans-serif;font-size:20px;font-style:normal;transition:transform .3s}
#articleBookDetail .book_back_btn:hover {color:#e50011}
#articleBookDetail .book_back_btn:hover em {transform:translateX(-5px)}

/* #articleNews */
#articleNews .news_page_head {display:grid;grid-template-columns:34% 66%;align-items:end;gap:7%;margin-bottom:55px}
#articleNews .news_page_head .inner_title_box {margin-bottom:0}
#articleNews .news_page_intro {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:45px}
#articleNews .news_page_intro .inner_lead {margin-bottom:0}
#articleNews .news_page_intro .inner_article {padding-left:35px;border-left:1px solid #d8d8d8}
#articleNews .news_page_intro .inner_article p {margin:0}
#articleNews #news_list {counter-reset:news-counter;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:55px 32px;width:100%;margin:0;padding:0;list-style:none;white-space:normal}
#articleNews #news_list>li {counter-increment:news-counter;position:relative;min-width:0}
#articleNews .news_list_inner {position:relative;height:100%}
#articleNews .nwimg {position:relative;width:100%;aspect-ratio:16 / 10;overflow:hidden;background:#eee;clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%)}
#articleNews .nwimg:after {content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.38) 100%);pointer-events:none;transition:background .45s}
#articleNews .nwimg img {display:block;width:100%;height:100%;object-fit:cover;transition:transform .85s cubic-bezier(.2,.7,.2,1),filter .45s}
#articleNews .news_no {position:absolute;z-index:4;left:22px;bottom:20px;padding-bottom:8px;font-family:Arial,sans-serif;font-size:28px;font-weight:700;font-style:italic;line-height:1;color:#fff}
#articleNews .news_no:before {content:counter(news-counter,decimal-leading-zero)}
#articleNews .news_no:after {content:"";position:absolute;left:0;bottom:0;width:27px;height:2px;background:#e50011;transition:width .4s}
#articleNews .news_view {position:absolute;z-index:4;right:19px;bottom:18px;display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(7px);transition:opacity .35s,transform .35s}
#articleNews .news_view span {font-family:Arial,sans-serif;font-size:15px;font-weight:700;letter-spacing:.08em;color:#fff}
#articleNews .news_view em {display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.75);border-radius:50%;font-family:Arial,sans-serif;font-size:17px;font-style:normal;color:#fff;transition:background .35s,border-color .35s,transform .35s}
#articleNews .news_list_info {position:relative;padding:22px 2px 0}
#articleNews .nwtime {display:flex;align-items:center;gap:18px;margin-bottom:13px}
#articleNews .nwtime span {position:relative;display:inline-flex;align-items:center;min-height:30px;padding:4px 12px;border:1px solid #e50011;font-size:15px;font-weight:600;line-height:1.4;letter-spacing:.04em;color:#e50011}
#articleNews .nwtime p {position:relative;margin:0;padding-left:18px;font-family:Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.5;letter-spacing:.03em;color:#898989}
#articleNews .nwtime p:before {content:"";position:absolute;left:0;top:50%;width:1px;height:15px;background:#d4d4d4;transform:translateY(-50%)}
#articleNews .nwtitle {min-height:58px;margin-bottom:18px;font-size:20px;font-weight:700;line-height:1.55;letter-spacing:.025em;color:#262626;transition:color .35s,transform .35s}
#articleNews .news_more_line {display:flex;align-items:center;width:100%;padding-top:15px;border-top: 1px dotted #d7d7d7a1;}
#articleNews .news_more_line span {flex:0 0 auto;font-family:Arial,sans-serif;font-size:15px;font-weight:700;line-height:1.5;letter-spacing:.09em;color:#777;transition:color .35s}
#articleNews .news_more_line i {display:block;flex:1 1 auto;height:1px;margin:0 18px;background:#e1e1e1}
#articleNews .news_more_line em {flex:0 0 auto;font-family:Arial,sans-serif;font-size:19px;font-style:normal;line-height:1;color:#333;transition:color .35s,transform .35s}
#articleNews #news_list>li:hover .nwimg img {transform:scale(1.055);filter:saturate(1.05) contrast(1.02)}
#articleNews #news_list>li:hover .nwimg:after {background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(20,0,0,.5) 100%)}
#articleNews #news_list>li:hover .news_no:after {width:50px}
#articleNews #news_list>li:hover .news_view {opacity:1;transform:translateY(0)}
#articleNews #news_list>li:hover .news_view em {border-color:#e50011;background:#e50011;transform:rotate(45deg)}
#articleNews #news_list>li:hover .nwtitle {color:#e50011;transform:translateX(4px)}
#articleNews #news_list>li:hover .news_more_line span {color:#e50011}
#articleNews #news_list>li:hover .news_more_line em {color:#e50011;transform:translateX(5px)}

/* @media */
@media screen and (max-width:1200px) {
  #category_area { width: 90%; margin: 38px auto 60px }
  #category_nav { gap: 10px }
  #category_nav>li>.h4>a { min-width: 130px; padding: 0 24px }
  #articleFaq .faq_head { grid-template-columns: 40% 60%; gap: 5% }
  #articleFaq #faq_list .title { grid-template-columns: 65px minmax(0,1fr) 50px }
  #articleFaq .faq_answer { grid-template-columns: 65px minmax(0,1fr) }
  #articleBook .book_head { grid-template-columns: 30% 70%; gap: 5% }
  #articleBook .book_head_info { gap: 30px }
  #articleBook #book_list { gap: 38px 22px }
  #articleBookDetail .book_detail_head { gap: 40px }
  #articleBookDetail .book_description { max-width: 950px }
  #articleBookDetail #album_list { gap: 30px 20px }
  #articleNews .news_page_head { grid-template-columns: 30% 70%; gap: 5% }
  #articleNews .news_page_intro { gap: 30px }
  #articleNews #news_list { gap: 45px 26px }
}
@media screen and (max-width:1024px) {
  .form_box { grid-template-columns: 1fr }
  .form_box p.large { grid-column: inherit }
}
@media screen and (max-width:991px) {
  #category_area { width: 92% }
  #category_nav>li>.h4>a { min-width: 120px; min-height: 50px; padding: 0 20px }
  #category_nav>li>.h4 { min-height: 50px }
  #articleFaq .faq_head { display: block }
  #articleFaq .faq_head .inner_lead { margin-bottom: 20px }
  #articleFaq .faq_intro { max-width: 100%; padding-left: 25px }
  #articleFaq #faq_list .title { min-height: 95px }
  #articleBook .book_head { display: block; margin-bottom: 45px }
  #articleBook .book_head .inner_title_box { margin-bottom: 28px }
  #articleBook .book_head_info { grid-template-columns: repeat(2,minmax(0,1fr)) }
  #articleBook #book_list { grid-template-columns: repeat(2,minmax(0,1fr)) }
  #articleBookDetail .book_detail_head { display: block }
  #articleBookDetail .book_detail_head .inner_title_box { margin-bottom: 25px }
  #articleBookDetail .book_detail_intro { max-width: 100% }
  #articleBookDetail .book_description { max-width: 100% }
  #articleBookDetail #album_list { grid-template-columns: repeat(2,minmax(0,1fr)) }
  #articleNews .news_page_head { display: block; margin-bottom: 45px }
  #articleNews .news_page_head .inner_title_box { margin-bottom: 28px }
  #articleNews .news_page_intro { grid-template-columns: repeat(2,minmax(0,1fr)) }
  #articleNews .nwtitle { font-size: 19px }
}
@media screen and (max-width:768px) {
  #article_list li img { height: 50vw }
  #news_list li .info_box { padding: 15px 0 }
  #content_wrap {padding: 30PX 0;}
}
@media screen and (max-width:767px) {
  #sub_banner a, #page_title{height: 300px;}
  #page_title .pag_tit{font-size: 1.5em;letter-spacing: .05em;}
  #sub_banner:after { height: 30px }
  #category_area { width: 88%; margin: 28px auto 45px }
  #category_area .category_mobile_head { display: block }
  #category_area #category_toggle { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 58px; padding: 12px 17px 12px 20px; border: 1px solid #d5d5d5; background: #fff; font-size: 15px; font-weight: 700; line-height: 1.5; letter-spacing: .05em; color: #292929; cursor: pointer }
  #category_area #category_toggle:before { content: ""; position: absolute; left: -1px; top: -1px; width: 4px; height: calc(100%+2px); background: #e50011 }
  #category_area .category_toggle_text { display: flex; align-items: center; gap: 10px }
  #category_area .category_toggle_text:before { content: "CATEGORY"; font-family: Arial,sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .1em; color: #e50011 }
  #category_area .category_toggle_icon { position: relative; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid #d3d3d3; border-radius: 50%; transition: background .3s,border-color .3s }
  #category_area .category_toggle_icon i { position: absolute; display: block; width: 12px; height: 1px; background: #333; transition: transform .35s,background .35s }
  #category_area .category_toggle_icon i:last-child { transform: rotate(90deg) }
  #category_area #category_toggle[data-type="2"] .category_toggle_icon { border-color: #e50011; background: #e50011 }
  #category_area #category_toggle[data-type="2"] .category_toggle_icon i { background: #fff }
  #category_area #category_toggle[data-type="2"] .category_toggle_icon i:last-child { transform: rotate(0) }
  #category_area .category_nav_box { display: none; width: 100% }
  #category_nav { display: block; width: 100%; padding: 0; border: 1px solid #d5d5d5; border-top: 0; background: #fff; text-align: left }
  #category_nav>li { width: 100% }
  #category_nav>li+li { border-top: 1px solid #e5e5e5 }
  #category_nav>li>.h4 { min-height: 56px; justify-content: space-between }
  #category_nav>li>.h4>a { justify-content: flex-start; width: 100%; min-width: 0; min-height: 56px; padding: 0 18px 0 22px; border: 0; background: #fff; box-shadow: none; font-size: 15px; text-align: left; transform: none }
  #category_nav>li>.h4>a:before { left: 0; top: 0; width: 3px; height: 100%; background: #e50011; transform: scaleY(0) }
  #category_nav>li>.h4>a:hover { background: #fafafa; color: #e50011; box-shadow: none; transform: none }
  #category_nav>li>.h4>a:hover:before { transform: scaleY(1) }
  #category_nav>li.current>.h4>a,#category_nav>li.action>.h4>a { background: #fafafa; color: #e50011; box-shadow: none }
  #category_nav>li.current>.h4>a:before,#category_nav>li.action>.h4>a:before { display: block; transform: scaleY(1) }
  #category_nav>li>.h4>b { position: relative; right: auto; top: auto; flex: 0 0 48px; width: 48px; height: 56px; margin: 0; border-left: 1px solid #e5e5e5; transform: none }
  #category_nav>li>.h4>b i { font-size: 13px; color: #888 }
  #category_nav>li.current>.h4>b i,#category_nav>li.action>.h4>b i,#category_nav>li[data-type="2"]>.h4>b i { color: #e50011 }
  #category_nav>li:has(>.h4>b)>.h4>a { padding-right: 18px }
  #category_nav>li>ul { position: relative; left: auto; top: auto; width: 100%; padding: 0; border: 0; border-top: 1px solid #e5e5e5; box-shadow: none; transform: none }
  #category_nav>li>ul:before { display: none }
  #category_nav>li>ul li { background: #fafafa }
  #category_nav>li>ul li+li { margin-top: 0; border-top: 1px solid #e8e8e8 }
  #category_nav>li>ul li a { padding: 12px 20px 12px 38px; font-size: 15px }
  #category_nav>li>ul li a:before { left: 24px }
  #category_nav>li>ul li a:hover,#category_nav>li>ul li.current>a { padding-left: 43px }
  #articleFaq .faq_head { margin-bottom: 40px }
  #articleFaq .faq_intro { padding-left: 18px; font-size: 15px }
  #articleFaq #faq_list .title { grid-template-columns: 48px minmax(0,1fr) 42px; min-height: 88px; padding: 16px 5px }
  #articleFaq .faq_num { font-size: 15px }
  #articleFaq .faq_question { padding-right: 15px; font-size: 17px }
  #articleFaq .faq_toggle { width: 38px; height: 38px }
  #articleFaq .faq_toggle i { width: 12px }
  #articleFaq .faq_answer { grid-template-columns: 48px minmax(0,1fr); padding: 0 47px 28px 5px }
  #articleFaq .faq_answer_label { font-size: 15px }
  #articleFaq .faq_editor { padding: 20px 22px; font-size: 15px; line-height: 1.9 }
  #articleBook .book_head { margin-bottom: 38px }
  #articleBook .book_head_info { display: block }
  #articleBook .book_head_info .inner_lead { margin-bottom: 18px }
  #articleBook .book_head_info .inner_article { padding-left: 18px }
  #articleBook #book_list { gap: 32px 18px }
  #articleBook .boboktextbox { min-height: 68px; padding: 17px 38px 14px 0; font-size: 16px }
  #articleBook .boboktextbox:after { top: 27px }
  #articleBook .book_num { left: 17px; bottom: 15px; font-size: 24px }
  #articleBook .book_view { right: 15px; bottom: 15px; opacity: 1; transform: none }
  #articleBook .book_view span { display: none }
  #articleBook .book_view em { width: 32px; height: 32px }
  #articleBookDetail .book_detail_head { margin-bottom: 38px; padding-bottom: 25px }
  #articleBookDetail .book_detail_intro { display: block }
  #articleBookDetail .book_detail_intro span { display: block; margin-bottom: 10px; font-size: 15px }
  #articleBookDetail .book_detail_intro p { padding-left: 18px; font-size: 15px }
  #articleBookDetail .book_description { font-size: 15px; line-height: 1.9 }
  #articleBookDetail .book_description th,#articleBookDetail .book_description td { padding: 12px; font-size: 15px }
  #articleBookDetail .book_album_head { margin-top: 60px }
  #articleBookDetail .book_album_title span { font-size: 15px }
  #articleBookDetail .book_album_title div { font-size: 22px }
  #articleBookDetail .book_album_text { font-size: 15px }
  #articleBookDetail .album_hover { opacity: 1; transform: none }
  #articleBookDetail .album_hover span { display: none }
  #articleBookDetail .album_hover em { width: 34px; height: 34px }
  #articleBookDetail .album_info { grid-template-columns: 40px minmax(0,1fr) }
  #articleBookDetail .album_num,#articleBookDetail .album_name { font-size: 15px }
  #articleBookDetail .book_back_btn { font-size: 15px }
  #articleNews .news_page_head { margin-bottom: 38px }
  #articleNews .news_page_intro { display: block }
  #articleNews .news_page_intro .inner_lead { margin-bottom: 18px }
  #articleNews .news_page_intro .inner_article { padding-left: 18px }
  #articleNews #news_list { gap: 38px 18px }
  #articleNews .news_list_info { padding-top: 18px }
  #articleNews .nwtime { gap: 12px }
  #articleNews .nwtime span { min-height: 28px; padding: 3px 10px; font-size: 15px }
  #articleNews .nwtime p { padding-left: 13px; font-size: 15px }
  #articleNews .nwtitle { min-height: 52px; font-size: 17px }
  #articleNews .news_no { left: 17px; bottom: 16px; font-size: 25px }
  #articleNews .news_view { right: 15px; bottom: 15px; opacity: 1; transform: none }
  #articleNews .news_view span { display: none }
  #articleNews .news_view em { width: 34px; height: 34px }
  #articleNews .news_more_line span { font-size: 15px }
}
@media screen and (max-width:640px) {
  #article_list li img { height: 320px }
  #pagenav { margin-bottom: 100px; }
}
@media screen and (max-width:575px) {
  #category_area { width: 90%; margin: 24px auto 38px }
  #category_area #category_toggle { min-height: 54px; padding-left: 17px }
  #category_area .category_toggle_icon { width: 30px; height: 30px }
  #category_nav>li>.h4,#category_nav>li>.h4>a,#category_nav>li>.h4>b { min-height: 54px; height: 54px }
  #articleFaq .faq_head { margin-bottom: 32px }
  #articleFaq #faq_list .title { grid-template-columns: 38px minmax(0,1fr) 38px; min-height: 82px }
  #articleFaq .faq_num:after { width: 16px }
  #articleFaq .faq_question { font-size: 16px; line-height: 1.6 }
  #articleFaq .faq_toggle { width: 34px; height: 34px; }
  #articleFaq .faq_answer { display: block; padding: 0 0 25px 20px; }
  #articleFaq .faq_answer_label { margin-bottom: 8px; }
  #articleFaq .faq_editor { padding: 18px; }
  #articleFaq .faq_editor ul,#articleFaq .faq_editor ol { padding-left: 10px; }
  #articleBook #book_list { grid-template-columns: 1fr; gap: 32px }
  #articleBook .bobokimgbox { aspect-ratio: 4/3 }
  #articleBook .boboktextbox { font-size: 16px }
  #articleBookDetail .book_album_head { display: block; margin-bottom: 25px }
  #articleBookDetail .book_album_line { display: none }
  #articleBookDetail .book_album_text { margin-top: 8px }
  #articleBookDetail #album_list { grid-template-columns: 1fr; gap: 30px }
  #articleBookDetail .book_detail_bottom { flex-direction: column-reverse; align-items: stretch; gap: 15px; margin-top: 50px }
  #articleBookDetail .book_back_btn { justify-content: center }
  #articleBookDetail .book_detail_bottom .inner_more_btn { width: 100% }
  #articleNews #news_list { grid-template-columns: 1fr; gap: 38px }
  #articleNews .nwimg { aspect-ratio: 16/10 }
  #articleNews .nwtitle { min-height: 0; font-size: 17px }
}
@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: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: 0; height: 400px }
  #article_list li:hover h3 { opacity: 0 }
  #article_list li img { height: 500px }
  #article_list li:hover .info_box { bottom: 20px; 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) }
}