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

/* sub_banner */
#sub_banner a {position: relative;display: inline-block;background-color: rgba(20, 0, 31, 0.53);display: block;width: 100%;-webkit-backface-visibility: hidden;backface-visibility: hidden;}
#sub_banner a::before {content: '';position: absolute;left: 0;top: 0;z-index: 2;width: 100%;height: 100%;background-color: rgba(20, 0, 31, 0.53);background-image: url(/images/00/dot.png);pointer-events: none;}
#sub_banner a img {width: 100vw;height: 350px;object-fit: cover;background-color: rgba(20, 0, 31, 0.53);}
#sub_banner a:after { position: absolute; width: 100%; height: 100%; background: rgb(31 31 31 / .3); 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;
}
.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;
}
.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 .workframe{
    position: relative;
    margin: 0 auto;
    font-size: 0;
    z-index: 1;
}

/* 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: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-align: end;-ms-flex-align: end;align-items: flex-end;margin-bottom: 30px;width: 100%;max-width: 1360px;padding-left: 20px;padding-right: 20px;margin: 70px auto;}
.topContentBox::after {content: '';position: absolute;left: 30px;top: 60px;z-index: -1;width: 100%;height: 1px;background-color: #efefef;}
.topContentBox .titleBox .title {padding-right: 15px;}
.topContentBox .titleBox .title::after {display: none;}
.topContentBox .classBox {margin-left: auto;background-color: #fff;}
.titleBox {display: -webkit-box;display: -ms-flexbox;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: "Times New Roman", "Noto Sans TC", sans-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: 19px;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;margin-top: 20px;}
#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: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-ms-flex-wrap: wrap;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 h2{text-align:center;color: rgba(57, 57, 57, 0.7);font-size: 15px;line-height: 1.8;letter-spacing: 0.2px;font-weight: 400;}
#content .list_article section {padding: 1vw 0 0vw;overflow: hidden;}
#content .list_article li {align-items: center;justify-content: space-between;width: calc((100%/4) - 16px);padding: 0px 15px 35px 0;overflow: hidden;vertical-align: top;display: inline-block;}
#content .list_article section .info {width: 93%;margin: 30px auto;}
#content .list_article section .info h3 a , #content .list_book ul li .info h3 {margin-bottom: 5px;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;
}
#content .list_article section .info h3 span{
    color: #747474;
    font-weight: 400;
    letter-spacing: 0.05em;
}
#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%;}
#content .list_article section .img img {width: 100%;height: 220px;background: #fafafa;object-fit: cover;}
#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%;order: 1;}

/* content list_news */
#content .list_news li {position: relative;padding: 10px 0px 10px;border-bottom: 1px #e8e8e8 solid;font-size: 0;}
#content .list_news li .post{padding: 10px 10px 5px;}
#content .list_news li .post p{font-size: 20px;}
#content .list_news li >a { position: absolute; width: 100%; height: 100%; display: block; top: 0; left: 0; z-index: 2; }
#content .list_news li >p {position: relative;display: inline-block;padding: 0px 15px 0 10px;z-index: 1;}
#content .list_news li >p.time:before{content: '';position: absolute;top: 50%;right: 0;width: 4px;height: 4px;-webkit-border-radius: 100px;-moz-border-radius: 100px;-ms-border-radius: 100px;-o-border-radius: 100px;border-radius: 100px;background-color: #999999;-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-ms-transform: translateY(-50%);-o-transform: translateY(-50%);transform: translateY(-50%);}
#content .list_news li >p.cat { z-index: 3; }
#content .list_news li >p.cat a , #content .news_top_box p.cat a {padding: 6px 15px;background: #1f1f1f;display: inline-block;color: #fff;}
#content .list_news li >p.txt { width: calc(100% - 360px); display: -webkit-inline-box; text-align: left; }

/* 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: 0 25px 20px;text-align: center;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;height: 30px;font-size: 18px;line-height: 160%;-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: #6c306e;color: #dbbcdc;}
#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 * {/* vertical-align: top; */}
#describe table{
    width: 100%;
    height: 100%;
    vertical-align: top;
    /* overflow: scroll; */
    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 {}
.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: 0vw;moz-column-count: 4;-moz-column-gap: 15px;-webkit-column-count: 4;-webkit-column-gap: 15px;column-count: 4;column-gap: 15px;}
#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;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;max-width: 88%;width: 88%;margin: 30px auto;}
  .topContentBox::after {display: none;}
  .topContentBox .classBox {margin-right: auto;}
    #content .workframe{
    width: 95%;
}
}
@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;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 15px;height: 54px;line-height: 27px;color: #757575;position: relative;font-size: 15px;display: block;text-align: center;letter-spacing: 1px;}
	#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;}
	#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: #7f1084;}
	#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%;margin-top: 20px;}
	#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: 0 60px 0 20px; height: 47px; line-height: 47px; }
	#subnav ul li[data-type="2"] b[data-action="sideOpen"] i:before { content: "\f068"; }
	#subnav >ul.open { height: auto; top: 52px; }
	#subnav >ul.open li { overflow: hidden; position: relative; }
	#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 {/* width: 36vw; */height: auto;}
	#content .album_list { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; }
}
@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_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); }
#content .list_article li {width: calc((100%/2) - 16px);}
}
@media screen and (max-width: 768px){
#wrap {padding: 0vw 0  20px;}
#pagenav {padding: 10px 0 0px;}
	#content .list_article section .workframe { display: block; }
	#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 {/* width: 90vw; *//* height: 350px; */}
	#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 {/* width: auto; */}
	.page_form form p.col label b {/* margin-left: 10px; *//* padding: 0 15px; */}
	.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 li{
    width: calc((100%/1) - 10px);
    padding: 10px 5px 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;}
}
@media screen and (max-width: 640px){
    .bannerEnTitle {font-size: 28px; }
	.bannerTitle {font-size: 16px; }
	#subnav {width: calc(100% - 0px);margin-top: 20px;}
	#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 { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; }
	#content .list_book ul.memberList li { width: 100%;}
}
@media screen and (max-width: 550px){
	#content .list_article section .img img { height: 55vw; }
	#content .list_book ul { text-align: center; }
	#content .list_book ul li { width: 90%; }
	#content .album_list { -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; }
	.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%;
}
}
 @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) {
	.bannerContainer {-webkit-box-align: center;-ms-flex-align: center;align-items: center; }
	#sub_banner a img {width: 100vw;height: 350px;}
}


@media screen and (max-width: 400px){
	#content .list_book ul li { width: 100%; }
}