@charset "utf-8";
/* CSS Document */
.subBanner {position: relative; z-index: 1;}
.subBanner div.photo {line-height: 0; position: relative; z-index: 1;}
.subBanner div.photo img {width: 100%;}
.subBanner h2 {color: #333; position: absolute; top: 0; left: 20px; right: 20px; bottom: 0; z-index: 100; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; line-height: 1.3;}

.conFrame {position: relative; z-index: 1; background-image: linear-gradient(180deg, #f5f5f5 0%, #fff 50%, #fff 100%); min-height: 600px; padding: 0 0 6.884% 0; overflow: hidden;}
.conFrameBg {position: absolute; top: 0; right: 0; max-width: 100%; z-index: 1; line-height: 0;}

.path {max-width: 1480px; margin: auto; padding: 16px 100px 1.7342% 100px; position: relative; z-index: 20;}
.path > ul, .path > ul > li {list-style-type:none; margin: 0; padding: 0;}
.path > ul {width: 100%; display: flex; flex-wrap: wrap; font-family:'Microsoft JhengHei'; padding-left: 12px;}
.path > ul > li {color: #b8b8b8;}
.path > ul > li:first-child::before {content: ''; background: url("../images/icon_03b.png") no-repeat center / cover; width: 15px; height: 15px; margin-right: 7px; display: inline-block;}
.path > ul > li::after {content: '/'; color:#666666; margin: 0 3px;}
.path > ul > li:last-child::after {content: none;}
.path > ul > li a:link, .path > ul > li a:visited {text-decoration:none; color:#666666; transition: all 0.5s ease 0s;}
.path > ul > li a:active, .path > ul > li a:hover {text-decoration:none; color:#f18944; cursor:pointer; transition: all 0.5s ease 0s;}

.pages {display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
.pages a:link, .pages a:visited {text-decoration:none; color:#333333; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; min-width: 30px; height: 30px; border-radius: 30px; overflow: hidden; margin: 5px 3px; position: relative; z-index: 10; transition: all 0.5s ease 0s;}
.pages a:active, .pages a:hover {text-decoration:none; color:#fff; cursor:pointer; transition: all 0.5s ease 0s;}
.pages a::before {content: ''; background-color: transparent; position: absolute; top: 0; left: 0; right: 0; bottom: 0; transition: all 0.5s ease 0s; z-index: -1;}
.pages a:hover::before {background-color: #f18944; transition: all 0.5s ease 0s;}
.pages .prev {font-size: 0; margin: 5px 8px 5px 0px!important;}
.pages .next {font-size: 0; margin: 5px 0px 5px 8px!important;}
.pages .prev::after {content: ''; background: url("../images/prev_b.png") no-repeat center; background-size: cover; width: 8px; height: 14px; position: absolute; top: 50%; left: 50%; margin: -7px 0 0 -5px;}
.pages .prev:hover::after {background: url("../images/prev_bh.png") no-repeat center; background-size: cover; margin: -7px 0 0 -7px;}
.pages .next::after {content: ''; background: url("../images/next_b.png") no-repeat center; background-size: cover; width: 8px; height: 14px; position: absolute; top: 50%; left: 50%; margin: -7px 0 0 -5px;}
.pages .next:hover::after {background: url("../images/next_bh.png") no-repeat center; background-size: cover; margin: -7px 0 0 -3px;}
.pages .prev::before, .pages .next::before {content: none;}
.pages .current {color:#fff!important;}
.pages .current::before {background-color: #f18944; z-index: -1;}

.btnIB {display: flex; flex-wrap: wrap; align-items: center; padding: 33px 0 0 0;}
.btnI {max-width: 200px; width: 44%; margin-right: 11px;}
.btnI a:link, .btnI a:visited {text-decoration:none; color:#fff; font-weight: 500; width: 100%; height: 45px; border-radius: 45px; overflow: hidden; position: relative; z-index: 1; background-color: #f18944; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; transition: all 0.5s ease 0s;}
.btnI a:active, .btnI a:hover {text-decoration:none; color:#fff; background-color: transparent; box-shadow: 0 0 13px rgba(0, 0, 0, 0.1); cursor:pointer; transition: all 0.5s ease 0s;}
.btnI a::before {content: ''; position: absolute; left: 100%; right: 0; top: 0; bottom: 0; z-index: -1; background-image: linear-gradient(120deg, #f05a3f 0%, #f8a56e 21%, #e2d279 44%, #21a160 62%, #1a7ab3 81%, #9f4e99 100%); transition: all 0.5s ease 0s;}
.btnI a:hover::before {left: 0; transition: all 0.5s ease 0s;}
.btnI a img {width: 15px; margin-right: 10px; transition: all 0.5s ease 0s;}
.btnI a:hover img {width: 0; margin-right: 0; transition: all 0.5s ease 0s;}
.btnB {max-width: 200px; width: 44%;}
.btnB a:link, .btnB a:visited {text-decoration:none; color:#999999; font-weight: 200; font-family:'Microsoft JhengHei'; width: 100%; height: 45px; border-radius: 45px; overflow: hidden; position: relative; z-index: 1; border: 1px solid #d6d6d6; background-color: #fff; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; transition: all 0.5s ease 0s;}
.btnB a:active, .btnB a:hover {text-decoration:none; color:#fff; background-color: transparent; font-weight: 600; border: 1px solid #fff; box-shadow: 0 0 13px rgba(0, 0, 0, 0.1); cursor:pointer; transition: all 0.5s ease 0s;}
.btnB a::before {content: ''; position: absolute; left: 100%; right: 0; top: 0; bottom: 0; z-index: -1; background-image: linear-gradient(120deg, #f05a3f 0%, #f8a56e 21%, #e2d279 44%, #21a160 62%, #1a7ab3 81%, #9f4e99 100%); transition: all 0.5s ease 0s;}
.btnB a:hover::before {left: 0; transition: all 0.5s ease 0s;}
.btnB a img {width: 16px; margin-right: 10px; transition: all 0.5s ease 0s;}
.btnB a:hover img {width: 0; margin-right: 0; transition: all 0.5s ease 0s;}
.btnPN {display: flex; flex-wrap: wrap; align-items: center; padding: 29px 0 0 0; filter:alpha(opacity=63); Opacity:0.63; transition: all 0.5s ease 0s;}
.btnPN:hover {filter:alpha(opacity=100); Opacity:1; transition: all 0.5s ease 0s;}
.btnPN a:link, .btnPN a:visited {text-decoration:none; color:#999999; font-family:'Microsoft JhengHei'; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; transition: all 0.5s ease 0s;}
.btnPN a:active, .btnPN a:hover {text-decoration:none; color:#f18944; cursor:pointer; transition: all 0.5s ease 0s;}
.btnP {}
.btnP a img {margin-right: 10px; -moz-transform:scaleX(1); -webkit-transform:scaleX(1); -o-transform:scaleX(1); -ms-transform:scaleX(1); transform:scaleX(1); transition: all 0.5s ease 0s;}
.btnP a:hover img {-moz-transform:scaleX(-1); -webkit-transform:scaleX(-1); -o-transform:scaleX(-1); -ms-transform:scaleX(-1); transform:scaleX(-1); transition: all 0.5s ease 0s;}
.btnL {width: 1px; height: 14px; background-color: #d0d0d0; line-height: 0; margin: 0 22px;}
.btnN {}
.btnN a img {margin-left: 10px; -moz-transform:scaleX(1); -webkit-transform:scaleX(1); -o-transform:scaleX(1); -ms-transform:scaleX(1); transform:scaleX(1); transition: all 0.5s ease 0s;}
.btnN a:hover img {-moz-transform:scaleX(-1); -webkit-transform:scaleX(-1); -o-transform:scaleX(-1); -ms-transform:scaleX(-1); transform:scaleX(-1); transition: all 0.5s ease 0s;}


.conMain {position: relative; z-index: 10; line-height: 1.5;}
.conMainText {max-width: 1030px; margin: auto; padding: 28px 0 39px 0; font-family:'Microsoft JhengHei'; color: #555555; letter-spacing: 0.1px; line-height: 2;}
.conMainTextBtn {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 22px 0 0 0;}
.conMainTextBtn a:link, .conMainTextBtn a:visited {text-decoration:none; color:#555555; background-color: #fff; border: 1px solid #d8d8d8; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; font-family: 'Noto Sans TC', sans-serif; height: 40px; border-radius: 40px; overflow: hidden; padding: 0 21px; margin: 5px 11px 0 11px; position: relative; z-index: 1; transition: all 0.5s ease 0s;}
.conMainTextBtn a:active, .conMainTextBtn a:hover, .conMainTextBtn a.current {text-decoration:none; color:#fff; background-color: #f18944; border: 1px solid #f18944; cursor:pointer; transition: all 0.5s ease 0s;}
.conMainTextBtn a.current {pointer-events: none; cursor: text;}

.subM {padding: 20px 0 27px 0;}
.subM > div {display: none;}
.subM > ul, .subM > ul li {list-style-type:none; margin: 0; padding: 0;}
.subM > ul {width: 100%; display: flex; flex-wrap: wrap; justify-content: center; transition: all 0.75s ease 0s;}
.subM > ul li {padding: 7px 15px;}
.subM > ul li a:link, .subM > ul li a:visited {text-decoration:none; color:#555555; border: 1px solid #d8d8d8; background-color: transparent; line-height: 146.667%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; position: relative; padding: 8px 15px; min-width: 120px; border-radius: 40px; transition: all 0.5s ease 0s;}
.subM > ul li a:active, .subM > ul li a:hover {text-decoration:none; color:#fff; background-color: #f18944; border: 1px solid #f18944; cursor:pointer;}
.subM > ul li.current a {pointer-events: none; cursor: text; color:#fff; background-color: #f18944; border: 1px solid #f18944;}
@media only screen and (max-width:768px){
    .subM {padding: 35px 0 20px 0;}
    .subM > div {width: 30px; height: 30px; position: relative; display: block; margin: auto; cursor: pointer;}
    .subM > div > span:nth-child(1) {width: 30px; height: 2px; background-color: #f18944; position: absolute; top: 10px; left: 0; transition: all 0.5s ease 0s;}
    .subM > div.show > span:nth-child(1) {top: 14px; transform: rotate(45deg);}
    .subM > div > span:nth-child(2) {width: 30px; height: 2px; background-color: #f18944; position: absolute; top: 20px; left: 0; transition: all 0.5s ease 0s;}
    .subM > div.show > span:nth-child(2) {top: 14px; transform: rotate(-45deg);}
    .subM > div::before {content: attr(data-title); width: 260px; height: 30px; line-height: 30px; position: absolute; top: -25px; left: calc(50% - 130px); text-align: center; font-size: 12px; color: #f18944;}
    .subM ul {max-height: 0; overflow: hidden;}
    .subM ul > li {padding: 5px;}
    .subM ul > li::after {content: none;}
    .subM ul.open {max-height: 1000px; padding: 10px 0; transition: all 1.5s ease 0s;}
}


.pDiv {display: flex; flex-wrap: wrap; padding: 4.22% 0 0 0;}
.pDivL {width: 58.9844%; padding: 0 0 0 101px;}
.pDivR {width: 41.0156%; padding: 0 0 0 4.688%; color: #555555;}
.pDivR > h1 {margin-bottom: 19px;}
.pDivR > div.text {padding: 40px 0 30px 0; font-family:'Microsoft JhengHei'; line-height: 2;}
.pDivC {width: 100%; padding: 98px 0 0 0;}
.relatedP {padding: 42px 14px 0 14px;}
.relatedP h2 {margin-bottom: 40px;}
.relatedPL {max-width: 280px; position: relative; z-index: 1;}
.relatedPL > div.photo {height: 0; overflow: hidden; padding-bottom: 75%; position: relative; z-index: 1; display: block; margin-bottom: 16px;}
.relatedPL > div.photo img {transform: scale(1.0, 1.0); transition: all 0.5s ease 0s;}
.relatedPL:hover > div.photo img {transform: scale(0.95, 0.95); transition: all 0.5s ease 0s;}
.relatedPL > div.photo::after {content: ''; border: 1px solid #f18944; position: absolute; top: 17%; left: 15%; bottom: 17%; right: 15%; z-index: 100; filter:alpha(opacity=0); Opacity:0; transition: all 0.5s ease 0s;}
.relatedPL:hover > div.photo::after {top: 0; left: 0; bottom: 0; right: 0; filter:alpha(opacity=100); Opacity:1.0;}
.relatedPL > h3 {font-family:'Microsoft JhengHei'; content: #333333; font-weight: bold; text-align: center; margin-bottom: 7px; transition: all 0.5s ease 0s;}
.relatedPL:hover > h3 {color: #f8bc95;}
.relatedPL > p {font-family:'Microsoft JhengHei'; display: block; text-align: center; color: #888888; transition: all 0.5s ease 0s;}
.relatedPL:hover > p {color: #f18944;}


.faqSub {padding: 0px 3.36% 0 2.891%;}
.faqSubT {display: flex; flex-wrap: wrap; align-items: center; padding: 27px 40px 27px 81px; position: relative; z-index: 1;}
.faqSubT::before {content: attr(data-title); width: 30px; height: 30px; border-radius: 30px; background-color: #f18944; color: #fff; font-family:'Microsoft JhengHei'; font-size: 14px; font-weight: 600; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; position: absolute; left: 35px; top: 26px; z-index: -1;}
.faqSubT::after {content: ''; background: url("../images/icon_03fh.png") no-repeat center; width: 25px; height: 25px; border: 1px solid #f18944; background-color: #f18944; position: absolute; right: 5px; top: 29px; z-index: -1;}
.faqSubT h2 {font-family:'Microsoft JhengHei'; color: #333333; font-weight: 600; line-height: 30px;}
.faqSubC {color: #333333; font-family:'Microsoft JhengHei'; line-height: 1.8667; padding: 30px 62px; background-color: #f5f5f5; border-radius: 5px; border-bottom: 1px dotted #CFCFCF; box-shadow: 0 0 10px rgba(22, 23, 34, 0.07); position: relative; z-index: 1; margin-bottom: 12.5%;}
.faqSubC::before {content: ''; height: 0; width: 0; border-color: transparent transparent #f5f5f5 transparent; border-style: solid solid solid solid; border-width: 17px 15px; position: absolute; top: -34px; left: 38px; z-index: -1;}
.faqSub > .btnB {margin: auto;}


.aboutA {max-width: 1171px; margin: auto; background-color: rgba(255, 255, 255, 0.38); padding: 53px 2.657% 132px 4.454%; position: relative; z-index: 1; font-family:'Microsoft JhengHei'; line-height: 1.866; box-shadow: 0 0 76px rgba(15, 5, 10, 0.06);}
.aboutA::before {content: ''; border: 1px solid #f1a244; position: absolute; top: 15px; left: 15px; right: 14px; bottom: 17px; z-index: 2;}
.aboutA::after {content: ''; background: url("../images/ind_02.png") no-repeat center / cover; width: 271px; padding-bottom: 193px; position: absolute; bottom: -29px; right: -16px; z-index: 3;}
.aboutA > h2 {color: #333333; font-weight: 700; text-align: center; padding: 0 0 3.149% 0; position: relative; z-index: 10;}
.aboutA > h2 span {font-weight: 300;}
.aboutA > div.photo {width: 61.204%; float: right; padding: 9px 0 20px 3.334%; line-height: 0;}
.aboutB {max-width: 1280px; margin: auto; background-color: rgba(255, 255, 255, 0.7); padding: 52px 3.5% 72px 3.5%; position: relative; z-index: 1; font-family:'Microsoft JhengHei'; line-height: 1.866; box-shadow: 0 0 76px rgba(15, 5, 10, 0.06);}
.aboutB::before {content: ''; border: 1px solid #f18944; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; z-index: 2;}
.aboutB .aboutC {display: flex; flex-wrap: wrap;align-items: center;}
.aboutB .aboutCL {width: 420px; font-size: 0; line-height: 0;}
.aboutB .aboutCR {width: calc(100% - 420px);padding: 0 0 0 15px;}
.aboutB .aboutCR ul, .aboutB .aboutCR ul li {list-style-type:none; margin: 0; padding: 0; width: 100%;}
.aboutB .aboutCR ul li {display: flex; flex-wrap: wrap;}
.aboutB .aboutCRL {width: 170px; min-height: 110px; color: #f18944; font-weight: bold; background: url("../images/icon_lineA.png") repeat-y; background-position: 14.5%;}
.aboutB .aboutCRLY {width: 100%; background-color: #fff; padding: 10px 0 0 0; transition: all 0.5s ease 0s;}
.aboutB .aboutCRLI {width: 100%; background-color: #fff; height: 30px; line-height: 0; font-size: 0; padding: 0 0 0 20px; display: flex; flex-wrap: wrap; align-items: center; transition: all 0.5s ease 0s;}
.aboutB .aboutCRLI::before {content: url("../images/icon_circleA.png");}
.aboutB .aboutCRR {width: calc(100% - 170px); color: #555555; font-weight: 600; line-height: 170%; padding: 15px 0 0 15px;}
.aboutB .aboutCR ul li:nth-child(2) .aboutCRL, .aboutB .aboutCR ul li:last-child .aboutCRL { min-height: 160px;}

.subDetail {max-width: 1171px; margin: auto; padding: 5.547% 2.657% 7.579% 4.688%; background-color: rgba(255, 255, 255, 0.38); position: relative; z-index: 1; font-family:'Microsoft JhengHei'; color: #333333; line-height: 1.866; box-shadow: 0 0 76px rgba(15, 5, 10, 0.06);}
.subDetail::before {content: ''; border: 1px solid #f1a244; position: absolute; top: 15px; left: 15px; right: 14px; bottom: 25px; z-index: 2;}
.subDetailD {color: #f18944; line-height: 1; position: relative; z-index: 10;}
.subDetail > h2 {font-weight: 600; line-height: 1.3; padding: 15px 0 2.972% 0; position: relative; z-index: 10;}
.subDetailC {position: relative; z-index: 10; line-height: 1.733;}
.subDetail .btnB {width: 100%; margin: 50px auto 0 auto; position: relative; z-index: 10;}


.conDiv {padding: 90px 3.75% 0 3.595%; display: flex; flex-wrap: wrap; position: relative; z-index: 1;}
.conDiv::before {content: ''; width: 390px; height: 1px; background-color: #f18944; position: absolute; top: 1px; left: calc(50% - 195px); z-index: -1;}
.conDivL {width: 43.52%;}
.conDivL > h2 {color: #333333; font-weight: 700; padding: 0 0 3.765% 0; position: relative; z-index: 10;}
.conDivL > h2 span {font-weight: 300;}
.conDivL > ul, .conDivL > ul > li {list-style-type:none; margin: 0; padding: 0; line-height: 21px;}
.conDivL > ul {display: flex; flex-wrap: wrap; padding: 17px 0 11px 0; border-bottom: 1px solid rgba(85, 85, 85, 0.1);}
.conDivL > ul li:nth-child(1) {width: 129px; color: #f28f4e; font-weight: 600; letter-spacing: 0.17px; padding: 0 9px 0 50px;}
.conDivL > ul li:nth-child(2) {width: calc(100% - 129px); color: #555555; font-weight: 300; letter-spacing: 0.17px; padding: 0 9px 0 0;}
.conA {background: url("../images/icon_02a.png") no-repeat 10px 0px;}
.conT {background: url("../images/icon_02b.png") no-repeat 10px 0px;}
.conF {background: url("../images/icon_02c.png") no-repeat 10px 0px;}
.conE {background: url("../images/icon_02d.png") no-repeat 10px 0px;}
.conL {background: url("../images/icon_02e.svg") no-repeat 10px 0px;}
.conDivR {width: 56.48%; padding: 0 0 0 2.132%; line-height: 0;}
.conDivR > div {box-shadow: 0 0 27px rgba(22, 23, 34, 0.14);}
.conDivC {width: 100%; max-width: 1171px; margin: 50px auto 0 auto; background-color: rgba(255, 255, 255, 0.38); padding: 43px 3.795% 63px 3.964%; position: relative; z-index: 1; font-family:'Microsoft JhengHei'; line-height: 1.866; box-shadow: 0 0 76px rgba(15, 5, 10, 0.06);}
.conDivC::before {content: ''; border: 1px solid #f1a244; position: absolute; top: 16px; left: 15px; right: 14px; bottom: 12px; z-index: 2;}
.conDivC form {position: relative; z-index: 100;}
.conDivCT {color: #999999; letter-spacing: 0.13px; position: relative; z-index: 10;}
.conDivCF {padding: 21px 0 0 0; color: #333333;}
.rowA {display: flex; flex-wrap: wrap; justify-content: space-between;}
.rowA > ul, .rowA > ul > li {list-style-type:none; margin: 0; padding: 0;}
.rowA > ul {width: 49.3%; height: 47px; border-radius: 5px; border: 1px solid rgba(208, 208, 208, 0.45); background-color: #fafafa; display: flex; flex-direction: row; padding: 0 17px; margin-bottom: 12px;}
.rowA > ul > li:nth-child(1) {min-width: 120px; display: flex; flex-wrap: wrap; align-items: center;border-right: 1px solid rgba(85, 85, 85, 0.1);}
.rowA > ul > li:nth-child(2) {width: 100%; padding-left: 10px; display: flex; flex-wrap: wrap;}
.rowB {}
.rowB > div {border-radius: 5px; border: 1px solid rgba(208, 208, 208, 0.45); background-color: #fafafa; display: flex; flex-direction: column; padding: 7px 16px;}
.rowB textarea {width: 100%; height: 141px; background-color: transparent; border: 0;}
.grecaptcha-badge{ z-index: 10; }