@charset "UTF-8";

/* CSS Document */



section, article, aside, footer, header, nav, h2 { display:block;}



body { padding:0; margin:0 auto; color: #414141; font-size:1em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; position: relative;}

img { border:0; display: block;}



html, body { height: 100%;}



.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}

.clearfix { display: inline-block; }

* html .clearfix { height: 1%; }

.clearfix { display: block; }



div.brk { clear: both;}





/************ video box ************/

.video-container { position:relative; padding-bottom:56.25%; padding-top:30px; width:100%; height: 0px; overflow:hidden;}

.video-container iframe, .video-container object, .video-container embed { position:absolute; top:0; left:0; width:100%; height:100%;}





@media screen and (min-width: 1370px) {



  body { width: 100%; height: 100%; overflow: hidden;}



  #page-r-18 { clear: both; width: 100%; height: 100%; background-color: #881c21; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; overflow: hidden; position: relative; z-index: 9999;}



  #page-r-18 .logo-title { clear: both; width: 100%; margin: 0 0 60px 0;}

  #page-r-18 .logo-title img { width: 200px; height: auto; margin: 0 auto;}



  #page-r-18 .yes-or-no-bt { clear: both; width: 100%;}

  #page-r-18 .yes-or-no-bt .text { width: 100%; color: #fff; font-size: 1.2rem; text-align: center;}

  #page-r-18 .yes-or-no-bt .y-n-bt { width: 100%; text-align: center;}

  #page-r-18 .yes-or-no-bt .y-n-bt button { padding: 8px 40px; margin: 20px 10px; color: #881c21; font-size: 1.6rem; font-weight: 500; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #ccc; cursor: pointer;}


  #page-r-18 .say-no-window { width: 100%; height: 100%; background-color: #881c21; display: none; position: fixed; top: 0; left: 0;}

  #page-r-18 .say-no-window .content { width: 440px; height: 340px; border-radius: 12px; background-color: #fff; position: absolute; top: calc(50% - 170px); left: calc(50% - 220px); display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}

  #page-r-18 .say-no-window .content .warn-icon { width: 100%; color: #881c21; font-size: 6rem; text-align: center;}

  #page-r-18 .say-no-window .content .warn-text { width: 100%; padding: 30px 0; color: #881c21; font-size: 1.2rem; text-align: center;}

  #page-r-18 .say-no-window .content .warn-bt { width: 100%; text-align: center;}

  #page-r-18 .say-no-window .content .warn-bt button { padding: 8px 40px; margin: 20px 10px; color: #881c21; font-size: 1.2rem; font-weight: 500; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #ccc; cursor: pointer;}


  #page-r-18 .content .notice-text-mo { display: none;}
  #page-r-18 .content .notice-text { clear: both; width: 100%; margin: 40px auto 0 auto; color: #fff; font-size: 1rem; line-height: 1.6em; text-align: center;}

  

  /************ header + nav ************/



  header { clear: both; width: 100%; height: 75px; padding: 0 40px; box-sizing: border-box; background-color: rgba(255,255,255,0.7); display: flex; justify-content: flex-start; align-items: center; position: absolute; top: 0; left: 0; z-index: 99;}



  .header-logo { width: 120px;}

  .header-logo img.logo { width: 100%; height: auto;}



  nav#mo { display: none;}



  nav#pc { width: calc(100% - 200px); padding: 0 20px; box-sizing: border-box;}

  nav#pc ul#nav-menu { width: 100%; height: 75px; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center;}

  nav#pc ul#nav-menu li { height: 100%; padding: 0; margin: 0; position: relative;}

  nav#pc ul#nav-menu li a { height: 100%; padding: 0 20px; color: #881c21; font-size: 1.2rem; text-decoration: none; display: flex; align-items: center; cursor: pointer;}

  nav#pc ul#nav-menu li a:hover { color: #fff;}

  nav#pc ul#nav-menu li a.sel { color: #fff; background-color: #881c21;}

  nav#pc ul#nav-menu li ul#nav-popup { width: 200px; padding: 40px 20px; margin: 0; box-sizing: border-box; background-color: rgba(0,0,0,0.7); list-style: none; display: none; position: absolute; top: 75px; left: calc(50% - 100px);}

  nav#pc ul#nav-menu li ul#nav-popup li { padding: 0; margin: 10px 0; text-align: center;}

  nav#pc ul#nav-menu li ul#nav-popup li a { clear: both; padding: 10px 20px; color: #fff; font-size: 1.1rem; line-height: 1.2em; text-decoration: none; display: block;}

  nav#pc ul#nav-menu li ul#nav-popup li a:hover { background-color: #881c21 !important;}

  nav#pc ul#nav-menu li ul#nav-popup li a.sel { color: #fff; background-color: transparent;}



  .header-social-icon { width: 120px; text-align: center;}

  .header-social-icon a { color: #881c21; font-size: 1.6rem; text-decoration: none;}





  /************ index-banner ************/



  .index-banner { clear: both; width: 100%; overflow: hidden; position: relative; z-index: 10;}

  .index-banner div.single-item { position: relative; z-index: 1;}

  .index-banner div.single-item img.banner { width: 100%; height: auto;}

  .index-banner img.banner-logo { width: 24vw; position: absolute; top: 10vw; left: calc(50% - 12vw); z-index: 5;}



  

  /************ section #index-sec1 ************/



  section#index-sec1 { clear: both; width: 100%; padding: 100px calc(50% - 640px); box-sizing: border-box;}



  .index-sec1-con { width: 100%; position: relative;}

  .index-sec1-con .title-bx { width: 300px; padding: 0 0 10px 0; border-bottom: 1px #881c21 solid;}

  .index-sec1-con .title-bx span.b-title { color: #881c21; font-size: 2.2rem; font-weight: 300;}

  .index-sec1-con .title-bx span.s-title { color: #881c21; font-size: 1rem; font-weight: 300;}

  

  .index-sec1-con .more-bt { width: 50px; position: absolute; top: 20px; right: 0;}

  .index-sec1-con .more-bt a { width: 50px; height: 50px; color: #fff; font-size: 1rem; line-height: 1em; text-decoration: none; border-radius: 100%; background-color: #881c21; display: flex; justify-content: center; align-items: center;}

  .index-sec1-con .more-bt a:hover { color: #881c21; background-color: #fff; border: 1px #881c21 solid; box-sizing: border-box;}

  

  .index-sec1-con .index-about-con { clear: both; width: 100%; padding: 30px 0 0 0; line-height: 2em; display: flex; justify-content: flex-start; align-items: flex-start;}

  .index-sec1-con .index-about-con .column-half { width: 50%;}

  .index-sec1-con .index-about-con .column-half .slogan { width: 100%; margin: 0 0 20px 0; font-size: 1.2rem; font-weight: 500;}

  .index-sec1-con .index-about-con .column-half ul { width: 100%; padding: 0 0 0 20px; margin: 0; box-sizing: border-box; list-style-type: disc; display: block;}

  .index-sec1-con .index-about-con .column-half ul li { padding: 0; margin: 0;}

  .index-sec1-con .index-about-con .column-half img.pic { width: 95%; height: auto; margin: 0 0 0 5%;}



  

  /************ section #index-sec2 ************/



  section#index-sec2 { clear: both; width: 100%; padding: 100px 0; background-color: #881c21; box-sizing: border-box;}



  .index-sec2-con { width: 90%; margin: 0 auto;}

  .index-sec2-con .title-bx { width: 300px; padding: 0 0 10px 0; margin: 0 auto; text-align: center; border-bottom: 1px #fff solid;}

  .index-sec2-con .title-bx span.b-title { color: #fff; font-size: 2.2rem; font-weight: 300;}

  .index-sec2-con .title-bx span.s-title { color: #fff; font-size: 1rem; font-weight: 300;}

  

  .index-sec2-more-bt { clear: both; width: 50px; margin: 40px auto 0 auto;}

  .index-sec2-more-bt a { width: 50px; height: 50px; color: #881c21; font-size: 1rem; line-height: 1em; text-decoration: none; border-radius: 100%; background-color: #fff; display: flex; justify-content: center; align-items: center;}

  .index-sec2-more-bt a:hover { color: #fff; border: 1px #fff solid; background-color: #881c21; box-sizing: border-box;}



  .index-sec2-con .index-news-list { clear: both; width: 86%; margin: 80px auto;}

  .index-sec2-con .index-news-list div { width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}

  .index-sec2-con .index-news-list div .news-list { width: calc(100% / 4 - 20px); padding: 10px; margin: 0 10px; border: 1px rgba(255,255,255,0.3) solid; box-sizing: border-box;}

  .index-sec2-con .index-news-list div .news-list:hover { background-color: rgba(255,255,255,0.1);}

  .index-sec2-con .index-news-list div .news-list a { width: 100%; text-decoration: none; display: block;}

  .index-sec2-con .index-news-list div .news-list a .pic { width: 100%; height: 16vw; overflow: hidden; display: block;}

  .index-sec2-con .index-news-list div .news-list a .pic img { width: 100%; height: auto;}

  .index-sec2-con .index-news-list div .news-list a .text-con { width: 100%; padding: 10px 0 0 0; display: block;}

  .index-sec2-con .index-news-list div .news-list a .text-con .date { width: 100%; color: #ccc; font-size: 0.9rem; line-height: 1em;}

  .index-sec2-con .index-news-list div .news-list a .text-con .news-title { width: 100%; padding: 10px 0 0 0; color: #fff; font-size: 1.1rem; font-weight: 500; line-height: 1.4em;}

  .index-sec2-con .index-news-list div .news-list a .text-con .text { width: 100%; padding: 10px 0 0 0; color: #fff; font-size: 1rem; line-height: 1.6em;}





  /************ section #index-sec3 ************/



  section#index-sec3 { clear: both; width: 100%; position: relative;}



  img.index-sec3-bg { width: 100%; height: auto;}



  .index-sec3-slogan { width: 70%; color: #fff; font-size: 2vw; font-weight: 300; line-height: 4vw; position: absolute; top: 10vw; left: 15%;}





  /************ section #index-sec4 ************/



  section#index-sec4 { clear: both; width: 100%; padding: 100px calc(50% - 640px) 15vw calc(50% - 640px); box-sizing: border-box; background-image: url("../images/index_sec4_bt_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: center bottom;}



  .index-sec4-con { width: 100%;}

  .index-sec4-con .title-bx { width: 300px; padding: 0 0 10px 0; border-bottom: 1px #881c21 solid;}

  .index-sec4-con .title-bx span.b-title { color: #881c21; font-size: 2.2rem; font-weight: 300;}

  .index-sec4-con .title-bx span.s-title { color: #881c21; font-size: 1rem; font-weight: 300;}



  .index-sec4-con .contact-form-table { clear: both; width: 100%; margin: 40px 0 0 0; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}

  .index-sec4-con .contact-form-table .column-half { width: 50%; padding: 0 10px; box-sizing: border-box;}

  .index-sec4-con .contact-form-table .column-half input { width: 100%; padding: 10px; margin: 0 0 10px 0; color: #881c21; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; border: 1px #881c21 solid; border-radius: 16px; box-sizing: border-box;}

  .index-sec4-con .contact-form-table .column-half textarea { width: 100%; height: 163px; padding: 10px; margin: 0 0 10px 0; color: #881c21; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; border: 1px #881c21 solid; border-radius: 16px; box-sizing: border-box;}

  .index-sec4-con .contact-form-table .column-full { clear: both; width: 100%; padding: 0 10px; margin: 20px 0 0 0; text-align: center; box-sizing: border-box;}

  .index-sec4-con .contact-form-table .column-full input { width: 100px; padding: 5px 10px; margin: 0 10px; color: #fff; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #881c21; border: 0; border-radius: 16px; box-sizing: border-box; cursor: pointer;}





  /************ #page-banner-bx ************/



  #page-banner-bx { clear: both; width: 100%; position: relative; z-index: 10;}

  #page-banner-bx img { width: 100%; height: auto;}

  #page-banner-bx .text-title { width: 100%; height: 100%; padding: 75px 0 0 0; box-sizing: border-box; color: #fff; font-size: 3rem; font-weight: 300; line-height: 1em; text-align: center; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0;}





  /************ #breadcrumbs-path ************/



  #breadcrumbs-path { clear: both; width: 100%; padding: 10px calc(50% - 640px); color: #444; font-size: 0.8em; line-height: 1.2em; box-sizing: border-box;}

  #breadcrumbs-path a { color: #444; text-decoration: none;}

  #breadcrumbs-path a:hover { border-bottom: 1px #444 solid;}





  /************ section #page-about ************/



  section#page-about-sec1 { clear: both; width: 100%; padding: 80px calc(50% - 640px); box-sizing: border-box;}



  .page-about-sec1-con { width: 70%; margin: 0 auto; font-size: 1.1rem; line-height: 1.8em;}

  .page-about-sec1-con .title-box { width: 100%; padding: 0 0 20px 0; color: #881c21; font-size: 1.8rem; font-weight: 500; line-height: 1.8em; text-align: center;}

  .page-about-sec1-con .text-content { width: 100%; padding: 20px 0 0 0; font-size: 1.1rem; line-height: 2em; text-align: center; border-top: 1px #881c21 solid;}

  .page-about-sec1-con .text-content span.title { font-size: 1.2rem; font-weight: 500;}

  .page-about-sec1-con .text-content span.object { padding: 8px 20px; margin: 10px; color: #fff; font-size: 1.1rem; line-height: 1.2em; border-radius: 8px; background-color: #881c21;}



  img.page-about-pic-1 { clear: both; width: 100%; height: auto;}





  section#page-about-sec2 { clear: both; width: 100%; padding: 80px calc(50% - 640px); background-color: #eee; box-sizing: border-box;}



  .page-about-sec2-con { width: 100%; display: flex; justify-content: flex-start; align-items: center;}

  .page-about-sec2-con .column-left { width: 50%; padding: 0 40px; box-sizing: border-box; font-size: 1.4rem; line-height: 2em; text-align: center; border-right: 1px #881c21 solid;}

  .page-about-sec2-con .column-right { width: 50%; padding: 0 40px; box-sizing: border-box; font-size: 1.1rem; line-height: 1.8em; text-align: center;}

  .page-about-sec2-con .column-right span.red-style { color: #881c21; font-size: 1.4rem; font-weight: 500;}





  section#page-about-sec3 { clear: both; width: 100%; padding: 80px calc(50% - 640px); box-sizing: border-box;}



  .page-about-sec3-con { width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-about-sec3-con .text-title { width: 100%; margin: 0 0 30px 0; color: #881c21; font-size: 2rem; font-weight: 500; line-height: 2em; text-align: center;}

  .page-about-sec3-con .service-box { width: calc(100% / 3 - 40px); padding: 40px; margin: 0 20px; color: #fff; font-size: 1.1rem; font-weight: 300; line-height: 1.8em; text-align: center; border-radius: 40px; background-color: #881c21; box-sizing: border-box;}

  .page-about-sec3-con .service-box span.icon { font-size: 3rem;}

  .page-about-sec3-con .service-box span.title { font-size: 1.6rem; font-weight: 500; line-height: 2em;}





  section#page-about-sec4 { clear: both; width: 100%; background-color: #eee;}



  .page-about-sec4-con { width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-about-sec4-con .column-left { width: 50%; padding: 80px 40px 80px calc(50% - 640px); box-sizing: border-box;}

  .page-about-sec4-con .column-left ul { width: 100%; padding: 0 0 0 40px; margin: 0; list-style: circle; box-sizing: border-box; display: block;}

  .page-about-sec4-con .column-left ul li { padding: 0; margin: 0; font-size: 1.2rem; font-weight: 500; line-height: 2em;}

  .page-about-sec4-con .column-right { width: 50%; background-image: url("../images/page_about_sec4_pic.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center center; display: block;}





  section#page-about-sec5 { clear: both; width: 100%; padding: 80px calc(50% - 640px); box-sizing: border-box;}



  .page-about-sec5-con { width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}

  .page-about-sec5-con .column-half { width: 50%; padding: 0 40px; font-size: 1rem; line-height: 1.6em; box-sizing: border-box;}

  .page-about-sec5-con .column-half:first-child { border-right: 1px #881c21 dashed;}

  .page-about-sec5-con .column-half span.sub-title { padding: 3px 5px; color: #fff; background-color: #881c21;}



  img.about-sec5-pic { width: 100%; height: auto;}





  /************ section #page-pro-list ************/



  section#page-pro-list-sec1 { clear: both; width: 100%; padding: 60px calc(50% - 640px); box-sizing: border-box;}



  .page-pro-brand-list { clear: both; width: 100%; margin: 0 0 40px 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}

  .page-pro-brand-list a { padding: 5px 15px; margin: 0 5px 10px 5px; color: #881c21; font-size: 0.8rem; line-height: 1.2em; text-align: center; text-decoration: none; border: 1px #881c21 solid; border-radius: 12px; background-color: #fff; display: block;}

  .page-pro-brand-list a:hover { background-color: #eee;}

  .page-pro-brand-list a.sel { color: #fff; background-color: #881c21;}



  .page-pro-list-full { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-pro-list-full .list-box { width: calc(100% / 4 - 30px); margin: 0 15px 30px 15px;}

  .page-pro-list-full .list-box a { text-decoration: none;}

  .page-pro-list-full .list-box .pic { width: 100%; border: 1px #ccc solid; box-sizing: border-box; position: relative;}

  .page-pro-list-full .list-box .pic img { width: 100%; height: auto;}

  .page-pro-list-full .list-box .pic .mark-list { width: 60px; position: absolute; top: 10px; right: 10px;}

  .page-pro-list-full .list-box .pic .mark-list img { width: 100%; height: auto;}

  .page-pro-list-full .list-box .title { width: 100%; padding: 10px; color: #414141; font-size: 0.9rem; line-height: 1.4em; text-align: center; box-sizing: border-box;}





  ul.page-numbers { clear: both; width: 100%; padding: 0; margin: 60px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}

  ul.page-numbers li { padding: 0; margin: 0 5px 10px 5px;}

  ul.page-numbers li a { padding: 5px; color: #881c21; font-size: 0.9rem; line-height: 1.6em; text-decoration: none; border: 1px #881c21 solid;}

  ul.page-numbers li:first-child a { border: 0;}

  ul.page-numbers li:last-child a { border: 0;}

  ul.page-numbers li a:hover { background-color: #eee;}

  ul.page-numbers li a.sel { color: #fff; background-color: #881c21;}





  .page-search-bar { clear: both; width: 100%; margin: 0 0 100px 0; display: flex; justify-content: center;}

  .page-search-bar input[type=search] { width: 300px; padding: 10px; margin: 0 10px 0 0; color: #414141; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #881c21 solid; background-color: #fff; box-sizing: border-box;}

  .page-search-bar button { padding: 10px 30px; color: #fff; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #881c21; cursor: pointer;}





  /************ section #page-pro-info ************/



  section#page-pro-info-sec1 { clear: both; width: 100%; padding: 80px calc(50% - 640px); box-sizing: border-box;}



  .page-pro-info-con { width: 100%; display: flex; justify-content: flex-end; align-items: stretch; flex-wrap: wrap;}

  .page-pro-info-con .pro-pic { width: 40%; position: relative;}

  .page-pro-info-con .pro-pic .mark-list { width: 100px; position: absolute; top: 10px; right: 10px;}

  .page-pro-info-con .pro-pic .mark-list img { width: 100%; height: auto;}

  .page-pro-info-con .pro-pic img.pro { width: 100%; height: auto; border: 1px #ccc solid; box-sizing: border-box;}  

  

  .page-pro-info-con .pro-info { width: 60%; padding: 0 0 0 40px; box-sizing: border-box;}

  .page-pro-info-con .pro-info .title-name { width: 100%; padding: 0 0 20px 0; margin: 0 0 20px 0; color: #881c21; line-height: 1.8em; border-bottom: 1px #881c21 solid;}

  .page-pro-info-con .pro-info .title-name span.title-cn { font-size: 1.8rem; font-weight: 500;}

  .page-pro-info-con .pro-info .title-name span.title-en { padding: 10px 0 0 0; font-size: 1.2rem; display: block;}

  .page-pro-info-con .pro-info .text-info { width: 100%; color: #414141; font-size: 1.1rem; line-height: 2em;}

  .page-pro-info-con .pro-info .sugg-price { width: 100%; padding: 10px 0 0 0; color: #881c21; font-size: 1rem; line-height: 1.4em; text-align: right;}

  .page-pro-info-con .pro-info .hashtags { width: 100%; padding: 20px 0 10px 0; margin: 20px 0 0 0; border-top: 1px #881c21 solid; border-bottom: 1px #881c21 solid; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}

  .page-pro-info-con .pro-info .hashtags a.tag { padding: 5px 15px; margin: 0 10px 10px 0; color: #fff; font-size: 0.9rem; line-height: 1.2em; text-decoration: none; border-radius: 14px; background-color: #881c21; display: block;}

  .page-pro-info-con .pro-info .hashtags a.tag:hover { background-color: rgba(136,28,33,0.7);}

  .page-pro-info-con .pro-info .question-bt { clear: both; width: 200px; margin: 30px 0 0 0; float: right;}

  .page-pro-info-con .pro-info .question-bt a { width: 100%; padding: 10px 0; color: #881c21; font-size: 1.1rem; line-height: 1em; text-align: center; text-decoration: none; border: 2px #881c21 solid; border-radius: 20px; display: block;}

  .page-pro-info-con .pro-info .question-bt a:hover { color: #fff; background-color: #881c21;}



  .page-pro-info-con .pro-detail { clear: both; width: 100%; margin: 60px 0 0 0;}

  .page-pro-info-con .pro-detail .sub-title { width: 100%; border-bottom: 1px #034b28 solid; text-align: center;}

  .page-pro-info-con .pro-detail .sub-title span.info-title { padding: 5px 20px; color: #fff; font-size: 1.4rem; font-weight: 500; line-height: 1.2em; background-color: #034b28;}

  .page-pro-info-con .pro-detail .text-con { clear: both; width: 100%; padding: 60px; box-sizing: border-box; font-size: 1.1rem; line-height: 2em;}

  .page-pro-info-con .pro-detail .text-con span.title-s { padding: 3px 20px; color: #fff; font-weight: 500; border-radius: 14px; background-color: #034b28;}





  section#page-pro-info-sec2 { clear: both; width: 100%;}



  .page-pro-chateau-con { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-pro-chateau-con .column-lf { width: 50%; padding: 60px; color: #fff; font-size: 3rem; font-weight: 300; line-height: 2em; text-align: right; box-sizing: border-box; background-image: url("../images/page_pro_detail_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: right top; display: flex; justify-content: flex-end; align-items: center;}

  .page-pro-chateau-con .column-rt { width: 50%;}

  .page-pro-chateau-con .column-rt img { width: 100%; height: auto;}

  .page-pro-chateau-con .more-bt { clear: both; width: 100%; padding: 30px 60px 0 0; box-sizing: border-box;}

  .page-pro-chateau-con .more-bt a { width: 60px; height: 60px; color: #881c21; font-size: 1.1rem; line-height: 1em; text-decoration: none; border: 2px #881c21 solid; border-radius: 100%; display: flex; justify-content: center; align-items: center; box-sizing: border-box; float: right;}

  .page-pro-chateau-con .more-bt a:hover { color: #fff; background-color: #881c21;}





  .goback-bt { clear: both; width: 160px; margin: 60px auto;}

  .goback-bt a { width: 100%; padding: 8px 0; color: #881c21; font-size: 1.1rem; line-height: 1.2em; text-align: center; border: 1px #881c21 solid; border-radius: 20px; text-decoration: none; display: block;}

  .goback-bt a:hover { color: #fff; background-color: #881c21;}





  /************ section #page-brand-list ************/



  section#page-brand-list-sec1 { clear: both; width: 100%; padding: 80px calc(50% - 640px); box-sizing: border-box;}



  ul.brand-list { clear: both; width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  ul.brand-list li { width: calc(100% / 5 - 30px); padding: 0; margin: 0 15px 30px 15px;}

  ul.brand-list li a { width: 100%; text-decoration: none; display: block;}

  ul.brand-list li a img { width: 100%; height: auto; border: 1px #eee solid; box-sizing: border-box;}

  ul.brand-list li a .title { width: 100%; padding: 5px 0; color: #414141; font-size: 0.9rem; line-height: 1.2em; text-align: center;}





  /************ section #page-brand-info ************/



  section#page-brand-info-sec1 { clear: both; width: 100%; padding: 80px calc(50% - 640px); box-sizing: border-box;}



  .page-brand-info-sec1-con { width: 80%; margin: 0 auto;}

  .page-brand-info-sec1-con img.brand-info { width: 100%; height: auto;}



  .page-brand-infor-pro { clear: both; width: 80%; padding: 40px 0 0 0; margin: 40px auto 0 auto; border-top: 1px #881c21 solid; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}

  .page-brand-infor-pro .sub-title { width: 100%; margin: 0 0 20px 0; color: #881c21; font-size: 1.4rem; font-weight: 500; line-height: 1.2em;}

  .page-brand-infor-pro a { padding: 5px 20px; margin: 0 5px 15px 5px; color: #fff; font-size: 1.1rem; line-height: 1.2em; border: 1px #881c21 solid; border-radius: 12px; background-color: #881c21; text-decoration: none; display: block;}

  .page-brand-infor-pro a:hover { color: #881c21; background-color: #fff;}





  /************ section #page-news ************/



  section#page-news-sec1 { clear: both; width: 100%; padding: 80px calc(50% - 640px); box-sizing: border-box;}



  .page-news-list { width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-news-list .news-list { width: calc(100% / 4 - 20px); padding: 10px; margin: 0 10px 30px 10px; border: 1px #ccc solid; box-sizing: border-box;}

  .page-news-list .news-list:hover { background-color: #eee;}

  .page-news-list .news-list a { width: 100%; height: 100%; text-decoration: none; display: block;}

  .page-news-list .news-list a .pic { width: 100%; height: 280px; overflow: hidden; display: block;}

  .page-news-list .news-list a .pic img { width: 100%; height: auto;}

  .page-news-list .news-list a .text-con { width: 100%; padding: 10px 0 0 0; display: block;}

  .page-news-list .news-list a .text-con .date { width: 100%; color: #414141; font-size: 0.9rem; line-height: 1em;}

  .page-news-list .news-list a .text-con .news-title { width: 100%; padding: 10px 0 0 0; color: #414141; font-size: 1.1rem; font-weight: 500; line-height: 1.4em;}

  .page-news-list .news-list a .text-con .text { width: 100%; padding: 10px 0 0 0; color: #414141; font-size: 1rem; line-height: 1.6em;}





  section#page-news-sec2 { clear: both; width: 100%; padding: 80px calc(50% - 640px); box-sizing: border-box;}

  

  .page-news-content { width: 100%;}

  .page-news-content .news-title { width: 100%; padding: 0 0 20px 0; color: #881c21; font-size: 1.4rem; font-weight: 500; line-height: 1.2em;}

  .page-news-content .news-date { width: 100%; padding: 0 0 10px 0; color: #999; font-size: 0.9rem; line-height: 1.2em; text-align: right; border-bottom: 1px #ccc solid;}

  .page-news-content .news-content { width: 100%; padding: 60px; font-size: 1.1rem; line-height: 1.8em; box-sizing: border-box;}

  .page-news-content .news-content img { max-width: 100%; height: auto; margin: 0 auto;}





  /************ section #page-contact ************/



  section#page-contact-sec1 { clear: both; width: 100%; padding: 80px calc(50% - 640px); box-sizing: border-box;}



  .page-contact-con { width: 80%; margin: 0 auto;}

  .page-contact-con .contact-info { width: 100%; color: #881c21; line-height: 2em; text-align: center;}

  .page-contact-con .contact-info span.address { font-size: 1.2rem;}

  .page-contact-con .contact-info span.tel { font-size: 1.4rem;}

  .page-contact-con .contact-info span.email { font-size: 1.2rem;}

  .page-contact-con .address-map { width: 100%; margin: 40px 0 0 0;}

  .page-contact-con .address-map iframe { width: 100%; height: 350px;}

  .page-contact-con .contact-form-table { width: 100%; margin: 60px 0 0 0; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}

  .page-contact-con .contact-form-table .column-text { width: 100%; padding: 0 10px 30px 0; color: #881c21; font-size: 1.1rem; font-weight: 500; line-height: 1.2em; box-sizing: border-box;}

  .page-contact-con .contact-form-table .column-lf { width: 50%; padding: 0 10px 0 0; box-sizing: border-box;}

  .page-contact-con .contact-form-table .column-lf input[type=text], 

  .page-contact-con .contact-form-table .column-lf input[type=tel] { width: 100%; padding: 10px; margin: 0 0 10px 0; color: #881c21; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 0; border: 1px #881c21 solid;}

  .page-contact-con .contact-form-table .column-rt { width: 50%; padding: 0 0 0 10px; box-sizing: border-box;}

  .page-contact-con .contact-form-table .column-rt input[type=email] { width: 100%; padding: 10px; margin: 0 0 10px 0; color: #881c21; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 0; border: 1px #881c21 solid;}

  .page-contact-con .contact-form-table .column-rt textarea { width: 100%; height: 276px; padding: 10px; margin: 0 0 10px 0; color: #881c21; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 0; border: 1px #881c21 solid;}

  .page-contact-con .contact-form-table .column-button { width: 100%; margin: 20px 0 0 0; text-align: center;}

  .page-contact-con .contact-form-table .column-button input { padding: 6px 20px; margin: 0 10px; color: #fff; font-size: 1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #881c21; border: 0; border-radius: 12px; cursor: pointer;}





  /************ section #page-sitemap ************/



  section#page-sitemap-sec1 { clear: both; width: 100%; padding: 80px calc(50% - 640px); box-sizing: border-box;}



  ul.page-sitemap { clear: both; width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}

  ul.page-sitemap li { width: 200px; padding: 0; margin: 0 0 30px 0; text-align: center;}

  ul.page-sitemap li a { color: #881c21; font-size: 1.1rem; font-weight: 500; line-height: 1.2em; text-decoration: none; border-bottom: 2px #881c21 solid;}

  ul.page-sitemap li ul.sitemap-popup { width: 100%; padding: 20px 0; margin: 0; list-style: none; display: block;}

  ul.page-sitemap li ul.sitemap-popup li { width: 100%; padding: 0 0 10px 0; margin: 0; text-align: center;}

  ul.page-sitemap li ul.sitemap-popup li a { color: #881c21; font-size: 0.9rem; line-height: 1.4em; text-decoration: none; border: 0;}

  ul.page-sitemap li ul.sitemap-popup li a:hover { border-bottom: 1px #881c21 solid;}





  /************ footer ************/



  footer { clear: both; width: 100%; padding: 60px calc(50% - 640px) calc(4.4vw + 60px) calc(50% - 640px); box-sizing: border-box; background-color: #881c21; display: flex; justify-content: flex-start; align-items: stretch;}



  .footer-logo { width: 300px; padding: 0 60px 0 0; border-right: 1px #ccc solid; box-sizing: border-box;}

  .footer-logo img { width: 100%; height: auto;}



  .footer-infor { width: calc(100% - 600px); color: #fff; font-size: 1rem; font-weight: 300; line-height: 1.8em; text-align: center;}



  .footer-social { width: 300px; padding: 0 0 0 60px; border-left: 1px #ccc solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}

  .footer-social a { padding: 10px; color: #fff; font-size: 1.6rem; text-decoration: none; display: block;}

  .footer-social a.sitemap-nav { color: #fff; font-size: 1.1rem; line-height: 1.2em; text-decoration: none;}



  .drink-slogan { width: 100%; padding: 1.2vw; color: #fff; font-size: 2.4vw; font-weight: 300; line-height: 2vw; letter-spacing: 1vw; text-align: center; background-color: #414141; position: fixed; bottom: 0; left: 0; z-index: 98;}





}



@media screen and (min-width: 1024px) and (max-width: 1369px) {



  body { width: 100%; height: 100%; overflow: hidden;}



  #page-r-18 { clear: both; width: 100%; height: 100%; background-color: #881c21; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; overflow: hidden; position: relative; z-index: 9999;}



  #page-r-18 .logo-title { clear: both; width: 100%; margin: 0 0 60px 0;}

  #page-r-18 .logo-title img { width: 200px; height: auto; margin: 0 auto;}



  #page-r-18 .yes-or-no-bt { clear: both; width: 100%;}

  #page-r-18 .yes-or-no-bt .text { width: 100%; color: #fff; font-size: 1.2rem; text-align: center;}

  #page-r-18 .yes-or-no-bt .y-n-bt { width: 100%; text-align: center;}

  #page-r-18 .yes-or-no-bt .y-n-bt button { padding: 8px 40px; margin: 20px 10px; color: #881c21; font-size: 1.6rem; font-weight: 500; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #ccc; cursor: pointer;}



  #page-r-18 .say-no-window { width: 100%; height: 100%; background-color: #881c21; display: none; position: fixed; top: 0; left: 0;}

  #page-r-18 .say-no-window .content { width: 440px; height: 340px; border-radius: 12px; background-color: #fff; position: absolute; top: calc(50% - 170px); left: calc(50% - 220px); display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}

  #page-r-18 .say-no-window .content .warn-icon { width: 100%; color: #881c21; font-size: 6rem; text-align: center;}

  #page-r-18 .say-no-window .content .warn-text { width: 100%; padding: 30px 0; color: #881c21; font-size: 1.2rem; text-align: center;}

  #page-r-18 .say-no-window .content .warn-bt { width: 100%; text-align: center;}

  #page-r-18 .say-no-window .content .warn-bt button { padding: 8px 40px; margin: 20px 10px; color: #881c21; font-size: 1.2rem; font-weight: 500; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #ccc; cursor: pointer;}


  #page-r-18 .content .notice-text-mo { display: none;}
  #page-r-18 .content .notice-text { clear: both; width: 100%; margin: 40px auto 0 auto; color: #fff; font-size: 1rem; line-height: 1.6em; text-align: center;}


  /************ header + nav ************/



  header { width: 100%; height: 75px; padding: 0 40px; box-sizing: border-box; background-color: rgba(255,255,255,0.7); display: flex; justify-content: flex-start; align-items: center; position: absolute; top: 0; left: 0; z-index: 99;}



  .header-logo { width: 120px;}

  .header-logo img.logo { width: 100%; height: auto;}



  nav#mo { display: none;}



  nav#pc { width: calc(100% - 200px); padding: 0 20px; box-sizing: border-box;}

  nav#pc ul#nav-menu { width: 100%; height: 75px; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center;}

  nav#pc ul#nav-menu li { height: 100%; padding: 0; margin: 0; position: relative;}

  nav#pc ul#nav-menu li a { height: 100%; padding: 0 20px; color: #881c21; font-size: 1.2rem; text-decoration: none; display: flex; align-items: center; cursor: pointer;}

  nav#pc ul#nav-menu li a:hover { color: #fff;}

  nav#pc ul#nav-menu li a.sel { color: #fff; background-color: #881c21;}

  nav#pc ul#nav-menu li ul#nav-popup { width: 200px; padding: 40px 20px; margin: 0; box-sizing: border-box; background-color: rgba(0,0,0,0.7); list-style: none; display: none; position: absolute; top: 75px; left: calc(50% - 100px);}

  nav#pc ul#nav-menu li ul#nav-popup li { padding: 0; margin: 10px 0; text-align: center;}

  nav#pc ul#nav-menu li ul#nav-popup li a { clear: both; padding: 10px 20px; color: #fff; font-size: 1.1rem; line-height: 1.2em; text-decoration: none; display: block;}

  nav#pc ul#nav-menu li ul#nav-popup li a:hover { background-color: #881c21 !important;}

  nav#pc ul#nav-menu li ul#nav-popup li a.sel { color: #fff; background-color: transparent;}



  /*nav#pc { width: calc(100% - 200px); padding: 0 20px; box-sizing: border-box;}

  nav#pc ul#nav-menu { width: 100%; height: 75px; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center;}

  nav#pc ul#nav-menu li { height: 100%; padding: 0; margin: 0;}

  nav#pc ul#nav-menu li a { height: 100%; padding: 0 20px; color: #881c21; font-size: 1.2rem; text-decoration: none; display: flex; align-items: center; cursor: pointer;}

  nav#pc ul#nav-menu li a:hover { color: #fff;}

  nav#pc ul#nav-menu li a.sel { color: #fff; background-color: #881c21;}

  nav#pc ul#nav-menu li ul#nav-popup { width: 200px; padding: 40px 20px; margin: 0; box-sizing: border-box; background-color: rgba(0,0,0,0.7); list-style: none; display: none; position: absolute; top: 75px; left: calc(50% - 100px);}

  nav#pc ul#nav-menu li ul#nav-popup li { padding: 0; margin: 10px 0; text-align: center;}

  nav#pc ul#nav-menu li ul#nav-popup li a { clear: both; padding: 10px 20px; color: #fff; font-size: 1.1rem; line-height: 1.2em; text-decoration: none; display: block;}

  nav#pc ul#nav-menu li ul#nav-popup li a:hover { background-color: #881c21 !important;}

  nav#pc ul#nav-menu li ul#nav-popup li a.sel { color: #fff; background-color: transparent;}*/



  .header-social-icon { width: 120px; text-align: center;}

  .header-social-icon a { color: #881c21; font-size: 1.6rem; text-decoration: none;}





  /************ index-banner ************/



  .index-banner { clear: both; width: 100%; overflow: hidden; position: relative; z-index: 10;}

  .index-banner div.single-item { position: relative; z-index: 1;}

  .index-banner div.single-item img.banner { width: 100%; height: auto;}

  .index-banner img.banner-logo { width: 24vw; position: absolute; top: 10vw; left: calc(50% - 12vw); z-index: 5;}



  

  /************ section #index-sec1 ************/



  section#index-sec1 { clear: both; width: 100%; padding: 70px calc(50% - 480px); box-sizing: border-box;}



  .index-sec1-con { width: 100%; position: relative;}

  .index-sec1-con .title-bx { width: 300px; padding: 0 0 10px 0; border-bottom: 1px #881c21 solid;}

  .index-sec1-con .title-bx span.b-title { color: #881c21; font-size: 2.2rem; font-weight: 300;}

  .index-sec1-con .title-bx span.s-title { color: #881c21; font-size: 1rem; font-weight: 300;}

  

  .index-sec1-con .more-bt { width: 50px; position: absolute; top: 20px; right: 0;}

  .index-sec1-con .more-bt a { width: 50px; height: 50px; color: #fff; font-size: 1rem; line-height: 1em; text-decoration: none; border-radius: 100%; background-color: #881c21; display: flex; justify-content: center; align-items: center;}

  .index-sec1-con .more-bt a:hover { color: #881c21; background-color: #fff; border: 1px #881c21 solid; box-sizing: border-box;}

  

  .index-sec1-con .index-about-con { clear: both; width: 100%; padding: 30px 0 0 0; line-height: 2em; display: flex; justify-content: flex-start; align-items: flex-start;}

  .index-sec1-con .index-about-con .column-half { width: 50%;}

  .index-sec1-con .index-about-con .column-half .slogan { width: 100%; margin: 0 0 20px 0; font-size: 1.2rem; font-weight: 500;}

  .index-sec1-con .index-about-con .column-half ul { width: 100%; padding: 0 0 0 20px; margin: 0; box-sizing: border-box; list-style-type: disc; display: block;}

  .index-sec1-con .index-about-con .column-half ul li { padding: 0; margin: 0;}

  .index-sec1-con .index-about-con .column-half img.pic { width: 95%; height: auto; margin: 0 0 0 5%;}



  

  /************ section #index-sec2 ************/



  section#index-sec2 { clear: both; width: 100%; padding: 70px 0; background-color: #881c21; box-sizing: border-box;}



  .index-sec2-con { width: 90%; margin: 0 auto;}

  .index-sec2-con .title-bx { width: 300px; padding: 0 0 10px 0; margin: 0 auto; text-align: center; border-bottom: 1px #fff solid;}

  .index-sec2-con .title-bx span.b-title { color: #fff; font-size: 2.2rem; font-weight: 300;}

  .index-sec2-con .title-bx span.s-title { color: #fff; font-size: 1rem; font-weight: 300;}

  

  .index-sec2-more-bt { clear: both; width: 50px; margin: 40px auto 0 auto;}

  .index-sec2-more-bt a { width: 50px; height: 50px; color: #881c21; font-size: 1rem; line-height: 1em; text-decoration: none; border-radius: 100%; background-color: #fff; display: flex; justify-content: center; align-items: center;}

  .index-sec2-more-bt a:hover { color: #fff; border: 1px #fff solid; background-color: #881c21; box-sizing: border-box;}



  .index-sec2-con .index-news-list { clear: both; width: 86%; margin: 80px auto;}

  .index-sec2-con .index-news-list div { width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}

  .index-sec2-con .index-news-list div .news-list { width: calc(100% / 4 - 20px); padding: 10px; margin: 0 10px; border: 1px rgba(255,255,255,0.3) solid; box-sizing: border-box;}

  .index-sec2-con .index-news-list div .news-list:hover { background-color: rgba(255,255,255,0.1);}

  .index-sec2-con .index-news-list div .news-list a { width: 100%; text-decoration: none; display: block;}

  .index-sec2-con .index-news-list div .news-list a .pic { width: 100%; height: 16vw; overflow: hidden; display: block;}

  .index-sec2-con .index-news-list div .news-list a .pic img { width: 100%; height: auto;}

  .index-sec2-con .index-news-list div .news-list a .text-con { width: 100%; padding: 10px 0 0 0; display: block;}

  .index-sec2-con .index-news-list div .news-list a .text-con .date { width: 100%; color: #ccc; font-size: 0.9rem; line-height: 1em;}

  .index-sec2-con .index-news-list div .news-list a .text-con .news-title { width: 100%; padding: 10px 0 0 0; color: #fff; font-size: 1.1rem; font-weight: 500; line-height: 1.4em;}

  .index-sec2-con .index-news-list div .news-list a .text-con .text { width: 100%; padding: 10px 0 0 0; color: #fff; font-size: 1rem; line-height: 1.6em;}





  /************ section #index-sec3 ************/



  section#index-sec3 { clear: both; width: 100%; overflow: hidden; position: relative;}



  img.index-sec3-bg { width: 120%; height: auto; margin: 0 0 0 -5%;}



  .index-sec3-slogan { width: 70%; color: #fff; font-size: 3.4vw; font-weight: 300; line-height: 5.4vw; position: absolute; top: 10vw; left: 10%;}





  /************ section #index-sec4 ************/



  section#index-sec4 { clear: both; width: 100%; padding: 100px calc(50% - 480px) 15vw calc(50% - 480px); box-sizing: border-box; background-image: url("../images/index_sec4_bt_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: center bottom;}



  .index-sec4-con { width: 100%;}

  .index-sec4-con .title-bx { width: 300px; padding: 0 0 10px 0; border-bottom: 1px #881c21 solid;}

  .index-sec4-con .title-bx span.b-title { color: #881c21; font-size: 2.2rem; font-weight: 300;}

  .index-sec4-con .title-bx span.s-title { color: #881c21; font-size: 1rem; font-weight: 300;}



  .index-sec4-con .contact-form-table { clear: both; width: 100%; margin: 40px 0 0 0; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}

  .index-sec4-con .contact-form-table .column-half { width: 50%; padding: 0 10px; box-sizing: border-box;}

  .index-sec4-con .contact-form-table .column-half input { width: 100%; padding: 10px; margin: 0 0 10px 0; color: #881c21; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; border: 1px #881c21 solid; border-radius: 16px; box-sizing: border-box;}

  .index-sec4-con .contact-form-table .column-half textarea { width: 100%; height: 163px; padding: 10px; margin: 0 0 10px 0; color: #881c21; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; border: 1px #881c21 solid; border-radius: 16px; box-sizing: border-box;}

  .index-sec4-con .contact-form-table .column-full { clear: both; width: 100%; padding: 0 10px; margin: 20px 0 0 0; text-align: center; box-sizing: border-box;}

  .index-sec4-con .contact-form-table .column-full input { width: 100px; padding: 5px 10px; margin: 0 10px; color: #fff; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #881c21; border: 0; border-radius: 16px; box-sizing: border-box; cursor: pointer;}





  /************ #page-banner-bx ************/



  #page-banner-bx { clear: both; width: 100%; overflow: hidden; position: relative; z-index: 10;}

  #page-banner-bx img { width: 140%; height: auto;}

  #page-banner-bx .text-title { width: 100%; height: 100%; padding: 75px 0 0 0; box-sizing: border-box; color: #fff; font-size: 3rem; font-weight: 300; line-height: 1em; text-align: center; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0;}





  /************ #breadcrumbs-path ************/



  #breadcrumbs-path { clear: both; width: 100%; padding: 10px calc(50% - 480px); color: #444; font-size: 0.8em; line-height: 1.2em; box-sizing: border-box;}

  #breadcrumbs-path a { color: #444; text-decoration: none;}

  #breadcrumbs-path a:hover { border-bottom: 1px #444 solid;}





  /************ section #page-about ************/



  section#page-about-sec1 { clear: both; width: 100%; padding: 80px calc(50% - 480px); box-sizing: border-box;}



  .page-about-sec1-con { width: 70%; margin: 0 auto; font-size: 1.1rem; line-height: 1.8em;}

  .page-about-sec1-con .title-box { width: 100%; padding: 0 0 20px 0; color: #881c21; font-size: 1.8rem; font-weight: 500; line-height: 1.8em; text-align: center;}

  .page-about-sec1-con .text-content { width: 100%; padding: 20px 0 0 0; font-size: 1.1rem; line-height: 2em; text-align: center; border-top: 1px #881c21 solid;}

  .page-about-sec1-con .text-content span.title { font-size: 1.2rem; font-weight: 500;}

  .page-about-sec1-con .text-content span.object { padding: 8px 20px; margin: 10px; color: #fff; font-size: 1.1rem; line-height: 1.2em; border-radius: 8px; background-color: #881c21;}



  img.page-about-pic-1 { clear: both; width: 100%; height: auto;}





  section#page-about-sec2 { clear: both; width: 100%; padding: 80px calc(50% - 480px); background-color: #eee; box-sizing: border-box;}



  .page-about-sec2-con { width: 100%; display: flex; justify-content: flex-start; align-items: center;}

  .page-about-sec2-con .column-left { width: 50%; padding: 0 40px; box-sizing: border-box; font-size: 1.4rem; line-height: 2em; text-align: center; border-right: 1px #881c21 solid;}

  .page-about-sec2-con .column-right { width: 50%; padding: 0 40px; box-sizing: border-box; font-size: 1.1rem; line-height: 1.8em; text-align: center;}

  .page-about-sec2-con .column-right span.red-style { color: #881c21; font-size: 1.4rem; font-weight: 500;}





  section#page-about-sec3 { clear: both; width: 100%; padding: 80px calc(50% - 480px); box-sizing: border-box;}



  .page-about-sec3-con { width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-about-sec3-con .text-title { width: 100%; margin: 0 0 30px 0; color: #881c21; font-size: 2rem; font-weight: 500; line-height: 2em; text-align: center;}

  .page-about-sec3-con .service-box { width: calc(100% / 3 - 40px); padding: 40px; margin: 0 20px; color: #fff; font-size: 1.1rem; font-weight: 300; line-height: 1.8em; text-align: center; border-radius: 40px; background-color: #881c21; box-sizing: border-box;}

  .page-about-sec3-con .service-box span.icon { font-size: 3rem;}

  .page-about-sec3-con .service-box span.title { font-size: 1.6rem; font-weight: 500; line-height: 2em;}





  section#page-about-sec4 { clear: both; width: 100%; background-color: #eee;}



  .page-about-sec4-con { width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-about-sec4-con .column-left { width: 50%; padding: 80px 40px 80px calc(50% - 480px); box-sizing: border-box;}

  .page-about-sec4-con .column-left ul { width: 100%; padding: 0 0 0 40px; margin: 0; list-style: circle; box-sizing: border-box; display: block;}

  .page-about-sec4-con .column-left ul li { padding: 0; margin: 0; font-size: 1.2rem; font-weight: 500; line-height: 2em;}

  .page-about-sec4-con .column-right { width: 50%; background-image: url("../images/page_about_sec4_pic.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center center; display: block;}





  section#page-about-sec5 { clear: both; width: 100%; padding: 80px calc(50% - 480px); box-sizing: border-box;}



  .page-about-sec5-con { width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}

  .page-about-sec5-con .column-half { width: 50%; padding: 0 40px; font-size: 1rem; line-height: 1.6em; box-sizing: border-box;}

  .page-about-sec5-con .column-half:first-child { border-right: 1px #881c21 dashed;}

  .page-about-sec5-con .column-half span.sub-title { padding: 3px 5px; color: #fff; background-color: #881c21;}



  img.about-sec5-pic { width: 100%; height: auto;}





  /************ section #page-pro-list ************/



  section#page-pro-list-sec1 { clear: both; width: 100%; padding: 60px calc(50% - 480px); box-sizing: border-box;}



  .page-pro-brand-list { clear: both; width: 100%; margin: 0 0 40px 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}

  .page-pro-brand-list a { padding: 5px 15px; margin: 0 5px 10px 5px; color: #881c21; font-size: 0.8rem; line-height: 1.2em; text-align: center; text-decoration: none; border: 1px #881c21 solid; border-radius: 12px; background-color: #fff; display: block;}

  .page-pro-brand-list a:hover { background-color: #eee;}

  .page-pro-brand-list a.sel { color: #fff; background-color: #881c21;}



  .page-pro-list-full { width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-pro-list-full .list-box { width: calc(100% / 4 - 30px); margin: 0 15px 30px 15px;}

  .page-pro-list-full .list-box a { text-decoration: none;}

  .page-pro-list-full .list-box .pic { width: 100%; border: 1px #ccc solid; box-sizing: border-box; position: relative;}

  .page-pro-list-full .list-box .pic img { width: 100%; height: auto;}

  .page-pro-list-full .list-box .pic .mark-list { width: 50px; position: absolute; top: 5px; right: 5px;}

  .page-pro-list-full .list-box .pic .mark-list img { width: 100%; height: auto;}

  .page-pro-list-full .list-box .title { width: 100%; padding: 10px; color: #414141; font-size: 0.9rem; line-height: 1.4em; text-align: center; box-sizing: border-box;}





  ul.page-numbers { clear: both; width: 100%; padding: 0; margin: 60px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}

  ul.page-numbers li { padding: 0; margin: 0 5px 10px 5px;}

  ul.page-numbers li a { padding: 5px; color: #881c21; font-size: 0.9rem; line-height: 1.6em; text-decoration: none; border: 1px #881c21 solid;}

  ul.page-numbers li:first-child a { border: 0;}

  ul.page-numbers li:last-child a { border: 0;}

  ul.page-numbers li a:hover { background-color: #eee;}

  ul.page-numbers li a.sel { color: #fff; background-color: #881c21;}





  .page-search-bar { clear: both; width: 100%; margin: 0 0 100px 0; display: flex; justify-content: center;}

  .page-search-bar input[type=search] { width: 300px; padding: 10px; margin: 0 10px 0 0; color: #414141; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #881c21 solid; background-color: #fff; box-sizing: border-box;}

  .page-search-bar button { padding: 10px 30px; color: #fff; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #881c21; cursor: pointer;}





  /************ section #page-pro-info ************/



  section#page-pro-info-sec1 { clear: both; width: 100%; padding: 80px calc(50% - 480px); box-sizing: border-box;}



  .page-pro-info-con { width: 100%; display: flex; justify-content: flex-end; align-items: stretch; flex-wrap: wrap;}

  .page-pro-info-con .pro-pic { width: 40%; position: relative;}

  .page-pro-info-con .pro-pic .mark-list { width: 100px; position: absolute; top: 10px; right: 10px;}

  .page-pro-info-con .pro-pic .mark-list img { width: 100%; height: auto;}

  .page-pro-info-con .pro-pic img.pro { width: 100%; height: auto; border: 1px #ccc solid; box-sizing: border-box;}  

  

  .page-pro-info-con .pro-info { width: 60%; padding: 0 0 0 40px; box-sizing: border-box;}

  .page-pro-info-con .pro-info .title-name { width: 100%; padding: 0 0 20px 0; margin: 0 0 20px 0; color: #881c21; line-height: 1.8em; border-bottom: 1px #881c21 solid;}

  .page-pro-info-con .pro-info .title-name span.title-cn { font-size: 1.8rem; font-weight: 500;}

  .page-pro-info-con .pro-info .title-name span.title-en { padding: 10px 0 0 0; font-size: 1.2rem; display: block;}

  .page-pro-info-con .pro-info .text-info { width: 100%; color: #414141; font-size: 1.1rem; line-height: 2em;}

  .page-pro-info-con .pro-info .sugg-price { width: 100%; padding: 10px 0 0 0; color: #881c21; font-size: 1rem; line-height: 1.4em; text-align: right;}

  .page-pro-info-con .pro-info .hashtags { width: 100%; padding: 20px 0 10px 0; margin: 20px 0 0 0; border-top: 1px #881c21 solid; border-bottom: 1px #881c21 solid; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}

  .page-pro-info-con .pro-info .hashtags a.tag { padding: 5px 15px; margin: 0 10px 10px 0; color: #fff; font-size: 0.9rem; line-height: 1.2em; text-decoration: none; border-radius: 14px; background-color: #881c21; display: block;}

  .page-pro-info-con .pro-info .hashtags a.tag:hover { background-color: rgba(136,28,33,0.7);}

  .page-pro-info-con .pro-info .question-bt { clear: both; width: 200px; margin: 30px 0 0 0; float: right;}

  .page-pro-info-con .pro-info .question-bt a { width: 100%; padding: 10px 0; color: #881c21; font-size: 1.1rem; line-height: 1em; text-align: center; text-decoration: none; border: 2px #881c21 solid; border-radius: 20px; display: block;}

  .page-pro-info-con .pro-info .question-bt a:hover { color: #fff; background-color: #881c21;}



  .page-pro-info-con .pro-detail { clear: both; width: 100%; margin: 60px 0 0 0;}

  .page-pro-info-con .pro-detail .sub-title { width: 100%; border-bottom: 1px #034b28 solid; text-align: center;}

  .page-pro-info-con .pro-detail .sub-title span.info-title { padding: 5px 20px; color: #fff; font-size: 1.4rem; font-weight: 500; line-height: 1.2em; background-color: #034b28;}

  .page-pro-info-con .pro-detail .text-con { clear: both; width: 100%; padding: 60px; box-sizing: border-box; font-size: 1.1rem; line-height: 2em;}

  .page-pro-info-con .pro-detail .text-con span.title-s { padding: 3px 20px; color: #fff; font-weight: 500; border-radius: 14px; background-color: #034b28;}





  section#page-pro-info-sec2 { clear: both; width: 100%;}



  .page-pro-chateau-con { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-pro-chateau-con .column-lf { width: 50%; padding: 60px 20px; color: #fff; font-size: 2.2rem; font-weight: 300; line-height: 2em; text-align: right; box-sizing: border-box; background-image: url("../images/page_pro_detail_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: right top; display: flex; justify-content: flex-end; align-items: center;}

  .page-pro-chateau-con .column-rt { width: 50%;}

  .page-pro-chateau-con .column-rt img { width: 100%; height: auto;}

  .page-pro-chateau-con .more-bt { clear: both; width: 100%; padding: 30px 60px 0 0; box-sizing: border-box;}

  .page-pro-chateau-con .more-bt a { width: 60px; height: 60px; color: #881c21; font-size: 1.1rem; line-height: 1em; text-decoration: none; border: 2px #881c21 solid; border-radius: 100%; display: flex; justify-content: center; align-items: center; box-sizing: border-box; float: right;}

  .page-pro-chateau-con .more-bt a:hover { color: #fff; background-color: #881c21;}





  .goback-bt { clear: both; width: 160px; margin: 60px auto;}

  .goback-bt a { width: 100%; padding: 8px 0; color: #881c21; font-size: 1.1rem; line-height: 1.2em; text-align: center; border: 1px #881c21 solid; border-radius: 20px; text-decoration: none; display: block;}

  .goback-bt a:hover { color: #fff; background-color: #881c21;}





  /************ section #page-brand-list ************/



  section#page-brand-list-sec1 { clear: both; width: 100%; padding: 80px calc(50% - 480px); box-sizing: border-box;}



  ul.brand-list { clear: both; width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  ul.brand-list li { width: calc(100% / 5 - 30px); padding: 0; margin: 0 15px 30px 15px;}

  ul.brand-list li a { width: 100%; text-decoration: none; display: block;}

  ul.brand-list li a img { width: 100%; height: auto; border: 1px #eee solid; box-sizing: border-box;}

  ul.brand-list li a .title { width: 100%; padding: 5px 0; color: #414141; font-size: 0.9rem; line-height: 1.2em; text-align: center;}





  /************ section #page-brand-info ************/



  section#page-brand-info-sec1 { clear: both; width: 100%; padding: 80px calc(50% - 480px); box-sizing: border-box;}



  .page-brand-info-sec1-con { width: 85%; margin: 0 auto;}

  .page-brand-info-sec1-con img.brand-info { width: 100%; height: auto;}



  .page-brand-infor-pro { clear: both; width: 85%; padding: 40px 0 0 0; margin: 40px auto 0 auto; border-top: 1px #881c21 solid; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}

  .page-brand-infor-pro .sub-title { width: 100%; margin: 0 0 20px 0; color: #881c21; font-size: 1.4rem; font-weight: 500; line-height: 1.2em;}

  .page-brand-infor-pro a { padding: 5px 20px; margin: 0 5px 15px 5px; color: #fff; font-size: 1.1rem; line-height: 1.2em; border: 1px #881c21 solid; border-radius: 12px; background-color: #881c21; text-decoration: none; display: block;}

  .page-brand-infor-pro a:hover { color: #881c21; background-color: #fff;}





  /************ section #page-news ************/



  section#page-news-sec1 { clear: both; width: 100%; padding: 80px calc(50% - 480px); box-sizing: border-box;}



  .page-news-list { width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-news-list .news-list { width: calc(100% / 4 - 20px); padding: 10px; margin: 0 10px 30px 10px; border: 1px #ccc solid; box-sizing: border-box;}

  .page-news-list .news-list:hover { background-color: #eee;}

  .page-news-list .news-list a { width: 100%; height: 100%; text-decoration: none; display: block;}

  .page-news-list .news-list a .pic { width: 100%; height: 190px; overflow: hidden; display: block;}

  .page-news-list .news-list a .pic img { width: 100%; height: auto;}

  .page-news-list .news-list a .text-con { width: 100%; padding: 10px 0 0 0; display: block;}

  .page-news-list .news-list a .text-con .date { width: 100%; color: #414141; font-size: 0.9rem; line-height: 1em;}

  .page-news-list .news-list a .text-con .news-title { width: 100%; padding: 10px 0 0 0; color: #414141; font-size: 1.1rem; font-weight: 500; line-height: 1.4em;}

  .page-news-list .news-list a .text-con .text { width: 100%; padding: 10px 0 0 0; color: #414141; font-size: 1rem; line-height: 1.6em;}





  section#page-news-sec2 { clear: both; width: 100%; padding: 80px calc(50% - 480px); box-sizing: border-box;}

  

  .page-news-content { width: 100%;}

  .page-news-content .news-title { width: 100%; padding: 0 0 20px 0; color: #881c21; font-size: 1.4rem; font-weight: 500; line-height: 1.2em;}

  .page-news-content .news-date { width: 100%; padding: 0 0 10px 0; color: #999; font-size: 0.9rem; line-height: 1.2em; text-align: right; border-bottom: 1px #ccc solid;}

  .page-news-content .news-content { width: 100%; padding: 60px 40px; font-size: 1.1rem; line-height: 1.8em; box-sizing: border-box;}

  .page-news-content .news-content img { max-width: 100%; height: auto; margin: 0 auto;}





  /************ section #page-contact ************/



  section#page-contact-sec1 { clear: both; width: 100%; padding: 80px calc(50% - 480px); box-sizing: border-box;}



  .page-contact-con { width: 90%; margin: 0 auto;}

  .page-contact-con .contact-info { width: 100%; color: #881c21; line-height: 2em; text-align: center;}

  .page-contact-con .contact-info span.address { font-size: 1.2rem;}

  .page-contact-con .contact-info span.tel { font-size: 1.4rem;}

  .page-contact-con .contact-info span.email { font-size: 1.2rem;}

  .page-contact-con .address-map { width: 100%; margin: 40px 0 0 0;}

  .page-contact-con .address-map iframe { width: 100%; height: 350px;}

  .page-contact-con .contact-form-table { width: 100%; margin: 60px 0 0 0; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}

  .page-contact-con .contact-form-table .column-text { width: 100%; padding: 0 10px 30px 0; color: #881c21; font-size: 1.1rem; font-weight: 500; line-height: 1.2em; box-sizing: border-box;}

  .page-contact-con .contact-form-table .column-lf { width: 50%; padding: 0 10px 0 0; box-sizing: border-box;}

  .page-contact-con .contact-form-table .column-lf input[type=text], 

  .page-contact-con .contact-form-table .column-lf input[type=tel] { width: 100%; padding: 10px; margin: 0 0 10px 0; color: #881c21; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 0; border: 1px #881c21 solid;}

  .page-contact-con .contact-form-table .column-rt { width: 50%; padding: 0 0 0 10px; box-sizing: border-box;}

  .page-contact-con .contact-form-table .column-rt input[type=email] { width: 100%; padding: 10px; margin: 0 0 10px 0; color: #881c21; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 0; border: 1px #881c21 solid;}

  .page-contact-con .contact-form-table .column-rt textarea { width: 100%; height: 276px; padding: 10px; margin: 0 0 10px 0; color: #881c21; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 0; border: 1px #881c21 solid;}

  .page-contact-con .contact-form-table .column-button { width: 100%; margin: 20px 0 0 0; text-align: center;}

  .page-contact-con .contact-form-table .column-button input { padding: 6px 20px; margin: 0 10px; color: #fff; font-size: 1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #881c21; border: 0; border-radius: 12px; cursor: pointer;}





  /************ section #page-sitemap ************/



  section#page-sitemap-sec1 { clear: both; width: 100%; padding: 80px calc(50% - 480px); box-sizing: border-box;}



  ul.page-sitemap { clear: both; width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}

  ul.page-sitemap li { width: 180px; padding: 0; margin: 0 0 30px 0; text-align: center;}

  ul.page-sitemap li a { color: #881c21; font-size: 1.1rem; font-weight: 500; line-height: 1.2em; text-decoration: none; border-bottom: 2px #881c21 solid;}

  ul.page-sitemap li ul.sitemap-popup { width: 100%; padding: 20px 0; margin: 0; list-style: none; display: block;}

  ul.page-sitemap li ul.sitemap-popup li { width: 100%; padding: 0 0 10px 0; margin: 0; text-align: center;}

  ul.page-sitemap li ul.sitemap-popup li a { color: #881c21; font-size: 0.9rem; line-height: 1.4em; text-decoration: none; border: 0;}

  ul.page-sitemap li ul.sitemap-popup li a:hover { border-bottom: 1px #881c21 solid;}





  /************ footer ************/



  footer { clear: both; width: 100%; padding: 60px calc(50% - 480px) calc(4.4vw + 60px) calc(50% - 480px); box-sizing: border-box; background-color: #881c21; display: flex; justify-content: flex-start; align-items: stretch;}



  .footer-logo { width: 280px; padding: 0 60px 0 0; border-right: 1px #ccc solid; box-sizing: border-box;}

  .footer-logo img { width: 100%; height: auto;}



  .footer-infor { width: calc(100% - 560px); color: #fff; font-size: 1rem; font-weight: 300; line-height: 1.8em; text-align: center;}



  .footer-social { width: 280px; padding: 0 0 0 40px; border-left: 1px #ccc solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}

  .footer-social a { padding: 10px; color: #fff; font-size: 1.6rem; text-decoration: none; display: block;}

  .footer-social a.sitemap-nav { color: #fff; font-size: 1.1rem; line-height: 1.2em; text-decoration: none;}



  .drink-slogan { width: 100%; padding: 1.2vw; color: #fff; font-size: 2.4vw; font-weight: 300; line-height: 2vw; letter-spacing: 1vw; text-align: center; background-color: #414141; position: fixed; bottom: 0; left: 0; z-index: 98;}





}



@media screen and (min-width: 768px) and (max-width: 1023px) {



  body { width: 100%; height: 100%; overflow: hidden;}



  #page-r-18 { clear: both; width: 100%; height: 100%; background-color: #881c21; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; overflow: hidden; position: relative; z-index: 9999;}



  #page-r-18 .logo-title { clear: both; width: 100%; margin: 0 0 60px 0;}

  #page-r-18 .logo-title img { width: 200px; height: auto; margin: 0 auto;}



  #page-r-18 .yes-or-no-bt { clear: both; width: 100%;}

  #page-r-18 .yes-or-no-bt .text { width: 100%; color: #fff; font-size: 1.2rem; text-align: center;}

  #page-r-18 .yes-or-no-bt .y-n-bt { width: 100%; text-align: center;}

  #page-r-18 .yes-or-no-bt .y-n-bt button { padding: 8px 40px; margin: 20px 10px; color: #881c21; font-size: 1.6rem; font-weight: 500; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #ccc; cursor: pointer;}



  #page-r-18 .say-no-window { width: 100%; height: 100%; background-color: #881c21; display: none; position: fixed; top: 0; left: 0;}

  #page-r-18 .say-no-window .content { width: 440px; height: 340px; border-radius: 12px; background-color: #fff; position: absolute; top: calc(50% - 170px); left: calc(50% - 220px); display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}

  #page-r-18 .say-no-window .content .warn-icon { width: 100%; color: #881c21; font-size: 6rem; text-align: center;}

  #page-r-18 .say-no-window .content .warn-text { width: 100%; padding: 30px 0; color: #881c21; font-size: 1.2rem; text-align: center;}

  #page-r-18 .say-no-window .content .warn-bt { width: 100%; text-align: center;}

  #page-r-18 .say-no-window .content .warn-bt button { padding: 8px 40px; margin: 20px 10px; color: #881c21; font-size: 1.2rem; font-weight: 500; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #ccc; cursor: pointer;}


  #page-r-18 .content .notice-text { display: none;}
  #page-r-18 .content .notice-text-mo { clear: both; width: 100%; margin: 40px auto 0 auto; color: #fff; font-size: 1rem; line-height: 1.6em; text-align: center;}



  /************ header + nav ************/



  header { width: 100%; height: 75px; padding: 0 40px; box-sizing: border-box; background-color: rgba(255,255,255,0.7); display: flex; justify-content: flex-start; align-items: center; position: absolute; top: 0; left: 0; z-index: 99;}



  .header-logo { width: 120px;}

  .header-logo img.logo { width: 100%; height: auto;}



  nav#pc { display: none;}



  nav#mo { width: calc(100% - 240px); padding: 0 20px; box-sizing: border-box;}

  nav#mo .nav-icon { width: 50px; margin: 0 auto; color: #881c21; font-size: 2.2rem; text-align: center; cursor: pointer;}

  nav#mo ul#nav-menu { width: 100%; padding: 40px; margin: 0; box-sizing: border-box; list-style: none; display: none; background-color: rgba(0,0,0,0.8); position: absolute; top: 75px; left: 0;}

  nav#mo ul#nav-menu li { height: 100%; padding: 0; margin: 0;}

  nav#mo ul#nav-menu li a { height: 100%; padding: 10px 20px; color: #fff; font-size: 1.2rem; text-align: center; text-decoration: none; display: block;}

  nav#mo ul#nav-menu li a:hover { color: #fff;}

  nav#mo ul#nav-menu li a.sel { color: #fff; background-color: #881c21;}

  nav#mo ul#nav-menu li ul#nav-popup { width: 100%; padding: 40px; margin: 0; box-sizing: border-box; background-color: rgba(0,0,0,0.7); list-style: none; display: none;}

  nav#mo ul#nav-menu li ul#nav-popup li { padding: 0; margin: 0;}

  nav#mo ul#nav-menu li ul#nav-popup li a { clear: both; padding: 10px 20px; color: #fff; font-size: 1.1rem; line-height: 1.2em; text-decoration: none; display: block;}

  nav#mo ul#nav-menu li ul#nav-popup li a:hover { background-color: #881c21 !important;}

  nav#mo ul#nav-menu li ul#nav-popup li a.sel { color: #fff; background-color: transparent;}



  .header-social-icon { width: 120px; text-align: center;}

  .header-social-icon a { color: #881c21; font-size: 1.6rem; text-decoration: none;}





  /************ index-banner ************/



  .index-banner { clear: both; width: 100%; overflow: hidden; position: relative; z-index: 10;}

  .index-banner div.single-item { position: relative; z-index: 1;}

  .index-banner div.single-item img.banner { width: 100%; height: auto;}

  .index-banner img.banner-logo { width: 24vw; position: absolute; top: 10vw; left: calc(50% - 12vw); z-index: 5;}



  

  /************ section #index-sec1 ************/



  section#index-sec1 { clear: both; width: 100%; padding: 70px 40px; box-sizing: border-box;}



  .index-sec1-con { width: 100%; position: relative;}

  .index-sec1-con .title-bx { width: 300px; padding: 0 0 10px 0; border-bottom: 1px #881c21 solid;}

  .index-sec1-con .title-bx span.b-title { color: #881c21; font-size: 2.2rem; font-weight: 300;}

  .index-sec1-con .title-bx span.s-title { color: #881c21; font-size: 1rem; font-weight: 300;}

  

  .index-sec1-con .more-bt { width: 50px; position: absolute; top: 20px; right: 0;}

  .index-sec1-con .more-bt a { width: 50px; height: 50px; color: #fff; font-size: 1rem; line-height: 1em; text-decoration: none; border-radius: 100%; background-color: #881c21; display: flex; justify-content: center; align-items: center;}

  .index-sec1-con .more-bt a:hover { color: #881c21; background-color: #fff; border: 1px #881c21 solid; box-sizing: border-box;}

  

  .index-sec1-con .index-about-con { clear: both; width: 100%; padding: 30px 0 0 0; line-height: 2em; display: flex; justify-content: flex-start; align-items: flex-start;}

  .index-sec1-con .index-about-con .column-half { width: 50%;}

  .index-sec1-con .index-about-con .column-half .slogan { width: 100%; margin: 0 0 20px 0; font-size: 1.2rem; font-weight: 500;}

  .index-sec1-con .index-about-con .column-half ul { width: 100%; padding: 0 0 0 20px; margin: 0; box-sizing: border-box; list-style-type: disc; display: block;}

  .index-sec1-con .index-about-con .column-half ul li { padding: 0; margin: 0;}

  .index-sec1-con .index-about-con .column-half img.pic { width: 95%; height: auto; margin: 0 0 0 5%;}



  

  /************ section #index-sec2 ************/



  section#index-sec2 { clear: both; width: 100%; padding: 70px 0; background-color: #881c21; box-sizing: border-box;}



  .index-sec2-con { width: 90%; margin: 0 auto;}

  .index-sec2-con .title-bx { width: 300px; padding: 0 0 10px 0; margin: 0 auto; text-align: center; border-bottom: 1px #fff solid;}

  .index-sec2-con .title-bx span.b-title { color: #fff; font-size: 2.2rem; font-weight: 300;}

  .index-sec2-con .title-bx span.s-title { color: #fff; font-size: 1rem; font-weight: 300;}

  

  .index-sec2-more-bt { clear: both; width: 50px; margin: 40px auto 0 auto;}

  .index-sec2-more-bt a { width: 50px; height: 50px; color: #881c21; font-size: 1rem; line-height: 1em; text-decoration: none; border-radius: 100%; background-color: #fff; display: flex; justify-content: center; align-items: center;}

  .index-sec2-more-bt a:hover { color: #fff; border: 1px #fff solid; background-color: #881c21; box-sizing: border-box;}



  .index-sec2-con .index-news-list { clear: both; width: 86%; margin: 80px auto;}

  .index-sec2-con .index-news-list div { width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}

  .index-sec2-con .index-news-list div .news-list { width: calc(100% / 4 - 20px); padding: 10px; margin: 0 10px; border: 1px rgba(255,255,255,0.3) solid; box-sizing: border-box;}

  .index-sec2-con .index-news-list div .news-list:hover { background-color: rgba(255,255,255,0.1);}

  .index-sec2-con .index-news-list div .news-list a { width: 100%; text-decoration: none; display: block;}

  .index-sec2-con .index-news-list div .news-list a .pic { width: 100%; height: 26vw; overflow: hidden; display: block;}

  .index-sec2-con .index-news-list div .news-list a .pic img { width: 100%; height: auto;}

  .index-sec2-con .index-news-list div .news-list a .text-con { width: 100%; padding: 10px 0 0 0; display: block;}

  .index-sec2-con .index-news-list div .news-list a .text-con .date { width: 100%; color: #ccc; font-size: 0.9rem; line-height: 1em;}

  .index-sec2-con .index-news-list div .news-list a .text-con .news-title { width: 100%; padding: 10px 0 0 0; color: #fff; font-size: 1.1rem; font-weight: 500; line-height: 1.4em;}

  .index-sec2-con .index-news-list div .news-list a .text-con .text { width: 100%; padding: 10px 0 0 0; color: #fff; font-size: 1rem; line-height: 1.6em;}





  /************ section #index-sec3 ************/



  section#index-sec3 { clear: both; width: 100%; overflow: hidden; position: relative;}



  img.index-sec3-bg { width: 120%; height: auto; margin: 0 0 0 -5%;}



  .index-sec3-slogan { width: 70%; color: #fff; font-size: 3.4vw; font-weight: 300; line-height: 5.4vw; position: absolute; top: 10vw; left: 10%;}





  /************ section #index-sec4 ************/



  section#index-sec4 { clear: both; width: 100%; padding: 70px 40px 15vw 40px; box-sizing: border-box; background-image: url("../images/index_sec4_bt_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: center bottom;}



  .index-sec4-con { width: 100%;}

  .index-sec4-con .title-bx { width: 300px; padding: 0 0 10px 0; border-bottom: 1px #881c21 solid;}

  .index-sec4-con .title-bx span.b-title { color: #881c21; font-size: 2.2rem; font-weight: 300;}

  .index-sec4-con .title-bx span.s-title { color: #881c21; font-size: 1rem; font-weight: 300;}



  .index-sec4-con .contact-form-table { clear: both; width: 100%; margin: 40px 0 0 0; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}

  .index-sec4-con .contact-form-table .column-half { width: 50%; padding: 0 10px; box-sizing: border-box;}

  .index-sec4-con .contact-form-table .column-half input { width: 100%; padding: 10px; margin: 0 0 10px 0; color: #881c21; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; border: 1px #881c21 solid; border-radius: 16px; box-sizing: border-box;}

  .index-sec4-con .contact-form-table .column-half textarea { width: 100%; height: 163px; padding: 10px; margin: 0 0 10px 0; color: #881c21; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; border: 1px #881c21 solid; border-radius: 16px; box-sizing: border-box;}

  .index-sec4-con .contact-form-table .column-full { clear: both; width: 100%; padding: 0 10px; margin: 20px 0 0 0; text-align: center; box-sizing: border-box;}

  .index-sec4-con .contact-form-table .column-full input { width: 100px; padding: 5px 10px; margin: 0 10px; color: #fff; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #881c21; border: 0; border-radius: 16px; box-sizing: border-box; cursor: pointer;}





  /************ #page-banner-bx ************/



  #page-banner-bx { clear: both; width: 100%; overflow: hidden; position: relative; z-index: 10;}

  #page-banner-bx img { width: 220%; height: auto;}

  #page-banner-bx .text-title { width: 100%; height: 100%; padding: 75px 0 0 0; box-sizing: border-box; color: #fff; font-size: 3rem; font-weight: 300; line-height: 1em; text-align: center; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0;}





  /************ #breadcrumbs-path ************/



  #breadcrumbs-path { clear: both; width: 100%; padding: 10px 40px; color: #444; font-size: 0.8em; line-height: 1.2em; box-sizing: border-box;}

  #breadcrumbs-path a { color: #444; text-decoration: none;}

  #breadcrumbs-path a:hover { border-bottom: 1px #444 solid;}





  /************ section #page-about ************/



  section#page-about-sec1 { clear: both; width: 100%; padding: 80px 40px; box-sizing: border-box;}



  .page-about-sec1-con { width: 100%; margin: 0 auto; font-size: 1.1rem; line-height: 1.8em;}

  .page-about-sec1-con .title-box { width: 100%; padding: 0 0 20px 0; color: #881c21; font-size: 1.8rem; font-weight: 500; line-height: 1.8em; text-align: center;}

  .page-about-sec1-con .text-content { width: 100%; padding: 20px 0 0 0; font-size: 1.1rem; line-height: 2em; text-align: center; border-top: 1px #881c21 solid;}

  .page-about-sec1-con .text-content span.title { font-size: 1.2rem; font-weight: 500;}

  .page-about-sec1-con .text-content span.object { padding: 8px 20px; margin: 10px; color: #fff; font-size: 1.1rem; line-height: 1.2em; border-radius: 8px; background-color: #881c21;}



  img.page-about-pic-1 { clear: both; width: 100%; height: auto;}





  section#page-about-sec2 { clear: both; width: 100%; padding: 80px 0; background-color: #eee; box-sizing: border-box;}



  .page-about-sec2-con { width: 100%; display: flex; justify-content: flex-start; align-items: center;}

  .page-about-sec2-con .column-left { width: 50%; padding: 0 40px; box-sizing: border-box; font-size: 1.4rem; line-height: 2em; text-align: center; border-right: 1px #881c21 solid;}

  .page-about-sec2-con .column-right { width: 50%; padding: 0 40px; box-sizing: border-box; font-size: 1.1rem; line-height: 1.8em; text-align: center;}

  .page-about-sec2-con .column-right span.red-style { color: #881c21; font-size: 1.4rem; font-weight: 500;}





  section#page-about-sec3 { clear: both; width: 100%; padding: 80px 40px; box-sizing: border-box;}



  .page-about-sec3-con { width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-about-sec3-con .text-title { width: 100%; margin: 0 0 30px 0; color: #881c21; font-size: 2rem; font-weight: 500; line-height: 2em; text-align: center;}

  .page-about-sec3-con .service-box { width: calc(100% / 3 - 20px); padding: 40px; margin: 0 10px; color: #fff; font-size: 1.1rem; font-weight: 300; line-height: 1.8em; text-align: center; border-radius: 40px; background-color: #881c21; box-sizing: border-box;}

  .page-about-sec3-con .service-box span.icon { font-size: 3rem;}

  .page-about-sec3-con .service-box span.title { font-size: 1.6rem; font-weight: 500; line-height: 2em;}





  section#page-about-sec4 { clear: both; width: 100%; background-color: #eee;}



  .page-about-sec4-con { width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-about-sec4-con .column-left { width: 50%; padding: 80px 40px 80px 40px; box-sizing: border-box;}

  .page-about-sec4-con .column-left ul { width: 100%; padding: 0 0 0 20px; margin: 0; list-style: circle; box-sizing: border-box; display: block;}

  .page-about-sec4-con .column-left ul li { padding: 0; margin: 0; font-size: 1.2rem; font-weight: 500; line-height: 2em;}

  .page-about-sec4-con .column-right { width: 50%; background-image: url("../images/page_about_sec4_pic.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center center; display: block;}





  section#page-about-sec5 { clear: both; width: 100%; padding: 80px 0; box-sizing: border-box;}



  .page-about-sec5-con { width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}

  .page-about-sec5-con .column-half { width: 50%; padding: 0 40px; font-size: 1rem; line-height: 1.6em; box-sizing: border-box;}

  .page-about-sec5-con .column-half:first-child { border-right: 1px #881c21 dashed;}

  .page-about-sec5-con .column-half span.sub-title { padding: 3px 5px; color: #fff; background-color: #881c21;}



  img.about-sec5-pic { width: 100%; height: auto; margin: 60px 0 0 0;}





  /************ section #page-pro-list ************/



  section#page-pro-list-sec1 { clear: both; width: 100%; padding: 60px 40px; box-sizing: border-box;}



  .page-pro-brand-list { clear: both; width: 100%; margin: 0 0 40px 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}

  .page-pro-brand-list a { padding: 5px 15px; margin: 0 5px 10px 5px; color: #881c21; font-size: 0.8rem; line-height: 1.2em; text-align: center; text-decoration: none; border: 1px #881c21 solid; border-radius: 12px; background-color: #fff; display: block;}

  .page-pro-brand-list a:hover { background-color: #eee;}

  .page-pro-brand-list a.sel { color: #fff; background-color: #881c21;}



  .page-pro-list-full { width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-pro-list-full .list-box { width: calc(100% / 3 - 30px); margin: 0 15px 30px 15px;}

  .page-pro-list-full .list-box a { text-decoration: none;}

  .page-pro-list-full .list-box .pic { width: 100%; border: 1px #ccc solid; box-sizing: border-box; position: relative;}

  .page-pro-list-full .list-box .pic img { width: 100%; height: auto;}

  .page-pro-list-full .list-box .pic .mark-list { width: 50px; position: absolute; top: 10px; right: 10px;}

  .page-pro-list-full .list-box .pic .mark-list img { width: 100%; height: auto;}

  .page-pro-list-full .list-box .title { width: 100%; padding: 10px; color: #414141; font-size: 0.9rem; line-height: 1.4em; text-align: center; box-sizing: border-box;}





  ul.page-numbers { clear: both; width: 100%; padding: 0; margin: 60px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}

  ul.page-numbers li { padding: 0; margin: 0 5px 10px 5px;}

  ul.page-numbers li a { padding: 5px; color: #881c21; font-size: 0.9rem; line-height: 1.6em; text-decoration: none; border: 1px #881c21 solid;}

  ul.page-numbers li:first-child a { border: 0;}

  ul.page-numbers li:last-child a { border: 0;}

  ul.page-numbers li a:hover { background-color: #eee;}

  ul.page-numbers li a.sel { color: #fff; background-color: #881c21;}





  .page-search-bar { clear: both; width: 100%; margin: 0 0 100px 0; display: flex; justify-content: center;}

  .page-search-bar input[type=search] { width: 300px; padding: 10px; margin: 0 10px 0 0; color: #414141; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #881c21 solid; background-color: #fff; box-sizing: border-box;}

  .page-search-bar button { padding: 10px 30px; color: #fff; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #881c21; cursor: pointer;}





  /************ section #page-pro-info ************/



  section#page-pro-info-sec1 { clear: both; width: 100%; padding: 80px 40px; box-sizing: border-box;}



  .page-pro-info-con { width: 100%; display: flex; justify-content: flex-end; align-items: stretch; flex-wrap: wrap;}

  .page-pro-info-con .pro-pic { width: 40%; position: relative;}

  .page-pro-info-con .pro-pic .mark-list { width: 70px; position: absolute; top: 10px; right: 10px;}

  .page-pro-info-con .pro-pic .mark-list img { width: 100%; height: auto;}

  .page-pro-info-con .pro-pic img.pro { width: 100%; height: auto; border: 1px #ccc solid; box-sizing: border-box;}  

  

  .page-pro-info-con .pro-info { width: 60%; padding: 0 0 0 40px; box-sizing: border-box;}

  .page-pro-info-con .pro-info .title-name { width: 100%; padding: 0 0 20px 0; margin: 0 0 20px 0; color: #881c21; line-height: 1.8em; border-bottom: 1px #881c21 solid;}

  .page-pro-info-con .pro-info .title-name span.title-cn { font-size: 1.8rem; font-weight: 500;}

  .page-pro-info-con .pro-info .title-name span.title-en { padding: 10px 0 0 0; font-size: 1.2rem; display: block;}

  .page-pro-info-con .pro-info .text-info { width: 100%; color: #414141; font-size: 1.1rem; line-height: 2em;}

  .page-pro-info-con .pro-info .sugg-price { width: 100%; padding: 10px 0 0 0; color: #881c21; font-size: 1rem; line-height: 1.4em; text-align: right;}

  .page-pro-info-con .pro-info .hashtags { width: 100%; padding: 20px 0 10px 0; margin: 20px 0 0 0; border-top: 1px #881c21 solid; border-bottom: 1px #881c21 solid; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}

  .page-pro-info-con .pro-info .hashtags a.tag { padding: 5px 15px; margin: 0 10px 10px 0; color: #fff; font-size: 0.9rem; line-height: 1.2em; text-decoration: none; border-radius: 14px; background-color: #881c21; display: block;}

  .page-pro-info-con .pro-info .hashtags a.tag:hover { background-color: rgba(136,28,33,0.7);}

  .page-pro-info-con .pro-info .question-bt { clear: both; width: 200px; margin: 30px 0 0 0; float: right;}

  .page-pro-info-con .pro-info .question-bt a { width: 100%; padding: 10px 0; color: #881c21; font-size: 1.1rem; line-height: 1em; text-align: center; text-decoration: none; border: 2px #881c21 solid; border-radius: 20px; display: block;}

  .page-pro-info-con .pro-info .question-bt a:hover { color: #fff; background-color: #881c21;}



  .page-pro-info-con .pro-detail { clear: both; width: 100%; margin: 60px 0 0 0;}

  .page-pro-info-con .pro-detail .sub-title { width: 100%; border-bottom: 1px #034b28 solid; text-align: center;}

  .page-pro-info-con .pro-detail .sub-title span.info-title { padding: 5px 20px; color: #fff; font-size: 1.4rem; font-weight: 500; line-height: 1.2em; background-color: #034b28;}

  .page-pro-info-con .pro-detail .text-con { clear: both; width: 100%; padding: 60px 40px; box-sizing: border-box; font-size: 1.1rem; line-height: 2em;}

  .page-pro-info-con .pro-detail .text-con span.title-s { padding: 3px 20px; color: #fff; font-weight: 500; border-radius: 14px; background-color: #034b28;}





  section#page-pro-info-sec2 { clear: both; width: 100%;}



  .page-pro-chateau-con { clear: both; width: 100%;}

  .page-pro-chateau-con .column-lf { width: 100%; padding: 60px 40px; color: #fff; font-size: 2.2rem; font-weight: 300; line-height: 2em; text-align: center; box-sizing: border-box; background-image: url("../images/page_pro_detail_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: right top;}

  .page-pro-chateau-con .column-rt { width: 100%;}

  .page-pro-chateau-con .column-rt img { width: 100%; height: auto;}

  .page-pro-chateau-con .more-bt { clear: both; width: 100%; padding: 30px 60px 30px 0; box-sizing: border-box;}

  .page-pro-chateau-con .more-bt a { width: 60px; height: 60px; color: #881c21; font-size: 1.1rem; line-height: 1em; text-decoration: none; border: 2px #881c21 solid; border-radius: 100%; display: flex; justify-content: center; align-items: center; box-sizing: border-box; float: right;}

  .page-pro-chateau-con .more-bt a:hover { color: #fff; background-color: #881c21;}





  .goback-bt { clear: both; width: 160px; margin: 60px auto;}

  .goback-bt a { width: 100%; padding: 8px 0; color: #881c21; font-size: 1.1rem; line-height: 1.2em; text-align: center; border: 1px #881c21 solid; border-radius: 20px; text-decoration: none; display: block;}

  .goback-bt a:hover { color: #fff; background-color: #881c21;}





  /************ section #page-brand-list ************/



  section#page-brand-list-sec1 { clear: both; width: 100%; padding: 80px 40px; box-sizing: border-box;}



  ul.brand-list { clear: both; width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  ul.brand-list li { width: calc(100% / 4 - 30px); padding: 0; margin: 0 15px 30px 15px;}

  ul.brand-list li a { width: 100%; text-decoration: none; display: block;}

  ul.brand-list li a img { width: 100%; height: auto; border: 1px #eee solid; box-sizing: border-box;}

  ul.brand-list li a .title { width: 100%; padding: 5px 0; color: #414141; font-size: 0.9rem; line-height: 1.2em; text-align: center;}

  



  /************ section #page-brand-info ************/



  section#page-brand-info-sec1 { clear: both; width: 100%; padding: 80px 40px; box-sizing: border-box;}



  .page-brand-info-sec1-con { width: 100%; margin: 0 auto;}

  .page-brand-info-sec1-con img.brand-info { width: 100%; height: auto;}



  .page-brand-infor-pro { clear: both; width: 100%; padding: 40px 0 0 0; margin: 40px auto 0 auto; border-top: 1px #881c21 solid; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}

  .page-brand-infor-pro .sub-title { width: 100%; margin: 0 0 20px 0; color: #881c21; font-size: 1.4rem; font-weight: 500; line-height: 1.2em;}

  .page-brand-infor-pro a { padding: 5px 20px; margin: 0 5px 15px 5px; color: #fff; font-size: 1.1rem; line-height: 1.2em; border: 1px #881c21 solid; border-radius: 12px; background-color: #881c21; text-decoration: none; display: block;}

  .page-brand-infor-pro a:hover { color: #881c21; background-color: #fff;}





  /************ section #page-news ************/



  section#page-news-sec1 { clear: both; width: 100%; padding: 80px 40px; box-sizing: border-box;}



  .page-news-list { width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-news-list .news-list { width: calc(100% / 3 - 20px); padding: 10px; margin: 0 10px 30px 10px; border: 1px #ccc solid; box-sizing: border-box;}

  .page-news-list .news-list:hover { background-color: #eee;}

  .page-news-list .news-list a { width: 100%; height: 100%; text-decoration: none; display: block;}

  .page-news-list .news-list a .pic { width: 100%; height: 20vw; overflow: hidden; display: block;}

  .page-news-list .news-list a .pic img { width: 100%; height: auto;}

  .page-news-list .news-list a .text-con { width: 100%; padding: 10px 0 0 0; display: block;}

  .page-news-list .news-list a .text-con .date { width: 100%; color: #414141; font-size: 0.9rem; line-height: 1em;}

  .page-news-list .news-list a .text-con .news-title { width: 100%; padding: 10px 0 0 0; color: #414141; font-size: 1.1rem; font-weight: 500; line-height: 1.4em;}

  .page-news-list .news-list a .text-con .text { width: 100%; padding: 10px 0 0 0; color: #414141; font-size: 1rem; line-height: 1.6em;}





  section#page-news-sec2 { clear: both; width: 100%; padding: 80px 40px; box-sizing: border-box;}

  

  .page-news-content { width: 100%;}

  .page-news-content .news-title { width: 100%; padding: 0 0 20px 0; color: #881c21; font-size: 1.4rem; font-weight: 500; line-height: 1.2em;}

  .page-news-content .news-date { width: 100%; padding: 0 0 10px 0; color: #999; font-size: 0.9rem; line-height: 1.2em; text-align: right; border-bottom: 1px #ccc solid;}

  .page-news-content .news-content { width: 100%; padding: 60px 0; font-size: 1.1rem; line-height: 1.8em; box-sizing: border-box;}

  .page-news-content .news-content img { max-width: 100%; height: auto; margin: 0 auto;}





  /************ section #page-contact ************/



  section#page-contact-sec1 { clear: both; width: 100%; padding: 80px 40px; box-sizing: border-box;}



  .page-contact-con { width: 100%; margin: 0 auto;}

  .page-contact-con .contact-info { width: 100%; color: #881c21; line-height: 2em; text-align: center;}

  .page-contact-con .contact-info span.address { font-size: 1.2rem;}

  .page-contact-con .contact-info span.tel { font-size: 1.4rem;}

  .page-contact-con .contact-info span.email { font-size: 1.2rem;}

  .page-contact-con .address-map { width: 100%; margin: 40px 0 0 0;}

  .page-contact-con .address-map iframe { width: 100%; height: 350px;}

  .page-contact-con .contact-form-table { width: 100%; margin: 60px 0 0 0; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}

  .page-contact-con .contact-form-table .column-text { width: 100%; padding: 0 10px 30px 0; color: #881c21; font-size: 1.1rem; font-weight: 500; line-height: 1.2em; box-sizing: border-box;}

  .page-contact-con .contact-form-table .column-lf { width: 50%; padding: 0 10px 0 0; box-sizing: border-box;}

  .page-contact-con .contact-form-table .column-lf input[type=text], 

  .page-contact-con .contact-form-table .column-lf input[type=tel] { width: 100%; padding: 10px; margin: 0 0 10px 0; color: #881c21; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 0; border: 1px #881c21 solid;}

  .page-contact-con .contact-form-table .column-rt { width: 50%; padding: 0 0 0 10px; box-sizing: border-box;}

  .page-contact-con .contact-form-table .column-rt input[type=email] { width: 100%; padding: 10px; margin: 0 0 10px 0; color: #881c21; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 0; border: 1px #881c21 solid;}

  .page-contact-con .contact-form-table .column-rt textarea { width: 100%; height: 276px; padding: 10px; margin: 0 0 10px 0; color: #881c21; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 0; border: 1px #881c21 solid;}

  .page-contact-con .contact-form-table .column-button { width: 100%; margin: 20px 0 0 0; text-align: center;}

  .page-contact-con .contact-form-table .column-button input { padding: 6px 20px; margin: 0 10px; color: #fff; font-size: 1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #881c21; border: 0; border-radius: 12px; cursor: pointer;}





  /************ section #page-sitemap ************/



  section#page-sitemap-sec1 { clear: both; width: 100%; padding: 80px 40px; box-sizing: border-box;}



  ul.page-sitemap { clear: both; width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}

  ul.page-sitemap li { width: 180px; padding: 0; margin: 0 0 30px 0; text-align: center;}

  ul.page-sitemap li a { color: #881c21; font-size: 1.1rem; font-weight: 500; line-height: 1.2em; text-decoration: none; border-bottom: 2px #881c21 solid;}

  ul.page-sitemap li ul.sitemap-popup { width: 100%; padding: 20px 0; margin: 0; list-style: none; display: block;}

  ul.page-sitemap li ul.sitemap-popup li { width: 100%; padding: 0 0 10px 0; margin: 0; text-align: center;}

  ul.page-sitemap li ul.sitemap-popup li a { color: #881c21; font-size: 0.9rem; line-height: 1.4em; text-decoration: none; border: 0;}

  ul.page-sitemap li ul.sitemap-popup li a:hover { border-bottom: 1px #881c21 solid;}





  /************ footer ************/



  footer { clear: both; width: 100%; padding: 40px 40px calc(5vw + 40px) 40px; box-sizing: border-box; background-color: #881c21;}



  .footer-logo { width: 280px; padding: 0 0 20px 0; margin: 0 auto; border-bottom: 1px #ccc solid;}

  .footer-logo img { width: 80%; height: auto; margin: 0 auto;}



  .footer-infor { clear: both; width: 100%; padding: 20px 0; color: #fff; font-size: 1rem; font-weight: 300; line-height: 1.8em; text-align: center;}



  .footer-social { width: 280px; padding: 20px 0 0 0; margin: 0 auto; border-top: 1px #ccc solid; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}

  .footer-social a { padding: 10px; color: #fff; font-size: 1.6rem; text-decoration: none; display: block;}

  .footer-social a.sitemap-nav { color: #fff; font-size: 1.1rem; line-height: 1.2em; text-decoration: none;}



  .drink-slogan { width: 100%; padding: 2vw; color: #fff; font-size: 3vw; font-weight: 300; line-height: 3vw; letter-spacing: 1vw; text-align: center; background-color: #414141; position: fixed; bottom: 0; left: 0; z-index: 98;}





}



@media screen and (max-width: 767px) {



  body { width: 100%; height: 100%; overflow: hidden;}



  #page-r-18 { clear: both; width: 100%; height: 100%; background-color: #881c21; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; overflow: hidden; position: relative; z-index: 9999;}



  #page-r-18 .logo-title { clear: both; width: 100%; margin: 0 0 60px 0;}

  #page-r-18 .logo-title img { width: 200px; height: auto; margin: 0 auto;}



  #page-r-18 .yes-or-no-bt { clear: both; width: 100%;}

  #page-r-18 .yes-or-no-bt .text { width: 100%; color: #fff; font-size: 1.2rem; text-align: center;}

  #page-r-18 .yes-or-no-bt .y-n-bt { width: 100%; text-align: center;}

  #page-r-18 .yes-or-no-bt .y-n-bt button { padding: 8px 40px; margin: 20px 10px; color: #881c21; font-size: 1.6rem; font-weight: 500; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #ccc; cursor: pointer;}



  #page-r-18 .say-no-window { width: 100%; height: 100%; background-color: #881c21; display: none; position: fixed; top: 0; left: 0;}

  #page-r-18 .say-no-window .content { width: 90%; height: 340px; border-radius: 12px; background-color: #fff; position: absolute; top: calc(50% - 170px); left: 5%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}

  #page-r-18 .say-no-window .content .warn-icon { width: 100%; color: #881c21; font-size: 6rem; text-align: center;}

  #page-r-18 .say-no-window .content .warn-text { width: 100%; padding: 30px 0; color: #881c21; font-size: 1.2rem; text-align: center;}

  #page-r-18 .say-no-window .content .warn-bt { width: 100%; text-align: center;}

  #page-r-18 .say-no-window .content .warn-bt button { padding: 8px 40px; margin: 20px 10px; color: #881c21; font-size: 1.2rem; font-weight: 500; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #ccc; cursor: pointer;}


  #page-r-18 .content .notice-text { display: none;}
  #page-r-18 .content .notice-text-mo { clear: both; width: 100%; margin: 40px auto 0 auto; color: #fff; font-size: 1rem; line-height: 1.6em; text-align: center;}



  /************ header + nav ************/



  header { width: 100%; height: 75px; padding: 0 20px; box-sizing: border-box; background-color: rgba(255,255,255,0.7); display: flex; justify-content: flex-start; align-items: center; position: absolute; top: 0; left: 0; z-index: 99;}



  .header-logo { width: 100px;}

  .header-logo img.logo { width: 100%; height: auto;}



  nav#pc { display: none;}



  nav#mo { width: calc(100% - 200px); padding: 0 20px; box-sizing: border-box;}

  nav#mo .nav-icon { width: 50px; margin: 0 auto; color: #881c21; font-size: 2.2rem; text-align: center; cursor: pointer;}

  nav#mo ul#nav-menu { width: 100%; padding: 40px 20px; margin: 0; box-sizing: border-box; list-style: none; display: none; background-color: rgba(0,0,0,0.8); position: absolute; top: 75px; left: 0;}

  nav#mo ul#nav-menu li { height: 100%; padding: 0; margin: 0;}

  nav#mo ul#nav-menu li a { height: 100%; padding: 10px 20px; color: #fff; font-size: 1.2rem; text-align: center; text-decoration: none; display: block;}

  nav#mo ul#nav-menu li a:hover { color: #fff;}

  nav#mo ul#nav-menu li a.sel { color: #fff; background-color: #881c21;}

  nav#mo ul#nav-menu li ul#nav-popup { width: 100%; padding: 40px; margin: 0; box-sizing: border-box; background-color: rgba(0,0,0,0.7); list-style: none; display: none;}

  nav#mo ul#nav-menu li ul#nav-popup li { padding: 0; margin: 0;}

  nav#mo ul#nav-menu li ul#nav-popup li a { clear: both; padding: 10px 20px; color: #fff; font-size: 1.1rem; line-height: 1.2em; text-decoration: none; display: block;}

  nav#mo ul#nav-menu li ul#nav-popup li a:active { height: auto !important;}

  nav#mo ul#nav-menu li ul#nav-popup li a.sel { color: #fff; background-color: transparent;}



  .header-social-icon { width: 100px; text-align: right;}

  .header-social-icon a { color: #881c21; font-size: 1.6rem; text-decoration: none;}





  /************ index-banner ************/



  .index-banner { clear: both; width: 100%; padding: 75px 0 0 0; overflow: hidden; position: relative; z-index: 10;}

  .index-banner div.single-item { position: relative; z-index: 1;}

  .index-banner div.single-item img.banner { width: 100%; height: auto;}

  .index-banner img.banner-logo { width: 24vw; position: absolute; top: 24vw; left: calc(50% - 12vw); z-index: 5;}



  

  /************ section #index-sec1 ************/



  section#index-sec1 { clear: both; width: 100%; padding: 50px 20px; box-sizing: border-box;}



  .index-sec1-con { width: 100%; position: relative;}

  .index-sec1-con .title-bx { width: 300px; padding: 0 0 10px 0; border-bottom: 1px #881c21 solid;}

  .index-sec1-con .title-bx span.b-title { color: #881c21; font-size: 2.2rem; font-weight: 300;}

  .index-sec1-con .title-bx span.s-title { color: #881c21; font-size: 1rem; font-weight: 300;}

  

  .index-sec1-con .more-bt { width: 50px; position: absolute; top: 20px; right: 0;}

  .index-sec1-con .more-bt a { width: 50px; height: 50px; color: #fff; font-size: 1rem; line-height: 1em; text-decoration: none; border-radius: 100%; background-color: #881c21; display: flex; justify-content: center; align-items: center;}

  .index-sec1-con .more-bt a:hover { color: #881c21; background-color: #fff; border: 1px #881c21 solid; box-sizing: border-box;}

  

  .index-sec1-con .index-about-con { clear: both; width: 100%; padding: 30px 0 0 0; line-height: 2em;}

  .index-sec1-con .index-about-con .column-half { width: 100%;}

  .index-sec1-con .index-about-con .column-half .slogan { width: 100%; margin: 0 0 20px 0; font-size: 1.2rem; font-weight: 500;}

  .index-sec1-con .index-about-con .column-half ul { width: 100%; padding: 0 0 0 20px; margin: 0; box-sizing: border-box; list-style-type: disc; display: block;}

  .index-sec1-con .index-about-con .column-half ul li { padding: 0; margin: 0;}

  .index-sec1-con .index-about-con .column-half img.pic { width: 100%; height: auto; margin: 20px 0 0 0;}



  

  /************ section #index-sec2 ************/



  section#index-sec2 { clear: both; width: 100%; padding: 50px 0; background-color: #881c21; box-sizing: border-box;}



  .index-sec2-con { width: 100%; margin: 0 auto;}

  .index-sec2-con .title-bx { width: 300px; padding: 0 0 10px 0; margin: 0 auto; text-align: center; border-bottom: 1px #fff solid;}

  .index-sec2-con .title-bx span.b-title { color: #fff; font-size: 2.2rem; font-weight: 300;}

  .index-sec2-con .title-bx span.s-title { color: #fff; font-size: 1rem; font-weight: 300;}

  

  .index-sec2-more-bt { clear: both; width: 50px; margin: 40px auto 0 auto;}

  .index-sec2-more-bt a { width: 50px; height: 50px; color: #881c21; font-size: 1rem; line-height: 1em; text-decoration: none; border-radius: 100%; background-color: #fff; display: flex; justify-content: center; align-items: center;}

  .index-sec2-more-bt a:hover { color: #fff; border: 1px #fff solid; background-color: #881c21; box-sizing: border-box;}



  .index-sec2-con .index-news-list { clear: both; width: 70%; margin: 80px auto;}

  .index-sec2-con .index-news-list div { margin: 0 auto; display: flex; justify-content: flex-start; align-items: stretch;}

  .index-sec2-con .index-news-list div .news-list { width: calc(100% / 4 - 20px); padding: 10px; margin: 0 10px; border: 1px rgba(255,255,255,0.3) solid; box-sizing: border-box;}

  .index-sec2-con .index-news-list div .news-list:hover { background-color: rgba(255,255,255,0.1);}

  .index-sec2-con .index-news-list div .news-list a { width: 100%; text-decoration: none; display: block;}

  .index-sec2-con .index-news-list div .news-list a .pic { width: 100%; height: 44vw; overflow: hidden; display: block;}

  .index-sec2-con .index-news-list div .news-list a .pic img { width: 100%; height: auto;}

  .index-sec2-con .index-news-list div .news-list a .text-con { width: 100%; padding: 10px 0 0 0; display: block;}

  .index-sec2-con .index-news-list div .news-list a .text-con .date { width: 100%; color: #ccc; font-size: 0.9rem; line-height: 1em;}

  .index-sec2-con .index-news-list div .news-list a .text-con .news-title { width: 100%; padding: 10px 0 0 0; color: #fff; font-size: 1.1rem; font-weight: 500; line-height: 1.4em;}

  .index-sec2-con .index-news-list div .news-list a .text-con .text { width: 100%; padding: 10px 0 0 0; color: #fff; font-size: 1rem; line-height: 1.6em;}





  /************ section #index-sec3 ************/



  section#index-sec3 { clear: both; width: 100%; overflow: hidden; position: relative;}



  img.index-sec3-bg { width: 200%; height: auto; margin: 0 0 0 -40%;}



  .index-sec3-slogan { width: 90%; color: #fff; font-size: 5vw; font-weight: 300; line-height: 8vw; position: absolute; top: 15vw; left: 10%;}





  /************ section #index-sec4 ************/



  section#index-sec4 { clear: both; width: 100%; padding: 50px 20px 25vw 20px; box-sizing: border-box; background-image: url("../images/index_sec4_bt_bg.jpg"); background-repeat: no-repeat; background-size: 180% auto; background-position: center bottom;}



  .index-sec4-con { width: 100%;}

  .index-sec4-con .title-bx { width: 300px; padding: 0 0 10px 0; border-bottom: 1px #881c21 solid;}

  .index-sec4-con .title-bx span.b-title { color: #881c21; font-size: 2.2rem; font-weight: 300;}

  .index-sec4-con .title-bx span.s-title { color: #881c21; font-size: 1rem; font-weight: 300;}



  .index-sec4-con .contact-form-table { clear: both; width: 100%; margin: 40px 0 0 0;}

  .index-sec4-con .contact-form-table .column-half { width: 100%;}

  .index-sec4-con .contact-form-table .column-half input { width: 100%; padding: 10px; margin: 0 0 10px 0; color: #881c21; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; border: 1px #881c21 solid; border-radius: 16px; box-sizing: border-box;}

  .index-sec4-con .contact-form-table .column-half textarea { width: 100%; height: 163px; padding: 10px; margin: 0 0 10px 0; color: #881c21; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; border: 1px #881c21 solid; border-radius: 16px; box-sizing: border-box;}

  .index-sec4-con .contact-form-table .column-full { clear: both; width: 100%; padding: 0 10px; margin: 20px 0 0 0; text-align: center; box-sizing: border-box;}

  .index-sec4-con .contact-form-table .column-full input { width: 100px; padding: 5px 10px; margin: 0 10px; color: #fff; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #881c21; border: 0; border-radius: 16px; box-sizing: border-box; cursor: pointer;}





  /************ #page-banner-bx ************/



  #page-banner-bx { clear: both; width: 100%; overflow: hidden; position: relative; z-index: 10;}

  #page-banner-bx img { width: 280%; height: auto;}

  #page-banner-bx .text-title { width: 100%; height: 100%; padding: 75px 0 0 0; box-sizing: border-box; color: #fff; font-size: 2rem; font-weight: 300; line-height: 1em; text-align: center; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0;}





  /************ #breadcrumbs-path ************/



  #breadcrumbs-path { clear: both; width: 100%; padding: 10px 20px; color: #444; font-size: 0.8em; line-height: 1.2em; box-sizing: border-box;}

  #breadcrumbs-path a { color: #444; text-decoration: none;}

  #breadcrumbs-path a:hover { border-bottom: 1px #444 solid;}





  /************ section #page-about ************/



  section#page-about-sec1 { clear: both; width: 100%; padding: 80px 20px; box-sizing: border-box;}



  .page-about-sec1-con { width: 100%; margin: 0 auto; font-size: 1.1rem; line-height: 1.8em;}

  .page-about-sec1-con .title-box { width: 100%; padding: 0 0 20px 0; color: #881c21; font-size: 1.8rem; font-weight: 500; line-height: 1.8em; text-align: center;}

  .page-about-sec1-con .text-content { width: 100%; padding: 20px 0 0 0; font-size: 1.1rem; line-height: 2em; text-align: center; border-top: 1px #881c21 solid;}

  .page-about-sec1-con .text-content span.title { font-size: 1.2rem; font-weight: 500;}

  .page-about-sec1-con .text-content span.object { width: 90%; padding: 8px 20px; margin: 15px auto; color: #fff; font-size: 1.1rem; line-height: 1.2em; border-radius: 8px; background-color: #881c21; box-sizing: border-box; display: block;}



  img.page-about-pic-1 { clear: both; width: 100%; height: auto;}





  section#page-about-sec2 { clear: both; width: 100%; padding: 40px 20px; background-color: #eee; box-sizing: border-box;}



  .page-about-sec2-con { width: 100%;}

  .page-about-sec2-con .column-left { width: 100%; padding: 40px 0; box-sizing: border-box; font-size: 1.4rem; line-height: 2em; text-align: center; border-bottom: 1px #881c21 solid;}

  .page-about-sec2-con .column-right { width: 100%; padding: 40px 0; box-sizing: border-box; font-size: 1.1rem; line-height: 1.8em; text-align: center;}

  .page-about-sec2-con .column-right span.red-style { color: #881c21; font-size: 1.4rem; font-weight: 500;}





  section#page-about-sec3 { clear: both; width: 100%; padding: 80px 20px; box-sizing: border-box;}



  .page-about-sec3-con { width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-about-sec3-con .text-title { width: 100%; margin: 0 0 30px 0; color: #881c21; font-size: 2rem; font-weight: 500; line-height: 2em; text-align: center;}

  .page-about-sec3-con .service-box { width: 90%; padding: 40px; margin: 0 auto 20px auto; color: #fff; font-size: 1.1rem; font-weight: 300; line-height: 1.8em; text-align: center; border-radius: 40px; background-color: #881c21; box-sizing: border-box;}

  .page-about-sec3-con .service-box span.icon { font-size: 3rem;}

  .page-about-sec3-con .service-box span.title { font-size: 1.6rem; font-weight: 500; line-height: 2em;}





  section#page-about-sec4 { clear: both; width: 100%; background-color: #eee;}



  .page-about-sec4-con { width: 100%;}

  .page-about-sec4-con .column-left { width: 100%; padding: 80px 20px; box-sizing: border-box;}

  .page-about-sec4-con .column-left ul { width: 100%; padding: 0 0 0 20px; margin: 0; list-style: circle; box-sizing: border-box; display: block;}

  .page-about-sec4-con .column-left ul li { padding: 0; margin: 0; font-size: 1.2rem; font-weight: 500; line-height: 2em;}

  .page-about-sec4-con .column-right { width: 100%; height: 50vw; background-image: url("../images/page_about_sec4_pic.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center center; display: block;}





  section#page-about-sec5 { clear: both; width: 100%; padding: 40px 20px; box-sizing: border-box;}



  .page-about-sec5-con { width: 100%;}

  .page-about-sec5-con .column-half { width: 100%; padding: 40px 0; font-size: 1rem; line-height: 1.6em; box-sizing: border-box;}

  .page-about-sec5-con .column-half:first-child { border-bottom: 1px #881c21 dashed;}

  .page-about-sec5-con .column-half span.sub-title { padding: 3px 5px; color: #fff; background-color: #881c21;}



  img.about-sec5-pic { width: 100%; height: auto; margin: 60px 0 0 0;}





  /************ section #page-pro-list ************/



  section#page-pro-list-sec1 { clear: both; width: 100%; padding: 60px 20px; box-sizing: border-box;}



  .page-pro-brand-list { clear: both; width: 100%; margin: 0 0 40px 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}

  .page-pro-brand-list a { padding: 3px 10px; margin: 0 3px 10px 3px; color: #881c21; font-size: 0.7rem; line-height: 1.2em; text-align: center; text-decoration: none; border: 1px #881c21 solid; border-radius: 12px; background-color: #fff; display: block;}

  .page-pro-brand-list a:hover { background-color: #eee;}

  .page-pro-brand-list a.sel { color: #fff; background-color: #881c21;}



  .page-pro-list-full { width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-pro-list-full .list-box { width: calc(100% / 2 - 20px); margin: 0 10px 20px 10px;}

  .page-pro-list-full .list-box a { text-decoration: none;}

  .page-pro-list-full .list-box .pic { width: 100%; border: 1px #ccc solid; box-sizing: border-box; position: relative;}

  .page-pro-list-full .list-box .pic img { width: 100%; height: auto;}

  .page-pro-list-full .list-box .pic .mark-list { width: 40px; position: absolute; top: 5px; right: 5px;}

  .page-pro-list-full .list-box .pic .mark-list img { width: 100%; height: auto;}

  .page-pro-list-full .list-box .title { width: 100%; padding: 10px; color: #414141; font-size: 0.8rem; line-height: 1.4em; text-align: center; box-sizing: border-box;}





  ul.page-numbers { clear: both; width: 100%; padding: 0; margin: 60px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}

  ul.page-numbers li { padding: 0; margin: 0 5px 10px 5px;}

  ul.page-numbers li a { padding: 5px; color: #881c21; font-size: 0.9rem; line-height: 1.6em; text-decoration: none; border: 1px #881c21 solid;}

  ul.page-numbers li:first-child a { border: 0;}

  ul.page-numbers li:last-child a { border: 0;}

  ul.page-numbers li a:hover { background-color: #eee;}

  ul.page-numbers li a.sel { color: #fff; background-color: #881c21;}





  .page-search-bar { clear: both; width: 100%; margin: 0 0 100px 0; display: flex; justify-content: center; flex-wrap: wrap;}

  .page-search-bar input[type=search] { width: 300px; padding: 10px; margin: 5px; color: #414141; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #881c21 solid; background-color: #fff; box-sizing: border-box;}

  .page-search-bar button { padding: 10px 30px; margin: 5px; color: #fff; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #881c21; cursor: pointer;}





  /************ section #page-pro-info ************/



  section#page-pro-info-sec1 { clear: both; width: 100%; padding: 80px 20px; box-sizing: border-box;}



  .page-pro-info-con { width: 100%;}

  .page-pro-info-con .pro-pic { width: 100%; margin: 0 0 30px 0; position: relative;}

  .page-pro-info-con .pro-pic .mark-list { width: 20vw; position: absolute; top: 10px; right: 10px;}

  .page-pro-info-con .pro-pic .mark-list img { width: 100%; height: auto;}

  .page-pro-info-con .pro-pic img.pro { width: 100%; height: auto; border: 1px #ccc solid; box-sizing: border-box;}  

  

  .page-pro-info-con .pro-info { width: 100%;}

  .page-pro-info-con .pro-info .title-name { width: 100%; padding: 0 0 20px 0; margin: 0 0 20px 0; color: #881c21; line-height: 1.8em; border-bottom: 1px #881c21 solid;}

  .page-pro-info-con .pro-info .title-name span.title-cn { font-size: 1.8rem; font-weight: 500;}

  .page-pro-info-con .pro-info .title-name span.title-en { padding: 10px 0 0 0; font-size: 1.2rem; display: block;}

  .page-pro-info-con .pro-info .text-info { width: 100%; color: #414141; font-size: 1.1rem; line-height: 2em;}

  .page-pro-info-con .pro-info .sugg-price { width: 100%; padding: 10px 0 0 0; color: #881c21; font-size: 1rem; line-height: 1.4em; text-align: right;}

  .page-pro-info-con .pro-info .hashtags { width: 100%; padding: 20px 0 10px 0; margin: 20px 0 0 0; border-top: 1px #881c21 solid; border-bottom: 1px #881c21 solid; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}

  .page-pro-info-con .pro-info .hashtags a.tag { padding: 5px 15px; margin: 0 10px 10px 0; color: #fff; font-size: 0.9rem; line-height: 1.2em; text-decoration: none; border-radius: 14px; background-color: #881c21; display: block;}

  .page-pro-info-con .pro-info .hashtags a.tag:hover { background-color: rgba(136,28,33,0.7);}

  .page-pro-info-con .pro-info .question-bt { clear: both; width: 200px; margin: 30px 0 0 0; float: right;}

  .page-pro-info-con .pro-info .question-bt a { width: 100%; padding: 10px 0; color: #881c21; font-size: 1.1rem; line-height: 1em; text-align: center; text-decoration: none; border: 2px #881c21 solid; border-radius: 20px; display: block;}

  .page-pro-info-con .pro-info .question-bt a:hover { color: #fff; background-color: #881c21;}



  .page-pro-info-con .pro-detail { clear: both; width: 100%; padding: 60px 0 0 0;}

  .page-pro-info-con .pro-detail .sub-title { width: 100%; border-bottom: 1px #034b28 solid; text-align: center;}

  .page-pro-info-con .pro-detail .sub-title span.info-title { padding: 5px 20px; color: #fff; font-size: 1.4rem; font-weight: 500; line-height: 1.2em; background-color: #034b28;}

  .page-pro-info-con .pro-detail .text-con { clear: both; width: 100%; padding: 60px 0; box-sizing: border-box; font-size: 1.1rem; line-height: 2em;}

  .page-pro-info-con .pro-detail .text-con span.title-s { padding: 3px 20px; color: #fff; font-weight: 500; border-radius: 14px; background-color: #034b28;}





  section#page-pro-info-sec2 { clear: both; width: 100%;}



  .page-pro-chateau-con { clear: both; width: 100%; padding: 0 0 60px 0;}

  .page-pro-chateau-con .column-lf { width: 100%; padding: 60px 20px; color: #fff; font-size: 2.2rem; font-weight: 300; line-height: 2em; text-align: center; box-sizing: border-box; background-image: url("../images/page_pro_detail_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: right top;}

  .page-pro-chateau-con .column-rt { width: 100%;}

  .page-pro-chateau-con .column-rt img { width: 100%; height: auto;}

  .page-pro-chateau-con .more-bt { clear: both; width: 100%; padding: 30px 60px 0 0; box-sizing: border-box;}

  .page-pro-chateau-con .more-bt a { width: 60px; height: 60px; color: #881c21; font-size: 1.1rem; line-height: 1em; text-decoration: none; border: 2px #881c21 solid; border-radius: 100%; display: flex; justify-content: center; align-items: center; box-sizing: border-box; float: right;}

  .page-pro-chateau-con .more-bt a:hover { color: #fff; background-color: #881c21;}





  .goback-bt { clear: both; width: 160px; margin: 60px auto;}

  .goback-bt a { width: 100%; padding: 8px 0; color: #881c21; font-size: 1.1rem; line-height: 1.2em; text-align: center; border: 1px #881c21 solid; border-radius: 20px; text-decoration: none; display: block;}

  .goback-bt a:hover { color: #fff; background-color: #881c21;}





  /************ section #page-brand-list ************/



  section#page-brand-list-sec1 { clear: both; width: 100%; padding: 80px 20px; box-sizing: border-box;}



  ul.brand-list { clear: both; width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  ul.brand-list li { width: calc(100% / 2 - 20px); padding: 0; margin: 0 10px 20px 10px;}

  ul.brand-list li a { width: 100%; text-decoration: none; display: block;}

  ul.brand-list li a img { width: 100%; height: auto; border: 1px #eee solid; box-sizing: border-box;}

  ul.brand-list li a .title { width: 100%; padding: 8px 0; color: #414141; font-size: 0.8rem; line-height: 1.2em; text-align: center;}





  /************ section #page-brand-info ************/



  section#page-brand-info-sec1 { clear: both; width: 100%; padding: 60px 20px; box-sizing: border-box;}



  .page-brand-info-sec1-con { width: 100%; margin: 0 auto;}

  .page-brand-info-sec1-con img.brand-info { width: 100%; height: auto;}



  .page-brand-infor-pro { clear: both; width: 100%; padding: 40px 0 0 0; margin: 40px auto 0 auto; border-top: 1px #881c21 solid; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}

  .page-brand-infor-pro .sub-title { width: 100%; margin: 0 0 20px 0; color: #881c21; font-size: 1.4rem; font-weight: 500; line-height: 1.2em;}

  .page-brand-infor-pro a { padding: 5px 20px; margin: 0 5px 15px 5px; color: #fff; font-size: 1rem; line-height: 1.2em; border: 1px #881c21 solid; border-radius: 12px; background-color: #881c21; text-decoration: none; display: block;}

  .page-brand-infor-pro a:hover { color: #881c21; background-color: #fff;}





  /************ section #page-news ************/



  section#page-news-sec1 { clear: both; width: 100%; padding: 80px 20px; box-sizing: border-box;}



  .page-news-list { width: 90%; margin: 0 auto;}

  .page-news-list .news-list { width: 100%; padding: 10px; margin: 0 0 30px 0; border: 1px #ccc solid; box-sizing: border-box;}

  .page-news-list .news-list:hover { background-color: #eee;}

  .page-news-list .news-list a { width: 100%; height: 100%; text-decoration: none; display: block;}

  .page-news-list .news-list a .pic { width: 100%; height: 60vw; overflow: hidden; display: block;}

  .page-news-list .news-list a .pic img { width: 100%; height: auto;}

  .page-news-list .news-list a .text-con { width: 100%; padding: 10px 0 0 0; display: block;}

  .page-news-list .news-list a .text-con .date { width: 100%; color: #414141; font-size: 0.9rem; line-height: 1em;}

  .page-news-list .news-list a .text-con .news-title { width: 100%; padding: 10px 0 0 0; color: #414141; font-size: 1.1rem; font-weight: 500; line-height: 1.4em;}

  .page-news-list .news-list a .text-con .text { width: 100%; padding: 10px 0 0 0; color: #414141; font-size: 1rem; line-height: 1.6em;}





  section#page-news-sec2 { clear: both; width: 100%; padding: 80px 20px; box-sizing: border-box;}

  

  .page-news-content { width: 100%;}

  .page-news-content .news-title { width: 100%; padding: 0 0 20px 0; color: #881c21; font-size: 1.4rem; font-weight: 500; line-height: 1.2em;}

  .page-news-content .news-date { width: 100%; padding: 0 0 10px 0; color: #999; font-size: 0.9rem; line-height: 1.2em; text-align: right; border-bottom: 1px #ccc solid;}

  .page-news-content .news-content { width: 100%; padding: 40px 0; font-size: 1.1rem; line-height: 1.8em; box-sizing: border-box;}

  .page-news-content .news-content img { max-width: 100%; height: auto; margin: 0 auto;}





  /************ section #page-contact ************/



  section#page-contact-sec1 { clear: both; width: 100%; padding: 80px 20px; box-sizing: border-box;}



  .page-contact-con { width: 100%; margin: 0 auto;}

  .page-contact-con .contact-info { width: 100%; color: #881c21; line-height: 2em; text-align: center;}

  .page-contact-con .contact-info span.address { font-size: 1.2rem;}

  .page-contact-con .contact-info span.tel { font-size: 1.4rem;}

  .page-contact-con .contact-info span.email { font-size: 1.2rem;}

  .page-contact-con .address-map { width: 100%; margin: 40px 0 0 0;}

  .page-contact-con .address-map iframe { width: 100%; height: 350px;}

  .page-contact-con .contact-form-table { width: 100%; margin: 60px 0 0 0;}

  .page-contact-con .contact-form-table .column-text { width: 100%; padding: 0 10px 30px 0; color: #881c21; font-size: 1.1rem; font-weight: 500; line-height: 1.2em; box-sizing: border-box;}

  .page-contact-con .contact-form-table .column-lf { width: 100%;}

  .page-contact-con .contact-form-table .column-lf input[type=text], 

  .page-contact-con .contact-form-table .column-lf input[type=tel] { width: 100%; padding: 10px; margin: 0 0 10px 0; color: #881c21; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 0; border: 1px #881c21 solid;}

  .page-contact-con .contact-form-table .column-rt { width: 100%;}

  .page-contact-con .contact-form-table .column-rt input[type=email] { width: 100%; padding: 10px; margin: 0 0 10px 0; color: #881c21; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 0; border: 1px #881c21 solid;}

  .page-contact-con .contact-form-table .column-rt textarea { width: 100%; height: 160px; padding: 10px; margin: 0 0 10px 0; color: #881c21; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 0; border: 1px #881c21 solid;}

  .page-contact-con .contact-form-table .column-button { width: 100%; margin: 20px 0 0 0; text-align: center;}

  .page-contact-con .contact-form-table .column-button input { padding: 6px 20px; margin: 0 10px; color: #fff; font-size: 1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #881c21; border: 0; border-radius: 12px; cursor: pointer;}





  /************ section #page-sitemap ************/



  section#page-sitemap-sec1 { clear: both; width: 100%; padding: 80px 40px; box-sizing: border-box;}



  ul.page-sitemap { clear: both; width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}

  ul.page-sitemap li { width: 50%; padding: 0; margin: 0 0 30px 0;}

  ul.page-sitemap li a { color: #881c21; font-size: 1.1rem; font-weight: 500; line-height: 1.2em; text-decoration: none; border-bottom: 2px #881c21 solid;}

  ul.page-sitemap li ul.sitemap-popup { width: 100%; padding: 20px 0; margin: 0; list-style: none; display: block;}

  ul.page-sitemap li ul.sitemap-popup li { width: 100%; padding: 0 0 10px 0; margin: 0;}

  ul.page-sitemap li ul.sitemap-popup li a { color: #881c21; font-size: 0.9rem; line-height: 1.4em; text-decoration: none; border: 0;}

  ul.page-sitemap li ul.sitemap-popup li a:hover { border-bottom: 1px #881c21 solid;}





  /************ footer ************/



  footer { clear: both; width: 100%; padding: 40px 40px calc(7vw + 40px) 40px; box-sizing: border-box; background-color: #881c21;}



  .footer-logo { width: 280px; padding: 0 0 20px 0; margin: 0 auto; border-bottom: 1px #ccc solid;}

  .footer-logo img { width: 80%; height: auto; margin: 0 auto;}



  .footer-infor { clear: both; width: 100%; padding: 20px 0; color: #fff; font-size: 1rem; font-weight: 300; line-height: 1.8em; text-align: center;}



  .footer-social { width: 280px; padding: 20px 0 0 0; margin: 0 auto; border-top: 1px #ccc solid; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}

  .footer-social a { padding: 10px; color: #fff; font-size: 1.6rem; text-decoration: none; display: block;}

  .footer-social a.sitemap-nav { color: #fff; font-size: 1.1rem; line-height: 1.2em; text-decoration: none;}



  .drink-slogan { width: 100%; padding: 4vw; color: #fff; font-size: 5vw; font-weight: 300; line-height: 3vw; letter-spacing: 1vw; text-align: center; background-color: #414141; position: fixed; bottom: 0; left: 0; z-index: 98;}

  



}