/* wrap */
#wrap {position: relative;}

/* sub_banner */
#sub_banner {position: relative;margin-top: 85px;display: flex;flex-direction: column-reverse;}
#sub_banner .banner_txt *{color:white;}
#sub_banner .sub_nav {z-index: 6;width:100%;border-bottom: 1px solid rgb(0 0 0 / 10%);padding: 20px 0;position: relative;background: white;}
#sub_banner .banner_img {position: relative;display: block;z-index: 1;background: #000;}
#sub_banner:after{content:'';position: absolute;width: 100%;height: 100%;background: linear-gradient(
-90deg, rgb(0 0 0 / 0%), var(--info));z-index: 1;top: 0;}
#sub_banner .banner_img img {position: relative;width: 100%;height: 450px;opacity: .75;}
#sub_banner .banner_txt {position: absolute;height: 100%;top: 0;left: 0;z-index: 3;width: 100%;display: flex;align-items: center;justify-content: center;}
#sub_banner .banner_txt >div{width:min(90%, 1400px);margin-bottom: 20px;}
#sub_banner .banner_txt h1 {line-height: 1;letter-spacing: .02em;font-size: 45px;font-weight: 500;}
#sub_banner .banner_txt .text {padding-top: 1.3em;line-height: 1.5;font-size: 22px;font-weight: 500;width: 50%;word-break: keep-all;letter-spacing: .02em;}

/* sidebar_left */
.sidebar_left {display: flex;flex-wrap: wrap;justify-content: space-between;width: min(90%, 1280px);}
.sidebar_left .waylink { width: 100%; }

/* waylink */
.waylink {display: flex;flex-wrap: wrap;align-items: center;width: min(90%, 1440px);margin: 0 auto;}
.waylink li {margin: .2em 1em .2em 0;line-height: 1;font-weight: 400;color: var(--g_600);font-size: 14px;}
.waylink li:before {margin-right: 1em;font-family: 'FontAwesome';font-weight: 300;color: var(--g_100);content: "\f101";}
.waylink li:first-child:before { margin: 0; content: ""; }
.waylink li a {line-height: 1;font-weight: 300;color: var(--g_600);font-size: 14px;}
.waylink li:last-child a { font-weight: 400; color: var(--g_800); }

/* aside */
aside .widget_title { margin-bottom: 1em; display: none; }
aside .widget_title .icon_bar { margin-right: .5em; width: 1.3em; display: flex; flex-direction: column; }
aside .widget_title .icon_bar:before,aside .widget_title .icon_bar:after { margin-top: .2em; width: 100%; height: 1px; background: var(--g_600); display: block; content: ""; }
aside .widget_title .icon_bar:after { width: .8em; }
aside .widget_title font { text-transform: uppercase; line-height: 1; font-weight: 500; font-size: 1.1em; }
aside #category_nav { margin: 0; padding: 0; list-style: none; }
aside #category_nav li { position: relative; list-style: none; }
aside #category_nav > li { border-bottom: 1px solid #ddd; }
aside #category_nav > li:last-child { border-bottom: 0; }
aside #category_nav li .h4,aside #category_nav li .subULHead { position: relative; margin: 0; }
aside #category_nav li a { position: relative; padding: 15px 38px 15px 18px; display: block; color: var(--g_800); font-weight: 600; font-size: 15px; line-height: 1.5; text-decoration: none; transition: color .3s ease,background-color .3s ease,padding-left .35s cubic-bezier(.22,1,.36,1); }
aside #category_nav > li > .h4 > a:before,aside #category_nav > li > .subULHead > a:before { position: absolute; left: 0; top: 50%; width: 7px; height: 7px; background: var(--primary); content: ""; opacity: 0; transform: translate(-8px,-50%) scale(.5); transition: opacity .3s ease,transform .35s cubic-bezier(.22,1,.36,1); }
aside #category_nav > li:hover > .h4 > a,aside #category_nav > li:hover > .subULHead > a,aside #category_nav > li.action > .h4 > a,aside #category_nav > li.action > .subULHead > a { padding-left: 27px; color: var(--primary); }
aside #category_nav > li:hover > .h4 > a:before,aside #category_nav > li:hover > .subULHead > a:before,aside #category_nav > li.action > .h4 > a:before,aside #category_nav > li.action > .subULHead > a:before { opacity: 1; transform: translate(8px,-50%) scale(1); }
aside #category_nav li b[data-action="sideOpen"] { position: absolute; z-index: 2; right: 0; top: 50%; padding: .7em .8em; color: var(--g_600); cursor: pointer; transform: translateY(-50%); transition: color .3s ease,transform .35s cubic-bezier(.22,1,.36,1); }
aside #category_nav li:hover > .h4 b[data-action="sideOpen"],aside #category_nav li:hover > .subULHead b[data-action="sideOpen"],aside #category_nav li.action > .h4 b[data-action="sideOpen"],aside #category_nav li.action > .subULHead b[data-action="sideOpen"] { color: var(--primary); }
aside #category_nav li.action > .h4 b[data-action="sideOpen"],aside #category_nav li.action > .subULHead b[data-action="sideOpen"] { transform: translateY(-50%) rotate(180deg); }
aside #category_nav li b i.fa-plus:before,aside #category_nav li b i.fa-minus:before { content: "\f107"; }
aside #category_nav li .subUL,aside #category_nav li .sub2UL {margin: 0;padding: 0;display: none;list-style: none;transition: all linear 0s;}
aside #category_nav li .subUL {padding:7px 0 12px;background:linear-gradient(90deg,color-mix(in srgb,var(--g_100) 55%,white),color-mix(in srgb,var(--g_100) 20%,white));border-top:1px solid #ddd;}
aside #category_nav ul.subUL li a { position: relative; padding: 9px 38px 9px 34px; color: #888; font-weight: 400; font-size: 15px; transition: color .3s ease,padding-left .35s cubic-bezier(.22,1,.36,1),background-color .3s ease; }
aside #category_nav ul.subUL li a:hover{font-weight:600;color:#666}
aside #category_nav ul.subUL li a:after { position: absolute; right: 18px; top: 50%; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; content: ""; opacity: 0; transform: translate(-8px,-50%) rotate(45deg); transition: opacity .3s ease,transform .35s cubic-bezier(.22,1,.36,1); }
aside #category_nav ul.subUL li:hover > a,aside #category_nav ul.subUL li.action > a { padding-left: 43px; color: var(--primary); background: rgba(255,255,255,.55); }
aside #category_nav ul.subUL li:hover > a:after,aside #category_nav ul.subUL li.action > a:after { opacity: 1; transform: translate(0,-50%) rotate(45deg); }
aside #category_nav li .sub2UL {margin:3px 14px 8px 28px;padding:7px 0;background:rgba(255,255,255,.72);border-left:2px solid color-mix(in srgb,var(--primary) 35%,transparent);}
aside #category_nav li .sub2ULHead a { padding: 8px 34px; color: var(--g_600); font-weight: 400; }
aside #category_nav li .sub2UL li a { padding: 7px 30px; font-size: 14px; }
aside #category_nav li .sub2UL li:hover > a,aside #category_nav li .sub2UL li.action > a { padding-left: 38px; color: var(--primary); }
aside #category_nav li.action > .h4 > a,aside #category_nav li.action > .subULHead > a { font-weight: 700; }
@media screen and (max-width:991px) {
  aside #category_nav li a { padding-top: 13px; padding-bottom: 13px; }
  aside #category_nav ul.subUL li a { padding-top: 9px; padding-bottom: 9px; }
}


/* detail_box */
.detail_box * {font-size: initial;color: unset;vertical-align: baseline;-webkit-transition: none;-moz-transition: none;-ms-transition: none;-o-transition: none;transition: none;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}

/* content_wrap */
#content_wrap{padding:6vw 0}
#content_wrap .time { font-size: .9em; color: var(--g_500); }
#content_wrap .view_share { margin-top: 2em; padding: 1em 0; border: var(--g_100) solid; border-width: 1px 0; display: flex; flex-wrap: wrap; justify-content: space-between; }
#content_wrap #community { display: flex; align-items: center; }
#content_wrap #community .title { margin-right: .5em; color: var(--g_400); }
#content_wrap #community >div { margin-left: .5em; height: 1.3em; }
#content_wrap #community >div .fb_iframe_widget { display: flex; }

/* list_style */
.list_style li {margin-bottom: 1em;display: flex;flex-wrap: wrap;align-items: stretch;flex-direction: column;}
.list_style li .img_box {position: relative;overflow: hidden;}
.list_style li:hover .img_box img{    -webkit-transform: scale(1.1);}
.list_style li .img_box img {width: 100%;height: 100%;aspect-ratio: 4/3;}
.list_style li .info_box {padding: 25px 15px;}
.list_style li .info_box .h3 {margin: 0 0 .5em;height: auto;}
.list_style li .info_box article {margin-bottom: .5em;height: auto;font-size: .9em;color: var(--g_600);-webkit-line-clamp: 2;}

/* grid_style */
.grid_style {display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 2.3em;}
.list_style.grid_style li { margin-bottom: 0; }
.list_style.grid_style li .info_box {display: flex;flex-direction: column;justify-content: center;align-items: stretch;padding-bottom: 0;}

/* faq_list */
#faq_list { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
#faq_list >li { position: relative; overflow: hidden; margin-bottom: 0; border: 1px solid var(--line); transition: border-color 0.35s ease,box-shadow 0.35s ease,transform 0.35s ease; }
#faq_list >li::before { content: ""; position: absolute; left: 0; top: 0; width: 5px; height: 100%; background: linear-gradient(180deg,var(--primary),var(--thrid)); opacity: 0; transition: opacity 0.35s ease; }
#faq_list li .title { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 28px; cursor: pointer; }
#faq_list li .title .txt {flex: 1 1 auto;width: auto;margin-right: 0;color: var(--ink);font-size: 18px;font-weight: 500;line-height: 1.6;letter-spacing: 0.04em;}
#faq_list li .title .icon { position: relative; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; background: var(--gray); border: 1px solid var(--gray); transition: background 0.35s ease,border-color 0.35s ease,transform 0.35s ease; }
#faq_list li .title .icon::before,#faq_list li .title .icon::after { content: ""; position: absolute; left: 50%; top: 50%; display: block; width: 16px; height: 2px; border-radius: 99px; background: white; transform: translate(-50%,-50%); transition: background 0.35s ease,transform 0.35s ease; }
#faq_list li .title .icon::after { transform: translate(-50%,-50%) rotate(90deg); }
#faq_list li .info { padding: 0 28px 26px 28px; border-top: 0; color: var(--gray); font-size: 16px; line-height: 2; letter-spacing: 0.04em; }
#faq_list li .info p { margin: 0; }
#faq_list >li:hover { transform: translateY(-3px); border-color: var(--muted); }
#faq_list li.current { border-color: var(--muted); }
#faq_list li.current::before { opacity: 1; }
#faq_list li.current .title .txt { color: var(--thrid); }
#faq_list li.current .title .icon { background: linear-gradient(135deg,var(--primary),var(--thrid)); border-color: transparent; transform: rotate(180deg); box-shadow: 0 10px 24px rgba(49,105,163,0.22); }
#faq_list li.current .title .icon::before,#faq_list li.current .title .icon::after { background: #fff; }
#faq_list li.current .title .icon::after { transform: translate(-50%,-50%) rotate(180deg); }

/* pagenav */
#pagenav { margin-top: 2em; display: flex; justify-content: center; align-items: center; }
#pagenav >* { margin: 0 .2em; width: 35px; aspect-ratio: 1/1; display: flex; justify-content: center; align-items: center; border: 1px var(--g_200) solid; border-radius: 50%; }
#pagenav * { line-height: 1; color: var(--g_600); }
#pagenav strong { background: var(--primary); border-color: var(--primary); line-height: 1.7; color: white; }
#pagenav i { -webkit-transform: translateY(-.05em); transform: translateY(-.05em); }
#pagenav i.fa-angle-double-left:before { content: "\f104"; }
#pagenav i.fa-angle-double-right:before { content: "\f105"; }

/* newpagenav */
#newpagenav{margin-top: 70px;display: grid;grid-template-columns: repeat(2, 1fr);gap: 50px;position: relative;}
#newpagenav:before{content:'';position: absolute;left: 50%;width: 1px;height: 100%;background: #e3e3e3;}
#newpagenav p{margin:0;width: auto;}
#newpagenav a{margin:0;padding: 0;}
#newpagenav p a {margin: 15px 0 0;padding: 0;width: auto;height: auto;line-height: initial;font-size: 0;display: inline-flex;align-items: center;gap: 15px;}
#newpagenav p:last-child {text-align: end;}
#newpagenav i{width: 15px;font: normal normal normal 26px / 1 FontAwesome;}
#newpagenav font{-webkit-line-clamp:2;height: auto;font-size: 17px;max-width: max-content;font-weight: 400;}
#newpagenav a:hover font, #newpagenav a:hover i{color: #8f8c89;}
#newpagenav p:last-child font, #newpagenav p:last-child font span{text-align:end}
#newpagenav span{display:block;font-size: 17px;}

@media screen and (min-width: 1161px){
    aside .widget_title{display:none;}
	.sidebar_left aside {width: 250px;padding: 6vw 0;}
	.sidebar_left #content_wrap {margin-left: 4%;width: 1%;flex: 1 1 auto;}
	.list_style li:hover .img_box:before { left: 10px; right: 10px; }
	.list_style li:hover .img_box:after { top: 6px; bottom: 6px; }
	#search_list { grid-template-columns: repeat(3, 1fr); }
	#pagenav a:hover { background: var(--primary); border-color: var(--primary); color: white; }
	#pagenav a:hover * { color: white; }
}
@media screen and (max-width: 1160px){
    aside #category_nav li a{padding:12px 20px}
	aside {margin-bottom: 2em;position: relative;margin-top: 5vw;}
	aside .widget_title {margin-bottom: 0;padding: .8em 1em;background: var(--ink);display: inline-flex;align-items: center;cursor: pointer;width: 250px;}
	aside .widget_title .icon_bar {margin-right: 0;height: 1.3em;border-bottom: 1px white solid;justify-content: space-evenly;-webkit-transform: translateY(-2px);transform: translateY(-2px);}
	aside .widget_title .icon_bar:before , aside .widget_title .icon_bar:after {margin-top: 0;height: 1px;background: white;}
	aside .widget_title font { font-size: 0; }
	aside .widget_title font:before {margin-left: .8em;letter-spacing: 0.05em;font-size: 15px;color: white;content: attr(data-name);font-weight: 300;}
	aside #category_nav {position: absolute;padding: .5em 0;width: 250px;background: #ffffff;box-shadow: 0 .2em 1em 0 rgba(0, 0, 0, .1);z-index: 15;left: 0;opacity: 0;visibility: hidden;-webkit-transform: translateY(50px);transform: translateY(50px);pointer-events: none;}
	aside[data-type="1"] #category_nav { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); pointer-events: auto; }
	#content_wrap { max-width: 100%; width: 100%; }
}
@media screen and (max-width: 980px){
    #sub_banner .banner_txt >div{margin-bottom:40px;}
    #sub_banner .banner_txt h1{font-size:30px}
    #sub_banner .banner_img img{height:300px;}
    #content_wrap{padding: 6vw 0 10vw;}
    #sub_banner .banner_txt .text{width: 60%;word-break: unset;font-size: 17px;}
	.grid_style {grid-template-columns: repeat(2, 1fr);}
}
@media screen and (max-width: 550px){
    #sub_banner .banner_txt >div{margin-bottom: 50px;}
    #faq_list li .title .txt{-webkit-line-clamp: 2;height: auto;}
    #sub_banner .banner_img img{height: 240px;}
    #sub_banner .banner_txt h1{font-size: 26px;}
    #sub_banner .banner_txt .text{font-size: 15px;width: 90%;}
	.grid_style {grid-template-columns: repeat(1, 1fr);}
	.list_style , .grid_style { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 3vw; }
	.list_style li { margin-bottom: 0; }
	.list_style li .img_box , .list_style.grid_style li .img_box { width: 100%; }
	.list_style li .img_box img { aspect-ratio: 4/3; }
	.list_style li .info_box { padding: 6%; }
}