@charset "UTF-8";




/************************************* 共用設定 *************************************/

body {

    text-align: center;
    font-family: 'Noto Sans TC', sans-serif;
    background-color: #f2eddf;
    color: #2f2d2b;
    font-size: 15px;
    line-height: 1.7;
    font-weight: 500;
}




a {
    color: #2f2d2b;
}

a:hover {
    opacity: 0.7;
}


a,
a:hover,
a:active,
a:visited,
a:focus {
    text-decoration: none;
}

img:focus,
a:focus {
    outline: 0;
}


.container {
    max-width: 414px;
    /*
    border-left: 1px solid #42403d;
    border-right: 1px solid #42403d;
*/
}

.blackText {
    background-color: #42403d;
    color: #f2eddf;
    display: inline;
    padding-top: 5px;
    padding-bottom: 5px;
    box-shadow: -5px 0 0 #42403d;
    line-height: 2.1;

}

.blackText span {
    padding-top: 5px;
    padding-bottom: 5px;
    box-shadow: 5px 0 0 #42403d;

}

.redText {
    background-color: #be4943;
    color: #f2eddf;
    display: inline;
    padding-top: 5px;
    padding-bottom: 5px;
    box-shadow: -5px 0 0 #be4943;
    line-height: 1.7;
}

.redText span {
    padding-top: 5px;
    padding-bottom: 5px;
    box-shadow: 5px 0 0 #be4943;
}


.leftCloud {
    display: none;
}

.rightCloud {
    display: none;
}


.red {
    color: #be4943;
}



.redBtn {
    display: inline-block;
    color: #f2eddf;
    background-color: #be4943;
    padding: 15px 60px;
    text-align: center;
}



hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 2px solid #CBC7BB;
    margin: 30px 0;
    padding: 0;
}



/************************************* margin *************************************/

.mt0 {
    margin-top: 0px;
}

.mt5 {
    margin-top: 5px;
}

.mt10 {
    margin-top: 10px;
}

.mt15 {
    margin-top: 15px;
}

.mt30 {
    margin-top: 30px;
}

.mt45 {
    margin-top: 45px;
}


.mb0 {
    margin-bottom: 0px;
}

.mb5 {
    margin-bottom: 5px;
}

.mb10 {
    margin-bottom: 10px;
}

.mb15 {
    margin-bottom: 15px;
}

.mb30 {
    margin-bottom: 30px;
}

.mb45 {
    margin-bottom: 45px;
}




/************************************* font *************************************/

h1,
h1,
h3,
h4,
h5,
h6 {
    /*    color: #2f2d2b;*/
    font-weight: 700;

}

/************************************* header *************************************/
.head {
    margin-bottom: 5px;
}

.head .navTrigger {
    margin-top: 27px;
    width: 33px;
    height: auto;
    float: right;
    cursor: pointer;
}

.head .navTrigger:hover {
    opacity: 0.7;
}

.head .navTrigger:focus {
    outline: none;
}


/************************************* modal *************************************/
.modal-dialog {
      margin-left: 15px;
    margin-right: 15px;
    margin-top: 63px;
/*    max-width: 384px;*/
}

.modal-content {
    background-color: #F2EDDF;
    border: none;
    /*    margin-top: 63px;*/
}

.myClose {
    position: absolute;
    right: 0px;
    top: -48px;
    cursor: pointer;
    width: 33px;
    height: auto;
    z-index: 10;
}

.myClose:hover {
    opacity: 0.7;
}


.modalOl {
    padding-left: 25px;
}

#qa2_2 p a {
    color: #be4943;
}

#qa2_2 p a:hover {
    opacity: 0.8;
}

.modalQuestion {
    color: #BE4943;
    font-size:20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #CBC7BB;
    line-height: 1.5;
}

.modal .knowTitle {
    line-height: 1.4;
    color: #be4943;
    margin-bottom: 15px;
}

.modal ul {
    padding-left: 2em;
}

.modal ul li {
    list-style-type: square;
}

.modal h5{
    line-height: 1.4;
}

.modal a{
    color: #BE4943;
}
.modal a:hover{
   opacity: 0.8;
}


/************************************* nav *************************************/

#nav .navs {
    padding: 30px 0px;
}

#nav .navs a .oneNav {
     color: #2f2d2b;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 30px;
}

#nav .navs a:hover .oneNav,
#nav .navs a .oneNav.focus {
    color: #BE4943;
}

#nav .lang {
     
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 15px 15px;
    border-radius: 999px;
    margin-bottom: 30px;
}

#nav .lang a .oneLang {
    margin: 0 15px;
    display: inline;
    color: #2f2d2b;
}



#nav .lang a:hover .oneLang,
#nav .lang a .oneLang.focus {
    color: #BE4943;
    opacity: 1;
}


/************************************* banner *************************************/

.banner {
    margin-bottom: 60px;
}

.banner .navTrigger:hover {
    opacity: 0.8;
}

.banner .title {
    width: 362px;
    height: auto;
    margin-bottom: 30px;
}

.banner .bannerTitle {
    width: 21px;
    height: auto;
}

.banner a .bannerBtn {
    margin-top: 15px;
}

.banner a:hover .bannerBtn {
    opacity: 0.7;
}

.banner a .bannerBtn img {
    width: 245px;
    height: auto;
}


/************************************* q1 *************************************/

.q1 {
    padding-bottom: 60px;
}


.q1Title {
    width: 23px;
    height: auto;
}


.q1ImgTalk {
    width: 178px;
    height: auto;
    position: absolute;
    top: 70px;
    left: -20px;
}


/************************************* q2 *************************************/

.q2 {
    padding-bottom: 60px;
}


/************************************* q3 *************************************/

.q3 {
    padding-bottom: 60px;
}


.q3Title {
    width: 22px;
    height: auto;
}

.q3ImgTalk {
    width: 178px;
    height: auto;
    position: absolute;
    top: -30px;
    left: -100px;
}

/************************************* feature *************************************/

.feature {
    margin-bottom: 60px;
}

.featureTitle {
    width: 350px;
    height: auto;
    margin-bottom: 15px;
}

.featureImg {
    width: 365px;
    height: auto;
    margin-bottom: 15px;
}



/************************************* reviews *************************************/

.reviews {
    margin-bottom: 60px;
}

.reviewTitle {
    width: 344px;
    height: auto;
    margin-bottom: 30px;
}

.reviews .reviewsArea .oneReview {
    text-align: left;
    margin-bottom: 15px;

}

.reviews .reviewsArea .oneReview .stars {
    width: 140px;
    height: auto;
    margin-bottom: 10px;
}

.reviews .reviewsArea .oneReview .description {
    margin-bottom: 5px;
}

.reviews .reviewsArea .oneReview .peopleAndDate {
    margin-bottom: 10px;
    opacity: 0.5;
}

.reviews .rated49 {
    margin-top: 60px;
}

/************************************* awards *************************************/

.awards {
    margin-bottom: 60px;
}

.awards .awardTitle {
    width: 384px;
    height: auto;
    margin-bottom: 15px;
}

.awards .awardAngel {
    width: 96px;
    height: auto;
    position: absolute;
    right: 0px;
    bottom: -60px;
}


/************************************* footer *************************************/
.footer {
    margin-top: 60px;
}

.footer .footerBtn {
    width: 337px;
    height: auto;
    margin: 0 auto;
    margin-bottom: 30px;
}

.footer .blackArea {
    background-color: #42403d;
    padding: 15px;
    color: #f2eddf;
}

.footer .blackArea p {
    margin-bottom: 0px;
}

.footer .topArrow{
    width:30px;
    height: auto;
    cursor: pointer;
}

.footer .topArrow:hover{
    opacity: 0.7;
}


/************************************* 內頁共用 *************************************/

.head .insideTitle {
    width: 177px;
    height: auto;
    margin-top: 15px;
}


.titleSet {
    margin-top: 30px;
    margin-bottom: 30px;
}



.titleSet h5 {
    font-size: 18px;
    font-weight: 500;
    color: #2F2D2B;
    margin-bottom: 15px;
}

.titleSet .map,
.titleSet .map a {
    color: #918D85;
    opacity: 1;
}

.titleSet .map a:hover {
    opacity: 0.5;
}

/************************************* qa *************************************/
.titleSet .qaTitle {
    width: 68px;
    height: auto;
    margin-bottom: 8px;
}

.oneQaArea {
    margin-bottom: 30px;
}

.oneQaArea h5 {
    color: #BE4943;
    text-align: left;
    margin-bottom: 15px;
}

.oneQaArea .oneQa {
    position: relative;
    text-align: left;
    background-color: #41403C;
    color: #F2EDDF;
    padding: 15px;
    border-radius: 1px;
    cursor: pointer;
    margin-bottom: 15px;
    line-height: 1.6;
}

.oneQaArea .oneQa span {
    opacity: 0.5;
}

.oneQaArea .oneQa:hover {
    opacity: 0.8;
}


.oneQaArea .oneQa .rightArrow {
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -7px;
    width: 8.5px;
    height: auto;
}


.qaIllu {
    margin-top: 15px;
    width: 378px;
    height: auto;
    margin-bottom: 0px;

}


/************************************* know *************************************/
.titleSet .knowTitle {
    width: 299px;
    height: auto;
    margin-bottom: 8px;
}

.knowIllu {
    margin-top: 30px;
    width: 273px;
    height: auto;
    margin-bottom:-10px;
}