@import url('/css/animate.css');
.wow {animation: fadeIn 1.5s both;-webkit-animation: fadeIn 1.5s both;animation-duration: 1s;-webkit-animation-duration: 1s;	}
#community{display: none;}

/* wrap */
#wrap {padding: 0vw 0;}
#headBan {     position: relative; }
#headBan:before { position: absolute; width: 100%; height: 88%; background: #f9f9f9; display: block; content: ""; }

/* pageTop */
.pageTop {position: relative;margin: -10vw auto 0vw;width: 90vw;z-index: 2;}
.pageTop h1 {margin-bottom: 10px;line-height: 120%;text-align: center;font-family: 'Montserrat', 'Noto Sans TC', sans-serif;font-size: 37px;letter-spacing: 3px;color: #ffffff;}
.pageTop .waylink ol {text-align: center;font-size: 0;margin: auto;padding-inline-start: 0px;}
.pageTop .waylink ol li , .pageTop .waylink ol li a {display: inline-block;letter-spacing: 1px;color: #ffffff;}
.pageTop .waylink ol li:after { margin: 0 10px; font-weight: 100; font-size: 12px; vertical-align: text-top; content: "/"; }
.pageTop .waylink ol li:last-child:after { margin: 0; content: ""; }

/* banner */
#banner { width: 70%; height: 480px; display: inline-block; }
#banner a { position: relative; width: 100%; height: 100%;  background-position: 80% 50%;}
#banner a:before { position: absolute; width: 100%; height: 100%; background: rgb(255 255 255 / .2); left: 0; top: 0; content: ""; }
#banner { position: relative; padding-top: 100px; z-index: 1; }

/* topinfo */
.topinfo { position: relative; margin: 0 0 0 0px; width: calc(24% + 10px); display: inline-block; z-index: 2; }
.topinfo .text-box { position: relative; display: flex; justify-content: flex-end;flex-direction: column;align-items: flex-end;}
.topinfo .text-box:before {margin: 0 20px 25px;width: 50px;margin-left: auto;height: 3px;background: #005bac;display: block;content: "";}
.topinfo .text-box h3 { display: block; line-height: 110%; letter-spacing: 1px; font-size: 48px; font-weight: 600; color: #161616; }
.topinfo .text-box h3:nth-child(2) { position: absolute; /* background-color: #ffffff; */ color: #161616; -webkit-clip-path: inset(0 0 0 101px); clip-path: inset(0 0 0 101px); }

/* waylink */
.waylink { margin: 15px 0 0; }
.waylink ol { font-size: 0; padding: 0;display: flex;justify-content: flex-end;}
.waylink ol li { display: inline-block; font-size: 17px; font-weight: 300; color: #7a7a7a; }
.waylink ol li a { font-size: 17px; font-weight: 300; color: #7a7a7a; }
.waylink ol li a:after { margin: 0 15px; display: inline-block; color: #7a7a7a; content: ">"; }
.waylink ol li:last-child , .waylink ol li:last-child a { color: #000000; }
.waylink ol li:last-child a:after { content: ""; margin: 0;}
/* contentMain */
#contentMain { padding: 2vw 10vw 4vw; font-size: 0; position: relative;background-color: #f9f9f9;z-index: 10;}
#contentMain::after {
  content: "";
  width: calc(100% - 117px);
  height: calc(100% + 100px);
  display: block;
  background: #ffffff;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(0, -80px);
z-index: -1;}
#contentMain .row { width: 300px; display: inline-block; vertical-align: top; }

#contentMain article{margin: 30px 60px;}
/* mainarticle */
#contentMain #mainarticle { margin-left: 5%; width: calc(95% - 300px); }


/* sidenav */
#sidenav a#showSide { padding: 10px 20px; background: #2f3840; border: 1px #1a1e23 solid; box-shadow: 0 0 3px rgb(0 0 0 / .2); display: block; color: #fff; }
#sidenav a#showSide i { margin-right: 10px; }
#sidenav h3.sideTitle { font-weight: 600; font-size: 20px; color: #005bac; text-transform: uppercase;
    font-family: "Poppins",sans-serif;}
#sidenav ul.cate >li h4 , #sidenav ul.cate >li ul li .subULHead { position: relative; }
#sidenav ul.cate >li a { padding: 12px 50px 12px 20px; display: block; font-weight: 300; color: #040404; border-bottom: 1px solid #dbdbdb;}
#sidenav ul.cate >li.action >h4 a {  position: relative;color: #005bac;}
#sidenav ul.cate >li >h4 a{font-weight: 500;color: #303030;}
#sidenav ul.cate >li ul { display: none; -webkit-transition: none; transition: none; }
#sidenav ul.cate >li.action >ul , #sidenav ul.cate >li >ul >li.action >ul { display: block; }
#sidenav ul.cate >li >ul a { padding-left: 20px; border-left: 2px transparent solid; }
#sidenav ul.cate >li >ul >li.action >div p a {  border-left-color: #005bac; color: #005bac;}
#sidenav ul.cate >li >ul >li >ul li a {padding-left: 60px;color: #606770;}
#sidenav ul.cate >li >ul >li >ul li.action a {font-style: italic;color: #005bac;}
#sidenav ul.cate >li b[data-action="sideOpen"] { position: absolute; padding-left: calc(100% - 34px); width: 35px; height: 52px; display: inline-block; text-align: center; line-height: 41px; top: calc((100% - 52px) / 2); left: 0; cursor: pointer; }
#sidenav ul.cate >li b[data-action="sideOpen"] i{color: #cfcfcf;}
#sidenav ul.slist li { padding: 12px 5px; }
#sidenav ul.slist li a { color: #626262; }

/* faqList */
#faqList ul li { border-bottom: 1px #ccc solid; }

/* faqList */
#faqList li { margin-bottom: 10px; }
#faqList li .title { position: relative; padding: 10px 65px 10px 25px; display: block; }
#faqList li .title font { color: #181818; }
#faqList li .title span { position: absolute; width: 16px; height: 16px; display: block; top: calc((100% - 16px) / 2); right: 25px; }
#faqList li .title span:before , #faqList li .title span:after { width: 16px; height: 1px; background: #696969; display: block; content: ""; -webkit-transform: translateY(9px); transform: translateY(9px); }
#faqList li .title span:after { -webkit-transform: translateY(8px) rotate(90deg); transform: translateY(8px) rotate(90deg); }
#faqList li .info { padding: 15px 25px; background: #fff; box-shadow: 0 0 2px rgb(0 0 0 / .2); -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
#faqList li.current .title span:after { -webkit-transition-duration: .2s; transition-duration: .2s; -webkit-transform: translateY(8px) rotate(180deg); transform: translateY(180deg) rotate(0); }

/* album-info */
#album-info { -moz-column-count: 4; -moz-column-gap: 15px; -webkit-column-count: 4; -webkit-column-gap: 15px; column-count: 4; column-gap: 15px; }
#album-info .album_box { margin: 0 0 15px; }
#album-info .album_box a { display: block; }
#album-info .album_box a img { width: 100%; }



/* form1 */
#form1 {font-size: 0;margin: 40px;}
#form1 p { margin: 10px 20px; width: calc(100% - 40px); display: inline-block; vertical-align: text-bottom; }
#form1 p.col-2 { width: calc(50% - 40px); }
#form1 p.col-3 { width: calc((100% / 3) - 40px); }
#form1 p.col-4 { width: calc(25% - 40px); }
#form1 p label { margin-bottom: 5px; display: block; color: #5a5a5a; }
#form1 p label b { margin-left: 5px; color: #ff575f; }
#form1 p input , #form1 select , #form1 textarea {padding: 10px 15px;width: calc(100% - 34px);border: 1px solid #b9b9b9;display: block;}
#form1 p select { padding: 15px; width: 100%; }
#form1 p input#Checknum { margin-right: 10px; width: 60px; display: inline-block; }
#form1 p.send { text-align: right; }
#form1 p.send a#btnOK {padding: 10px 60px;background: #f1f1f1;color: #8c8c8c;}

/* gmap */
#gmap iframe{width:100%;height:350px;}
.anyconactway{
	
margin-top: 30px;}
.anyconactway ul{display: flex;justify-content: center;}
.anyconactway li{
	
	width: 22%;
	overflow: hidden;
	padding: 0 1%;
}
.anyconactway li .icon{
	float:left;
	color: #cbcbcb;
	width: 50px;
}
.anyconactway li .icon i{
	font-size: 30px;
}
.anyconactway li .txt{
	float:left;
	width:calc(100% - 50px);
}
.anyconactway li .txt p{
	color:#434343;
	font-size:16px;
	line-height: 180%;
}
.anyconactway li .txt .gray a{
	color:#707071;
}
#order .anyconactway {
	margin: 20px 0;
	padding-bottom: 20px;
}

/* 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;display: initial;}
#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;display: initial;}
#pagenav a.page-next i { margin: 0 0 0 10px; }



@media screen and (min-width: 1281px){
	#sidenav ul li h4 a::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 22px;
    left: calc(0% - -4px);
}
#sidenav ul.cate >li >ul a::after {
    content: "";
    width: 30px;
    height: 1px;
    background-color: #9f9f9f;
    position: absolute;
    bottom: -1px;
    right: 0;
    transition: 0.5s all;
    bottom: 0;
    
}
	#sidenav ul.cate >li >ul >li.action >div p a::after{background-color: #005bac;}
	#sidenav a#showSide { display: none; }
	#sidenav ul.cate { margin-top: 10px; }
}
@media screen and (max-width: 1280px){
	#contentMain .row , #contentMain #mainarticle { position: relative; margin-left: 0; width: 100%; }
	#contentMain #mainarticle { margin-top: 30px; }
	#sidenav h3.sideTitle { display: none; }
	#sidenav ul.cate { position: absolute; width: calc(100% - 2px); background: #fff; border: 1px #e1e1e1 solid; box-shadow: 0 0 3px rgb(0 0 0 / .2); z-index: -1; opacity: 0; -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: scale(0.75) translateY(-21px); -ms-transform: scale(0.75) translateY(-21px); transform: scale(0.75) translateY(-21px); -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; }
	#sidenav ul.cate[data-type="1"] { z-index: 99; opacity: 1; -webkit-transform: scale(1) translateY(0); -ms-transform: scale(1) translateY(0); transform: scale(1) translateY(0); }
	#banner { padding-top: 0px; }
	#album-info { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; }
	#contentMain::after{width: calc(100% - 0px);
    transform: translate(0, 0px);height: calc(100% + 0px);}
	#headBan:before{display: none;}
}
@media screen and (max-width: 1140px){
}
@media screen and (max-width: 1024px){
	#boos-left{margin: 150px 0 0;}
.pageTop{
    margin: -14vw auto 3vw;
}
.list_faq ul li {margin-bottom: 10px;width: calc((100%/3) - 10px);border: 3px #7d7d7d38 solid;}
	#form1 p.col-2 , #form1 p.col-3 { width: calc(100% - 40px); }
	#form1 p.col-4 { width: calc(50% - 40px); }
	#form1 p.send { text-align: center; }
	.anyconactway ul{flex-direction: row;display: flex;flex-wrap: wrap;}
	.anyconactway li{width: 40%;}
	#banner {width: 100%;height: 240px;}
	#banner a:before {background: rgb(43 43 43 / 20%);}
	.topinfo {position: absolute;margin: 0;width: 100%;top: 60%;left: 0;}
	.topinfo .text-box { display: block; }
	.topinfo .text-box h3 {text-align: center;font-size: 3vw;color: #fff;}
	.topinfo .text-box h3:nth-child(2) { display: none; }
	.waylink { margin: 15px 0; text-align: center; }
    .waylink ol li:last-child , .waylink ol li:last-child a {color: #ffffff;}
.waylink ol{display: flex;justify-content: center;}
	.waylink ol li a,.waylink ol li a:after{color: #ffffff;}
	.topinfo .text-box:before{display: none;}
	
}
@media screen and (max-width: 768px){
#sub_banner a img{
    height: 370px;
}
.list_faq ul li {margin-bottom: 15px;width: calc((100%/2) - 10px);}
	.anyconactway li{width: 100%;margin: 0 0.5% 20px;}
	#contentMain{padding: 6vw 5vw;}
	#banner {height: 150px;}
}
@media screen and (max-width: 640px){
	#subnav {width: calc(100% - 42px);margin: 10vw auto 0;}

.webBox .wrapper{
    background-position: 30% 0%;
}
.pageTop{

    margin: -17vw auto 3vw;
}
#sub_banner a img{
    margin-top: 50px;
}
	#album-info { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; }
	#form1 p.col-4 { width: calc(100% - 40px); }
	#form1 {font-size: 0;margin: 40px 0px;}
	#contentMain article{margin: 0 20px;}
	.anyconactway{padding: 20px;}
}
@media screen and (max-width: 550px){
#sub_banner a img{
    height: 190px;
}
.pageTop{
    margin: -21vw auto 3vw;
}
.list_faq ul li {margin-bottom: 15px;width: calc((100%/1) - 10px);}
	#album-info { -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; }
}
@media screen and (max-width: 400px){
}