/*font*/
@font-face{ font-family:NotoSansTC-Bold; src:url(/fonts/NotoSansTC-Bold.otf); }
@font-face{ font-family:NotoSansTC-Medium; src:url(/fonts/NotoSansTC-Medium.otf); }
@font-face{ font-family:NotoSansTC-Regular; src:url(/fonts/NotoSansTC-Regular.otf); }

@font-face{ font-family:Roboto-Bold; src:url(/fonts/Roboto-Bold.ttf); }
@font-face{ font-family:Roboto-Medium; src:url(/fonts/Roboto-Medium.ttf); }
@font-face{ font-family:Roboto-Regular; src:url(/fonts/Roboto-Regular.ttf); }
body{background-color: #F5F7F9;}
section{float: unset;position: unset;padding: unset;background: unset;z-index: unset; width: unset;}
.content{background: unset;}
.main-header{box-shadow: unset;border-bottom: 1px solid #E1E1E1;}
.header_2 ul{border-bottom: 1px solid #E1E1E1;}
#wrapper {transition: .5s;}
.more{color: #0EB5B2;}
.fa-arrow-right{width: 16px;height: 16px; margin-left: .5em;}
/* signup_btn */
.signup_btn a{ background: #FFFFFF; border-radius: 50px; display: flex; flex-direction: row; justify-content: center; align-items: center; width: 140px; height: 50px;}
.signup_btn a:hover{ background: #0EB5B2; transition: ease-in .2s;}
.signup_btn a span{ font-family: Noto Sans TC; font-style: normal; font-weight: bold; font-size: 16px; line-height: 23px; text-align: center; color: #0EB5B2; margin: 0px 10px;}
.signup_btn a:hover span{ color: #FFFFFF; transition: ease-in .2s;}
/* header_1 */
header{ width: 100%; display: block; background-color: #FFFFFF;}
.header_1, .header_2{ margin: auto;}
.header_1{ width: 100%; height: 60px; position: relative; border-bottom: 1px solid #E1E1E1; background: #FFFFFF;}
.header_1 .bravelog_logo_web_ec{ position: absolute; left: 6.94%; right: 82.64%; top: 35%; bottom: 35.38%;}
.header_1 .member{ display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 0px; position: absolute; left: 88.06%; right: 6.94%; top: 25%; bottom: 25%;}
.mem_header{ position: static; width: 30px; height: 30px; left: 0px; top: 0px; border-radius: 15px; flex: none; order: 0; flex-grow: 0; background-color: #00897b;}
.mem_header_guest{ line-height: 30px; color: #FF5366;}
.member span.mem_name{ position: static; width: 36px; height: 16px; left: 36px; top: 7px; font-family: Noto Sans TC; font-style: normal; font-weight: normal; font-size: 12px; line-height: 16px; color: #666666; flex: none; order: 1; flex-grow: 0; margin: 0px 6px;}
@media screen and (max-width: 767px){
    .header_1 .bravelog_logo_web_ec{ left: 24px; right: unset;}
    .header_1 .member{ left: unset; right: 24px;}
    .member span.mem_name{ display: none;}
}
/* header_2 */
.header_2{ display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 0px; width: 100%; height: 54px; background-color: #FFFFFF;}
.header_2 nav{ width: 100%;}
.header_2 ul{ display: flex;justify-content: center;}
.header_2 ul li{ display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0px 34px; position: static; width: 215px; height: 54px; left: 645px; top: 0px; background: #FFFFFF;}
.header_2 ul li span{ position: relative; width: 56px; height: 20px; font-family: Noto Sans TC; font-style: normal; font-weight: 500; font-size: 14px; line-height: 20px; color: #2B2B2E; flex: none; order: 0; flex-grow: 0; margin: 2px 0px;}
.header_2 ul li.tab-active span::before{ content: ""; width: 100%; display: inline-block; height: 2px; background-color: #076BAF; position: absolute; bottom: -4px; left: 0;}
.header_2 ul li span::before{ content: ""; width: 0px; display: inline-block; height: 2px; background-color: #076BAF; position: absolute; bottom: -4px; left: 0;}
.header_2 ul li span:hover::before{ content: ""; width: 100%;}
@media screen and (max-width: 767px){
    .header_2 ul{ padding: unset;}
    .header_2 ul li{ padding: unset;}
}
/* footer */
footer{ background: #666666; width: 100%;}
footer .link{ height: 228px; margin: auto; display: flex; justify-content: space-around; margin-left: 102px; margin-right: 102px;}
footer .link .title{ width: 30.3333%; margin-right: 3%;}
footer .link .title h3{ font-family: Noto Sans; font-style: normal; font-weight: bold; font-size: 14px; line-height: 19px; color: #FFFFFF; margin-top: 54px;}
footer .link .title hr{ background-color: rgba(151, 151, 151, 0.5); height: 1px; border: none; position: relative;}
footer .link .title hr::after{ content: ""; width: 40px; height: 1px; background-color: #FF5366; position: absolute;}
footer .link .title .linkbox{ display: flex; flex-flow: column;}
footer .link .title a{ font-style: normal; font-weight: normal; font-size: 14px; color: #FFFFFF; margin-top: 11px;}
footer .link .title a:hover{ color: #0EB5B2; font-weight: bold;}
footer .link .title .en{ font-family: Roboto;}
footer .link .title .ch{ font-family: Noto Sans;}
footer .link .title .fb{ position: relative; text-indent: 2em; line-height: 20px;}
footer .link .title .fb::before{ content: ""; background-image: url(../images/footer/btn_facebook.svg); background-size: contain; position: absolute; left: 0; width: 20px; height: 20px;}
footer .link .title .fb:hover::before{ content: ""; background-image: url(../images/footer/btn_facebook2.svg); background-size: contain; position: absolute; left: 0; width: 20px; height: 20px;}
footer .link .title .line{ position: relative; text-indent: 2em; line-height: 20px;}
footer .link .title .line::before{ content: ""; background-image: url(../images/footer/btn_Line.svg); background-size: contain; position: absolute; left: 0; width: 20px; height: 20px;}
footer .link .title .line:hover::before{ content: ""; background-image: url(../images/footer/btn_Line2.svg); background-size: contain; position: absolute; left: 0; width: 20px; height: 20px;}
footer .copyright{ width: 100%; height: 77px; background: #404040;}
footer .copyright span{ font-family: Noto Sans; font-style: normal; font-weight: normal; font-size: 14px; color: #FFFFFF; line-height: 77px; margin-left: 102px;}
@media screen and (max-width: 767px){
    footer{ padding: 52px 0px; width: 100%; height: unset; padding-bottom: calc(77px + 46px);}
    footer .link{ padding: 0px 24px; flex-flow: column; height: unset; width: unset; margin-left:unset; margin-right: unset;}
    footer .link .title{ width: 100%; margin-right: unset;}
    footer .link .title:nth-child(1) h3{ margin-top: unset;}
    footer .copyright{ position: absolute; bottom: 0;}
    footer .copyright span{ margin-left: 24px;}
}

/* backtop_btn */
#backTop { position:fixed; bottom: 57px; right: 38px; z-index: 99999;}
#backTop a { width: 40px; height: 40px; display: block; text-align: center; color: #FFFFFF; -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; border-radius: 5px; background: #FF5366; border: 4px solid rgba(255, 255, 255, 0.4); line-height: 40px;}