#sub_banner{position:relative}
#sub_banner_box {opacity: 1;background-color: #2b832b;}
#sub_banner_box .parallax_bg {margin-top: 120px;min-height: 100px;margin-bottom: 0;background-size: auto;}

.webBox .parallax_svg.bann { -webkit-animation: parallax_top 10s linear infinite; animation: parallax_top 10s linear infinite; position: fixed; top: 87px; }
.webBox .wrapper {position: relative;background: #eee;z-index: 2;}

#sub_banner_box {background: linear-gradient(-210deg, var(--primary), var(--primary));}
#sub_banner .banner_tit {width: 100%;height: 100%;z-index: 3;bottom: 0;display: flex;align-items: center;position: absolute;top: 0;left: 50%;transform: translate(-50%, 0%);}
#sub_banner .banner_tit .workframe {display: flex;align-items: center;position: relative;justify-content: space-between;width: 90%;}
#sub_banner .banner_tit .other_txt {font-size: 72px;-webkit-transform: rotate(-11deg) translate(120%, .1em);transform: rotate(-11deg) translate(120%, .1em);display: none;}
#sub_banner .banner_tit h2 {line-height: 1;letter-spacing: .1rem;font-weight: 400;font-size: 1.75rem;color: #ffffff;text-transform: uppercase;}

.waylink ol{margin: 0 auto;display: flex;align-items: center;}
.waylink ol li:first-child a{display: flex;}
.waylink ol li, .waylink ol li a {font-size: 13px;color: #000000;}
.waylink ol li svg{fill: #ffffff;width: 16px;height: 16px;}


#wrap{z-index:4}
#wrap >.workframe{width: min(90%,1240px);background-color:#ffffff;) !important;) !important;padding: 3rem 3rem 2rem;}
#wrap >.mainArea{background-color:rgb(255 255 255 / 0%);padding:4rem 2rem 2rem}
#wrap .sub_title{font-family: "Tenor Sans", serif;font-size: max(5 * (1vw + 1vh) / 2, 50px);line-height: 1.3;margin-top: 120px;display: block;font-style: unset;text-transform: capitalize;}
#wrap .contact_area .title_box .entit{font-family:"Tenor Sans",serif;font-size: max(1.7 * (1vw + 1vh) / 2,20px);line-height:1.3;margin-top:30px}
#wrap .contact_area .title_box .about_sub span::before{content:"";position:absolute;top:-15px;left:0;display:block;width:0.4em;height:0.4em;margin-right:auto;margin-left:auto;border-radius:50%;background-color:var(--complement)}

.titleBox{padding: 0rem 0 0;}
.titleBox .title{font-size: 2.1875rem;position:relative;padding-left:20px;font-weight:500;margin-bottom: 30px;line-height: 170%;color: var(--black);letter-spacing: 2px;}
.titleBox .title:after{background:#ffcd11;border-radius:20px;content:"";height:1.75rem;left:-5px;position:absolute;top:50%;transform:translateY(-50%);width:8px}
.waylink ol{padding-top:5px}
.waylink ol li,.waylink ol li a{letter-spacing:.1em;font-weight:300;font-size:13px;vertical-align:bottom;color:var(--white)}
.waylink ol li:before{margin:0 10px;display:inline-block;font-weight:100;font-size:12px;color:var(--white);content:"/"}
.waylink ol li:first-child:before{display:none}

.btnWrap .btn{display:inline-block;width:200px;height:58px;line-height: 50px;font-size:16px;letter-spacing:1.5px;color:#3a3a3a;text-align:center;background-color:#eaeaea;margin-right:10px}
.btnWrap a.btn:hover{color:#fff;background-color:var(--primary)}
.btnWrap{display:flex;align-items:center;justify-content:center;margin-top: 60px;}

#category_nav{text-align: justify;}
aside {margin-bottom: 60px;z-index: 5;background: #74b874;padding: 20px;border-radius: 7px;}
aside ul li b { padding: 5px 10px 5px 5px; }
aside ul li 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 b .fa:before { content: "\f107"; }
aside>ul>li { position: relative; display: inline-block; }
aside>ul>li h4 {padding: 0 5px;}
aside>ul>li h4 a {padding: 4px 11px;font-weight: 600;font-size: 1.4rem;letter-spacing: 1px;border-radius: 8px;color: #fff;}
aside>ul>li.action h4 a, aside>ul>li.action h4 i {color: var(--white);background: linear-gradient(-210deg, var(--primary), var(--primary));}
aside>ul>li .subUL { position: absolute; margin-top: 10px; width: 180px; background: var(--white); left: calc((100% - 180px) / 2); transform: translate(0, 30px); -webkit-transform: translate(0, 30px); }
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"] ul li h4 b .fa { transform: rotate(180deg); -webkit-transform: rotate(180deg); }
aside>ul>li[data-type="2"] .subUL { box-shadow: 0 0 15px rgba(var(--black-rgb), .15); opacity: 1; z-index: 1; transform: translate(0, 0); -webkit-transform: translate(0, 0); }
aside form{
    z-index: 9999;
    display: grid;
    grid-template-columns: 1fr 8%;
}
aside form #btn_s{
    width: 100%;
    text-align: center;
}

.mb_nav { display: none; }

#content_wrap{padding:0 0 30px;min-height:350px}
#content_wrap .list_box li{vertical-align:top;background-color:#fff;border:1px solid #0000002d;padding:1rem;border-radius:7px;width:auto}
#content_wrap .img_scale img{aspect-ratio:4/ 2.5;object-fit:contain}
#content_wrap .img_box{}
#content_wrap .info_box{margin:15px 0 0}
#content_wrap .dateClassBar{border-bottom:1px solid #d4d4d4;padding-bottom:40px;margin-bottom:40px}
#content_wrap .info_box .time{width:65px;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:6}
#content_wrap .info_box .quote_box *{font-weight:400;font-size:13px}
#content_wrap .info_box h3{-webkit-line-clamp:2;margin-top:10px;font-size:1.5rem;margin-bottom:10px;height:39px}
#content_wrap .info_box>div{}
#content_wrap .info_box>div article{height:42px;line-height:140%;font-weight:300;font-size:15px;-webkit-line-clamp:2}
#content_wrap li p.txt_clamp{-webkit-line-clamp:3;height:91px;letter-spacing:.5px;font-size:16px}
#news_list,#book_list,#market_list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 20px}
#content_wrap li .circleBox{position:relative;z-index:10;width:110px;display:flex;margin-left:auto;margin-top:40px;border:1px solid hsl(0deg 0% 48.8% / 30%);border-radius:50px;padding:10px 20px}
#content_wrap li .moreBtn{font-family:"Tenor Sans",serif;font-size:16px}
#content_wrap li:hover .circleBox span{top:60%;width:20px;height:20px}
#content_wrap li:hover .circleBox .circle{width:8px;height:8px;background:#fff}
#content_wrap li:hover .circleBox .Img{opacity:1}
#content_wrap li .circleBox .circle,#custom_area ul li .circleBox .circle{position:absolute;top:59%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:inline-block;width:0px;height:0px;border-radius:100%}
#content_wrap li .circleBox .circle{width:40px;height:40px;border-radius:50%;background-color:var(--secondary);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);right:10px}
#content_wrap li .circleBox .circle::before{content:"";position:absolute;width:8px;height:8px;border-left:1px solid #363636;border-bottom:1px solid #363636;right:0px;top:50%;left:-5px;margin:auto;-webkit-transform:translateY(-50%) rotate(225deg);transform:translateY(-50%) rotate(225deg)}
#content_wrap .timeInfoBox .releasetime{font-size:1.25rem;color:#212529bf;display:flex;align-items:baseline;font-weight:500}
#content_wrap .timeInfoBox .releasetime svg{width:17px;height:17px;fill:#212529bf;margin-right:10px}
#book_list li .Txt{padding:20px 0px}
#book_list li .Txt h3{font-size:1.5rem;margin-bottom:10px;height:39px}
#album_list{margin-bottom:5vw;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
#album_list>div img{width:auto;min-width:100%;aspect-ratio:4/3}
#market_list li .Txt{border-bottom:1px solid #d4d4d4;padding-bottom:40px;margin-bottom:40px}
#market_list li .dateInfoBox{display:flex;justify-content:space-between}
#market_list li .class{border:1px solid hsl(0deg 0% 48.8% / 30%);border-radius:50px;padding:4px 10px;background-color:var(--primary);color:#fff;font-size:14px}
#market_list li .dateInfoBox .date{margin:0;padding-right:0;color:#bcbcbc;border-right:0px solid #dbdbdb;font-size:16px}
#market_list li .circleBox{z-index:100;display: flex;margin-left: auto;margin-top: 40px;border: none;border-radius: 0;padding: 0;width: auto;justify-content: flex-end;}

#market_list li .circleBox .moreBtn a{position:relative;z-index:10;width: 110px;display: flex;margin-left: auto;margin-top: 40px;border: 1px solid hsl(0deg 0% 48.8% / 30%);border-radius: 50px;padding: 10px 20px;}
#market_list li .circleBox .moreBtn .circle{width:40px;height:40px;border-radius:50%;background-color:var(--secondary);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);right:10px}
#market_list li .circleBox .moreBtn .gray{
    background-color: #dddddd;
}
#market_list li .circleBox .moreBtn .circle::before{content:"";position:absolute;width:8px;height:8px;border-left:1px solid #363636;border-bottom:1px solid #363636;right:0px;top:50%;left:-5px;margin:auto;-webkit-transform:translateY(-50%) rotate(225deg);transform:translateY(-50%) rotate(225deg)}
#market_list li .circleBox:hover span{top:60%;width:20px;height:20px}
#market_list li .circleBox:hover .moreBtn .circle{width: 8px;height: 8px;background:#fff;}



.dateInfoBox{display:flex;flex-wrap:wrap;align-items:baseline;padding:0px 0}
.dateInfoBox .date{position:relative;font-size:13px;letter-spacing:0.5px;padding-right:15px;margin:0 13px 0 0;color:#666;border-right:1px solid #dbdbdb}
.dateInfoBox .classTitle{display:flex;align-items:baseline}
.dateInfoBox .classTitle .title{position:relative;text-transform:uppercase;font-size:13px;letter-spacing:1px;padding-right:38px;margin-right:15px;color:#666}
.dateInfoBox .classTitle .title::after{content:"";position:absolute;pointer-events:none;top:calc(50% - 0.5px);right:0;width:30px;height:1px;background-color:#dbdbdb}
.dateInfoBox .classTitle .class{
    font-size: 16px;
}
#news_list li .Ntitle_box{padding:0 0 20px 0}

#faq_list { margin-bottom: 50px; }
#faq_list li { border-bottom: 1px rgba(var(--primary-rgb), .7) dashed; }
#faq_list li .title {padding: 15px 20px 15px 0;background-color: #f4f4f4;}
#faq_list li .title font { vertical-align: top; }
#faq_list li .title .txt {margin-left: 10px;width: calc(100% - 50px);font-size: 20px;font-weight: 500;}
#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 .title .icon:after { transform: rotate(90deg); -webkit-transform: rotate(90deg); }
#faq_list li .info {padding: 10px 20px 20px 50px;font-size: 15px;transition: unset;-webkit-transition: unset;}
#faq_list li.current .title .icon:after { transform: rotate(180deg); -webkit-transform: rotate(180deg); }

#pagenav{margin-top: 60px;}
#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; }
#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; font-weight: 100; vertical-align: top; }
#pagenav p:last-child a i { margin: 0 0 0 5px; }

#describe {margin: 1.4em 0 0vw;}
#describe *, .tab_content * {vertical-align: bottom;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
#describe p{/* text-align: justify; */color: #383838;font-family: 'Noto Sans TC';margin-bottom: 1rem;}
#describe p span,#describe p{        font-size: 1.25rem ;}
#google_shere { margin-top: 30px; }

.form_box p.note .red { color: #f00; }
.form_box p.item {padding: 15px;}
.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; }
.form_box p.send_box a{padding: 15px 30px;font-family: 'Noto Sans TC';}

[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 { width: 50px; height: 50px; border: 2px rgba(var(--black-rgb), .6) solid; border-left-color: rgba(var(--white-rgb), .4);border-radius: 50%; }
[data-action="loader"]#lodbg .loader_circle { -webkit-animation: circle infinite 0.75s linear; animation: circle infinite 0.75s linear; }
#lodbg { opacity: 1; z-index: 99999; }

@keyframes circle { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
@-webkit-keyframes circle { 0% { -webkit-transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); } }

@media screen and (min-width:1281px) {
	aside>ul>li:hover h4 a, aside>ul>li:hover h4 i {color: var(--white);background: linear-gradient(-210deg, var(--secondary), var(--secondary));}
}

@media screen and (min-width:981px) {
	#google_shere { margin-top: 6vw; }

}
@media screen and (min-width:761px) {
	.form_box p.item { padding: 30px 20px; }
	.form_box p.item label { width: 170px; }
	.form_box p.item font { margin: 0 0 0 30px; width: calc(100% - 200px); }
}
@media screen and (max-width:1280px) {
    #sub_banner_box .parallax_bg{margin-top:80px}
	#news_list ul,#book_list ul,#market_list ul{grid-template-columns: repeat(2, 1fr);}
}
@media screen and (max-width:1024px) {
	#album_list{    grid-template-columns: repeat(2, 1fr);}	
	#sub_banner .banner_tit h2{font-size:1.25rem}
	#sub_banner .banner_tit .workframe{display:flex;flex-direction:column;align-items:flex-start;gap:6px 20px}
}
@media screen and (max-width:768px){
	aside{padding: 10px;margin-bottom:10px}
	aside form{
    grid-template-columns: repeat(1, 1fr);
    gap: 5px;
    margin-top: 10px;
}
}
@media screen and (max-width:640px) {
	#wrap >.workframe{padding:2rem 0}
	#content_wrap{}
	.webBox .wrapper{background:#ffffff}
	.titleBox h1{font-size:1.55rem}
	.titleBox .title{font-size:1.6rem}
	#sub_banner_box .parallax_bg{opacity:.4}
	aside>ul>li h4 a{display:block  !important;!i;!;color:#030303;font-size:16px;font-weight:500}
	
	#content_wrap .list_box li{display:block}
	.mb_nav{display:flex;flex-direction:column;align-items:center;border:#79797957 1px solid;padding:10px 0}
	.mb_nav p{display:flex;color: #fff;font-weight: 400;}
	.mb_nav b{margin-left:10px;display:flex;align-items:center;color: #fff;}
    .mb_nav b i{color: #fff;}
	.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:#ffffff;width:100%;height:0;opacity:0}
	#category_nav.showme{height:auto;opacity:100%;z-index:999}
	#faq_list li .title .txt{font-size:17px}
	#faq_list li .title{padding:11px 20px 11px 0}
	#news_list,#book_list,#market_list{grid-template-columns:1fr}
	#pagenav{margin-top:30px}
	#describe p span,#describe p{font-size:1.05rem}
}
@media screen and (max-width:550px) {
	#community { margin-top: 10px; }
}
@media screen and (max-width:450px) {
	#pagenav a, #pagenav strong { margin: 0; width: 24px; height: 24px; line-height: 24px; font-size: 14px; }
	#pagenav p a { display: block; }
}