@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;}

p#url-copy { display: none;}


/************ 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: 1360px) {   
    
    /************ coming soon ************/
    #comingsoon-popup { width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; z-index: 999999;}
    #comingsoon-popup .icon-close { width: 50px; color: #fff; font-size: 3rem; text-align: center; position: absolute; top: 10px; right: 30px; cursor: pointer;}
    #comingsoon-popup .text-con { width: 80%; max-height: 90%; padding: 60px 80px; box-sizing: border-box; font-size: 1.2rem; font-weight: 300; background-color: #fff; overflow: auto;}

    
    /**************** welcome header ****************/
    
    header { clear: both; width: 100%; padding: 20px 40px; border-bottom: 1px #ccc solid; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}

    .welcome-header-logo { width: calc(100% - 820px); display: flex; justify-content: flex-start; align-items: center;}
    .welcome-header-logo .logo-pic { width: 280px; padding: 0 20px 0 0; border-right: 2px #414141 solid; box-sizing: border-box;}
    .welcome-header-logo .logo-pic img { width: 100%; height: auto;}
    .welcome-header-logo .logo-text { width: calc(100% - 280px); padding: 0 0 0 20px; font-size: 1.2em; font-weight: 900; line-height: 1em; box-sizing: border-box;}

    .header-search-box { width: 150px; margin: 0 0 0 10px; display: flex; justify-content: flex-end; align-items: center;}
    .header-search-box .icon { width: 24px; font-size: 1.2em;}
    .header-search-box input[type=search] { width: calc(100% - 24px); padding: 5px; color: #414141; font-size: 1em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; font-weight: 500; background-color: #fff; border: 0; box-sizing: border-box;}

    nav#mo { display: none;}
    .header-nav-mo { display: none;}

    nav#pc { width: 660px; padding: 0 20px 0 0; box-sizing: border-box;}
    nav#pc ul.header-nav { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-end; align-items: center;}
    nav#pc ul.header-nav li { padding: 0; margin: 0 15px; position: relative;}
    nav#pc ul.header-nav li a { width: 80px; color: #414141; font-size: 1rem; line-height: 1em; line-height: 2em; text-align: center; text-decoration: none; border-bottom: 4px #fff solid; box-sizing: border-box; display: block; cursor: pointer;}
    nav#pc ul.header-nav li a span.en { width: 100%; font-family: "Vogue-B"; display: block;}
    nav#pc ul.header-nav li a span.cn { width: 100%; display: none;}
    nav#pc ul.header-nav li a:hover { border-bottom: 4px #414141 solid;}
    nav#pc ul.header-nav li a.sel { border-bottom: 4px #414141 solid;}
    nav#pc ul.header-nav li ul.header-nav-popup { width: 160px; padding: 40px 0; margin: 0; list-style: none; background-color: #414141; display: none; box-sizing: border-box; position: absolute; top: 36px; left: calc(50% - 80px); z-index: 9999;}
    nav#pc ul.header-nav li ul.header-nav-popup li { width: 100%; padding: 0; margin: 0;}
    nav#pc ul.header-nav li ul.header-nav-popup li a { width: 100%; padding: 10px 0; color: #fff; font-size: 1rem; line-height: 1.2em; text-align: center; border: 0; display: block;}
    nav#pc ul.header-nav li ul.header-nav-popup li a:hover { background-color: rgba(255,255,255,0.2);}


    /**************** section #welcome-banner ****************/

    section#welcome-banner { clear: both; width: 100%;}

    .welcome-banner-slider { width: 100%; overflow: hidden;}
    .welcome-banner-slider .slider div { width: 100%; position: relative;}
    .welcome-banner-slider .slider div img { width: 100%; height: auto; position: relative; z-index: 1;}
    .welcome-banner-slider .slider div img.welcome-banner-pc { width: 100%; height: auto; position: relative; z-index: 1;}
    .welcome-banner-slider .slider div img.welcome-banner-mo { display: none;}

    .welcome-banner-slider .slider div .text-bt { width: 360px; position: absolute; bottom: 4vw; left: calc(50% - 180px); z-index: 2;}
    .welcome-banner-slider .slider div .text-bt a { width: 100%; padding: 5px 0; color: #fff; font-size: 1.4em; font-weight: 500; text-align: center; text-decoration: none; background-color: #595757; display: block;}
    .welcome-banner-slider .slider div .text-bt a:hover { background-color: #999;}


    /**************** section #pearson-oenolog ****************/

    section#pearson-oenology { clear: both; width: 100%; padding: 40px calc(50% - 650px); box-sizing: border-box;}

    .pearson-oenology-title { width: 100%; margin: 0 0 40px 0; text-align: center; background-image: url("../images/welcome_week_hot_title_bg_line.png"); background-repeat: repeat-x; background-position: center center;}
    .pearson-oenology-title .title { width: 200px; padding: 0 20px; margin: 0 auto; color: #666; font-size: 1.6em; font-weight: 900; line-height: 1em; letter-spacing: 0.1em; text-align: center; background-color: #fff;}
    .pearson-oenology-title .title span.en { font-size: 1.1rem; font-weight: 600; line-height: 1em; letter-spacing: normal;}

    .pearson-oenology-content { clear: both; width: 100%;}
    .pearson-oenology-content img.logo-prn { width: 500px; height: auto; margin: 100px auto;}
    .pearson-oenology-content .slogan-contact-mo { display: none;}
    .pearson-oenology-content .slogan-contact { clear: both; width: 100%;}
    .pearson-oenology-content .slogan-contact .slogan { clear: both; width: 100%; font-size: 1.4em; font-weight: 600; letter-spacing: 0.1em; text-align: center;}
    .pearson-oenology-content .slogan-contact hr { clear: both; width: 200px; border: 1px #999 solid; margin: 20px auto;}
    .pearson-oenology-content .slogan-contact .text-con { clear: both; width: 100%; font-size: 1.1em; letter-spacing: 0.1em; line-height: 1.6em; text-align: center;}
    .pearson-oenology-content .slogan-contact .text-con span.red-arrow { color: #ff0000; font-size: 1.4rem; line-height: 3em;}
    .pearson-oenology-content .slogan-contact .contact-bt { clear: both; width: 160px; margin: 60px auto 0 auto;}
    .pearson-oenology-content .slogan-contact .contact-bt a { width: 100%; padding: 15px 0; color: #fff; font-size: 1.1em; line-height: 1em; text-align: center; text-decoration: none; background-color: #414141; border-radius: 6px; display: block;}
    .pearson-oenology-content .slogan-contact .contact-bt a:hover { background-color: #666;}


    /**************** section #welcome-week-hot ****************/

    section#welcome-week-hot { clear: both; width: 100%; padding: 40px calc(50% - 650px); box-sizing: border-box;}   

    .welcome-week-hot-title { width: 100%; text-align: center; background-image: url("../images/welcome_week_hot_title_bg_line.png"); background-repeat: repeat-x; background-position: center center;}
    .welcome-week-hot-title .title { width: 220px; padding: 0 20px; margin: 0 auto; color: #666; font-size: 1.6em; font-weight: 900; line-height: 1em; letter-spacing: 0.1em; text-align: center; background-color: #fff;}
    .welcome-week-hot-title .title span.en { font-size: 1.1rem; font-weight: 600; line-height: 1em; letter-spacing: normal;}

    .welcome-week-hot-sub-arrow { clear: both; width: 100%; padding: 10px 0; font-size: 1.2em; text-align: center;}

    .welcome-week-hot-sub-title { clear: both; width: 100%; margin: 0 0 10px 0; color: #666; text-align: center;}
    .welcome-week-hot-sub-title span.en { font-size: 1.4rem; font-weight: 600; line-height: 1em;}
    .welcome-week-hot-sub-title span.cn { font-size: 1.1rem; font-weight: 600; line-height: 1em; letter-spacing: 0.1em;}

    .welcome-week-hot-more { clear: both; width: 100%; margin: 30px 0; font-size: 1em; text-align: center;}
    .welcome-week-hot-more a { color: #0161ba; text-decoration: none;}
    .welcome-week-hot-more a:hover { border-bottom: 1px #0161ba dashed;}

    .welcome-week-hot-list { clear: both; width: 100%; margin: 40px 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    .welcome-week-hot-list .case-column { width: calc(100% / 3 - 30px); margin: 0 15px 30px 15px;}
    .welcome-week-hot-list .case-column a { width: 100%; text-decoration: none; display: block;}
    .welcome-week-hot-list .case-column a .photo { width: 100%; border-radius: 10px; overflow: hidden;}
    .welcome-week-hot-list .case-column a .photo img { width: 100%; height: auto;}
    .welcome-week-hot-list .case-column a .title { width: 100%; padding: 10px 5px; color: #414141; font-size: 1rem; font-weight: 600; line-height: 1.2em; border-bottom: 1px #ccc solid; box-sizing: border-box;}
    .welcome-week-hot-list .case-column a .intro { width: 100%; padding: 10px 5px; color: #414141; font-size: 0.8rem; line-height: 1.2em; box-sizing: border-box;}
    .welcome-week-hot-list .case-column .social { width: 100%; padding: 10px 5px 0 5px; color: #6e6e6e; font-size: 1rem; line-height: 1em; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
    .welcome-week-hot-list .case-column .social input { width: 150px; padding: 3px; margin: 0 5px 0 0; color: #aaa; font-size: 0.8rem; border: 1px #aaa solid; box-sizing: border-box;}
    .welcome-week-hot-list .case-column .social button { color: #0161ba; font-size: 0.8rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border-radius: 4px; border: 1px #0161ba solid; background-color: #fff; cursor: pointer; box-sizing: border-box;}


    /**************** section #winemaker-contact ****************/

    section#winemaker-contact { clear: both; width: 100%; padding: 0 calc(50% - 650px) 80px calc(50% - 650px); box-sizing: border-box;}

    .winemaker-contact-title { width: 100%; text-align: center; background-image: url("../images/welcome_week_hot_title_bg_line.png"); background-repeat: repeat-x; background-position: center center;}
    .winemaker-contact-title .title { width: 180px; padding: 0 20px; margin: 0 auto; color: #666; font-size: 1.6em; font-weight: 900; line-height: 1em; letter-spacing: 0.1em; text-align: center; background-color: #fff;}
    .winemaker-contact-title .title span.en { font-size: 1.1rem; font-weight: 600; line-height: 1em; letter-spacing: normal;}

    .winemaker-contact-sub-arrow { clear: both; width: 100%; padding: 10px 0; font-size: 1.2em; text-align: center;}

    .winemaker-contact-column-full { clear: both; width: 100%; margin: 40px 0 0 0; display: flex; justify-content: flex-start; align-items: flex-start;}
    .winemaker-contact-column-full .column-1-con { width: 30%;}
    .winemaker-contact-column-full .column-1-con .logo { width: 84%; margin: 0 auto 30px auto;}
    .winemaker-contact-column-full .column-1-con .logo img { width: 100%; height: auto;}
    .winemaker-contact-column-full .column-1-con .text { width: 84%; font-size: 1.4em; line-height: 1em; text-align: center; margin: 0 auto 20px auto;}
    .winemaker-contact-column-full .column-1-con .qrcode { clear: both; width: 84%; margin: 0 auto 10px auto;}
    .winemaker-contact-column-full .column-1-con .qrcode img { width: 70%; height: auto; margin: 0 auto;}
    .winemaker-contact-column-full .column-1-con .line-me { clear: both; width: 84%; margin: 0 auto;}
    .winemaker-contact-column-full .column-1-con .line-me img { margin: 0 auto;}
    .winemaker-contact-column-full .column-2-con { width: 35%; padding: 0 60px; box-sizing: border-box;}
    .winemaker-contact-column-full .column-2-con input[type=text] { width: 100%; padding: 10px 0; margin: 0 0 20px 0; color: #414141; font-size: 1.1em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border-top: 0; border-left: 0; border-right: 0; border-bottom: 1px #414141 solid; background-color: #fff; box-sizing: border-box;}
    .winemaker-contact-column-full .column-2-con select { width: 180px; padding: 10px 0; margin: 0 0 20px 0; color: #414141; font-size: 1.1em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border-top: 0; border-left: 0; border-right: 0; border-bottom: 1px #414141 solid; background-color: #fff; box-sizing: border-box;}
    .winemaker-contact-column-full .column-2-con input[type=date] { width: 180px; padding: 10px 0; margin: 0 0 20px 0; color: #414141; font-size: 1.1em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border-top: 0; border-left: 0; border-right: 0; border-bottom: 1px #414141 solid; background-color: #fff; box-sizing: border-box;}
    .winemaker-contact-column-full .column-2-con textarea { width: 100%; height: 200px; padding: 10px; margin: 10px 0 0 0; color: #414141; font-size: 1.1em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #414141 solid; background-color: #fff; box-sizing: border-box;}
    .winemaker-contact-column-full .column-2-con input[type=button] { clear: both; width: 140px; padding: 5px 0; margin: 40px 0 0 0; color: #fff; font-size: 1.1em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #414141; cursor: pointer;}


    /**************** section #page-no8project-case ****************/

    section#page-no8project-case { clear: both; width: 100%; padding: 60px calc(50% - 650px) 80px calc(50% - 650px); box-sizing: border-box;}

    .page-case-content { clear: both; width: 100%;}
    .page-case-content .sub-topic { width: 100%; font-size: 1.4em; font-weight: 600; line-height: 1.6em; text-align: center;}
    .page-case-content .text-content { width: 100%; padding: 40px 0 0 0; font-size: 1.1rem; line-height: 1.8em;}
    .page-case-content .text-content .title { width: 100%; padding: 0 0 10px 0;}
    .page-case-content .text-content .title span { padding: 5px 10px; color: #fff; font-size: 1.2rem; font-weight: 500; background-color: #888;}
    .page-case-content .text-content img.photo-pic { clear: both; width: 60%; height: auto; margin: 20px auto;}
    .page-case-content .text-content img.photo-pic2 { clear: both; width: 70%; height: auto; margin: 20px auto;}
    .page-case-content .text-content .photo-text { clear: both; width: 60%; margin: 0 auto; font-size: 1rem; line-height: 1.2em; text-align: center;}
    .page-case-content .text-content ul.text { clear: both; width: 100%; padding: 0 0 0 24px; margin: 0; box-sizing: border-box; display: block;}
    .page-case-content .text-content ul.text li { padding: 0; margin: 0;}

    ul.page-case-hashtag { clear: both; width: 100%; padding: 80px 0 0 0; margin: 0 auto; list-style: none; display: flex; justify-content: center; flex-wrap: wrap;}
    ul.page-case-hashtag li { padding: 3px 10px; margin: 5px; color: #888; font-size: 1.1rem; font-weight: 500; line-height: 1.2em; border: 1px #888 solid; border-radius: 12px;}
    ul.page-case-hashtag li:hover { border: 1px #000 solid; background-color: #eee;}

    .page-case-others { clear: both; width: 100%; padding: 30px 0 0 0; margin: 80px 0 0 0; border-top: 1px #ccc solid;}
    .page-case-others .case-list { width: 100%; margin: 20px 0 0 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    .page-case-others .case-list .case-box { width: calc(100% / 5 - 30px); margin: 0 15px 20px 15px;}
    .page-case-others .case-list .case-box a { color: #414141; text-decoration: none;}
    .page-case-others .case-list .case-box .photo { width: 100%;}
    .page-case-others .case-list .case-box .photo img { width: 100%; height: auto;}
    .page-case-others .case-list .case-box .title { width: 100%; padding: 10px 0 0 0; font-size: 0.9rem; font-weight: 500; line-height: 1.2em;}

    .page-case-video-box { clear: both; width: 80%; margin: 0 auto 40px auto;}

    .page-case-photos-slider { clear: both; width: 70%; margin: 0 auto;}
    .page-case-photos-slider img.photo { width: 100%; height: auto;}

    .page-case-share-bt { display: none;}


    /**************** section #page-thankyou ****************/

    section#page-thankyou { clear: both; width: 100%; padding: 200px calc(50% - 650px); box-sizing: border-box; text-align: center;}

    .page-thankyou-con { width: 100%; margin: 0 0 80px 0; font-size: 2rem; font-weight: 300; line-height: 2em;}

    button.goback-bt { clear: both; width: 140px; padding: 13px 0; margin: 0 auto; color: #fff; font-size: 1rem; line-height: 1em; text-align: center; border: 0; border-radius: 16px; background-color: #666; cursor: pointer;}
    
    
    /**************** footer ****************/
    
    footer { clear: both; width: 100%; padding: 40px 80px; background-color: #6e6e6e; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; box-sizing: border-box;}

    .footer-column-1 { width: 24%; margin: 0 0 40px 0;}
    .footer-column-1 .logo-box { width: 80%; margin: 0 auto;}
    .footer-column-1 .logo-box img { width: 100%; height: auto;}
    .footer-column-1 .text { clear: both; width: 80%; margin: 20px auto; color: #fff; font-size: 0.9rem; font-weight: 300; line-height: 2em; letter-spacing: 0.1em;}
    .footer-column-1 .social-icon { clear: both; width: 80%; margin: 0 auto; font-size: 2.2em;}
    .footer-column-1 .social-icon a { color: #fff; text-decoration: none;}
    .footer-column-2-0 { width: 76%; margin: 0 0 60px; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
    .footer-column-2-0 .footer-column-2 { width: 50%; padding: 0 60px; color: #fff; font-size: 0.9rem; font-weight: 300; line-height: 2em; letter-spacing: 0.1em; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
    .footer-column-2-0 .footer-column-2 .caption { width: 90px; margin: 0 0 30px 0; font-size: 1.1rem; font-weight: 600; border-right: 1px #fff solid; box-sizing: border-box;}
    .footer-column-2-0 .footer-column-2 .column { width: calc(100% - 90px); padding: 2px 0 0 15px; margin: 0 0 30px 0; box-sizing: border-box;}
    .footer-column-2-0 .footer-column-2 .column span.title { padding: 10px 0 10px 0; font-size: 1.1rem; font-weight: 600; line-height: 1.2rem;}
    .footer-column-2-0 .footer-column-2 .column span.title span.en { font-size: 1.1rem; line-height: 1.2rem; font-weight: 600; font-family: "Vogue-B";}
    .footer-column-2-0 .footer-column-2 .column a { color: #fff; text-decoration: none;}
    .footer-column-2-0 .footer-column-2 .column a:hover { border-bottom: 1px #fff solid;}

    .footer-column-2-0 .footer-column-3 { width: 100%; padding: 40px 0 0 60px; color: #fff; font-size: 0.9rem; font-weight: 300; line-height: 1.6em; letter-spacing: 0.1em; box-sizing: border-box;}

    .footer-copyright { width: 100%; margin: 0 0 20px 0; color: #fff; font-size: 0.9rem; line-height: 1.2em; text-align: right;}
    .footer-copyright span.en { font-family: "Vogue-B";}

    .footer-infor-full { clear: both; width: 100%; padding: 40px 0 0 0; border-top: 3px #fff solid; display: flex; justify-content: flex-start; align-items: center;}
    .footer-infor-full a { color: #fff; text-decoration: none; border-bottom: 1px #fff dashed;}
    .footer-infor-full .footer-logo { width: 301px; border-right: 1px #fff solid; box-sizing: border-box;}
    .footer-infor-full .footer-logo img { width: 280px; height: auto;}
    .footer-infor-full .footer-address-mo { display: none;}
    .footer-infor-full .footer-address { width: calc(100% - 301px); padding: 0 0 0 20px; box-sizing: border-box; color: #fff; font-size: 0.9rem; line-height: 1.6em; letter-spacing: 0.1em;}

    
}

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

    /************ coming soon ************/
    #comingsoon-popup { width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; z-index: 999999;}
    #comingsoon-popup .icon-close { width: 50px; color: #fff; font-size: 3rem; text-align: center; position: absolute; top: 10px; right: 30px; cursor: pointer;}
    #comingsoon-popup .text-con { width: 80%; max-height: 90%; padding: 60px 80px; box-sizing: border-box; font-size: 1.2rem; font-weight: 300; background-color: #fff; overflow: auto;}

    
    /**************** welcome header ****************/
    
    header { clear: both; width: 100%; padding: 15px 20px; border-bottom: 1px #ccc solid; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; position: relative;}

    .welcome-header-logo { width: 340px; display: flex; justify-content: flex-start; align-items: center;}
    .welcome-header-logo .logo-pic { width: 240px; padding: 0 20px 0 0; border-right: 2px #414141 solid; box-sizing: border-box;}
    .welcome-header-logo .logo-pic img { width: 100%; height: auto;}
    .welcome-header-logo .logo-text { width: calc(100% - 240px); padding: 0 0 0 20px; font-size: 1.2em; font-weight: 900; line-height: 1em; box-sizing: border-box;}

    .header-search-box { width: 150px; margin: 0 0 0 10px; display: flex; justify-content: flex-end; align-items: center; position: absolute; top: 5px; right: 20px;}
    .header-search-box .icon { width: 24px; font-size: 1.2em;}
    .header-search-box input[type=search] { width: calc(100% - 24px); padding: 0 5px; color: #414141; font-size: 1em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; font-weight: 500; background-color: #fff; border: 0; box-sizing: border-box;}

    nav#mo { display: none;}
    .header-nav-mo { display: none;}

    nav#pc { width: calc(100% - 340px);}
    nav#pc ul.header-nav { width: 100%; padding: 0; margin: 20px 0 0 0; list-style: none; display: flex; justify-content: flex-end; align-items: center;}
    nav#pc ul.header-nav li { padding: 0; margin: 0 10px; position: relative;}
    nav#pc ul.header-nav li a { width: 80px; color: #414141; font-size: 1rem; line-height: 1em; line-height: 2em; text-align: center; text-decoration: none; border-bottom: 4px #fff solid; box-sizing: border-box; display: block; cursor: pointer;}
    nav#pc ul.header-nav li a span.en { width: 100%; font-family: "Vogue-B"; display: block;}
    nav#pc ul.header-nav li a span.cn { width: 100%; display: none;}
    nav#pc ul.header-nav li a:hover { border-bottom: 4px #414141 solid;}
    nav#pc ul.header-nav li a.sel { border-bottom: 4px #414141 solid;}
    nav#pc ul.header-nav li ul.header-nav-popup { width: 160px; padding: 40px 0; margin: 0; list-style: none; background-color: #414141; display: none; box-sizing: border-box; position: absolute; top: 36px; left: calc(50% - 80px); z-index: 9999;}
    nav#pc ul.header-nav li ul.header-nav-popup li { width: 100%; padding: 0; margin: 0;}
    nav#pc ul.header-nav li ul.header-nav-popup li a { width: 100%; padding: 10px 0; color: #fff; font-size: 1rem; line-height: 1.2em; text-align: center; border: 0; display: block;}
    nav#pc ul.header-nav li ul.header-nav-popup li a:hover { background-color: rgba(255,255,255,0.2);}


    /**************** section #welcome-banner ****************/

    section#welcome-banner { clear: both; width: 100%; overflow: hidden;}

    .welcome-banner-slider { width: 100%; overflow: hidden;}
    .welcome-banner-slider .slider div { width: 100%; position: relative;}
    .welcome-banner-slider .slider div img { width: 100%; height: auto; position: relative; z-index: 1;}
    .welcome-banner-slider .slider div img.welcome-banner-pc { width: 100%; height: auto; position: relative; z-index: 1;}
    .welcome-banner-slider .slider div img.welcome-banner-mo { display: none;}

    .welcome-banner-slider .slider div .text-bt { width: 360px; position: absolute; bottom: 4vw; left: calc(50% - 180px); z-index: 2;}
    .welcome-banner-slider .slider div .text-bt a { width: 100%; padding: 5px 0; color: #fff; font-size: 1.4em; font-weight: 500; text-align: center; text-decoration: none; background-color: #595757; display: block;}
    .welcome-banner-slider .slider div .text-bt a:hover { background-color: #999;}


    /**************** section #pearson-oenolog ****************/

    section#pearson-oenology { clear: both; width: 100%; padding: 40px calc(50% - 480px); box-sizing: border-box;}

    .pearson-oenology-title { width: 100%; margin: 0 0 40px 0; text-align: center; background-image: url("../images/welcome_week_hot_title_bg_line.png"); background-repeat: repeat-x; background-position: center center;}
    .pearson-oenology-title .title { width: 200px; padding: 0 20px; margin: 0 auto; color: #666; font-size: 1.6em; font-weight: 900; line-height: 1em; letter-spacing: 0.1em; text-align: center; background-color: #fff;}
    .pearson-oenology-title .title span.en { font-size: 1.1rem; font-weight: 600; line-height: 1em; letter-spacing: normal;}

    .pearson-oenology-content { clear: both; width: 100%;}
    .pearson-oenology-content img.logo-prn { width: 500px; height: auto; margin: 100px auto;}
    .pearson-oenology-content .slogan-contact-mo { display: none;}
    .pearson-oenology-content .slogan-contact { clear: both; width: 100%;}
    .pearson-oenology-content .slogan-contact .slogan { clear: both; width: 100%; font-size: 1.4em; font-weight: 600; letter-spacing: 0.1em; text-align: center;}
    .pearson-oenology-content .slogan-contact hr { clear: both; width: 200px; border: 1px #999 solid; margin: 20px auto;}
    .pearson-oenology-content .slogan-contact .text-con { clear: both; width: 100%; font-size: 1.1em; letter-spacing: 0.1em; line-height: 1.6em; text-align: center;}
    .pearson-oenology-content .slogan-contact .text-con span.red-arrow { color: #ff0000; font-size: 1.4rem; line-height: 3em;}
    .pearson-oenology-content .slogan-contact .contact-bt { clear: both; width: 160px; margin: 60px auto 0 auto;}
    .pearson-oenology-content .slogan-contact .contact-bt a { width: 100%; padding: 15px 0; color: #fff; font-size: 1.1em; line-height: 1em; text-align: center; text-decoration: none; background-color: #414141; border-radius: 6px; display: block;}
    .pearson-oenology-content .slogan-contact .contact-bt a:hover { background-color: #666;}


    /**************** section #welcome-week-hot ****************/

    section#welcome-week-hot { clear: both; width: 100%; padding: 40px calc(50% - 480px); box-sizing: border-box;}

    .welcome-week-hot-title { width: 100%; text-align: center; background-image: url("../images/welcome_week_hot_title_bg_line.png"); background-repeat: repeat-x; background-position: center center;}
    .welcome-week-hot-title .title { width: 220px; padding: 0 20px; margin: 0 auto; color: #666; font-size: 1.6em; font-weight: 900; line-height: 1em; letter-spacing: 0.1em; text-align: center; background-color: #fff;}
    .welcome-week-hot-title .title span.en { font-size: 1.1rem; font-weight: 600; line-height: 1em; letter-spacing: normal;}

    .welcome-week-hot-sub-arrow { clear: both; width: 100%; padding: 10px 0; font-size: 1.2em; text-align: center;}

    .welcome-week-hot-sub-title { clear: both; width: 100%; margin: 0 0 10px 0; color: #666; text-align: center;}
    .welcome-week-hot-sub-title span.en { font-size: 1.4rem; font-weight: 600; line-height: 1em;}
    .welcome-week-hot-sub-title span.cn { font-size: 1.1rem; font-weight: 600; line-height: 1em; letter-spacing: 0.1em;}

    .welcome-week-hot-more { clear: both; width: 100%; margin: 30px 0; font-size: 1em; text-align: center;}
    .welcome-week-hot-more a { color: #0161ba; text-decoration: none;}
    .welcome-week-hot-more a:hover { border-bottom: 1px #0161ba dashed;}

    .welcome-week-hot-list { clear: both; width: 100%; margin: 40px 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    .welcome-week-hot-list .case-column { width: calc(100% / 3 - 30px); margin: 0 15px 30px 15px;}
    .welcome-week-hot-list .case-column a { width: 100%; text-decoration: none; display: block;}
    .welcome-week-hot-list .case-column a .photo { width: 100%; border-radius: 10px; overflow: hidden;}
    .welcome-week-hot-list .case-column a .photo img { width: 100%; height: auto;}
    .welcome-week-hot-list .case-column a .title { width: 100%; padding: 10px 5px; color: #414141; font-size: 1rem; font-weight: 600; line-height: 1.2em; border-bottom: 1px #ccc solid; box-sizing: border-box;}
    .welcome-week-hot-list .case-column a .intro { width: 100%; padding: 10px 5px; color: #414141; font-size: 0.8rem; line-height: 1.2em; box-sizing: border-box;}
    .welcome-week-hot-list .case-column .social { width: 100%; padding: 10px 5px 0 5px; color: #6e6e6e; font-size: 1rem; line-height: 1em; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
    .welcome-week-hot-list .case-column .social input { width: 150px; padding: 3px; margin: 0 5px 0 0; color: #aaa; font-size: 0.8rem; border: 1px #aaa solid; box-sizing: border-box;}
    .welcome-week-hot-list .case-column .social button { color: #0161ba; font-size: 0.8rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border-radius: 4px; border: 1px #0161ba solid; background-color: #fff; cursor: pointer; box-sizing: border-box;}


    /**************** section #winemaker-contact ****************/

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

    .winemaker-contact-title { width: 100%; text-align: center; background-image: url("../images/welcome_week_hot_title_bg_line.png"); background-repeat: repeat-x; background-position: center center;}
    .winemaker-contact-title .title { width: 180px; padding: 0 20px; margin: 0 auto; color: #666; font-size: 1.6em; font-weight: 900; line-height: 1em; letter-spacing: 0.1em; text-align: center; background-color: #fff;}
    .winemaker-contact-title .title span.en { font-size: 1.1rem; font-weight: 600; line-height: 1em; letter-spacing: normal;}

    .winemaker-contact-sub-arrow { clear: both; width: 100%; padding: 10px 0; font-size: 1.2em; text-align: center;}

    .winemaker-contact-column-full { clear: both; width: 100%; margin: 40px 0 0 0; display: flex; justify-content: flex-start; align-items: flex-start;}
    .winemaker-contact-column-full .column-1-con { width: 30%;}
    .winemaker-contact-column-full .column-1-con .logo { width: 84%; margin: 0 auto 30px auto;}
    .winemaker-contact-column-full .column-1-con .logo img { width: 100%; height: auto;}
    .winemaker-contact-column-full .column-1-con .text { clear: both; width: 84%; font-size: 1.4em; line-height: 1em; text-align: center; margin: 0 auto 20px auto;}
    .winemaker-contact-column-full .column-1-con .qrcode { clear: both; width: 84%; margin: 0 auto 10px auto;}
    .winemaker-contact-column-full .column-1-con .qrcode img { width: 75%; height: auto; margin: 0 auto;}
    .winemaker-contact-column-full .column-1-con .line-me { clear: both; width: 84%; margin: 0 auto;}
    .winemaker-contact-column-full .column-1-con .line-me img { margin: 0 auto;}
    .winemaker-contact-column-full .column-2-con { width: 35%; padding: 0 40px; box-sizing: border-box;}
    .winemaker-contact-column-full .column-2-con input[type=text] { width: 100%; padding: 10px 0; margin: 0 0 20px 0; color: #414141; font-size: 1.1em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border-top: 0; border-left: 0; border-right: 0; border-bottom: 1px #414141 solid; background-color: #fff; box-sizing: border-box;}
    .winemaker-contact-column-full .column-2-con select { width: 180px; padding: 10px 0; margin: 0 0 20px 0; color: #414141; font-size: 1.1em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border-top: 0; border-left: 0; border-right: 0; border-bottom: 1px #414141 solid; background-color: #fff; box-sizing: border-box;}
    .winemaker-contact-column-full .column-2-con input[type=date] { width: 180px; padding: 10px 0; margin: 0 0 20px 0; color: #414141; font-size: 1.1em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border-top: 0; border-left: 0; border-right: 0; border-bottom: 1px #414141 solid; background-color: #fff; box-sizing: border-box;}
    .winemaker-contact-column-full .column-2-con textarea { width: 100%; height: 200px; padding: 10px; margin: 10px 0 0 0; color: #414141; font-size: 1.1em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #414141 solid; background-color: #fff; box-sizing: border-box;}
    .winemaker-contact-column-full .column-2-con input[type=button] { clear: both; width: 140px; padding: 5px 0; margin: 40px 0 0 0; color: #fff; font-size: 1.1em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #414141; cursor: pointer;}


    /**************** section #page-no8project-case ****************/

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

    .page-case-content { clear: both; width: 100%;}
    .page-case-content .sub-topic { width: 100%; font-size: 1.4em; font-weight: 600; line-height: 1.6em; text-align: center;}
    .page-case-content .text-content { width: 100%; padding: 40px 0 0 0; font-size: 1.1rem; line-height: 1.8em;}
    .page-case-content .text-content .title { width: 100%; padding: 0 0 10px 0;}
    .page-case-content .text-content .title span { padding: 5px 10px; color: #fff; font-size: 1.2rem; font-weight: 500; background-color: #888;}
    .page-case-content .text-content img.photo-pic { clear: both; width: 70%; height: auto; margin: 20px auto;}
    .page-case-content .text-content img.photo-pic2 { clear: both; width: 80%; height: auto; margin: 20px auto;}
    .page-case-content .text-content .photo-text { clear: both; width: 70%; margin: 0 auto; font-size: 1rem; line-height: 1.2em; text-align: center;}
    .page-case-content .text-content ul.text { clear: both; width: 100%; padding: 0 0 0 24px; margin: 0; box-sizing: border-box; display: block;}
    .page-case-content .text-content ul.text li { padding: 0; margin: 0;}

    ul.page-case-hashtag { clear: both; width: 100%; padding: 80px 0 0 0; margin: 0 auto; list-style: none; display: flex; justify-content: center; flex-wrap: wrap;}
    ul.page-case-hashtag li { padding: 3px 10px; margin: 5px; color: #888; font-size: 1.1rem; font-weight: 500; line-height: 1.2em; border: 1px #888 solid; border-radius: 12px;}
    ul.page-case-hashtag li:hover { border: 1px #000 solid; background-color: #eee;}

    .page-case-others { clear: both; width: 100%; padding: 30px 0 0 0; margin: 80px 0 0 0; border-top: 1px #ccc solid;}
    .page-case-others .case-list { width: 100%; margin: 20px 0 0 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    .page-case-others .case-list .case-box { width: calc(100% / 4 - 30px); margin: 0 15px 20px 15px;}
    .page-case-others .case-list .case-box a { color: #414141; text-decoration: none;}
    .page-case-others .case-list .case-box .photo { width: 100%;}
    .page-case-others .case-list .case-box .photo img { width: 100%; height: auto;}
    .page-case-others .case-list .case-box .title { width: 100%; padding: 10px 0 0 0; font-size: 0.9rem; font-weight: 500; line-height: 1.2em;}

    .page-case-video-box { clear: both; width: 80%; margin: 0 auto 40px auto;}

    .page-case-photos-slider { clear: both; width: 70%; margin: 0 auto;}
    .page-case-photos-slider img.photo { width: 100%; height: auto;}

    .page-case-share-bt { display: none;}


    /**************** section #page-thankyou ****************/

    section#page-thankyou { clear: both; width: 100%; padding: 200px calc(50% - 480px); box-sizing: border-box; text-align: center;}

    .page-thankyou-con { width: 100%; margin: 0 0 80px 0; font-size: 2rem; font-weight: 300; line-height: 2em;}

    button.goback-bt { clear: both; width: 140px; padding: 13px 0; margin: 0 auto; color: #fff; font-size: 1rem; line-height: 1em; text-align: center; border: 0; border-radius: 16px; background-color: #666; cursor: pointer;}


    /**************** footer ****************/
    
    footer { clear: both; width: 100%; padding: 40px; background-color: #6e6e6e; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; box-sizing: border-box;}

    .footer-column-1 { width: 30%; margin: 0 0 40px 0;}
    .footer-column-1 .logo-box { width: 90%; margin: 0 auto;}
    .footer-column-1 .logo-box img { width: 100%; height: auto;}
    .footer-column-1 .text { clear: both; width: 90%; margin: 20px auto; color: #fff; font-size: 0.9rem; font-weight: 300; line-height: 2em; letter-spacing: 0.1em;}
    .footer-column-1 .social-icon { clear: both; width: 90%; margin: 0 auto; font-size: 2.2em;}
    .footer-column-1 .social-icon a { color: #fff; text-decoration: none;}
    .footer-column-2-0 { width: 70%; margin: 0 0 60px; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
    .footer-column-2-0 .footer-column-2 { width: 50%; padding: 0 40px; color: #fff; font-size: 0.9rem; font-weight: 300; line-height: 2em; letter-spacing: 0.1em; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
    .footer-column-2-0 .footer-column-2 .caption { width: 90px; margin: 0 0 30px 0; font-size: 1.1rem; font-weight: 600; border-right: 1px #fff solid; box-sizing: border-box;}
    .footer-column-2-0 .footer-column-2 .column { width: calc(100% - 90px); padding: 3px 0 0 15px; margin: 0 0 30px 0; box-sizing: border-box;}
    .footer-column-2-0 .footer-column-2 .column span.title { padding: 7px 0 10px 0; font-size: 1.1rem; font-weight: 600; line-height: 1.2rem;}
    .footer-column-2-0 .footer-column-2 .column span.title span.en { font-family: "Vogue-B"; font-size: 1.1rem; font-weight: 600; line-height: 1.2rem;}
    .footer-column-2-0 .footer-column-2 .column a { color: #fff; text-decoration: none;}
    .footer-column-2-0 .footer-column-2 .column a:hover { border-bottom: 1px #fff solid;}

    .footer-column-2-0 .footer-column-3 { width: 100%; padding: 40px 0 0 40px; color: #fff; font-size: 0.9rem; font-weight: 300; line-height: 1.6em; letter-spacing: 0.1em; box-sizing: border-box;}

    .footer-copyright { width: 100%; margin: 0 0 20px 0; color: #fff; font-size: 0.9rem; line-height: 1.2em; text-align: right;}
    .footer-copyright span.en { font-family: "Vogue-B";}

    .footer-infor-full { clear: both; width: 100%; padding: 40px 0 0 0; border-top: 3px #fff solid; display: flex; justify-content: flex-start; align-items: center;}
    .footer-infor-full a { color: #fff; text-decoration: none; border-bottom: 1px #fff dashed;}
    .footer-infor-full .footer-logo { width: 301px; border-right: 1px #fff solid; box-sizing: border-box;}
    .footer-infor-full .footer-logo img { width: 280px; height: auto;}
    .footer-infor-full .footer-address-mo { display: none;}
    .footer-infor-full .footer-address { width: calc(100% - 301px); padding: 0 0 0 20px; box-sizing: border-box; color: #fff; font-size: 0.9rem; line-height: 1.6em; letter-spacing: 0.1em;}


}

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

    /************ coming soon ************/
    #comingsoon-popup { width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; z-index: 999999;}
    #comingsoon-popup .icon-close { width: 50px; color: #fff; font-size: 3rem; text-align: center; position: absolute; top: 5px; right: 10px; cursor: pointer;}
    #comingsoon-popup .text-con { width: 90%; max-height: 86%; padding: 60px; box-sizing: border-box; font-size: 1.2rem; font-weight: 300; background-color: #fff; overflow: auto;}

        
    /**************** welcome header ****************/
    
    header { clear: both; width: 100%; padding: 30px 0; border-bottom: 1px #ccc solid;}

    .welcome-header-logo { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
    .welcome-header-logo .logo-pic { width: 200px; padding: 0 10px; border-right: 2px #414141 solid; box-sizing: border-box;}
    .welcome-header-logo .logo-pic img { width: 100%; height: auto;}
    .welcome-header-logo .logo-text { width: 100px; padding: 0 0 0 10px; font-size: 1.2em; font-weight: 900; line-height: 1em; box-sizing: border-box;}

    .header-search-box { display: none;}

    nav#pc { display: none;}
    nav#mo { clear: both; width: 100%;}
    /*nav#mo .header-search-box-mo { width: 160px; padding: 5px 0 0 0; display: flex; justify-content: flex-end; align-items: center; float: left;}
    nav#mo .header-search-box-mo .icon { width: 24px; font-size: 1.2em;}
    nav#mo .header-search-box-mo input[type=search] { width: calc(100% - 24px); padding: 0 5px; color: #414141; font-size: 1em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; font-weight: 500; background-color: #fff; border: 0; box-sizing: border-box;}*/
    nav#mo .nav-bt-open { width: 60px; font-size: 1.8em; text-align: center; cursor: pointer; position: absolute; top: 30px; right: 0;}
    
    .header-nav-mo { width: 100%; width: 100%; min-height: 100%; border-bottom: 2px #666 solid; background-color: #fff; display: none; position: absolute; top: 0; left: 0; z-index: 9999;}
    .header-nav-mo .header-top { width: 100%; padding: 30px 0;}
    .header-nav-mo .header-top .nav-bt-close { width: 60px; font-size: 1.8em; text-align: center; cursor: pointer; position: absolute; top: 30px; right: 0;}
    .header-nav-mo ul.header-nav { clear: both; width: 100%; padding: 40px; margin: 0; box-sizing: border-box; border-top: 1px #ccc solid; list-style: none; display: block;}
    .header-nav-mo ul.header-nav li { width: 100%; padding: 0; margin: 0; border-bottom: 1px #ccc solid; position: relative;}
    .header-nav-mo ul.header-nav li:last-child { border-bottom: 0;}
    .header-nav-mo ul.header-nav li a { width: 100%; padding: 15px 0; color: #414141; font-size: 1.2rem; line-height: 1em; line-height: 2em; text-align: center; text-decoration: none; display: block; cursor: pointer;}
    .header-nav-mo ul.header-nav li a span.en { padding: 0 5px; font-family: "Vogue-B";}
    .header-nav-mo ul.header-nav li a span.cn { padding: 0 5px;}
    .header-nav-mo ul.header-nav li a.sel { border-bottom: 4px #999 solid;}
    .header-nav-mo ul.header-nav li ul.header-nav-popup { width: 100%; padding: 30px 0; margin: 0; background-color: #eee; list-style: none; display: none; box-sizing: border-box;}
    .header-nav-mo ul.header-nav li ul.header-nav-popup li { width: 100%; padding: 0; margin: 0;}
    .header-nav-mo ul.header-nav li ul.header-nav-popup li a { width: 100%; padding: 15px 0; color: #414141; font-size: 1rem; line-height: 1.2em; text-align: center; border: 0; display: block;}


    /**************** section #welcome-banner ****************/

    section#welcome-banner { clear: both; width: 100%; overflow: hidden;}

    .welcome-banner-slider { width: 100%; overflow: hidden;}
    .welcome-banner-slider .slider div { width: 100%; position: relative;}
    .welcome-banner-slider .slider div img { width: 120%; height: auto; position: relative; z-index: 1;}
    .welcome-banner-slider .slider div img.welcome-banner-pc { width: 120%; height: auto; position: relative; z-index: 1;}
    .welcome-banner-slider .slider div img.welcome-banner-mo { display: none;}

    .welcome-banner-slider .slider div .text-bt { width: 360px; position: absolute; bottom: 4vw; left: calc(50% - 180px); z-index: 2;}
    .welcome-banner-slider .slider div .text-bt a { width: 100%; padding: 5px 0; color: #fff; font-size: 1.4em; font-weight: 500; text-align: center; text-decoration: none; background-color: #595757; display: block;}
    .welcome-banner-slider .slider div .text-bt a:hover { background-color: #999;}


    /**************** section #pearson-oenolog ****************/

    section#pearson-oenology { clear: both; width: 100%; padding: 40px; box-sizing: border-box;}

    .pearson-oenology-title { width: 100%; margin: 0 0 40px 0; text-align: center; background-image: url("../images/welcome_week_hot_title_bg_line.png"); background-repeat: repeat-x; background-position: center center;}
    .pearson-oenology-title .title { width: 200px; padding: 0 20px; margin: 0 auto; color: #666; font-size: 1.6em; font-weight: 900; line-height: 1em; letter-spacing: 0.1em; text-align: center; background-color: #fff;}
    .pearson-oenology-title .title span.en { font-size: 1.1rem; font-weight: 600; line-height: 1em; letter-spacing: normal;}

    .pearson-oenology-content { clear: both; width: 100%;}
    .pearson-oenology-content img.logo-prn { width: 400px; height: auto; margin: 100px auto;}
    .pearson-oenology-content .slogan-contact-mo { display: none;}
    .pearson-oenology-content .slogan-contact { clear: both; width: 100%;}
    .pearson-oenology-content .slogan-contact .slogan { clear: both; width: 100%; font-size: 1.4em; font-weight: 600; letter-spacing: 0.1em; text-align: center;}
    .pearson-oenology-content .slogan-contact hr { clear: both; width: 200px; border: 1px #999 solid; margin: 20px auto;}
    .pearson-oenology-content .slogan-contact .text-con { clear: both; width: 100%; font-size: 1.1em; letter-spacing: 0.1em; line-height: 1.6em; text-align: center;}
    .pearson-oenology-content .slogan-contact .text-con span.red-arrow { color: #ff0000; font-size: 1.4rem; line-height: 3em;}
    .pearson-oenology-content .slogan-contact .contact-bt { clear: both; width: 160px; margin: 60px auto 0 auto;}
    .pearson-oenology-content .slogan-contact .contact-bt a { width: 100%; padding: 15px 0; color: #fff; font-size: 1.1em; line-height: 1em; text-align: center; text-decoration: none; background-color: #414141; border-radius: 6px; display: block;}
    .pearson-oenology-content .slogan-contact .contact-bt a:hover { background-color: #666;}


    /**************** section #welcome-week-hot ****************/

    section#welcome-week-hot { clear: both; width: 100%; padding: 40px; box-sizing: border-box;}

    .welcome-week-hot-title { width: 100%; text-align: center; background-image: url("../images/welcome_week_hot_title_bg_line.png"); background-repeat: repeat-x; background-position: center center;}
    .welcome-week-hot-title .title { width: 220px; padding: 0 20px; margin: 0 auto; color: #666; font-size: 1.6em; font-weight: 900; line-height: 1em; letter-spacing: 0.1em; text-align: center; background-color: #fff;}
    .welcome-week-hot-title .title span.en { font-size: 1.1rem; font-weight: 600; line-height: 1em; letter-spacing: normal;}

    .welcome-week-hot-sub-arrow { clear: both; width: 100%; padding: 10px 0; font-size: 1.2em; text-align: center;}

    .welcome-week-hot-sub-title { clear: both; width: 100%; margin: 0 0 10px 0; color: #666; text-align: center;}
    .welcome-week-hot-sub-title span.en { font-size: 1.4rem; font-weight: 600; line-height: 1em;}
    .welcome-week-hot-sub-title span.cn { font-size: 1.1rem; font-weight: 600; line-height: 1em; letter-spacing: 0.1em;}

    .welcome-week-hot-more { clear: both; width: 100%; margin: 30px 0; font-size: 1em; text-align: center;}
    .welcome-week-hot-more a { color: #0161ba; text-decoration: none;}
    .welcome-week-hot-more a:hover { border-bottom: 1px #0161ba dashed;}

    .welcome-week-hot-list { clear: both; width: 100%; margin: 40px 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    .welcome-week-hot-list .case-column { width: calc(100% / 2 - 20px); margin: 0 10px 30px 10px;}
    .welcome-week-hot-list .case-column a { width: 100%; text-decoration: none; display: block;}
    .welcome-week-hot-list .case-column a .photo { width: 100%; border-radius: 10px; overflow: hidden;}
    .welcome-week-hot-list .case-column a .photo img { width: 100%; height: auto;}
    .welcome-week-hot-list .case-column a .title { width: 100%; padding: 10px 5px; color: #414141; font-size: 1rem; font-weight: 600; line-height: 1.2em; border-bottom: 1px #ccc solid; box-sizing: border-box;}
    .welcome-week-hot-list .case-column a .intro { width: 100%; padding: 10px 5px; color: #414141; font-size: 0.8rem; line-height: 1.2em; box-sizing: border-box;}
    .welcome-week-hot-list .case-column .social { width: 100%; padding: 10px 5px 0 5px; color: #6e6e6e; font-size: 1rem; line-height: 1em; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
    .welcome-week-hot-list .case-column .social input { width: 150px; padding: 3px; margin: 0 5px 0 0; color: #aaa; font-size: 0.8rem; border: 1px #aaa solid; box-sizing: border-box;}
    .welcome-week-hot-list .case-column .social button { color: #0161ba; font-size: 0.8rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border-radius: 4px; border: 1px #0161ba solid; background-color: #fff; cursor: pointer; box-sizing: border-box;}


    /**************** section #winemaker-contact ****************/

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

    .winemaker-contact-title { width: 100%; text-align: center; background-image: url("../images/welcome_week_hot_title_bg_line.png"); background-repeat: repeat-x; background-position: center center;}
    .winemaker-contact-title .title { width: 180px; padding: 0 20px; margin: 0 auto; color: #666; font-size: 1.6em; font-weight: 900; line-height: 1em; letter-spacing: 0.1em; text-align: center; background-color: #fff;}
    .winemaker-contact-title .title span.en { font-size: 1.1rem; font-weight: 600; line-height: 1em; letter-spacing: normal;}

    .winemaker-contact-sub-arrow { clear: both; width: 100%; padding: 10px 0; font-size: 1.2em; text-align: center;}

    .winemaker-contact-column-full { clear: both; width: 100%; margin: 40px 0 0 0; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
    .winemaker-contact-column-full .column-1-con { width: 100%; margin: 0 0 40px 0;}
    .winemaker-contact-column-full .column-1-con .logo { width: 100%; margin: 0 0 30px 0;}
    .winemaker-contact-column-full .column-1-con .logo img { width: 360px; height: auto; margin: 0 auto;}
    .winemaker-contact-column-full .column-1-con .text { width: 100%; font-size: 1.4em; line-height: 1em; text-align: center; margin: 0 0 20px 0;}
    .winemaker-contact-column-full .column-1-con .qrcode { clear: both; width: 100%; margin: 0 auto 10px auto;}
    .winemaker-contact-column-full .column-1-con .qrcode img { width: 260px; height: auto; margin: 0 auto;}
    .winemaker-contact-column-full .column-1-con .line-me { clear: both; width: 100%; margin: 0 auto;}
    .winemaker-contact-column-full .column-1-con .line-me img { margin: 0 auto;}
    .winemaker-contact-column-full .column-2-con { width: 50%; padding: 0 30px; box-sizing: border-box;}
    .winemaker-contact-column-full .column-2-con input[type=text] { width: 100%; padding: 10px 0; margin: 0 0 20px 0; color: #414141; font-size: 1.1em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border-top: 0; border-left: 0; border-right: 0; border-bottom: 1px #414141 solid; background-color: #fff; box-sizing: border-box;}
    .winemaker-contact-column-full .column-2-con select { width: 180px; padding: 10px 0; margin: 0 0 20px 0; color: #414141; font-size: 1.1em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border-top: 0; border-left: 0; border-right: 0; border-bottom: 1px #414141 solid; background-color: #fff; box-sizing: border-box;}
    .winemaker-contact-column-full .column-2-con input[type=date] { width: 180px; padding: 10px 0; margin: 0 0 20px 0; color: #414141; font-size: 1.1em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border-top: 0; border-left: 0; border-right: 0; border-bottom: 1px #414141 solid; background-color: #fff; box-sizing: border-box;}
    .winemaker-contact-column-full .column-2-con textarea { width: 100%; height: 200px; padding: 10px; margin: 10px 0 0 0; color: #414141; font-size: 1.1em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #414141 solid; background-color: #fff; box-sizing: border-box;}
    .winemaker-contact-column-full .column-2-con input[type=button] { clear: both; width: 140px; padding: 5px 0; margin: 40px 0 0 0; color: #fff; font-size: 1.1em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #414141; cursor: pointer;}


    /**************** section #page-no8project-case ****************/

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

    .page-case-content { clear: both; width: 100%;}
    .page-case-content .sub-topic { width: 100%; font-size: 1.4em; font-weight: 600; line-height: 1.6em; text-align: center;}
    .page-case-content .text-content { width: 100%; padding: 40px 0 0 0; font-size: 1.1rem; line-height: 1.8em;}
    .page-case-content .text-content .title { width: 100%; padding: 0 0 10px 0;}
    .page-case-content .text-content .title span { padding: 5px 10px; color: #fff; font-size: 1.2rem; font-weight: 500; background-color: #888;}
    .page-case-content .text-content img.photo-pic { clear: both; width: 80%; height: auto; margin: 20px auto;}
    .page-case-content .text-content img.photo-pic2 { clear: both; width: 90%; height: auto; margin: 20px auto;}
    .page-case-content .text-content .photo-text { clear: both; width: 80%; margin: 0 auto; font-size: 1rem; line-height: 1.2em; text-align: center;}
    .page-case-content .text-content ul.text { clear: both; width: 100%; padding: 0 0 0 24px; margin: 0; box-sizing: border-box; display: block;}
    .page-case-content .text-content ul.text li { padding: 0; margin: 0;}

    ul.page-case-hashtag { clear: both; width: 100%; padding: 80px 0 0 0; margin: 0 auto; list-style: none; display: flex; justify-content: center; flex-wrap: wrap;}
    ul.page-case-hashtag li { padding: 3px 10px; margin: 5px; color: #888; font-size: 1.1rem; font-weight: 500; line-height: 1.2em; border: 1px #888 solid; border-radius: 12px;}
    ul.page-case-hashtag li:hover { border: 1px #000 solid; background-color: #eee;}

    .page-case-others { clear: both; width: 100%; padding: 30px 0 0 0; margin: 80px 0 0 0; border-top: 1px #ccc solid;}
    .page-case-others .case-list { width: 100%; margin: 20px 0 0 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    .page-case-others .case-list .case-box { width: calc(100% / 3 - 30px); margin: 0 15px 20px 15px;}
    .page-case-others .case-list .case-box a { color: #414141; text-decoration: none;}
    .page-case-others .case-list .case-box .photo { width: 100%;}
    .page-case-others .case-list .case-box .photo img { width: 100%; height: auto;}
    .page-case-others .case-list .case-box .title { width: 100%; padding: 10px 0 0 0; font-size: 0.9rem; font-weight: 500; line-height: 1.2em;}

    .page-case-video-box { clear: both; width: 90%; margin: 0 auto 40px auto;}

    .page-case-photos-slider { clear: both; width: 90%; margin: 0 auto;}
    .page-case-photos-slider img.photo { width: 100%; height: auto;}

    .page-case-share-bt { display: none;}


    /**************** section #page-thankyou ****************/

    section#page-thankyou { clear: both; width: 100%; padding: 200px 40px; box-sizing: border-box; text-align: center;}

    .page-thankyou-con { width: 100%; margin: 0 0 80px 0; font-size: 2rem; font-weight: 300; line-height: 2em;}

    button.goback-bt { clear: both; width: 140px; padding: 13px 0; margin: 0 auto; color: #fff; font-size: 1rem; line-height: 1em; text-align: center; border: 0; border-radius: 16px; background-color: #666; cursor: pointer;}
    
    
    /**************** footer ****************/
    
    footer { clear: both; width: 100%; padding: 40px; background-color: #6e6e6e; box-sizing: border-box;}

    .footer-column-1 { width: 100%; margin: 0 0 40px 0;}
    .footer-column-1 .logo-box { width: 90%; margin: 0 auto;}
    .footer-column-1 .logo-box img { width: 360px; height: auto;}
    .footer-column-1 .text { clear: both; width: 90%; margin: 20px auto; color: #fff; font-size: 0.9rem; font-weight: 300; line-height: 2em; letter-spacing: 0.1em;}
    .footer-column-1 .social-icon { clear: both; width: 90%; margin: 0 auto; font-size: 2.2em;}
    .footer-column-1 .social-icon a { color: #fff; text-decoration: none;}
    .footer-column-2-0 { width: 100%; margin: 0 0 60px; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
    .footer-column-2-0 .footer-column-2 { width: 100%; padding: 0 40px; color: #fff; font-size: 0.9rem; font-weight: 300; line-height: 2em; letter-spacing: 0.1em; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
    .footer-column-2-0 .footer-column-2 .caption { width: 90px; margin: 0 0 30px 0; font-size: 1.1rem; font-weight: 600; border-right: 1px #fff solid; box-sizing: border-box;}
    .footer-column-2-0 .footer-column-2 .column { width: calc(100% - 90px); padding: 2px 0 0 15px; margin: 0 0 30px 0; box-sizing: border-box;}
    .footer-column-2-0 .footer-column-2 .column span.title { padding: 7px 0 10px 0; font-size: 1.1rem; font-weight: 600; line-height: 1.2rem;}
    .footer-column-2-0 .footer-column-2 .column span.title span.en { font-family: "Vogue-B"; font-size: 1.1rem; font-weight: 600; line-height: 1.2rem;}
    .footer-column-2-0 .footer-column-2 .column a { color: #fff; text-decoration: none;}
    .footer-column-2-0 .footer-column-2 .column a:hover { border-bottom: 1px #fff solid;}

    .footer-column-2-0 .footer-column-3 { width: 100%; padding: 40px 0 0 40px; color: #fff; font-size: 0.9rem; font-weight: 300; line-height: 1.6em; letter-spacing: 0.1em; box-sizing: border-box;}

    .footer-copyright { width: 100%; margin: 40px 0 20px 0; color: #fff; font-size: 0.9rem; line-height: 1.2em; text-align: right;}
    .footer-copyright span.en { font-family: "Vogue-B";}

    .footer-infor-full { clear: both; width: 100%; padding: 40px 0 0 0; border-top: 3px #fff solid; display: flex; justify-content: flex-start; align-items: center;}
    .footer-infor-full a { color: #fff; text-decoration: none; border-bottom: 1px #fff dashed;}
    .footer-infor-full .footer-logo { width: 261px; border-right: 1px #fff solid; box-sizing: border-box;}
    .footer-infor-full .footer-logo img { width: 240px; height: auto;}
    .footer-infor-full .footer-address-mo { display: none;}
    .footer-infor-full .footer-address { width: calc(100% - 261px); padding: 0 0 0 20px; box-sizing: border-box; color: #fff; font-size: 0.9rem; line-height: 1.6em; letter-spacing: 0.1em;}
        
    
}

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

    /************ coming soon ************/
    #comingsoon-popup { width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; z-index: 999999;}
    #comingsoon-popup .icon-close { width: 50px; color: #fff; font-size: 3rem; text-align: center; position: absolute; top: 5px; right: 10px; cursor: pointer;}
    #comingsoon-popup .text-con { width: 96%; max-height: 86%; padding: 40px 20px; box-sizing: border-box; font-size: 1.1rem; font-weight: 300; line-height: 1.8em; background-color: #fff; overflow: auto;}

        
    /**************** welcome header ****************/
    
    header { clear: both; width: 100%; padding: 30px 0; border-bottom: 1px #ccc solid;}

    .welcome-header-logo { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
    .welcome-header-logo .logo-pic { width: 200px; padding: 0 10px; border-right: 2px #414141 solid; box-sizing: border-box;}
    .welcome-header-logo .logo-pic img { width: 100%; height: auto;}
    .welcome-header-logo .logo-text { width: 100px; padding: 0 0 0 10px; font-size: 1.2em; font-weight: 900; line-height: 1em; box-sizing: border-box;}

    .header-search-box { display: none;}

    nav#pc { display: none;}
    nav#mo { clear: both; width: 100%;}
    /*nav#mo .header-search-box-mo { width: 160px; padding: 5px 0 0 0; display: flex; justify-content: flex-end; align-items: center; float: left;}
    nav#mo .header-search-box-mo .icon { width: 24px; font-size: 1.2em;}
    nav#mo .header-search-box-mo input[type=search] { width: calc(100% - 24px); padding: 0 5px; color: #414141; font-size: 1em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; font-weight: 500; background-color: #fff; border: 0; box-sizing: border-box;}*/
    nav#mo .nav-bt-open { width: 60px; font-size: 1.8em; text-align: center; cursor: pointer; position: absolute; top: 30px; right: 0;}
    
    .header-nav-mo { width: 100%; width: 100%; min-height: 100%; border-bottom: 2px #666 solid; background-color: #fff; display: none; position: absolute; top: 0; left: 0; z-index: 9999;}
    .header-nav-mo .header-top { width: 100%; padding: 30px 0;}
    .header-nav-mo .header-top .nav-bt-close { width: 60px; font-size: 1.8em; text-align: center; cursor: pointer; position: absolute; top: 30px; right: 0;}
    .header-nav-mo ul.header-nav { clear: both; width: 100%; padding: 40px; margin: 0; box-sizing: border-box; border-top: 1px #ccc solid; list-style: none; display: block;}
    .header-nav-mo ul.header-nav li { width: 100%; padding: 0; margin: 0; border-bottom: 1px #ccc solid; position: relative;}
    .header-nav-mo ul.header-nav li:last-child { border-bottom: 0;}
    .header-nav-mo ul.header-nav li a { width: 100%; padding: 15px 0; color: #414141; font-size: 1.2rem; line-height: 1em; line-height: 2em; text-align: center; text-decoration: none; display: block; cursor: pointer;}
    .header-nav-mo ul.header-nav li a span.en { padding: 0 5px; font-family: "Vogue-B";}
    .header-nav-mo ul.header-nav li a span.cn { padding: 0 5px;}
    .header-nav-mo ul.header-nav li a.sel { border-bottom: 4px #999 solid;}
    .header-nav-mo ul.header-nav li ul.header-nav-popup { width: 100%; padding: 30px 0; margin: 0; background-color: #eee; list-style: none; display: none; box-sizing: border-box;}
    .header-nav-mo ul.header-nav li ul.header-nav-popup li { width: 100%; padding: 0; margin: 0;}
    .header-nav-mo ul.header-nav li ul.header-nav-popup li a { width: 100%; padding: 15px 0; color: #414141; font-size: 1rem; line-height: 1.2em; text-align: center; border: 0; display: block;}


    /**************** section #welcome-banner ****************/

    section#welcome-banner { clear: both; width: 100%; overflow: hidden;}

    .welcome-banner-slider { width: 100%; overflow: hidden;}
    .welcome-banner-slider .slider div { width: 100%; position: relative;}
    .welcome-banner-slider .slider div img { width: 120%; height: auto; position: relative; z-index: 1;}
    .welcome-banner-slider .slider div img.welcome-banner-mo { width: 100%; height: auto; position: relative; z-index: 1;}
    .welcome-banner-slider .slider div img.welcome-banner-pc { display: none;}

    .welcome-banner-slider .slider div .text-bt { width: 260px; position: absolute; bottom: 4vw; left: calc(50% - 130px); z-index: 2;}
    .welcome-banner-slider .slider div .text-bt a { width: 100%; padding: 3px 0; color: #fff; font-size: 1.1em; font-weight: 500; text-align: center; text-decoration: none; background-color: #595757; display: block;}
    .welcome-banner-slider .slider div .text-bt a:hover { background-color: #999;}


    /**************** section #pearson-oenolog ****************/

    section#pearson-oenology { clear: both; width: 100%; padding: 40px 20px; box-sizing: border-box;}

    .pearson-oenology-title { width: 100%; margin: 0 0 40px 0; text-align: center; background-image: url("../images/welcome_week_hot_title_bg_line.png"); background-repeat: repeat-x; background-position: center center;}
    .pearson-oenology-title .title { width: 200px; padding: 0 20px; margin: 0 auto; color: #666; font-size: 1.6em; font-weight: 900; line-height: 1em; letter-spacing: 0.1em; text-align: center; background-color: #fff;}
    .pearson-oenology-title .title span.en { font-size: 1.1rem; font-weight: 600; line-height: 1em; letter-spacing: normal;}

    .pearson-oenology-content { clear: both; width: 100%;}
    .pearson-oenology-content img.logo-prn { width: 70%; height: auto; margin: 100px auto;}
    .pearson-oenology-content .slogan-contact { display: none;}
    .pearson-oenology-content .slogan-contact-mo { clear: both; width: 100%;}
    .pearson-oenology-content .slogan-contact-mo .slogan { clear: both; width: 100%; font-size: 1.1rem; font-weight: 600; letter-spacing: 0.1em; text-align: center;}
    .pearson-oenology-content .slogan-contact-mo hr { clear: both; width: 200px; border: 1px #999 solid; margin: 20px auto;}
    .pearson-oenology-content .slogan-contact-mo .text-con { clear: both; width: 100%; font-size: 1rem; letter-spacing: 0.1em; line-height: 1.6em; text-align: center;}
    .pearson-oenology-content .slogan-contact-mo .text-con span.red-arrow { color: #ff0000; font-size: 1.2rem; line-height: 3em;}
    .pearson-oenology-content .slogan-contact-mo .contact-bt { clear: both; width: 160px; margin: 60px auto 0 auto;}
    .pearson-oenology-content .slogan-contact-mo .contact-bt a { width: 100%; padding: 15px 0; color: #fff; font-size: 1.1em; line-height: 1em; text-align: center; text-decoration: none; background-color: #414141; border-radius: 6px; display: block;}
    .pearson-oenology-content .slogan-contact-mo .contact-bt a:hover { background-color: #666;}


    /**************** section #welcome-week-hot ****************/

    section#welcome-week-hot { clear: both; width: 100%; padding: 40px 20px; box-sizing: border-box;}

    .welcome-week-hot-title { width: 100%; text-align: center; background-image: url("../images/welcome_week_hot_title_bg_line.png"); background-repeat: repeat-x; background-position: center center;}
    .welcome-week-hot-title .title { width: 220px; padding: 0 20px; margin: 0 auto; color: #666; font-size: 1.6em; font-weight: 900; line-height: 1em; letter-spacing: 0.1em; text-align: center; background-color: #fff;}
    .welcome-week-hot-title .title span.en { font-size: 1.1rem; font-weight: 600; line-height: 1em; letter-spacing: normal;}

    .welcome-week-hot-sub-arrow { clear: both; width: 100%; padding: 10px 0; font-size: 1.2em; text-align: center;}

    .welcome-week-hot-sub-title { clear: both; width: 100%; margin: 0 0 10px 0; color: #666; text-align: center;}
    .welcome-week-hot-sub-title span.en { font-size: 1.4rem; font-weight: 600; line-height: 1em;}
    .welcome-week-hot-sub-title span.cn { font-size: 1.1rem; font-weight: 600; line-height: 1em; letter-spacing: 0.1em;}

    .welcome-week-hot-more { clear: both; width: 100%; margin: 30px 0; font-size: 1em; text-align: center;}
    .welcome-week-hot-more a { color: #0161ba; text-decoration: none;}
    .welcome-week-hot-more a:hover { border-bottom: 1px #0161ba dashed;}

    .welcome-week-hot-list { clear: both; width: 100%; margin: 40px 0;}
    .welcome-week-hot-list .case-column { width: 100%; margin: 0 0 30px 0;}
    .welcome-week-hot-list .case-column a { width: 100%; text-decoration: none; display: block;}
    .welcome-week-hot-list .case-column a .photo { width: 100%; border-radius: 10px; overflow: hidden;}
    .welcome-week-hot-list .case-column a .photo img { width: 100%; height: auto;}
    .welcome-week-hot-list .case-column a .title { width: 100%; padding: 10px 5px; color: #414141; font-size: 1rem; font-weight: 600; line-height: 1.2em; border-bottom: 1px #ccc solid; box-sizing: border-box;}
    .welcome-week-hot-list .case-column a .intro { width: 100%; padding: 10px 5px; color: #414141; font-size: 0.8rem; line-height: 1.2em; box-sizing: border-box;}
    .welcome-week-hot-list .case-column .social { width: 100%; padding: 10px 5px 0 5px; color: #6e6e6e; font-size: 1rem; line-height: 1em; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
    .welcome-week-hot-list .case-column .social input { width: 180px; padding: 3px; margin: 0 5px 0 0; color: #aaa; font-size: 1rem; border: 1px #aaa solid; box-sizing: border-box;}
    .welcome-week-hot-list .case-column .social button { color: #0161ba; font-size: 1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border-radius: 4px; border: 1px #0161ba solid; background-color: #fff; cursor: pointer; box-sizing: border-box;}


    /**************** section #winemaker-contact ****************/

    section#winemaker-contact { clear: both; width: 100%; padding: 0 20px 80px 20px; box-sizing: border-box;}

    .winemaker-contact-title { width: 100%; text-align: center; background-image: url("../images/welcome_week_hot_title_bg_line.png"); background-repeat: repeat-x; background-position: center center;}
    .winemaker-contact-title .title { width: 180px; padding: 0 20px; margin: 0 auto; color: #666; font-size: 1.6em; font-weight: 900; line-height: 1em; letter-spacing: 0.1em; text-align: center; background-color: #fff;}
    .winemaker-contact-title .title span.en { font-size: 1.1rem; font-weight: 600; line-height: 1em; letter-spacing: normal;}

    .winemaker-contact-sub-arrow { clear: both; width: 100%; padding: 10px 0; font-size: 1.2em; text-align: center;}

    .winemaker-contact-column-full { clear: both; width: 100%; margin: 40px 0 0 0;}
    .winemaker-contact-column-full .column-1-con { width: 100%; margin: 0 0 40px 0;}
    .winemaker-contact-column-full .column-1-con .logo { width: 100%; margin: 0 0 30px 0;}
    .winemaker-contact-column-full .column-1-con .logo img { max-width: 90%; width: 360px; height: auto; margin: 0 auto;}
    .winemaker-contact-column-full .column-1-con .text { width: 100%; font-size: 1.4em; line-height: 1em; text-align: center; margin: 0 0 20px 0;}
    .winemaker-contact-column-full .column-1-con .qrcode { clear: both; width: 100%; margin: 0 auto 10px auto;}
    .winemaker-contact-column-full .column-1-con .qrcode img { max-width: 80%; width: 260px; height: auto; margin: 0 auto;}
    .winemaker-contact-column-full .column-1-con .line-me { clear: both; width: 100%; margin: 0 auto;}
    .winemaker-contact-column-full .column-1-con .line-me img { margin: 0 auto;}
    .winemaker-contact-column-full .column-2-con { width: 100%;}
    .winemaker-contact-column-full .column-2-con input[type=text] { width: 100%; padding: 10px 0; margin: 0 0 20px 0; color: #414141; font-size: 1.1em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border-top: 0; border-left: 0; border-right: 0; border-bottom: 1px #414141 solid; background-color: #fff; box-sizing: border-box;}
    .winemaker-contact-column-full .column-2-con select { width: 180px; padding: 10px 0; margin: 0 0 20px 0; color: #414141; font-size: 1.1em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border-top: 0; border-left: 0; border-right: 0; border-bottom: 1px #414141 solid; background-color: #fff; box-sizing: border-box;}
    .winemaker-contact-column-full .column-2-con input[type=date] { width: 180px; padding: 10px 0; margin: 0 0 20px 0; color: #414141; font-size: 1.1em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border-top: 0; border-left: 0; border-right: 0; border-bottom: 1px #414141 solid; background-color: #fff; box-sizing: border-box;}
    .winemaker-contact-column-full .column-2-con textarea { width: 100%; height: 200px; padding: 10px; margin: 10px 0 0 0; color: #414141; font-size: 1.1em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #414141 solid; background-color: #fff; box-sizing: border-box;}
    .winemaker-contact-column-full .column-2-con input[type=button] { clear: both; width: 140px; padding: 5px 0; margin: 40px 0 0 0; color: #fff; font-size: 1.1em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #414141; cursor: pointer;}


    /**************** section #page-no8project-case ****************/

    section#page-no8project-case { clear: both; width: 100%; padding: 60px 20px 80px 20px; box-sizing: border-box;}

    .page-case-content { clear: both; width: 100%;}
    .page-case-content .sub-topic { width: 100%; font-size: 1.4em; font-weight: 600; line-height: 1.6em; text-align: center;}
    .page-case-content .text-content { width: 100%; padding: 40px 0 0 0; font-size: 1.1rem; line-height: 1.8em;}
    .page-case-content .text-content .title { width: 100%; padding: 0 0 10px 0;}
    .page-case-content .text-content .title span { padding: 5px 10px; color: #fff; font-size: 1.2rem; font-weight: 500; background-color: #888;}
    .page-case-content .text-content img.photo-pic { clear: both; width: 100%; height: auto; margin: 20px auto;}
    .page-case-content .text-content img.photo-pic2 { clear: both; width: 100%; height: auto; margin: 20px auto;}
    .page-case-content .text-content .photo-text { clear: both; width: 100%; margin: 0 auto; font-size: 1rem; line-height: 1.2em; text-align: center;}
    .page-case-content .text-content ul.text { clear: both; width: 100%; padding: 0 0 0 24px; margin: 0; box-sizing: border-box; display: block;}
    .page-case-content .text-content ul.text li { padding: 0; margin: 0;}

    ul.page-case-hashtag { clear: both; width: 100%; padding: 80px 0 0 0; margin: 0 auto; list-style: none; display: flex; justify-content: center; flex-wrap: wrap;}
    ul.page-case-hashtag li { padding: 3px 10px; margin: 5px; color: #888; font-size: 0.9rem; font-weight: 500; line-height: 1.2em; border: 1px #888 solid; border-radius: 12px;}
    ul.page-case-hashtag li:hover { border: 1px #000 solid; background-color: #eee;}

    .page-case-others { clear: both; width: 100%; padding: 30px 0 0 0; margin: 80px 0 0 0; border-top: 1px #ccc solid;}
    .page-case-others .case-list { width: 100%; margin: 20px 0 0 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    .page-case-others .case-list .case-box { width: calc(100% / 2 - 30px); margin: 0 15px 20px 15px;}
    .page-case-others .case-list .case-box a { color: #414141; text-decoration: none;}
    .page-case-others .case-list .case-box .photo { width: 100%;}
    .page-case-others .case-list .case-box .photo img { width: 100%; height: auto;}
    .page-case-others .case-list .case-box .title { width: 100%; padding: 10px 0 0 0; font-size: 0.9rem; font-weight: 500; line-height: 1.2em;}

    .page-case-video-box { clear: both; width: 100%; margin: 0 auto 40px auto;}

    .page-case-photos-slider { clear: both; width: 100%; margin: 0 auto;}
    .page-case-photos-slider img.photo { width: 100%; height: auto;}

    .page-case-share-bt { clear: both; width: 180px; margin: 60px auto 0 auto;}
    .page-case-share-bt a { width: 100%; padding: 10px 0; color: #fff; font-size: 0.9rem; line-height: 1em; text-align: center; text-decoration: none; border-radius: 6px; background-color: #0161ba; display: block;}
    .page-case-share-bt a:hover { background-color: #003b72;}


    /**************** section #page-thankyou ****************/

    section#page-thankyou { clear: both; width: 100%; padding: 150px 20px; box-sizing: border-box; text-align: center;}

    .page-thankyou-con { width: 100%; margin: 0 0 80px 0; font-size: 2rem; font-weight: 300; line-height: 2em;}

    button.goback-bt { clear: both; width: 140px; padding: 13px 0; margin: 0 auto; color: #fff; font-size: 1rem; line-height: 1em; text-align: center; border: 0; border-radius: 16px; background-color: #666; cursor: pointer;}
    
    
    /**************** footer ****************/
    
    footer { clear: both; width: 100%; padding: 40px 20px; background-color: #6e6e6e; box-sizing: border-box;}

    .footer-column-1 { width: 100%; margin: 0 0 40px 0;}
    .footer-column-1 .logo-box { width: 100%;}
    .footer-column-1 .logo-box img { max-width: 70%; width: 360px; height: auto;}
    .footer-column-1 .text { clear: both; width: 100%; margin: 20px auto; color: #fff; font-size: 0.9rem; font-weight: 300; line-height: 2em; letter-spacing: 0.1em;}
    .footer-column-1 .social-icon { clear: both; width: 100%; margin: 0 auto; font-size: 2.2em;}
    .footer-column-1 .social-icon a { color: #fff; text-decoration: none;}
    .footer-column-2-0 { width: 100%; margin: 0 0 60px; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
    .footer-column-2-0 .footer-column-2 { width: 100%; color: #fff; font-size: 0.9rem; font-weight: 300; line-height: 2em; letter-spacing: 0.1em; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
    .footer-column-2-0 .footer-column-2 .caption { width: 90px; margin: 0 0 30px 0; font-size: 1.1rem; font-weight: 600; border-right: 1px #fff solid; box-sizing: border-box;}
    .footer-column-2-0 .footer-column-2 .column { width: calc(100% - 90px); padding: 2px 0 0 15px; margin: 0 0 30px 0; box-sizing: border-box;}
    .footer-column-2-0 .footer-column-2 .column span.title { padding: 7px 0 10px 0; font-size: 1.1rem; font-weight: 600; line-height: 1.2rem;}
    .footer-column-2-0 .footer-column-2 .column span.title span.en { font-family: "Vogue-B"; font-size: 1.1rem; font-weight: 600; line-height: 1.2rem;}
    .footer-column-2-0 .footer-column-2 .column a { color: #fff; text-decoration: none;}
    .footer-column-2-0 .footer-column-2 .column a:hover { border-bottom: 1px #fff solid;}

    .footer-column-2-0 .footer-column-3 { width: 100%; padding: 40px 0 0 0; color: #fff; font-size: 0.9rem; font-weight: 300; line-height: 1.6em; letter-spacing: 0.1em; box-sizing: border-box;}

    .footer-copyright { width: 100%; margin: 40px 0 20px 0; color: #fff; font-size: 0.9rem; line-height: 1.2em; text-align: right;}
    .footer-copyright span.en { font-family: "Vogue-B";}

    .footer-infor-full { clear: both; width: 100%; padding: 40px 0 0 0; border-top: 3px #fff solid;}
    .footer-infor-full a { color: #fff; text-decoration: none; border-bottom: 1px #fff dashed;}
    .footer-infor-full .footer-logo { width: 100%; margin: 0 0 20px 0;}
    .footer-infor-full .footer-logo img { width: 240px; height: auto;}
    .footer-infor-full .footer-address { display: none;}
    .footer-infor-full .footer-address-mo { width: 100%; color: #fff; font-size: 0.9rem; line-height: 1.6em; letter-spacing: 0.1em;}
        
    
}