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

/* layout.less */
aside #sidebtn:before{transform:translateX(-140%) skewX(63deg);-webkit-transform:translateX(-140%) skewX(63deg);}aside #sidebtn i{transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out;transform:rotate(0);-webkit-transform:rotate(0);}aside #sidebtn[data-type="2"]:before{transform:translateX(0) skewX(0);-webkit-transform:translateX(0) skewX(0);}aside #sidebtn[data-type="2"] i{transform:rotate(180deg);-webkit-transform:rotate(180deg);}aside > ul > li{overflow:hidden;}aside > ul > li .subUL{opacity:0;}@media (min-width:1281px){aside > ul > li .subUL{transform:translate(0,30px);-webkit-transform:translate(0,30px);}aside > ul > li:hover{overflow:visible;}aside > ul > li:hover .subUL{transform:translate(0,0);-webkit-transform:translate(0,0);opacity:1;}}@media (max-width:1280px){aside > ul > li > ul{transform:translate(0,-30px);-webkit-transform:translate(0,-30px);}aside > ul > li[data-type="2"] > ul{transform:translate(0,0);-webkit-transform:translate(0,0);}}#orderfunction a,.orderWrap .list .info p.qBox a{width:25px;height:25px;border-radius:50%;}[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);}}

/* sbox */
#sbox{display:flex;align-items: center;justify-content: center;}
#sbox .text{position:absolute;z-index: 5;display: flex;flex-direction: column;align-items: center;gap: 10px;margin-top: 60px;}
#sbox .pag_tit {color: #123f6d;font-size: 24px;line-height: 1.25;font-weight: 700;letter-spacing: 1.7px;}
#sbox .en_tit{color: var(--primary);font-size: 44px;line-height: 1;font-family: "Source Serif 4", serif;font-weight: 500;letter-spacing: 3.2px;}

/* sub_banner */
#sub_banner { width: 100%; height: 500px; }
#sub_banner:after {position: absolute;width: 100%;height: 100%;background: #f3f9fc;top: 0;left: 0;z-index: 1;content: "";opacity: .9;}
#sub_banner:after {background: linear-gradient(to right, #ffffff 20%, rgb(255 255 255 / 10%) 100%);}
#sub_banner a {height: 100%;background: no-repeat 50% / cover;}
#sub_banner .scrollDown {position: absolute;left: calc(50% - 62.5px);bottom: -40px;z-index: 10;}
#sub_banner .scrollDown > a {display: block;white-space: unset;}
#sub_banner .scroll_circle {position: relative;width: 125px;aspect-ratio: 1;border-radius: 50%;transition: background .35s ease,transform .35s ease,box-shadow .35s ease;display: flex;align-items: center;justify-content: center;}
#sub_banner .scroll_text {position: absolute;width: 125px;aspect-ratio: 1;overflow: visible;animation: bannerScrollRotate 12s linear infinite;}
#sub_banner .scroll_text text {fill: #17497d;font-size: 14px;font-weight: 500;letter-spacing: 1.8px;transition: fill .35s ease;font-family: "Source Serif 4", serif;}
#sub_banner .scroll_arrow {position: absolute;width: 20px;height: 30px;animation: bannerScrollMove 1.7s ease-in-out infinite;top: 58px;}
#sub_banner .scroll_arrow span:first-child { position: absolute; left: 50%; top: 1px; width: 1px; height: 20px; background: #17497d; transform: translateX(-50%); transition: background .35s ease; }
#sub_banner .scroll_arrow span:last-child { position: absolute; left: 50%; bottom: 3px; width: 8px; height: 8px; border-right: 1px solid #17497d; border-bottom: 1px solid #17497d; transform: translateX(-50%) rotate(45deg); transition: border-color .35s ease; }
#sub_banner .scrollDown:hover .scroll_circle {transform: scale(1.06);}
@keyframes bannerScrollRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes bannerScrollMove {
  0%,100% {transform: translate(0%,-57%);}
  50% { transform: translate(0%,-35%); }
}
/* wrap */
#wrap {z-index: 2;}

/* top_title */
#content_wrap .pag_tit {color: #3c4042;font-size: 30px;font-weight: 700;line-height: 1.25;letter-spacing: .04em;margin-bottom: 40px;}

/* waylink */
.waylink ol {margin: 20px 0;}
.waylink ol li, .waylink ol li a {display: inline-flex;align-items: center;font-size: 16px;line-height: 1;letter-spacing: 0.5px;}
.waylink ol li a{gap:10px;}
.waylink ol li a svg{width: 15px;height: 16.5px;fill: var(--triadic1);}
.waylink ol li:after {margin: 0 10px;display: inline-block;content: "";width: 4px;height: 1px;background-color: #666666;}
.waylink ol li:last-child:after {display:none; }

/* aside */
aside { margin: 3vw auto; }
aside #sidebtn { padding: 10px 20px; width: calc(100% - 40px); z-index: 2; }
aside #sidebtn:before { position: absolute; width: 100%; height: 100%; background: rgba(var(--white-rgb), .1); top: 0; left: 0; transition: .4s cubic-bezier(.23,1,.32,1); content: ""; }
aside #sidebtn i { top: calc((100% - 16px) / 2); right: 20px; }
aside >ul >li b[data-action="sideOpen"] { position: absolute; padding: 5px 20px; display: block; top: calc((100% - 42px) / 2); right: 0; cursor: pointer; }
aside >ul >li b[data-action="sideOpen"] i:before { content: "\f067"; }
aside >ul >li[data-type="2"] b[data-action="sideOpen"] i:before { content: "\f068"; }
aside >ul >li .h4 a { padding: 20px; font-weight: 400; font-size: 17px; }
aside >ul >li.action .h4 a { color: var(--primary); }
aside >ul >li ul.subUL { position: absolute; width: 170px; background: rgba(var(--black-rgb), .85); left: calc(50% - 85px); z-index: 5; opacity: 0; }
aside >ul >li ul.sub2UL { margin-left: 10px; }
aside >ul >li ul.subUL li >div { position: relative; }
aside >ul >li ul.subUL li a { padding: 5px 15px 5px 30px; display: block; }
aside >ul >li ul.subUL li [data-action="sideOpen"] { display: none; }
aside >ul >li ul.sub2UL li a { color: var(--complement); }

/* content_wrap */
#content_wrap {padding: 5vw 0;}

/* list_box */
.list_box li { margin: 30px 15px; }
.list_box li h3 { height: 30px; font-weight: 400; font-size: 18px; }

/* describe */
#describe {margin-bottom: 2vw;}
#describe * { vertical-align: bottom; }

/* article_list */
#article_list {display: grid;grid-template-columns: repeat(3,1fr);gap: 35px;margin: 0;padding: 0;list-style: none;white-space: normal;}
#article_list li {position: relative;overflow: hidden;background: #fff;margin: 0;}
#article_list li > .over_hid { width: 100%; aspect-ratio: 4/3; overflow: hidden; background: #f4f7f9; }
#article_list li img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22,.61,.36,1); }
#article_list .info_box {position: relative;padding: 14px 0 0;}
#article_list .info_box:before {content: "";position: absolute;left: 0;top: -17px;width: 42px;height: 1px;background: #c7a66a;transition: width .35s ease;}
#article_list .h3 {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;font-size: 18px;font-weight: 500;line-height: 1.65;letter-spacing: .05em;transition: color .35s ease;height: auto;}
#article_list .atag_item { inset: 0; z-index: 3; }
#article_list li:hover img { transform: scale(1.05); }
#article_list li:hover .info_box:before { width: 80px; }
#article_list li:hover .h3 { color: #17497d; }

/* news_list */
#news_list{display:grid;grid-template-columns: repeat(3, 1fr);gap: 60px;}
#news_list li {margin: 0;}
#news_list li img {aspect-ratio:4/3 }
#news_list li .info_box{margin-top:20px}
#news_list li p{font-size:13px;font-family: Arimo, sans-serif;color: #666;}
#news_list li .h3{height: 68px;font-size: 20px;font-weight: 500;-webkit-line-clamp: 2;}
#news_list li article{font-size: 15px;-webkit-line-clamp: 2;color: #666;margin-top: 10px;height: auto;}

/* book_list */
#book_list .row { margin: 30px 15px; display: inline-block; }
#book_list .row img { height: 400px; }
#book_list .row .info_box { padding: 100px 15px 40px; width: calc(100% - 30px); background: -webkit-linear-gradient(top,transparent 0,rgba(var(--black-rgb), .01) 2%, rgba(var(--black-rgb), .8) 90%); background: linear-gradient(to bottom,transparent 0,rgba(var(--black-rgb), .01) 2%, rgba(var(--black-rgb), .8) 90%); bottom: 0; left: 0; }

/* album_list */
#album_list { margin-bottom: 5vw; flex-wrap: wrap; }
#album_list >div { margin: 0 1px 1px 0; height: 300px; flex-grow: 1; }
#album_list >div img { width: auto; min-width: 100%; height: 300px; }

/* faq_list */
#faq_list { margin: 0; padding: 0; list-style: none; border-top: 1px solid #dbe2e8; }
#faq_list, #faq_list *{transition:unset;-webkit-transition:unset;}
#faq_list li { position: relative; margin: 0; padding: 0; border-bottom: 1px solid #dbe2e8; background: #fff; transition: .35s ease; }
#faq_list li.current { background: #f8fafc; }
#faq_list .title {position: relative;display: flex !important;align-items: center;width: 100%;min-height: 88px;padding: 22px 70px 22px 0;background: transparent !important;color: #16283b;text-decoration: none;white-space: normal;box-sizing: border-box;}
#faq_list .title label {flex: 0 0 60px;margin: 0;color: #c7a66a;font-family: "Source Serif 4",serif;font-size: 16px;font-weight: 400;letter-spacing: .08em;vertical-align: middle;text-align: center;}
#faq_list .title font {flex: 1;display: block;margin: 0;color: #16283b;font-size: 18px;font-weight: 500;line-height: 1.65;letter-spacing: .05em;vertical-align: middle;transition: .35s ease;}
#faq_list .title:before {content: "";position: absolute;right: 10px;top: 50%;width: 32px;height: 32px;background: var(--primary);border-radius: 50%;transform: translateY(-50%);transition: .35s ease;}
#faq_list .title:after {content: "+";position: absolute;right: 21px;top: 51%;color: white;font-family: Arial,sans-serif;font-size: 16px;font-weight: 600;line-height: 1;transform: translateY(-50%);}
#faq_list li.current .title:before { border-color: #17497d; background: #17497d; }
#faq_list li.current .title:after {content: "-";right: 23px;top: 49%;}
#faq_list li.current .title font { color: #17497d; }
#faq_list li:hover .title font { color: #17497d; }
#faq_list li:hover .title:before { border-color: #17497d; }
#faq_list .info { position: relative; padding: 0 70px 30px 60px; color: #607b99; font-size: 16px; line-height: 2; letter-spacing: .04em; white-space: normal; box-sizing: border-box; }
#faq_list .info p {margin: 0;font-size: 16px;line-height: 2;letter-spacing: .04em;}
#faq_list .info br { line-height: 2.2; }
#faq_list li.current:before { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: #c7a66a; }

/* pagenav */
#pagenav { padding: 50px 0 20px; }
#pagenav a , #pagenav strong { margin: 0 10px; display: inline-block; font-weight: 400; vertical-align: middle; }
#pagenav a:first-child , #pagenav a:last-child { line-height: 9px; }
#pagenav strong { color: var(--primary); }
#pagenav a[class^="page-"] { float: left; width: calc(50% - 20px); display: block; }
#pagenav a[class^="page-"] font { width: calc(100% - 22px); display: inline-block; vertical-align: text-top; }
#pagenav a[class^="page-"] i { margin: 0 10px 0 0; display: inline-block; }
#pagenav a.page-next { float: right; text-align: right; }
#pagenav a.page-next font { text-align: right; }
#pagenav a.page-next i { margin: 0 0 0 10px; }

/* newpagenav */
#newpagenav{margin-top: 20px;display: grid;grid-template-columns: repeat(2, 1fr);gap: 50px;position: relative;}
#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;}

/* form_box */
.form_box {margin-top:50px;}
.form_box form { width: 100%; margin: 0; display: flex; flex-wrap: wrap; gap: 28px 3%; }
.form_box form > p { width: 48.5%; margin: 0; vertical-align: top; white-space: normal; }
.form_box form > p:nth-child(5) { width: 100%; }
.form_box form > p.checknum { width: 48.5%; }
.form_box form > p:last-child { width: 48.5%; display: flex; align-items: flex-end; justify-content: flex-end; }
.form_box label {margin-bottom: 10px;color: #16283b;font-size: 16px;font-weight: 500;line-height: 1.5;letter-spacing: .08em;}
.form_box label span { margin-left: 4px; color: #c7a66a !important; }
.form_box input[type="text"],.form_box input[type="email"],.form_box input[type="tel"],.form_box textarea { width: 100%; padding: 14px 16px; border: 1px solid #d8e0e7; border-radius: 0; background: #fff; color: #16283b; font-family: inherit; font-size: 16px; line-height: 1.6; letter-spacing: .03em; box-sizing: border-box; outline: none; transition: border-color .3s ease,background .3s ease; }
.form_box input[type="text"],.form_box input[type="email"],.form_box input[type="tel"] { min-height: 52px; }
.form_box textarea { resize: vertical; min-height: 150px; }
.form_box input:focus,.form_box textarea:focus { border-color: #17497d; background: #fbfdff; }
.form_box input::placeholder,.form_box textarea::placeholder { color: #a9b9c9; }
.form_box .checknum font { display: flex; align-items: center; gap: 12px; width: 100%; }
.form_box .checknum input { flex: 1; min-width: 0; }
.form_box #btnOK { position: relative; min-width: 180px; padding: 15px 28px; border: 1px solid #17497d; background: #17497d !important; color: #fff; font-size: 16px; line-height: 1.4; letter-spacing: .12em; text-decoration: none; box-sizing: border-box; transition: .3s ease; }
.form_box #btnOK:after { content: "⇀"; margin-left: 18px; font-family: Arial,sans-serif; font-size: 18px; transition: transform .3s ease; }
.form_box #btnOK:hover { background: #fff !important; color: #17497d; }
.form_box #btnOK:hover:after { transform: translateX(5px); }

/* 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){
	aside >ul { padding: 0 15px; }
	aside >ul >li { overflow: hidden; position: relative; display: inline-block; }
	aside >ul li b[data-action="sideOpen"] { display: none; }
	aside >ul >li:hover { overflow: visible; }
	aside >ul >li:hover .h4 a { color: var(--primary); }
	aside >ul >li:hover ul.subUL { opacity: 1; }
	#news_list li:hover .info_box { bottom: 30px; }
	#product_list li:hover .info_box .line { width: 100%; }
	#book_list li:hover .info_box { padding-bottom: 60px; }
}
@media screen and (max-width: 1280px){
	aside { position: relative; width: 500px; }
	aside #sidebtn { display: inline-block; }
	aside >ul { position: absolute; overflow: hidden; margin-top: 1px; width: 100%; height: 0; background: rgba(var(--black-rgb), .85); top: 0; left: 0; z-index: 1; }
	aside >ul.open { height: auto; border-width: 1px; top: 50px; }
	aside >ul >li { position: relative; }
	aside >ul >li .h4 a { padding: 10px 15px; }
	aside >ul >li ul.subUL { overflow: hidden; width: 100%; height: 0; background: var(--secondary); top: 0; left: 0; }
	aside >ul.open >li[data-type="2"] >ul { position: relative; height: auto; top: auto; bottom: 0; opacity: 1; }
}
@media screen and (max-width: 1024px){
    #sub_banner{height:400px;}
	.form_box form { gap:24px 3%; }
	.form_box form > p,
	.form_box form > p.checknum,
	.form_box form > p:last-child { width:48.5%; }
	#faq_list .title { min-height:78px; padding:20px 60px 20px 0; }
	#faq_list .title label { flex-basis:50px; }
	#faq_list .title font { font-size:18px; }
	#faq_list .info { padding:0 60px 28px 50px; }
	#article_list img { height: 35vw; }
}
@media screen and (max-width: 761px){
	#book_list .row img { height: 350px; }
}
@media screen and (max-width:900px) {
    #news_list{grid-template-columns: repeat(2, 1fr);}
	#article_list {grid-template-columns:repeat(2,1fr);}
	#article_list .h3 { font-size:18px; }
}
@media screen and (max-width: 640px){
    #content_wrap .pag_tit{font-size: 22px;line-height: 1.5;}
    #sbox .en_tit{font-size: 26px;letter-spacing: 1px;}
    #sbox .pag_tit{font-size:18px;}
    #sub_banner .scrollDown{display:none;}
    #sub_banner{height: 250px;}
    #news_list{grid-template-columns:1fr;}
	#article_list { grid-template-columns:1fr; gap:28px; }
	#article_list .info_box { padding-top:18px; }
	#article_list .h3 { font-size:17px; }
	#article_list li:after { opacity:1; transform:none; }
	.form_box form { display:block; }
	.form_box form > p,
	.form_box form > p:nth-child(5),
	.form_box form > p.checknum,
	.form_box form > p:last-child { width:100%; margin-bottom:22px; }
	.form_box form > p:last-child { display:block; text-align:left !important; }
	.form_box #btnOK { width:100%; }
	#faq_list .title { min-height:0; padding:20px 50px 20px 0; align-items:flex-start; }
	#faq_list .title label { flex:0 0 38px; padding-top:2px; font-size:12px; }
	#faq_list .title font { font-size:17px; line-height:1.7; }
	#faq_list .title:before { right:6px; width:26px; height:26px; }
	#faq_list .title:after {right: 15px;font-size: 14px;top: 50%;}
    #faq_list li.current .title:after{right: 17px;}
	#faq_list .info { padding:0 45px 24px 38px; font-size:15px; line-height:1.9; }
	#faq_list .info:before { left:0; font-size:12px; }
	#faq_list .info p { font-size:15px; line-height:1.9; }
	aside { width: 100%; }
	#album_list >div , #album_list >div img { height: 40vw; }
	.form_box input#Checknum { width: calc(100% - 90px); }
}
@media screen and (max-width: 500px){
	#product_list { width: 100%; }
	#album_list >div , #album_list >div img { height: 50vw; }
}