#sub_banner_box { opacity: 1 }
#sub_banner_box .parallax_bg { margin-bottom: 0; min-height: 450px; opacity: 1; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; }
#wrap { z-index: 4; padding-top: 50px; }
#wrap .pag_tit {margin-bottom: 3vw;line-height: 170%;margin-top: 1vw;text-transform: uppercase;}
.waylink { position: absolute; bottom: 40px; left: 10%; }
.waylink h1 {text-align: left;color: #fff;margin-bottom: 5px;font-weight: 500;font-family: 'Poppins', sans-serif;}
.waylink ol { padding-top: 5px; }
.waylink ol li,.waylink ol li a {letter-spacing: .1em;font-weight: 100;font-size: 13px;vertical-align: bottom;color: #dfdede;text-transform: uppercase;font-family: 'Poppins', sans-serif;font-weight: 400;}
.waylink ol li:after { margin: 0 10px; display: inline-block; font-weight: 100; font-size: 12px; color: #dfdede; content: "-"; }
.waylink ol li:last-child:after { margin: 0; content: ""; }
aside { margin-bottom: 60px; z-index: 5; }
aside ul { display: flex; justify-content: center; gap: 10px; }
aside ul li b { padding: 5px 10px 5px 5px }
aside ul li b .fa:before { content: "\f107" }
aside >ul >li { position: relative; display: inline-block }
aside >ul >li .h4 { padding: 0 7px; }
aside >ul >li { border: #e6e6e6 1px solid; border-radius: 6666px; }
aside >ul >li .h4 a { padding: 10px 16px; font-weight: 300; font-size: 18px; letter-spacing: .05em; border-radius: 6666px; text-transform: uppercase; }
aside >ul >li.action .h4 a,aside >ul >li.action .h4 i { color: var(--primary); }
aside >ul >li.action { border: var(--primary) 1px solid; }
aside >ul >li .subUL { position: absolute; margin-top: 10px; width: 180px; background: var(--white); left: calc((100% - 180px)/2); flex-direction: column; }
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(--black); font-weight: 400 }
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 }
.mb_nav { display: none }
.list_box li .pocimg { width: 100%; aspect-ratio: 40/21; background: #ebebeb; object-fit: contain; display: flex; flex-direction: column; align-items: center; margin: 15px 0; }
.list_box li .pocimg img { object-fit: contain; -webkit-transform: scale(1)!important; }
#content_wrap { padding: 0 0 100px; min-height: 350px }
#content_wrap .list_box li { vertical-align: top; margin-right: 0; margin-left: 0; border: #e7e7e7 1px solid; padding: 40px 15px; border-radius: 10px; }
#content_wrap .list_box li:hover { background: #f8f8f8; }
#content_wrap .img_box { border-radius: 15px; background-color: #f9f9f9; width: 100%; }
#content_wrap .img_box svg { aspect-ratio: 3/4; }
#content_wrap #news_list {display: grid;grid-template-columns: repeat(3,1fr);gap: 20px;}
#content_wrap #news_list li { width: 100% }
#content_wrap #news_list li .info_box { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; }
#content_wrap #news_list li .info_box .h3 { width: 100%; }
#content_wrap .info_box { margin: 15px 0px 0; display: flex; flex-direction: column; gap: 10px; }
#content_wrap .time_box { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; }
#content_wrap .info_box .time { width: auto; font-weight: 400; font-size: 13px }
#content_wrap .info_box .more_btn {margin-left: 10px;padding: 2px 15px;max-width: calc(100% - 105px);height: 22px;font-weight: 100;font-size: 13px;z-index: 0;line-height: 1;}
#content_wrap .info_box .quote_box * { font-weight: 400; font-size: 13px; color: #999999; font-weight: 200; }
#content_wrap .info_box .quote_box:hover * { color: #080808; }
#content_wrap .info_box .h3 { height: 34px; font-size: 20px }
#content_wrap .info_box .infoo { padding: 20px; border-radius: 0 15px 15px 15px; background: #f0f0f0; }
#content_wrap .info_box >div article { height: 42px; line-height: 140%; font-weight: 300; font-size: 15px; -webkit-line-clamp: 2 }
#book_list li h3 { margin-top: 10px; height: 30px; font-size: 18px }
#article_list {display: grid;grid-template-columns: repeat(3,1fr);gap: 15px;}
#content_wrap #article_list li { width: 100%; }
#content_wrap #article_list li .img_box img { -webkit-transform: scale(1); }
#album_list { flex-wrap: wrap; }
#album_list >div { margin: 5px; height: 300px; width: calc((100%/4) - 10px); }
#album_list >div img { width: auto; min-width: 100%; height: 300px; }
#faq_list { margin-bottom: 50px }
#faq_list li { border-bottom: 1px rgba(var(--primary-rgb),.7) dashed }
#faq_list li .title { padding: 20px 20px 20px 0 }
#faq_list li .title font { vertical-align: top }
#faq_list li .title .txt { margin-left: 10px; width: calc(100% - 50px); font-size: 20px }
#faq_list li .title .icon { width: 40px; height: 34px }
#faq_list li .title .icon:before,#faq_list li .title .icon:after { position: absolute; margin: auto; width: 14px; height: 2px; background: var(--primary); display: block; top: calc((100% - 2px)/2); left: calc((100% - 14px)/2); content: "" }
#faq_list li .info { padding: 0 20px 30px 50px; font-size: 15px }
#pagenav{margin-top:50px;}
#pagenav a,#pagenav strong { margin: 0 2px; width: 35px; height: 35px; display: inline-block; text-align: center; line-height: 35px; font-weight: 400 }
#pagenav strong { background: var(--primary); color: var(--white); border-radius: 50% }
#pagenav p { margin: 0 5px; width: calc(50% - 10px); vertical-align: top }
#pagenav p a { margin: 15px 0 0; padding: 0 15px; width: auto; height: auto; line-height: initial; font-size: 0; display: flex; flex-direction: row; justify-content: flex-end; background: unset; }
#pagenav p a i { margin: 0 5px 0 0; width: 11px; line-height: 23px; font-size: 12px; vertical-align: top }
#pagenav p a font { max-width: calc(100% - 16px); min-width: auto; font-size: 14px; vertical-align: top; color: var(--primary); text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
#pagenav p:last-child a i { margin: 0 0 0 5px; color: var(--primary); }
#describe { margin: 2em 0 5vw }
#describe *,.tab_content * { vertical-align: bottom; }
#google_shere { margin-top: 30px }
.form_box p.note .red { color: #f00 }
.form_box p.item { padding: 15px; border-bottom: 1px rgba(var(--primary-rgb),.7) dashed }
.form_box p.item input,.form_box p.item textarea { width: 100%; }
.form_box p.item label span { font-weight: 500; font-size: 17px }
.form_box p.item label i { margin-left: 15px; line-height: 20px; font-size: 20px; color: #f00 }
.form_box p.item font { margin: 5px 0 }
.form_box p.item.check_box { border-bottom: 0 }
.form_box p.send_box { margin: 15px 0 50px }
[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 }
.form_box p.item font.mailNotice { font-size: 13px; color: #999999; }
@media screen and (min-width:1281px) {
  aside >ul >li:hover .h4 a,aside >ul >li:hover .h4 i { color: var(--primary) }
}
@media screen and (max-width:1024px) {
  #album_list >div { width: calc((100%/2) - 10px); }
  #content_wrap #news_list{grid-template-columns: repeat(2, 1fr);}
}
@media screen and (min-width:980px) {
  #google_shere { margin-top: 6vw }
  
}
@media screen and (min-width:761px) {
  .form_box p.item { padding: 30px 20px }
  .form_box p.item label { width: 260px; }
  .form_box p.item font { margin: 0 0 0 30px; width: calc(100% - 290px); }
  .form_box p.item font.mailNotice { margin-left: 290px; }
}
@media screen and (max-width:768px)
{
  #article_list{grid-template-columns: repeat(3, 1fr);}
}
@media screen and (max-width:640px) {
  aside {/* display: none; */}
  #article_list,#content_wrap #news_list { grid-template-columns: repeat(2,1fr); gap: 10px; display: flex; flex-direction: column; }
  #album_list >div,#album_list >div img { height: 40vw }
  .mb_nav { display: flex; flex-direction: column; align-items: center; border: #79797957 1px solid; padding: 10px 0 }
  .mb_nav p { display: flex }
  .mb_nav b { margin-left: 10px; display: flex; align-items: center }
  .soon.mb_nav b .fa { transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg) }
  .mb_nav  .fa:before { content: "\f107" }
  #category_nav {position: absolute;display: flex;flex-direction: column;background: #f3f3f3;width: 100%;height: 0;opacity: 0;justify-content: flex-start;}
  #category_nav.showme {height: 400px;opacity: 100%;z-index: 999;padding-top: 10px;}
  #category_nav.showme li{border:unset;}
  #album_list >div { width: calc((100%/1) - 10px); }
  #album_list >div,#album_list >div img { height: 40vw; }
  #sub_banner_box .parallax_bg { min-height: 300px; }
}
@media screen and (max-width:550px) {
  #content_wrap .list_box li { width: 250px }
  #community { margin-top: 10px }
}
@media screen and (max-width:450px) {
  #album_list >div,#album_list >div img { height: 50vw }
  #pagenav a,#pagenav strong { margin: 0; width: 24px; height: 24px; line-height: 24px; font-size: 14px }
}