@import url('/css/community.css');

/* sub_banner */
#sub_banner a {position: relative;display: inline-block;display: block;width: 100%;-webkit-backface-visibility: hidden;backface-visibility: hidden;}
#sub_banner a img {width: 100vw;height: 390px;object-fit: cover;background-color: rgba(20, 0, 31, 0.53);}
#sub_banner a:after {position: absolute;width: 100%;height: 100%;background: rgb(69 69 69 / 30%);display: block;top: 0;left: 0;content: "";}
#sub_banner{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent;margin-top:110px}
.bannerContainer{color:#fff;position:absolute;top:61%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%;text-align:center;line-height:1.8;z-index:4;display:none}

.bannerSubTitle {margin-bottom: 30px;font-size: 16px;font-family: "Cormorant", serif;color: #fff;letter-spacing: 0;text-shadow: 0 0 9px rgba(0, 0, 0, 0.1); }
.bannerEnTitle {-webkit-box-align: center;-ms-flex-align: center;align-items: center;font-size: 55px;font-family: "Cormorant", serif;color: #fff;letter-spacing: 0;text-shadow: 0 0 9px rgba(0, 0, 0, 0.1);font-style: inherit;text-align: center;}
.bannerTitle {color: #fff;font-size: 17px;font-family: "Noto Serif TC", serif;font-weight: 400;margin: 0px 0;letter-spacing: .1em;text-align: center;}


/* wrap */
#wrap {padding: 0vw 0  70px;}
#describe {overflow: hidden;}
#content .list_article ul{position:relative;margin:0 auto;font-size:0;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:20px 20px}

/* pageTop */
.topContentBox {position: relative;margin: 0vw auto;width: 100%;z-index: 2;}
.topContentBox h1 { margin-bottom: 15px; line-height: 120%; text-align: center; font-family: 'Montserrat', 'Noto Sans TC', sans-serif; font-size: 45px; letter-spacing: 10px; color: #1f1f1f; }
.waylink {padding-top: 15px;padding-bottom: 6px;text-align: center;background-color: #f6f6f6;}
.waylink ol { text-align: center; font-size: 0; }
.waylink ol li, .waylink ol li a {display: inline-block;letter-spacing: 2px;color: #5a5a5a;font-size: 15px;vertical-align: baseline;}
.waylink ol li:after {margin: 0px 10px;font-weight: 100;font-size: 10px;vertical-align: text-top;content: "/";}
.waylink ol li:last-child:after { margin: 0; content: ""; }
.topContentBox {position: relative;z-index: 6;display: grid;grid-template-columns: 320px 1fr;gap: 20px;-webkit-box-align: end;align-items: center;width: 100%;max-width: 1360px;padding-left: 20px;padding-right: 20px;margin: 70px auto 30px;}
.topContentBox::after {content: '';position: absolute;z-index: -1;width: 100%;height: 1px;background-color: #efefef;top: 50%;left: 60%;transform: translate(-50%, -50%);}
.topContentBox .titleBox .title {padding-right: 15px;}
.topContentBox .titleBox .title::after {display: none;}
.topContentBox .classBox {margin-left: auto;background-color: #fff;}
.titleBox {display: flex;}
.titleBox.center {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}

.titleBox .en {position: relative;z-index: 0;display: block;font-size: 26px;letter-spacing: .02em;color: #ababab;font-family: "Crimson Text", serif;}
.titleBox .en::before {content: '';position: absolute;left: -20px;top: -13px;z-index: -1;width: 23px;height: 40px;background-color: #ececec;-webkit-transform: skewX(45deg);-ms-transform: skewX(45deg);transform: skewX(45deg);}
.titleBox .title {position: relative;display: inline-block;font-size: 24px;letter-spacing: .1em;font-weight: 500;font-family: "Noto Serif TC", serif;color: #000;}
.titleBox .title::after {content: '';position: absolute;right: -30px;top: 15px;width: 25px;height: 1px;background-color: #c8c8c8;}
.titleBox.white .en {color: #fff;}
.titleBox.white .en::after {opacity: 0.05;}
.titleBox.white .title {color: #fff;}
.titleBox.white .title::after {background-color: rgba(255, 255, 255, 0.2);}



/* subnav */
#subnav {margin-left: auto;background-color: #fff;}
#subnav #sideBtn {position: relative;overflow: hidden;padding: 10px 20px;width: calc(100% - 45px);background: #fff;border: 1px #aaa solid;display: inline-block;text-align: center;color: #535353;z-index: 2;}
#subnav #sideBtn:before { position: absolute; width: 100%; height: 100%; background: #535353; top: 0; left: 0; transform: translateX(-140%) skewX(63deg); transition: .4s cubic-bezier(.23,1,.32,1); content: ""; }
#subnav #sideBtn font { position: relative; z-index: 1; }
#subnav #sideBtn i { position: absolute; top: calc((100% - 8px) / 2); right: 20px; z-index: 2; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; -webkit-transform: rotate(0); transform: rotate(0); }
#subnav #sideBtn[data-type="2"]:before { -webkit-transform: translateX(0) skewX(0); transform: translateX(0) skewX(0); }
#subnav #sideBtn[data-type="2"] font { color: #fff; }
#subnav #sideBtn[data-type="2"] i { color: #fff; -webkit-transform: rotate(180deg); transform: rotate(180deg); }
#subnav ul {font-size: 0;display: flex;-webkit-box-pack: center;justify-content: flex-end;flex-wrap: wrap;}
#subnav ul li b[data-action="sideOpen"] { position: absolute; padding: 10px 20px; display: block; color: #fff; right: 0; top: 0; cursor: pointer; }
#subnav ul li b[data-action="sideOpen"] i:before { content: "\f067"; }
#subnav ul >li h4 { position: relative; }
#subnav ul >li h4 a { font-weight: 400; color: #fff; }
#subnav ul >li{margin-left: 0;padding: 0;display: block;}
#subnav ul >li >ul.subUL li a {color: #222;background: #fff;display: block;text-align: center;position: relative;font-size: 15px;padding: 8px 0px;border-bottom: 1px rgb(125 17 130 / 35%) solid;}
#subnav ul >li >ul.subUL li:last-child a {border-bottom: 1px rgb(125 17 130 / 0%) solid;}
#subnav ul >li >ul.subUL li a span {font-size: 12px;color: #808080;padding: 5px 5px 0;display: block;text-align: center;}
#subnav ul >li >ul.subUL li a:hover {color: #7f1084;}
#subnav ul >li >ul.subUL li .sub2ULHead a { padding: 2px 15px 2px 35px; color: #2f8bd1; }
#subnav ul >li >ul.subUL b[data-action="sideOpen"] { display: none; }

/* content list_article */
#content .list_article section {padding: 1vw 0 0vw;overflow: hidden;}
#content .list_article li {overflow: hidden;vertical-align: top;display: inline-block;}
#content .list_article section .info {margin: 30px auto;flex-direction: column;}
#content .list_article section .info h3 a , #content .list_book ul li .info h3 {height: 26px;font-weight: 400;letter-spacing: 2px;line-height: 110%;font-size: 21px;color: #1f1f1f;display: inline;align-items: center;}
#content .list_article section .info h3{margin-bottom:15px;display:flex;align-items:flex-start;gap:6px;flex-direction:column;flex-wrap:wrap}
#content .list_article section .info h3 span{color:#747474;font-weight:400;letter-spacing:0.05em;font-family:"Crimson Text",serif;font-style:italic;font-size:14px}
#content .list_article section .info h3 a span{font-size:13px;color:#7f7f7f}
#content .list_article section .info article{height:65px;font-weight:300;line-height:30px;letter-spacing:1px;font-size:14px;color:#1f1f1f;-webkit:2;-webkit-line-clamp:2;position:relative;margin:15px 0 30px 0;padding-top:20px}
#content .list_article section .info article:before{content:'';position:absolute;top:0px;left:0;width:40px;height:1px;background-color:#A0A0A0}

#content .list_article section .img {margin: 0 5% 0 0;width: 100%;display: inline-block;}
#content .list_article section .img img {width: 100%;height: auto;aspect-ratio: 4 / 3;background: #fafafa;object-fit: cover;object-position: 50% 0%;}
#content .list_article section a.more {display: inline-block;max-width: 130px;width: 100%;color: #10254a;font-size: 13px;font-weight: 500;text-align: center;padding: 9px 5px;border-radius: 24px;border: 1px solid #bebebe;}
#content .list_article section a.more svg.arrow{width: 17px;}
#content .list_article section a.more font {margin-right: 10px;margin-bottom: 0px;display: inline-block;font-family: 'Montserrat', 'Noto Sans TC', sans-serif;font-weight: 400;text-transform: uppercase;font-size: 14px;color: #1f1f1f;}
#content .list_book ul li .info a.more svg{width: 20px;display: none;}
#content .list_article section:nth-child(odd) .img {margin: 0 0 0 0%;}

/* content list_news */
#content .list_news ul{display:grid;grid-template-columns: repeat(3, 1fr);gap: 50px;}
#content .list_news li {position: relative;padding: 10px 0px 10px;border-bottom: 1px #e8e8e8 solid;font-size: 0;width: 100%;}
#content .list_news li >a{position:absolute;top: 0;width: 100%;height: 100%;z-index: 1;}
#content .list_news li img{aspect-ratio:4/3}
#content .list_news li .info_box{padding: 20px 20px 10px;}
#content .list_news li .info_box a{background: #92C7CF;color: white;font-size: 15px;padding: 7px 15px;margin-right: 15px;font-family: 'Noto Serif TC', serif;position: relative;z-index: 5;}
#content .list_news li .info_box font{    font-family: "Crimson Text", serif;}
#content .list_news li .info_box h3{margin-top: 10px;height: 60px;font-weight: 500;font-size: 20px;line-height: 150%;font-family: 'Noto Serif TC', serif;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}

/* content list_book */
#content .list_book ul { font-size: 0; }
#content .list_book ul.memberList li { margin-bottom: 20px; width: calc(100% / 3); display: inline-block; }
#content .list_book ul.memberList li >div {margin: 0px 25px 20px;position: relative;}
#content .list_book ul.memberList li >div .date{position:absolute;top: -50px;right: 5px;display:inline-block;background: rgb(7 7 7 / 68%);color: #ffffff;padding:8px;}
#content .list_book ul li .img a{width: 100%;position: relative;display: block;background: #fff;}
#content .list_book ul li .img a::before {content: '';width: 100%;height: 100%;display: block;border: 1px solid #c5c5c5;top: 10px;left: 10px;-webkit-background-size: cover;background-size: cover;position: absolute;bottom: -50px;right: -15px;z-index: -1;}
#content .list_book ul li .img img { width: 100%; height: 300px; object-fit: cover; }
#content .list_book ul li .info h3 {margin: 30px 0 0px 0;font-size: 18px;line-height: 180%;-webkit-line-clamp: 2;letter-spacing: 0.2px;}
#content .list_book ul li .info span.boom{display: flex;color: #979797;}
#content .list_book ul li .info a.more {line-height: 15px;padding-top: 5px;font-size: 13px;display: block;color: #c4c4c4;font-family: 'Libre Baskerville', serif;-webkit-transition: all 0.4s ease;-moz-transition: all 0.4s ease;-o-transition: all 0.4s ease;transition: all 0.4s ease;}
#content .list_book ul li .info a.more:before {-webkit-transition: all 0.4s ease;-moz-transition: all 0.4s ease;-o-transition: all 0.4s ease;transition: all 0.4s ease;line-height: 20px;display: inline-block;width: 20px;height: 20px;font-size: 20px;content: "\f105";color: #fff;background: #d5d5d5;font-family: fontAwesome;text-align: center;margin-right: 5px;}
#content .list_book ul li:hover .info a.more:before{background: var(--primary);color: var(--white);}
#content .list_book ul li:hover .info a.more {letter-spacing: 2px;}
#content .list_book ul li .info a.more font{font-size: 13px;color: #c4c4c4;font-family: 'Libre Baskerville', serif;}

/* list_faq */
.list_faq ul li { margin-bottom: 25px; }
.list_faq ul li .title {position: relative;padding: 20px 65px 20px 25px;background: #f6f6f6;display: block;}
.list_faq ul li .title font { font-size: 18px; color: #1f1f1f; }
.list_faq ul li .title span { position: absolute; width: 16px; height: 16px; display: block; top: calc((100% - 16px) / 2); right: 25px; }
.list_faq ul li .title span:before , .list_faq ul li .title span:after { width: 16px; height: 1px; background: #696969; display: block; content: ""; -webkit-transform: translateY(9px); transform: translateY(9px); }
.list_faq ul li .title span:after { -webkit-transform: translateY(8px) rotate(90deg); transform: translateY(8px) rotate(90deg); }
.list_faq ul li .info { padding: 15px 25px; background: #fff; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
.list_faq ul li.current .title span:after { -webkit-transition-duration: .2s; transition-duration: .2s; -webkit-transform: translateY(8px) rotate(180deg); transform: translateY(180deg) rotate(0); }

/* content */
#content #describe *{}
#describe table{width:100%;height:100%;vertical-align:top;border-collapse:collapse}
#content .workframe .thankBox{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:justify;justify-content:space-between}
#content .workframe .thankBox #describe{width:calc(100%/2 - 105px)}
.page_form form{width:calc(100%/2 - -15px);margin:90px 0 0}
#content .news_top_box{margin-bottom:2vw;padding:10px 20px;border-bottom:1px #7c7c7c solid;font-size:0}
#content .thankBox{padding:50px 0 10px}
#content .workframe .thankBox #describe article{color:rgb(19 19 19 / 70%);font-size:14px;line-height:1.8;letter-spacing:0.2px;font-weight:400;text-align:initial;padding-bottom:20px}
#content .workframe .thankBox #describe em{font-style:initial;text-align:center;color:#606060;font-weight:200;font-family:"Times New Roman","Noto Sans TC",sans-serif;font-size:36px;text-transform:uppercase;letter-spacing:2px}
#content .workframe .thankBox #describe h3{position:relative;padding:10px 0 30px;line-height:1em;font-size:19px;margin-bottom:30px;font-weight:300;color:#535353;letter-spacing:4px}
#content .workframe .thankBox #describe h3:before{content:"";width:85px;height:1px;background-color:#c0c0c0;display:block;position:absolute;bottom:0;left:0}

#gmap iframe { width: 100%; height: 350px; }
.anyconactway li {overflow: hidden;padding: 10px 1.5%;}
.anyconactway li .icon {float: left;width: 50px;color: #d0d0d0;}
.anyconactway li .icon i {font-size: 20px;}
.anyconactway li .txt { float: left; width: calc(100% - 50px); }
.anyconactway li .txt p:nth-child(1){display: none;}
.anyconactway li .txt p { line-height: 180%; font-size: 16px; color: #434343; }
.anyconactway li .txt .gray { color: #707071; }

#content .news_top_box p {margin-right: 10px;display: inline-block;}
#content .news_top_box p.quotebox { margin-right: 0; width: calc(100% - 260px); text-align: right; font-weight: 300; color: #1f1f1f; }
#content .news_top_box p.quotebox a { color: #1f1f1f; }
#content .album_list {margin-bottom: 3vw;margin-top: 4vw;display: grid;grid-template-columns: repeat(3, 1fr);gap: 20px;}
#content .album_list .album_box { margin: 0 0 15px; }
#content .album_list .album_box a { display: block; }
#content .album_list .album_box a img { width: 100%; }

/* pagenav */
#pagenav { position: relative; overflow: hidden; padding: 50px 0 20px; text-align: center; font-size: 0; }
#pagenav a , #pagenav strong { margin: 0 10px; display: inline-block; font-weight: 400; font-size: 18px; color: #1a191f; vertical-align: middle; }
#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; }

/* page_form */
.page_form form { font-size: 0; }
.page_form form p.col {padding: 35px 20px;border-bottom: 1px #e8e8e8 solid;font-size: 0;-ms-flex-align: center;align-items: center;border: 1px solid rgba(190,190,190,0.5);display: -ms-flexbox;display: flex;margin-bottom: 12px;padding: 0px 0;}
.page_form form p.col label {display: inline-block;vertical-align: text-top;width: 130px;box-sizing: border-box;border-right: 1px solid rgba(190,190,190,0.5);color: #444;padding: 8px 15px;text-align: justify;-moz-text-align-last: justify;text-align-last: justify;}
.page_form form p.col label span {font-size: 14px;line-height: 1;display: inline-block;}
.page_form form p.col label b {padding: 0px 7px;display: inline-block;font-weight: 100;font-size: 19px;color: #6d316f;}
.page_form form p.col font {width: calc(100% - 130px);}
.page_form form p input , .page_form form select , .page_form form textarea {padding: 10px 15px;width: calc(100% - 32px);border: 0;display: block;}
.page_form form p select {padding: 15px;width: 100%;}
.page_form form p input#Checknum { margin-right: 10px; width: calc(100% - 110px); display: inline-block; }
.page_form form p.send { padding: 35px 0; text-align: center; }
.page_form form p.send a#btnOK {position: relative;border: 1px #696969 solid;color: #ffffff;display: -ms-flexbox;display: flex;-ms-flex-align: center;align-items: center;-ms-flex-pack: center;justify-content: center;padding: 0 50px;width: 80px;height: 45px;background: #696969;}
.page_form form p.send a#btnOK font {text-align: center;letter-spacing: 3px;color: #ffffff;display: inline-block;width: 140px;}
.page_form form p.send a#btnOK a svg.arrow { position: absolute; width: 20px; right: 20px; top: calc((100% - 11.41px) / 2); }
ul.process_m{margin-top:20px}
ul.process_m .btn{display:inline-block;height:42px;line-height:220%;padding:0 15px;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;font-size:14px;font-weight:400;background-color:rgb(187 187 187 / 17%);color:#144789;letter-spacing:0.2px;position:relative;margin:10px 0}
ul.process_m .btn{color:#717171;font-size:14px;margin:8px 0 2px}
ul.process_m .btn .service-icon{width:25px;display:inline-block;vertical-align:middle}
ul.process_m .btn .service-text{display:inline-block;vertical-align:middle;margin-left:0px;position:relative}
ul.process_m .btn .service-text a{font-size:14px}
ul.process_m .btn i{font-size:16px;margin-right:5px}
ul.process_m li:hover{background-color:#6d316f}
ul.process_m .btn .service-icon a,ul.process_m .btn .service-text a{color:#5d5d5d}
ul.process_m .btn:hover .service-icon a,ul.process_m .btn:hover .service-text a{color:#fff}



@media (max-width: 1390px) {
	.bannerContainer {padding-left: 20px;padding-right: 20px;width: 85%;}
}
@media (max-width: 1366px) {
  .topContentBox {-webkit-box-orient: vertical;-webkit-box-direction: normal;-webkit-box-align: center;align-items: center;max-width: 88%;width: 88%;margin: 40px auto 20px;grid-template-columns: 1fr;}
  .topContentBox::after {display: none;}
  .topContentBox .classBox {margin-right: auto;}
    #content .list_article ul{grid-template-columns: repeat(3, 1fr);}
}
@media (min-width: 1367px) {
  .topContentBox .titleBox .title {background-color: #fff;}
}
@media screen and (min-width: 1281px){
	#subnav {}
	#subnav #sideBtn { display: none; }
	#subnav >ul >li {overflow: hidden;display: inline-block;position: relative;}
	#subnav ul >li h4 {border-top: 1px rgb(171 171 171 / 35%) solid;border-left: 1px rgb(171 171 171 / 35%) solid;border-bottom: 1px rgb(171 171 171 / 35%) solid;border-right: 1px rgb(171 171 171 / 35%) solid;text-align: center;z-index: 3;}
	#subnav ul >li:last-child h4{border-right: 1px rgb(171 171 171 / 35%) solid;}
	#subnav ul >li h4:before , #subnav ul >li h4:after {position: absolute;width: 1px;height: 5px;background: #fff;display: block;bottom: 0;left: calc((100% - 1px) / 2);opacity: 0;content: "";}
	#subnav ul >li h4:after {background: #7f1084;bottom: -5px;}
	#subnav ul >li h4 a {padding: 0 20px;height: 40px;line-height: 40px;color: #757575;position: relative;font-size: 16px;display: block;text-align: center;letter-spacing: 2px;}
	#subnav ul >li h4 a span{font-size: 10px;color: #b9b9b9;padding: 0px 2px;display: block;text-align: center;font-family: 'Noto Serif SC', sans-serif;display: none;}
	#subnav ul >li h4 b[data-action="sideOpen"] { display: none; }
	#subnav ul >li >ul.subUL {position: absolute;margin-top: 0px;padding: 0px 0;width: calc((100% / 1) - 1px);background: #fff;border: 1px rgb(171 171 171 / 35%) solid;opacity: 0;-webkit-transform: translateY(30px);transform: translateY(30px);overflow: hidden;position: absolute;min-width: 150px;transition: all ease-in-out 0.3s;display: block;}
	#subnav ul >li.action h4 , #subnav ul >li:hover h4 , .page_form form p.send a#btnOK:hover {background: var(--black);}
	#subnav ul >li.action h4 a , #subnav ul >li:hover h4 a , .page_form form p.send a#btnOK:hover font {color: #eaeaea;}
	#subnav ul >li.action h4:before , #subnav ul >li.action h4:after , #subnav ul >li:hover h4:before , #subnav ul >li:hover h4:after {opacity: 1;}
	#subnav ul >li.action , #subnav ul >li:hover { overflow: visible; }
	#subnav ul >li:hover >ul.subUL {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0);}
	#content .list_article section a.more:hover font , #content .list_book ul li .info a.more:hover font {margin-right: 20px;}
	#content .list_news li:hover { background: #f6f6f6; }
	.page_form form p.send a#btnOK svg { fill: #fff; }
}

@media screen and (max-width: 1280px){
	#subnav {position: relative;width: 100%;}
	#subnav >ul {overflow: hidden;position: absolute;width: calc(100% - 5px);height: 0;background: #222;border: 1px #4d4d4d solid;top: 0;left: 0;z-index: 1;}
	#subnav ul li h4 { background: #222; z-index: 2; }
	#subnav ul li.action h4 { background: #100f0f; }
	#subnav ul li h4:before { border-color: #3a3a3a; }
	#subnav ul li h4 a {padding: 5px 20px;height: 47px;line-height: 47px;display: inline-block;width: 100%;border-bottom: 1px rgb(214 214 214 / 23%) solid;}
	#subnav ul li h4 a span{margin-left: 10px;display: none;}
    #subnav ul li[data-type="2"] b[data-action="sideOpen"] i:before { content: "\f068"; }
	#subnav >ul.open {height: auto;top: 49px;display: flex;flex-direction: column;align-items: flex-start;}
	#subnav >ul.open li {overflow: hidden;position: relative;width: 100%;}
	#subnav >ul.open li >ul.subUL { position: absolute; width: 100%; background: #3d3d3d; border: #454545 solid; border-width: 1px 0; bottom: 100px; -webkit-transition-duration: .2s; transition-duration: .2s; opacity: 0; z-index: 1; }
	#subnav >ul.open li[data-type="2"] >ul.subUL { position: relative; padding: 5px 0; bottom: 0; opacity: 1; }
	#subnav ul >li >ul.subUL li a { padding: 5px 20px; font-weight: 300; font-size: 15px; color: #d0d0d0; }
	#content .list_article section .img img {}
	#content .album_list {grid-template-columns: repeat(2, 1fr);}
    #sub_banner{margin-top: 80px;}
}
@media (min-width: 641px) and (max-width: 1180px) {
	.bannerEnTitle {font-size: 40px; }
	.bannerTitle {font-size: 20px; }
	#content .list_book ul.memberList li { margin-bottom: 20px; width: calc(100% / 2); display: inline-block; }
}
@media screen and (max-width: 1024px){
    #content .list_news ul{grid-template-columns: repeat(2, 1fr);}
	#content .list_book ul li >div { margin: 0 10px 20px; }
	#content .list_news li >p { width: 120px; text-align: left; }
	#content .list_news li >p.txt { width: calc(100% - 240px); }
}
@media screen and (max-width: 768px){
    #wrap{padding:0vw 0  50px}
    #pagenav{padding:10px 0 0px}
    #content .list_article section .workframe{grid-template-columns:repeat(2,1fr)}
    #content .list_article section .img,#content .list_article section:nth-child(odd) .img{margin:0;width:100%;text-align:center}
    #content .list_article section .img img{}
    #content .list_article section .info{margin:22px auto 0;width:94%}
    #content .list_article section .info article{height:55px;line-height:180%;margin:15px 0 20px 0;padding-top:11px}
    #content .list_article section a.more{}
    #content .list_book ul li{width:50%}
    .page_form form p.col label,.page_form form p.col label span{}
    .page_form form p.col label b{}
    .page_form form p.col font{margin-left:0;width:100%}
    #content .workframe .thankBox{display:block}
    #content .workframe .thankBox #describe,.page_form form{width:100%;margin:20px 0 0}
    #content .list_article ul{grid-template-columns:repeat(2,1fr)}
    #content .list_article li{padding:10px 0 20px}

}
@media (max-width: 767px) {
    .titleBox .en{font-size:32px}
    .titleBox .en::before{left:-10px;top:-3px;width:20px;height:40px}
    .titleBox .title{font-size:17px}
    #sub_banner{margin-top:70px}
}
@media screen and (max-width: 640px){
    .bannerEnTitle {font-size: 28px; }
	.bannerTitle {font-size: 16px; }
	#subnav {width: calc(100% - 0px);}
	#content .list_news li {/* padding: 10px; */}
	#content .list_news li >p { margin-right: 15px; width: auto; }
	#content .list_news li >p.txt , #content .news_top_box p.quotebox { margin-top: 10px; width: 100%; text-align: left; }
	#content .album_list{grid-template-columns:repeat(1,1fr)}
    #content .list_book ul.memberList li{width:100%}
    #content .list_article ul{grid-template-columns:1fr}
}
@media screen and (max-width: 550px){
	#content .list_article section .img img{}
    #content .list_book ul{text-align:center}
    #content .list_book ul li{width:90%}
    #content .album_list{}
    .page_form form p.col{padding:0px 0}
    ul.process_m .btn a .service-icon{width:25px;display:inline-block;vertical-align:middle}
    ul.process_m .btn{height:46px;padding:0 10px;margin:5px 0}
    ul.process_m .btn .service-text{margin-left:10px;width:calc(100% - 40px);font-size:14px}
    ul.process_m .btn .service-text a{width:calc(100% - 0px);line-height:150%}
    #sub_banner a img{height:200px}
}
 @media (min-width: 481px) {
	.bannerEnTitle::after {content: '';-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;height: 1px;margin-left: 0px;background-color: rgb(255 255 255 / 0%);}
}

@media (max-width: 480px) {
    #content .list_news ul{    grid-template-columns: 1fr;}
	.bannerContainer {-webkit-box-align: center;-ms-flex-align: center;align-items: center; }
	#sub_banner a img {width: 100vw;height: 230px;}
}


@media screen and (max-width: 400px){
	#content .list_book ul li { width: 100%; }
}