@charset "UTF-8";
/* CSS Document */

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

body { padding:0; margin:0 auto; color: #414141; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; font-weight: 300; background-color: #ffffff; display: block; position: relative;}
img { border:0;}

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; display: block;}

div#content { clear: both; width: 100%; padding: 0;}

#gotocenter:focus { color: #fff;}

#breadcrumbs-box { clear: both; width: 90%; margin: 0 auto 40px auto; text-align: center;}
#breadcrumbs-box a { color: #414141; text-decoration: none;}
#breadcrumbs-box a:hover { text-decoration: underline;}

#AN[accesskey] { line-height: 2rem; margin-top: 0.313rem;}
#AN:focus { border: 1px #fff solid; box-sizing: border-box;}
#AT[accesskey] { line-height: 2rem; margin-top: 0.313rem;}
#AT:focus { border: 1px #000 solid; box-sizing: border-box; background-color: #ddf7fb;}
#AB[accesskey] { line-height: 2rem; margin-top: 0.313rem;}
#AB:focus { border: 1px #ff0000 solid; box-sizing: border-box;}
#AM[accesskey] { line-height: 2rem; margin-top: 0.313rem;}
#AM:focus { border: 1px #000 solid; box-sizing: border-box;}
#AP[accesskey] { line-height: 2rem; margin-top: 0.313rem;}
#AP:focus { border: 2px #000 solid;}


@media screen and (min-width: 1360px) {
    
    
    /******** top nav ********/
    
    .top-nav-full { width: 100%; padding: 10px; box-sizing: border-box; color: #FDF9C5; font-size: 0.9em; background-color: #353229;}
    .top-nav-full ul { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-end; align-items: center; float: right;}
    .top-nav-full ul li { padding: 0; margin: 0 0 0 20px;}
    .top-nav-full ul li a { color: #FDF9C5; text-decoration: none;}
    .top-nav-full ul li a:hover { color: #FDF9C5;}
    
    .top-nav-full .web-title { width: 50%; line-height: 1em; float: left;}
    
    
    /******** header ********/
    
    header { clear: both; width: 100%; height: 9vw; padding: 0 40px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start;}
    
    header .logo-bx { width: 13vw; margin: 1.2vw 0 0 0;}
    header .logo-bx img { width: 100%; height: auto;}
    
    header nav#mo { display: none;}
    
    header nav#pc { width: calc(100% - 13vw - 8vw);}
    
    header nav#pc ul#sub { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-end; align-items: stretch;}
    header nav#pc ul#sub li { padding: 0; margin: 0; color: #7F7F7F;}
    header nav#pc ul#sub li a { padding: 2.3vw 1vw 10px 1vw; margin: 0 2.4vw; color: #7F7F7F; text-decoration: none; background-color: #fff; display: block;}
    header nav#pc ul#sub li a .menu-b { margin: 0 0 10px 0; font-size: 1.4vw; text-align: center; display: block;}
    header nav#pc ul#sub li a .menu-s { font-size: 1vw; line-height: 1em; text-align: center; display: block;}    
    header nav#pc ul#sub li a:hover { color: #fff; background-color: #9E8935;}
    header nav#pc ul#sub li a.sel { color: #fff; background-color: #9E8935;}
    header nav#pc ul#sub li.line { padding: 0 0 10px 0; display: flex; align-items: flex-end;}
    
    header .lang-bx { width: 8vw; margin: 3.4vw 0 0 0; cursor: pointer; position: relative;}
    header .lang-bx img { width: 100%; height: auto;}
    header .lang-bx .lang-nav-box { width: 8vw; position: absolute; top: 2vw; left: 0; z-index: 999; display: none;}
    header .lang-bx .lang-nav-box .tri1 { width: 0px; height: 0px; padding: 0; margin: 0 auto; border-style: solid; border-width: 0px 10px 15px 10px; border-color: transparent transparent #353229 transparent;}
    header .lang-bx .lang-nav-box ul.lang-nav { clear: both; width: 100%; padding: 0; margin: 0; border: 1px #353229 solid; list-style: none; display: block;}
    header .lang-bx .lang-nav-box ul.lang-nav li { width: 100%; padding: 0; margin: 0;}
    header .lang-bx .lang-nav-box ul.lang-nav li a { width: 100%; padding: 0.4vw; color: #414141; font-size: 1vw; text-align: center; background-color: #fff; text-decoration: none; box-sizing: border-box; display: block;}
    header .lang-bx .lang-nav-box ul.lang-nav li a:hover { background-color: #eee;}
    header .lang-bx .lang-nav-box ul.lang-nav li a.sel { color: #fff; background-color: #353229;}
    
    
    /******** section main ********/
    
    section#hp-main { clear: both; width: 100%; padding: 40px; background-color: #fff; box-sizing: border-box; position: relative;}
    
    section#hp-main img.hp-main-pic { width: 62vw; height: auto;}
    
    section#hp-main .hp-about-content { width: 38vw; position: absolute; top: 5vw; right: 60px;}
    section#hp-main .hp-about-content img.title { width: 100%; height: auto;}
    section#hp-main .hp-about-content .text-bx { clear: both; width: 22vw; padding: 0 0 0 1vw; margin: 60px auto 0 auto; font-size: 1.1em; line-height: 1.8em; box-sizing: border-box;}
        
    section#hp-main .hp-about-more-bt { width: 13.5vw; position: absolute; bottom: calc(40px + 1.7vw); left: calc(40px + 47vw);}
    section#hp-main .hp-about-more-bt a { width: 100%; padding: 5px 0; color: #414141; font-size: 0.8em; letter-spacing: 0.2em; text-align: center; text-decoration: none; border: 1px #414141 solid; background-color: #fff; box-sizing: border-box; display: block;}
    section#hp-main .hp-about-more-bt a:hover { background-color: #eee;}

    section#hp-advocacy { clear: both; width: 100%; padding: 4vw calc(50% - 600px); box-sizing: border-box;}
    section#hp-advocacy .title-box { width: 100%; margin: 0 0 20px 0; color: #9E8935; text-align: center;}
    section#hp-advocacy .title-box h1 { font-size: 1.6em; font-weight: 500; line-height: 0.5em; letter-spacing: 0.1em;}
    section#hp-advocacy .title-box h2 { font-size: 1.1em; line-height: 1em; letter-spacing: 0.1em;}
    section#hp-advocacy .title-box .underline { clear: both; width: 40px; margin: 10px auto 0 auto; border-top: 1px #9E8935 solid;}
    section#hp-advocacy .adv-list { clear: both; width: 80%; padding: 0.5vw 2vw; margin: 0 auto 1vw auto; border-radius: 2vw; border: 1px #ccc solid; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
    section#hp-advocacy .adv-list .icon { width: 2.5vw; color: #9E8935; font-size: 1.5vw;}
    section#hp-advocacy .adv-list .text { width: calc(100% - 2vw); font-size: 1vw;}
    section#hp-advocacy .adv-list .text a { color: #414141; text-decoration: none;}
    section#hp-advocacy .adv-list .text a:hover { color: #9E8935;}
    
    
    /******** section about ********/
    
    section#hp-about { clear: both; width: 100%; padding: 8vw; margin: 0 0 20px 0; background-color: #9E8935; box-sizing: border-box; position: relative; overflow: hidden; z-index: 9;}
    
    section#hp-about img.hp-about-logo { width: 40vw; height: auto; opacity: 0.1; filter: alpha(opacity=10); position: absolute; top: 6vw; right: 6vw;}
    
    section#hp-about img.hp-about-logo-mo { display: none;}
    
    section#hp-about .info-bx { width: 260px; box-sizing: border-box; float: left;}
    section#hp-about .info-bx .icon-box { width: 100%; margin: 0 0 20px 0; text-align: center;}
    section#hp-about .info-bx .icon-box img { width: 40px; height: auto;}
    section#hp-about .info-bx .title-box { width: 100%; margin: 0 0 10px 0; color: #fff; text-align: center;}
    section#hp-about .info-bx .title-box h1 { font-size: 1.6em; font-weight: 500; line-height: 0.5em; letter-spacing: 0.1em;}
    section#hp-about .info-bx .title-box h2 { font-size: 1.1em; line-height: 1em; letter-spacing: 0.1em;}
    section#hp-about .info-bx .underline { clear: both; width: 40px; margin: 0 auto; border-top: 1px #fff solid;}
    section#hp-about .info-bx .about-more-bt { clear: both; width: 180px; margin: 0 auto; font-size: 0.8em; letter-spacing: 0.1em; text-align: center;}
    section#hp-about .info-bx .about-more-bt a { width: 100%; padding: 5px 0; color: #fff; text-decoration: none; border: 1px #fff solid; display: block;}
    section#hp-about .info-bx .about-more-bt a:hover { color: #414141; border: 1px #414141 solid; background-color: #eee;}
    
    section#hp-about .info-text-bx { width: calc(100% - 260px); color: #fff; font-size: 1.1em; line-height: 1.8em; float: left;}
    section#hp-about .info-text-bx .title { width: 100%; margin: 0 0 30px 0; color: #414141; font-size: 1.2em; font-weight: 500;}
    
    /*section#hp-about .photos-list-box { clear: both; width: 100%; margin: 40px 0 0 0;}
    section#hp-about .photos-list-box .banner-bx { width: 100%; height: 20vw; overflow: hidden;}
    section#hp-about .photos-list-box .banner-bx-mo { display: none;}*/
    
    section#hp-about .about-photos-list { clear: both; width: 1200px; margin: 60px auto 0 auto; overflow: hidden;}
    section#hp-about .about-photos-list ul#about-photos { height: 270px; padding: 0; margin: 0; list-style: none; display: block; overflow: hidden;}
    section#hp-about .about-photos-list ul#about-photos li { width: 380px; padding: 0; margin: 10px; float: left;}
    section#hp-about .about-photos-list ul#about-photos li img { width: 100%; height: auto; -moz-box-shadow:4px 4px 8px -2px rgba(20%,20%,40%,0.6); -webkit-box-shadow:4px 4px 8px -2px rgba(20%,20%,40%,0.6); box-shadow:4px 4px 8px -2px rgba(20%,20%,40%,0.6);}
    section#hp-about .about-photos-list .photos-list-bt { clear: both; width: 100%; display: flex; justify-content: center; align-items: center;}
    section#hp-about .about-photos-list .photos-list-bt .arrow-prev, section#hp-about .about-photos-list .photos-list-bt .arrow-next { width: 30px; margin: 0 20px; color: #fff; font-size: 2em; text-align: center; cursor: pointer;}
    
    
    /******** section places ********/
    
    section#hp-places { clear: both; width: 100%; padding: 8vw; box-sizing: border-box; position: relative; overflow: hidden;}
    
    section#hp-places img.hp-places-title { width: 30vw; height: auto; position: absolute; top: 2vw; left: 2vw; z-index: 1;}
    section#hp-places img.hp-places-title2 { width: 15vw; height: auto; position: absolute; bottom: 2vw; right: 8vw; z-index: 1;}
    
    section#hp-places .info-bx { width: 80%; margin: 0 auto 30px auto; box-sizing: border-box;}
    section#hp-places .info-bx .icon-box { display: none;}
    section#hp-places .info-bx .title-box { width: 100%; margin: 0 0 10px 0; color: #9E8935; text-align: center;}
    section#hp-places .info-bx .title-box h1 { font-size: 1.6em; font-weight: 500; line-height: 0.5em; letter-spacing: 0.1em;}
    section#hp-places .info-bx .title-box h2 { font-size: 1.1em; line-height: 1em; letter-spacing: 0.1em;}
    section#hp-places .info-bx .underline { clear: both; width: 40px; margin: 0 auto; border-top: 1px #9E8935 solid;}
    
    section#hp-places .places-column-x4 { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; position: relative; z-index: 9;}
    section#hp-places .places-column-x4 .column-bx { width: 25%; padding: 0 40px; box-sizing: border-box;}
    section#hp-places .places-column-x4 .column-bx.low { padding: 6vw 0 0 0;}
    section#hp-places .places-column-x4 .column-bx .icon-bx { width: 100%; text-align: center;}
    section#hp-places .places-column-x4 .column-bx .icon-bx img { width: auto; height: 80px;}
    section#hp-places .places-column-x4 .column-bx .title-bx { width: 100%; margin: 10px 0; font-size: 1.6em; font-weight: 500; letter-spacing: 0.2em; text-align: center;}
    section#hp-places .places-column-x4 .column-bx .list-bx { clear: both; width: 240px; padding: 0 20px; margin: 0 auto; font-size: 1.1em; line-height: 1.6em; box-sizing: border-box;}
    section#hp-places .places-column-x4 .column-bx .list-bx .number { clear: both; width: 60px; float: left;}
    section#hp-places .places-column-x4 .column-bx .list-bx .name { width: calc(100% - 60px); float: left;}
    section#hp-places .places-column-x4 .column-bx .list-bx .name a { color: #414141; text-decoration: none;}
    section#hp-places .places-column-x4 .column-bx .list-bx .name a:hover { color: #9E8935;}
    section#hp-places .places-column-x4 .column-bx .list-bx.color-1 { border-left: 6px #A7514E solid;}
    section#hp-places .places-column-x4 .column-bx .list-bx.color-2 { border-left: 6px #DF944D solid;}
    section#hp-places .places-column-x4 .column-bx .list-bx.color-3 { border-left: 6px #A2B960 solid;}
    section#hp-places .places-column-x4 .column-bx .list-bx.color-4 { border-left: 6px #78649E solid;}
    
    
    /******** section stall info ********/
    
    section#hp-stall { clear: both; width: 100%; padding: 4vw 8vw 8vw 8vw; box-sizing: border-box; position: relative; overflow: hidden;}
    
    section#hp-stall img.hp-stall-title { width: 15vw; height: auto; position: absolute; bottom: 2vw; right: 8vw; z-index: 1;}
    
    section#hp-stall .hp-stall-info { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; position: relative; z-index: 9;}
    section#hp-stall .hp-stall-info .line-v { width: 10px; height: 180px; display: block;}
    section#hp-stall .hp-stall-info .line-v.color-1 { background-color: #A7514E;}
    section#hp-stall .hp-stall-info .line-v.color-2 { background-color: #DF944D;}
    section#hp-stall .hp-stall-info .line-v.color-3 { background-color: #A2B960;}
    section#hp-stall .hp-stall-info .line-v.color-4 { background-color: #78649E;}
    section#hp-stall .hp-stall-info .info-content-box { width: calc(30% - 10px); padding: 0 20px; box-sizing: border-box;}
    section#hp-stall .hp-stall-info .info-content-box .title-bar { width: 100%; margin: 0 0 30px 0; display: flex; justify-content: flex-start; align-items: center; position: relative;}
    section#hp-stall .hp-stall-info .info-content-box .title-bar .title { width: calc(100% - 3.2vw - 20px);}
    section#hp-stall .hp-stall-info .info-content-box .title-bar .title h1 { padding: 0.5vw 0; margin: 0; font-size: 1.8vw; font-weight: 500; line-height: 1em; letter-spacing: 0.1em;}
    section#hp-stall .hp-stall-info .info-content-box .title-bar .icons { width: calc(3.2vw + 20px); display: flex; justify-content: flex-end; align-items: center;}
    section#hp-stall .hp-stall-info .info-content-box .title-bar .icons img { width: 1.6vw; height: auto; margin: 0 0 0 10px; cursor: pointer;}
    section#hp-stall .hp-stall-info .info-content-box .title-bar .icons img.img-sel { display: none;}
    section#hp-stall .hp-stall-info .info-content-box .title-bar .icons .social-box { width: 9vw; padding: 0.5vw 0; text-align: center; border: 1px #ccc solid; border-radius: 10px; background-color: #353229; box-sizing: border-box; display: none; justify-content: center; align-items: center; position: absolute; top: 3vw; right: 0;}
    section#hp-stall .hp-stall-info .info-content-box .title-bar .icons .social-box img.fb { width: 0.6vw; height: auto; margin: 0 0.5vw;}
    section#hp-stall .hp-stall-info .info-content-box .title-bar .icons .social-box img.line { width: 1.6vw; height: auto; margin: 0 0.5vw;}
    section#hp-stall .hp-stall-info .info-content-box .title-bar .icons .social-box img.copy { width: 1.6vw; height: auto; margin: 0 0.5vw;}
    section#hp-stall .hp-stall-info .info-content-box .text-content { clear: both; width: 100%; font-size: 1.1vw; line-height: 1.6em;}
    section#hp-stall .hp-stall-info .info-content-box .contact-info { clear: both; width: 100%; padding: 30px 0; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
    section#hp-stall .hp-stall-info .info-content-box .contact-info .title { width: 5.5vw; padding: 3px; margin: 0 0 5px 0; font-size: 1.1vw; text-align: center; color: #353229; border-radius: 1vw; background-color: #FDF9C5; box-sizing: border-box;}
    section#hp-stall .hp-stall-info .info-content-box .contact-info .info { width: calc(100% - 5.5vw); padding: 3px; margin: 0 0 5px 0; font-size: 1.1vw; word-break: break-all; box-sizing: border-box;}
    section#hp-stall .hp-stall-info .info-content-box .contact-info .info a { color: #414141; text-decoration: none;}
    section#hp-stall .hp-stall-info .info-content-box .contact-info .info a:hover { text-decoration: underline;}
    section#hp-stall .hp-stall-info .info-content-box .payment-info { clear: both; width: 100%; margin: 30px 0 0 0; color: #666; font-size: 1.1vw; display: flex; justify-content: flex-end; align-items: center;}
    section#hp-stall .hp-stall-info .info-content-box .payment-info img.icon { width: 1.6vw; height: auto; margin: 0 10px 0 20px;}
    section#hp-stall .hp-stall-info .photos-box { width: 70%; display: flex; justify-content: flex-start; flex-wrap: wrap;}
    section#hp-stall .hp-stall-info .photos-box .title-bar { width: 100%; padding: 0 10px; margin: 0 0 30px 0; display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box;}
    section#hp-stall .hp-stall-info .photos-box .title-bar .title { width: 10vw; font-size: 2vw; font-weight: 500; letter-spacing: 0.1em;}
    section#hp-stall .hp-stall-info .photos-box .title-bar .underline-color-1 { width: calc(100% - 10vw); border-bottom: 10px #A7514E solid;}
    section#hp-stall .hp-stall-info .photos-box .title-bar .underline-color-2 { width: calc(100% - 10vw); border-bottom: 10px #DF944D solid;}
    section#hp-stall .hp-stall-info .photos-box .title-bar .underline-color-3 { width: calc(100% - 10vw); border-bottom: 10px #A2B960 solid;}
    section#hp-stall .hp-stall-info .photos-box .title-bar .underline-color-4 { width: calc(100% - 10vw); border-bottom: 10px #78649E solid;}
    section#hp-stall .hp-stall-info .photos-box .photo-info { width: calc(100% / 3 - 20px); margin: 10px;}
    section#hp-stall .hp-stall-info .photos-box .photo-info .photo { width: 100%; height: 12vw; overflow: hidden;}
    section#hp-stall .hp-stall-info .photos-box .photo-info .photo img { width: 100%; height: auto;}
    section#hp-stall .hp-stall-info .photos-box .photo-info .infor { width: 100%; font-size: 0.9vw;}
    section#hp-stall .hp-stall-info .photos-box-mo { display: none;}
    
    
    /******** section news ********/
    
    section#hp-news { clear: both; width: 100%; padding: 8vw 0; background-color: #f3f3f3; box-sizing: border-box; position: relative; overflow: hidden;}
    
    section#hp-news img.hp-news-title { width: 15vw; height: auto; position: absolute; bottom: 2vw; right: 8vw; z-index: 1;}
    section#hp-news img.hp-news-title-mo { display: none;}
    
    section#hp-news img.page-news-title { width: 40vw; height: auto; opacity: 0.2; filter: alpha(opacity=20); position: absolute; top: 6vw; right: 6vw;}
    
    section#hp-news .title-box { width: 100%; margin: 0 0 20px 0; color: #9E8935; text-align: center;}
    section#hp-news .title-box h1 { font-size: 1.6em; font-weight: 500; line-height: 0.5em; letter-spacing: 0.1em;}
    section#hp-news .title-box h2 { font-size: 1.1em; line-height: 1em; letter-spacing: 0.1em;}
    section#hp-news .title-box .underline { clear: both; width: 40px; margin: 10px auto 0 auto; border-top: 1px #9E8935 solid;}
    
    section#hp-news .hp-news-list-box { clear: both; width: 1200px; margin: 0 auto; overflow: hidden; position: relative; z-index: 9;}
    section#hp-news .hp-news-list-box ul.hp-news-list { height: 550px; padding: 0; margin: 0; list-style: none; display: block; overflow: hidden;}
    section#hp-news .hp-news-list-box ul.hp-news-list li { width: 360px; padding: 0; margin: 20px; float: left;}
    section#hp-news .hp-news-list-box ul.hp-news-list li .news-box { width: 100%; padding: 20px; background-color: #fff; -moz-box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5); box-sizing: border-box;}
    section#hp-news .hp-news-list-box ul.hp-news-list li .news-box .photo { width: 100%; height: 220px; margin: 0 0 20px 0; overflow: hidden;}
    section#hp-news .hp-news-list-box ul.hp-news-list li .news-box .photo img { width: 100%; height: auto;}
    section#hp-news .hp-news-list-box ul.hp-news-list li .news-box .date { width: 100%; color: #666; font-size: 0.9em; letter-spacing: 0.1em;}
    section#hp-news .hp-news-list-box ul.hp-news-list li .news-box .title { width: 100%; margin: 30px 0; color: #3E7E00; font-size: 1.1em; font-weight: 500; letter-spacing: 0.1em;}
    section#hp-news .hp-news-list-box ul.hp-news-list li .news-box .text { width: 100%; margin: 0 0 30px 0; color: #666; font-size: 0.9em;}
    section#hp-news .hp-news-list-box ul.hp-news-list li .news-box .more { width: 100%;}
    section#hp-news .hp-news-list-box ul.hp-news-list li .news-box .more a { color: #B3252F; font-weight: 400; text-decoration: underline;}
    section#hp-news .hp-news-list-box ul.hp-news-list li .news-box .more a:hover { color: #9E8935;}
    
    section#hp-news .news-list-box { clear: both; width: 1200px; margin: 0 auto; position: relative; z-index: 9;}
    section#hp-news .news-list-box ul.news-list { padding: 0; margin: 0; list-style: none; display: block; overflow: hidden;}
    section#hp-news .news-list-box ul.news-list li { width: 360px; padding: 0; margin: 20px; float: left;}
    section#hp-news .news-list-box ul.news-list li .news-box { width: 100%; padding: 20px; background-color: #fff; -moz-box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5); box-sizing: border-box;}
    section#hp-news .news-list-box ul.news-list li .news-box .photo { width: 100%; height: 220px; margin: 0 0 20px 0; overflow: hidden;}
    section#hp-news .news-list-box ul.news-list li .news-box .photo img { width: 100%; height: auto;}
    section#hp-news .news-list-box ul.news-list li .news-box .date { width: 100%; color: #666; font-size: 0.9em; letter-spacing: 0.1em;}
    section#hp-news .news-list-box ul.news-list li .news-box .title { width: 100%; margin: 30px 0; color: #3E7E00; font-size: 1.1em; font-weight: 500; letter-spacing: 0.1em;}
    section#hp-news .news-list-box ul.news-list li .news-box .text { width: 100%; margin: 0 0 30px 0; color: #666; font-size: 0.9em;}
    section#hp-news .news-list-box ul.news-list li .news-box .more { width: 100%;}
    section#hp-news .news-list-box ul.news-list li .news-box .more a { color: #B3252F; font-weight: 400; text-decoration: underline;}
    section#hp-news .news-list-box ul.news-list li .news-box .more a:hover { color: #9E8935;}
    
    section#hp-news .hp-news-more-bt { clear: both; width: 13.5vw; margin: 40px auto 0 auto;}
    section#hp-news .hp-news-more-bt a { width: 100%; padding: 5px 0; color: #414141; font-size: 0.8em; letter-spacing: 0.2em; text-align: center; text-decoration: none; border: 1px #414141 solid; background-color: #fff; box-sizing: border-box; display: block;}
    section#hp-news .hp-news-more-bt a:hover { background-color: #eee;}
    
    section#hp-news .news-content-box { clear: both; width: 1000px; margin: 0 auto; position: relative; z-index: 9;}
    section#hp-news .news-content-box .title { width: 100%; color: #3E7E00; font-size: 1.3em; font-weight: 600;}
    section#hp-news .news-content-box .date { width: 100%; padding: 10px 0; font-size: 0.9em; font-weight: 500; text-align: right; border-bottom: 2px #ccc solid;}
    section#hp-news .news-content-box .content { clear: both; width: 100%; padding: 40px; font-size: 1.1em; line-height: 1.8em; box-sizing: border-box;}
    section#hp-news .news-content-box .content img { max-width: 100%; height: auto;}
    
    section#hp-news .goback-bt { clear: both; width: 180px; margin: 0 auto; font-size: 0.8em; letter-spacing: 0.1em; text-align: center;}
    section#hp-news .goback-bt a { width: 100%; padding: 5px 0; color: #414141; text-decoration: none; border: 1px #414141 solid; display: block;}
    section#hp-news .goback-bt a:hover { color: #999; border: 1px #999 solid; background-color: #eee;}
    
    
    /******** section contact ********/
    
    section#hp-contact { clear: both; width: 100%; padding: 8vw 10vw; box-sizing: border-box; position: relative; overflow: hidden;}
    
    section#hp-contact .title-box { width: 100%; margin: 0 0 20px 0; color: #9E8935; text-align: center;}
    section#hp-contact .title-box h1 { font-size: 1.6em; font-weight: 500; line-height: 0.5em; letter-spacing: 0.1em;}
    section#hp-contact .title-box h2 { font-size: 1.1em; line-height: 1em; letter-spacing: 0.1em;}
    section#hp-contact .title-box .underline { clear: both; width: 40px; margin: 10px auto 0 auto; border-top: 1px #9E8935 solid;}
    
    section#hp-contact .hp-contact-position { clear: both; width: 100%;}
    section#hp-contact .hp-contact-position .contact-info { width: 50%; padding: 0 60px; box-sizing: border-box; float: right;}
    section#hp-contact .hp-contact-position .contact-info img.title { width: 70%; height: auto;}
    section#hp-contact .hp-contact-position .contact-info img.title-mo { display: none;}
    section#hp-contact .hp-contact-position .contact-info .info-box { width: 100%; padding: 60px 0 0 12%; color: #9E8935; font-size: 1.2em; font-weight: 500; letter-spacing: 0.1em; box-sizing: border-box;}
    section#hp-contact .hp-contact-position .postion-pic { width: 50%; padding: 0 60px; box-sizing: border-box; float: left;}
    section#hp-contact .hp-contact-position .postion-pic img { width: 100%; height: auto;}
    
    
    /******** section traffic ********/
    
    section#hp-traffic { clear: both; width: 100%; padding: 8vw; box-sizing: border-box; position: relative; overflow: hidden;}
    
    section#hp-traffic .title-box { width: 100%; margin: 0 0 20px 0; color: #9E8935; text-align: center;}
    section#hp-traffic .title-box h1 { font-size: 1.6em; font-weight: 500; line-height: 0.5em; letter-spacing: 0.1em;}
    section#hp-traffic .title-box h2 { font-size: 1.1em; line-height: 1em; letter-spacing: 0.1em;}
    section#hp-traffic .title-box .underline { clear: both; width: 40px; margin: 10px auto 0 auto; border-top: 1px #9E8935 solid;}
    
    section#hp-traffic .hp-traffic-way { clear: both; width: 100%; text-align: center;}
    section#hp-traffic .hp-traffic-way img.title { width: 35%; height: auto;}
    section#hp-traffic .hp-traffic-way .traffic-way { clear: both; width: 52%; margin: 60px auto 0 auto; display: flex; justify-content: flex-start;}
    section#hp-traffic .hp-traffic-way .traffic-way .info-left { width: 35%; font-size: 1.1vw; line-height: 2vw; text-align: left;}
    section#hp-traffic .hp-traffic-way .traffic-way .info-right { width: 65%; font-size: 1.1vw; line-height: 2vw; text-align: left;}
    section#hp-traffic .hp-traffic-way .traffic-way .info-left font.title, .info-right font.title { color: #9E8935; font-size: 1.4vw; font-weight: 500;}
    
    
    /******** section history ********/
    
    section#hp-history { clear: both; width: 100%; padding: 8vw 12vw; margin: 0 0 20px 0; background-color: #9E8935; box-sizing: border-box; position: relative; overflow: hidden;}
    
    section#hp-history img.hp-history-logo { width: 40vw; height: auto; opacity: 0.1; filter: alpha(opacity=10); position: absolute; top: 6vw; right: 6vw;}
    
    section#hp-history .history-title { width: 100%; margin: 0 0 40px 0; display: flex; justify-content: flex-start; align-items: flex-end;}
    section#hp-history .history-title .title-box { width: 140px; color: #fff; text-align: center;}
    section#hp-history .history-title .title-box h1 { font-size: 1.6em; font-weight: 500; line-height: 0.5em; letter-spacing: 0.1em;}
    section#hp-history .history-title .title-box h2 { font-size: 1.1em; line-height: 1em; letter-spacing: 0.1em;}
    section#hp-history .history-title .title-box .underline { clear: both; width: 40px; margin: 10px auto 0 auto; border-top: 1px #fff solid;}
    section#hp-history .history-title .icon-box { width: 40px; padding: 0 60px 20px 0;}
    section#hp-history .history-title .icon-box img { width: 100%; height: auto;}
    section#hp-history .history-title .sub-title { width: calc(100% - 240px); padding: 0 0 20px 0; color: #414141; font-size: 1.4em; font-weight: 500; letter-spacing: 0.1em;}
    
    section#hp-history .history-content { clear: both; width: 100%; color: #fff; font-size: 1.1em; line-height: 1.6em;}
    section#hp-history .history-content font.title-s { color: #414141; font-size: 1.1em; line-height: 2em; font-weight: 500;}
    
    
    /******** section sitemap ********/
    
    section#sitemap { clear: both; width: 100%; padding: 8vw 10vw 14vw 10vw; box-sizing: border-box; position: relative; overflow: hidden;}
    
    section#sitemap img.sitemap-title { width: 15vw; height: auto; position: absolute; bottom: 2vw; right: 8vw; z-index: 1;}
    
    section#sitemap .title-box { width: 100%; margin: 0 0 20px 0; color: #9E8935; text-align: center;}
    section#sitemap .title-box h1 { font-size: 1.6em; font-weight: 500; line-height: 0.5em; letter-spacing: 0.1em;}
    section#sitemap .title-box h2 { font-size: 1.1em; line-height: 1em; letter-spacing: 0.1em;}
    section#sitemap .title-box .underline { clear: both; width: 40px; margin: 10px auto 0 auto; border-top: 1px #9E8935 solid;}
    
    section#sitemap ul#sitemap-list { clear: both; width: 90%; padding: 0; margin: 60px auto 0 auto; list-style: none; display: flex; justify-content: flex-start; flex-wrap: wrap;}
    section#sitemap ul#sitemap-list li { width: calc(100% / 5); padding: 0; margin: 0 0 30px 0;}
    section#sitemap ul#sitemap-list li:nth-child(4) { width: calc(100% / 5 * 2);}
    section#sitemap ul#sitemap-list li a { padding: 0.5vw 1vw; color: #414141; font-size: 1.2vw; text-decoration: none; border-bottom: 1px #414141 solid; box-sizing: border-box;}
    section#sitemap ul#sitemap-list li a:hover { color: #FDF9C5; background-color: #353229;}
    section#sitemap ul#sitemap-list li ul.list-snd { clear: both; width: 100%; padding: 0; margin: 1vw 0 0 0; list-style: none; display: block;}
    section#sitemap ul#sitemap-list li ul.list-snd .list-snd-title { width: 100%; color: #9E8935; font-size: 1vw; box-sizing: border-box; }
    section#sitemap ul#sitemap-list li ul.list-snd li { width: 50%; padding: 0.2vw 0; margin: 0; float: left;}
    section#sitemap ul#sitemap-list li ul.list-snd li a { color: #414141; font-size: 1vw; box-sizing: border-box; border: 0;}
    section#sitemap ul#sitemap-list li ul.list-snd li a:hover { color: #414141; background-color: transparent; text-decoration: underline;}


    /******** section faq ********/
    
    section#faq { clear: both; width: 100%; padding: 8vw calc(50% - 500px); box-sizing: border-box; background-color: #f3f3f3; position: relative; overflow: hidden;}
    
    section#faq img.faq-title { width: 40vw; height: auto; opacity: 0.2; filter: alpha(opacity=20); position: absolute; top: 6vw; right: 6vw; z-index: 1;}
    
    section#faq .title-box { width: 100%; margin: 0 0 20px 0; color: #9E8935; text-align: center;}
    section#faq .title-box h1 { font-size: 1.6em; font-weight: 500; line-height: 0.5em; letter-spacing: 0.1em;}
    section#faq .title-box h2 { font-size: 1.1em; line-height: 1em; letter-spacing: 0.1em;}
    section#faq .title-box .underline { clear: both; width: 40px; margin: 10px auto 0 auto; border-top: 1px #9E8935 solid;}

    .faq-list { clear: both; width: 100%; margin: 0 0 20px 0; position: relative; z-index: 5;}
    .faq-list .faq-q { width: 100%; padding: 8px 15px; color: #9E8935; font-size: 1.2em; font-weight: 600; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
    .faq-list .faq-a { width: 100%; padding: 15px; color: #414141; font-size: 1.1em; box-sizing: border-box;}

    .safety-content { clear: both; width: 100%; line-height: 1.8em;}
    
    
    /******** footer ********/
    
    footer { width: 100%; background-color: #9E8935; display: flex; justify-content: flex-start; align-items: stretch; position: relative;}
    
    footer .add-info { width: calc(100% - 620px); padding: 1vw 0 0 0; color: #fff; display: flex; justify-content: center; align-items: flex-start;}
    footer .add-info .column-1 { width: 200px; padding: 0 0 0 4vw; font-size: 1.1em;}
    footer .add-info .column-2 { width: calc(100% - 470px - 4vw); padding: 0 20px 0 0; font-size: 1.1em; box-sizing: border-box;}
    footer .add-info .column-3 { width: 130px;}
    footer .add-info .column-3 a { color: #fff; text-decoration: none;}
    footer .add-info .column-3 a img { width: 16px; height: auto;}
    footer .add-info .column-4 { width: 140px; text-align: center;}
    
    footer .fb-box { width: 360px;}
    
    footer .copyright { width: 260px; color: #9E8935; font-size: 1.4em; background-color: #353229; display: flex; justify-content: center; align-items: center;}
    
    
}

@media screen and (min-width: 1280px) and (max-width: 1359px) {
    
    
    /******** top nav ********/
    
    .top-nav-full { width: 100%; padding: 10px; box-sizing: border-box; color: #FDF9C5; font-size: 0.9em; background-color: #353229;}
    .top-nav-full ul { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-end; align-items: center; float: right;}
    .top-nav-full ul li { padding: 0; margin: 0 0 0 20px;}
    .top-nav-full ul li a { color: #FDF9C5; text-decoration: none;}
    .top-nav-full ul li a:hover { color: #FDF9C5;}
    
    .top-nav-full .web-title { width: 50%; line-height: 1em; float: left;}
    
    
    /******** header ********/
    
    header { clear: both; width: 100%; height: 9vw; padding: 0 40px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start;}
    
    header .logo-bx { width: 13vw; margin: 1.2vw 0 0 0;}
    header .logo-bx img { width: 100%; height: auto;}
    
    nav#mo { display: none;}
    
    nav#pc { width: calc(100% - 13vw - 8vw);}
    
    nav#pc ul#sub { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-end; align-items: stretch;}
    nav#pc ul#sub li { padding: 0; margin: 0; color: #7F7F7F;}
    nav#pc ul#sub li a { padding: 2.3vw 1vw 10px 1vw; margin: 0 2.4vw; color: #7F7F7F; text-decoration: none; background-color: #fff; display: block;}
    nav#pc ul#sub li a .menu-b { margin: 0 0 10px 0; font-size: 1.4vw; text-align: center; display: block;}
    nav#pc ul#sub li a .menu-s { font-size: 1vw; line-height: 1em; text-align: center; display: block;}    
    nav#pc ul#sub li a:hover { color: #fff; background-color: #9E8935;}
    nav#pc ul#sub li a.sel { color: #fff; background-color: #9E8935;}
    nav#pc ul#sub li.line { padding: 0 0 10px 0; display: flex; align-items: flex-end;}
    
    header .lang-bx { width: 8vw; margin: 3.4vw 0 0 0; cursor: pointer; position: relative;}
    header .lang-bx img { width: 100%; height: auto;}
    header .lang-bx .lang-nav-box { width: 8vw; position: absolute; top: 2vw; left: 0; z-index: 99; display: none;}
    header .lang-bx .lang-nav-box .tri1 { width: 0px; height: 0px; padding: 0; margin: 0 auto; border-style: solid; border-width: 0px 10px 15px 10px; border-color: transparent transparent #353229 transparent;}
    header .lang-bx .lang-nav-box ul.lang-nav { clear: both; width: 100%; padding: 0; margin: 0; border: 1px #353229 solid; background-color: #353229; list-style: none; display: block;}
    header .lang-bx .lang-nav-box ul.lang-nav li { width: 100%; padding: 0; margin: 0;}
    header .lang-bx .lang-nav-box ul.lang-nav li a { width: 100%; padding: 0.4vw; color: #414141; font-size: 1vw; text-align: center; background-color: #fff; text-decoration: none; box-sizing: border-box; display: block;}
    header .lang-bx .lang-nav-box ul.lang-nav li a:hover { background-color: #eee;}
    header .lang-bx .lang-nav-box ul.lang-nav li a.sel { color: #fff; background-color: #353229;}
    
    
    /******** section main ********/
    
    section#hp-main { clear: both; width: 100%; padding: 40px; background-color: #fff; box-sizing: border-box; position: relative;}
    
    section#hp-main img.hp-main-pic { width: 62vw; height: auto;}
    
    section#hp-main .hp-about-content { width: 38vw; position: absolute; top: 5vw; right: 60px;}
    section#hp-main .hp-about-content img.title { width: 100%; height: auto;}
    section#hp-main .hp-about-content .text-bx { clear: both; width: 28vw; padding: 0 0 0 4vw; margin: 40px auto 0 auto; font-size: 1.1em; line-height: 1.8em; box-sizing: border-box;}
        
    section#hp-main .hp-about-more-bt { width: 13.5vw; position: absolute; bottom: calc(40px + 1.7vw); left: calc(40px + 47vw);}
    section#hp-main .hp-about-more-bt a { width: 100%; padding: 5px 0; color: #414141; font-size: 0.8em; letter-spacing: 0.2em; text-align: center; text-decoration: none; border: 1px #414141 solid; background-color: #fff; box-sizing: border-box; display: block;}
    section#hp-main .hp-about-more-bt a:hover { background-color: #eee;}

    section#hp-advocacy { clear: both; width: 100%; padding: 4vw calc(50% - 600px); box-sizing: border-box;}
    section#hp-advocacy .title-box { width: 100%; margin: 0 0 20px 0; color: #9E8935; text-align: center;}
    section#hp-advocacy .title-box h1 { font-size: 1.6em; font-weight: 500; line-height: 0.5em; letter-spacing: 0.1em;}
    section#hp-advocacy .title-box h2 { font-size: 1.1em; line-height: 1em; letter-spacing: 0.1em;}
    section#hp-advocacy .title-box .underline { clear: both; width: 40px; margin: 10px auto 0 auto; border-top: 1px #9E8935 solid;}
    section#hp-advocacy .adv-list { clear: both; width: 80%; padding: 0.5vw 2vw; margin: 0 auto 1vw auto; border-radius: 2vw; border: 1px #ccc solid; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
    section#hp-advocacy .adv-list .icon { width: 2.5vw; color: #9E8935; font-size: 1.5vw;}
    section#hp-advocacy .adv-list .text { width: calc(100% - 2vw); font-size: 1.3vw;}
    section#hp-advocacy .adv-list .text a { color: #414141; text-decoration: none;}
    section#hp-advocacy .adv-list .text a:hover { color: #9E8935;}
    
    
    /******** section about ********/
    
    section#hp-about { clear: both; width: 100%; padding: 8vw 0; margin: 0 0 20px 0; background-color: #9E8935; box-sizing: border-box; position: relative; overflow: hidden;}
    
    section#hp-about img.hp-about-logo { width: 40vw; height: auto; opacity: 0.1; filter: alpha(opacity=10); position: absolute; top: 6vw; right: 6vw;}
    
    section#hp-about img.hp-about-logo-mo { display: none;}
    
    section#hp-about .info-bx { width: 300px; padding: 0 0 0 40px; box-sizing: border-box; float: left;}
    section#hp-about .info-bx .icon-box { width: 100%; margin: 0 0 20px 0; text-align: center;}
    section#hp-about .info-bx .icon-box img { width: 40px; height: auto;}
    section#hp-about .info-bx .title-box { width: 100%; margin: 0 0 10px 0; color: #fff; text-align: center;}
    section#hp-about .info-bx .title-box h1 { font-size: 1.6em; font-weight: 500; line-height: 0.5em; letter-spacing: 0.1em;}
    section#hp-about .info-bx .title-box h2 { font-size: 1.1em; line-height: 1em; letter-spacing: 0.1em;}
    section#hp-about .info-bx .underline { clear: both; width: 40px; margin: 0 auto; border-top: 1px #fff solid;}
    section#hp-about .info-bx .about-more-bt { clear: both; width: 180px; margin: 0 auto; font-size: 0.8em; letter-spacing: 0.1em; text-align: center;}
    section#hp-about .info-bx .about-more-bt a { width: 100%; padding: 5px 0; color: #fff; text-decoration: none; border: 1px #fff solid; display: block;}
    section#hp-about .info-bx .about-more-bt a:hover { color: #414141; border: 1px #414141 solid; background-color: #eee;}
    
    section#hp-about .info-text-bx { width: calc(100% - 300px); padding: 0 60px 0 0; box-sizing: border-box; color: #fff; font-size: 1.1em; line-height: 1.8em; float: left;}
    section#hp-about .info-text-bx .title { width: 100%; margin: 0 0 30px 0; color: #414141; font-size: 1.2em; font-weight: 500;}
    
    /*section#hp-about .photos-list-box { clear: both; width: 100%; margin: 40px 0 0 0;}
    section#hp-about .photos-list-box .banner-bx { width: 100%; height: 20vw; overflow: hidden;}
    section#hp-about .photos-list-box .banner-bx-mo { display: none;}*/
    
    section#hp-about .about-photos-list { clear: both; width: 1200px; margin: 60px auto 0 auto; overflow: hidden;}
    section#hp-about .about-photos-list ul#about-photos { height: 270px; padding: 0; margin: 0; list-style: none; display: block; overflow: hidden;}
    section#hp-about .about-photos-list ul#about-photos li { width: 380px; padding: 0; margin: 10px; float: left;}
    section#hp-about .about-photos-list ul#about-photos li img { width: 100%; height: auto; -moz-box-shadow:4px 4px 8px -2px rgba(20%,20%,40%,0.6); -webkit-box-shadow:4px 4px 8px -2px rgba(20%,20%,40%,0.6); box-shadow:4px 4px 8px -2px rgba(20%,20%,40%,0.6);}
    section#hp-about .about-photos-list .photos-list-bt { clear: both; width: 100%; display: flex; justify-content: center; align-items: center;}
    section#hp-about .about-photos-list .photos-list-bt .arrow-prev, section#hp-about .about-photos-list .photos-list-bt .arrow-next { width: 30px; margin: 0 20px; color: #fff; font-size: 2em; text-align: center; cursor: pointer;}
    
    
    /******** section places ********/
    
    section#hp-places { clear: both; width: 100%; padding: 8vw; box-sizing: border-box; position: relative; overflow: hidden;}
    
    section#hp-places img.hp-places-title { width: 30vw; height: auto; position: absolute; top: 2vw; left: 2vw; z-index: 1;}
    section#hp-places img.hp-places-title2 { width: 15vw; height: auto; position: absolute; bottom: 2vw; right: 8vw; z-index: 1;}
    
    section#hp-places .info-bx { width: 80%; margin: 0 auto 30px auto; box-sizing: border-box;}
    section#hp-places .info-bx .icon-box { display: none;}
    section#hp-places .info-bx .title-box { width: 100%; margin: 0 0 10px 0; color: #9E8935; text-align: center;}
    section#hp-places .info-bx .title-box h1 { font-size: 1.6em; font-weight: 500; line-height: 0.5em; letter-spacing: 0.1em;}
    section#hp-places .info-bx .title-box h2 { font-size: 1.1em; line-height: 1em; letter-spacing: 0.1em;}
    section#hp-places .info-bx .underline { clear: both; width: 40px; margin: 0 auto; border-top: 1px #9E8935 solid;}
    
    section#hp-places .places-column-x4 { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; position: relative; z-index: 9;}
    section#hp-places .places-column-x4 .column-bx { width: 25%; padding: 0 40px; box-sizing: border-box;}
    section#hp-places .places-column-x4 .column-bx.low { padding: 6vw 0 0 0;}
    section#hp-places .places-column-x4 .column-bx .icon-bx { width: 100%; text-align: center;}
    section#hp-places .places-column-x4 .column-bx .icon-bx img { width: auto; height: 80px;}
    section#hp-places .places-column-x4 .column-bx .title-bx { width: 100%; margin: 10px 0; font-size: 1.6em; font-weight: 500; letter-spacing: 0.2em; text-align: center;}
    section#hp-places .places-column-x4 .column-bx .list-bx { clear: both; width: 240px; padding: 0 20px; margin: 0 auto; font-size: 1.1em; line-height: 1.6em; box-sizing: border-box;}
    section#hp-places .places-column-x4 .column-bx .list-bx .number { clear: both; width: 60px; float: left;}
    section#hp-places .places-column-x4 .column-bx .list-bx .name { width: calc(100% - 60px); float: left;}
    section#hp-places .places-column-x4 .column-bx .list-bx .name a { color: #414141; text-decoration: none;}
    section#hp-places .places-column-x4 .column-bx .list-bx .name a:hover { color: #9E8935;}
    section#hp-places .places-column-x4 .column-bx .list-bx.color-1 { border-left: 6px #be504d solid;}
    section#hp-places .places-column-x4 .column-bx .list-bx.color-2 { border-left: 6px #f59446 solid;}
    section#hp-places .places-column-x4 .column-bx .list-bx.color-3 { border-left: 6px #98b959 solid;}
    section#hp-places .places-column-x4 .column-bx .list-bx.color-4 { border-left: 6px #8064a0 solid;}
    
    
    /******** section stall info ********/
    
    section#hp-stall { clear: both; width: 100%; padding: 4vw 8vw 8vw 8vw; box-sizing: border-box; position: relative; overflow: hidden;}
    
    section#hp-stall img.hp-stall-title { width: 15vw; height: auto; position: absolute; bottom: 2vw; right: 8vw; z-index: 1;}
    
    section#hp-stall .hp-stall-info { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; position: relative; z-index: 9;}
    section#hp-stall .hp-stall-info .line-v { width: 10px; height: 180px; display: block;}
    section#hp-stall .hp-stall-info .line-v.color-1 { background-color: #A7514E;}
    section#hp-stall .hp-stall-info .line-v.color-2 { background-color: #DF944D;}
    section#hp-stall .hp-stall-info .line-v.color-3 { background-color: #A2B960;}
    section#hp-stall .hp-stall-info .line-v.color-4 { background-color: #78649E;}
    section#hp-stall .hp-stall-info .info-content-box { width: calc(30% - 10px); padding: 0 20px; box-sizing: border-box;}
    section#hp-stall .hp-stall-info .info-content-box .title-bar { width: 100%; margin: 0 0 30px 0; display: flex; justify-content: flex-start; align-items: center; position: relative;}
    section#hp-stall .hp-stall-info .info-content-box .title-bar .title { width: calc(100% - 3.2vw - 20px);}
    section#hp-stall .hp-stall-info .info-content-box .title-bar .title h1 { padding: 0.5vw 0; margin: 0; font-size: 1.8vw; font-weight: 500; line-height: 1em; letter-spacing: 0.1em;}
    section#hp-stall .hp-stall-info .info-content-box .title-bar .icons { width: calc(3.2vw + 20px); display: flex; justify-content: flex-end; align-items: center;}
    section#hp-stall .hp-stall-info .info-content-box .title-bar .icons img { width: 1.6vw; height: auto; margin: 0 0 0 10px; cursor: pointer;}
    section#hp-stall .hp-stall-info .info-content-box .title-bar .icons img.img-sel { display: none;}
    section#hp-stall .hp-stall-info .info-content-box .title-bar .icons .social-box { width: 9vw; padding: 0.5vw 0; text-align: center; border: 1px #ccc solid; border-radius: 10px; background-color: #353229; box-sizing: border-box; display: none; justify-content: center; align-items: center; position: absolute; top: 3vw; right: 0;}
    section#hp-stall .hp-stall-info .info-content-box .title-bar .icons .social-box img.fb { width: 0.6vw; height: auto; margin: 0 0.5vw;}
    section#hp-stall .hp-stall-info .info-content-box .title-bar .icons .social-box img.line { width: 1.6vw; height: auto; margin: 0 0.5vw;}
    section#hp-stall .hp-stall-info .info-content-box .title-bar .icons .social-box img.copy { width: 1.6vw; height: auto; margin: 0 0.5vw;}
    section#hp-stall .hp-stall-info .info-content-box .text-content { clear: both; width: 100%; font-size: 1.1vw; line-height: 1.6em;}
    section#hp-stall .hp-stall-info .info-content-box .contact-info { clear: both; width: 100%; padding: 30px 0; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
    section#hp-stall .hp-stall-info .info-content-box .contact-info .title { width: 5.5vw; padding: 3px; margin: 0 0 5px 0; font-size: 1.1vw; text-align: center; color: #353229; border-radius: 1vw; background-color: #FDF9C5; box-sizing: border-box;}
    section#hp-stall .hp-stall-info .info-content-box .contact-info .info { width: calc(100% - 5.5vw); padding: 3px; margin: 0 0 5px 0; font-size: 1.1vw; word-break: break-all; box-sizing: border-box;}
    section#hp-stall .hp-stall-info .info-content-box .contact-info .info a { color: #414141; text-decoration: none;}
    section#hp-stall .hp-stall-info .info-content-box .contact-info .info a:hover { text-decoration: underline;}
    section#hp-stall .hp-stall-info .info-content-box .payment-info { clear: both; width: 100%; margin: 30px 0 0 0; color: #666; font-size: 1.1vw; display: flex; justify-content: flex-end; align-items: center;}
    section#hp-stall .hp-stall-info .info-content-box .payment-info img.icon { width: 1.6vw; height: auto; margin: 0 10px 0 20px;}
    section#hp-stall .hp-stall-info .photos-box { width: 70%; display: flex; justify-content: flex-start; flex-wrap: wrap;}
    section#hp-stall .hp-stall-info .photos-box .title-bar { width: 100%; padding: 0 10px; margin: 0 0 30px 0; display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box;}
    section#hp-stall .hp-stall-info .photos-box .title-bar .title { width: 10vw; font-size: 2vw; font-weight: 500; letter-spacing: 0.1em;}
    section#hp-stall .hp-stall-info .photos-box .title-bar .underline-color-1 { width: calc(100% - 10vw); border-bottom: 10px #A7514E solid;}
    section#hp-stall .hp-stall-info .photos-box .title-bar .underline-color-2 { width: calc(100% - 10vw); border-bottom: 10px #DF944D solid;}
    section#hp-stall .hp-stall-info .photos-box .title-bar .underline-color-3 { width: calc(100% - 10vw); border-bottom: 10px #A2B960 solid;}
    section#hp-stall .hp-stall-info .photos-box .title-bar .underline-color-4 { width: calc(100% - 10vw); border-bottom: 10px #78649E solid;}
    section#hp-stall .hp-stall-info .photos-box .photo-info { width: calc(100% / 3 - 20px); margin: 10px;}
    section#hp-stall .hp-stall-info .photos-box .photo-info .photo { width: 100%; height: 11.5vw; overflow: hidden;}
    section#hp-stall .hp-stall-info .photos-box .photo-info .photo img { width: 100%; height: auto;}
    section#hp-stall .hp-stall-info .photos-box .photo-info .infor { width: 100%; font-size: 0.9vw;}
    section#hp-stall .hp-stall-info .photos-box-mo { display: none;}
        
    
    /******** section news ********/
    
    section#hp-news { clear: both; width: 100%; padding: 8vw 0; background-color: #f3f3f3; box-sizing: border-box; position: relative; overflow: hidden;}
    
    section#hp-news img.hp-news-title { width: 15vw; height: auto; position: absolute; bottom: 2vw; right: 8vw; z-index: 1;}
    section#hp-news img.hp-news-title-mo { display: none;}
    
    section#hp-news img.page-news-title { width: 40vw; height: auto; opacity: 0.2; filter: alpha(opacity=20); position: absolute; top: 6vw; right: 6vw;}
    
    section#hp-news .title-box { width: 100%; margin: 0 0 20px 0; color: #9E8935; text-align: center;}
    section#hp-news .title-box h1 { font-size: 1.6em; font-weight: 500; line-height: 0.5em; letter-spacing: 0.1em;}
    section#hp-news .title-box h2 { font-size: 1.1em; line-height: 1em; letter-spacing: 0.1em;}
    section#hp-news .title-box .underline { clear: both; width: 40px; margin: 10px auto 0 auto; border-top: 1px #9E8935 solid;}
    
    section#hp-news .hp-news-list-box { clear: both; width: 1200px; margin: 0 auto; overflow: hidden; position: relative; z-index: 9;}
    section#hp-news .hp-news-list-box ul.hp-news-list { height: 550px; padding: 0; margin: 0; list-style: none; display: block; overflow: hidden;}
    section#hp-news .hp-news-list-box ul.hp-news-list li { width: 360px; padding: 0; margin: 20px; float: left;}
    section#hp-news .hp-news-list-box ul.hp-news-list li .news-box { width: 100%; padding: 20px; background-color: #fff; -moz-box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5); box-sizing: border-box;}
    section#hp-news .hp-news-list-box ul.hp-news-list li .news-box .photo { width: 100%; height: 220px; margin: 0 0 20px 0; overflow: hidden;}
    section#hp-news .hp-news-list-box ul.hp-news-list li .news-box .photo img { width: 100%; height: auto;}
    section#hp-news .hp-news-list-box ul.hp-news-list li .news-box .date { width: 100%; color: #666; font-size: 0.9em; letter-spacing: 0.1em;}
    section#hp-news .hp-news-list-box ul.hp-news-list li .news-box .title { width: 100%; margin: 30px 0; color: #3E7E00; font-size: 1.1em; font-weight: 500; letter-spacing: 0.1em;}
    section#hp-news .hp-news-list-box ul.hp-news-list li .news-box .text { width: 100%; margin: 0 0 30px 0; color: #666; font-size: 0.9em;}
    section#hp-news .hp-news-list-box ul.hp-news-list li .news-box .more { width: 100%;}
    section#hp-news .hp-news-list-box ul.hp-news-list li .news-box .more a { color: #B3252F; font-weight: 400; text-decoration: underline;}
    section#hp-news .hp-news-list-box ul.hp-news-list li .news-box .more a:hover { color: #9E8935;}
    
    section#hp-news .news-list-box { clear: both; width: 1200px; margin: 0 auto; position: relative; z-index: 9;}
    section#hp-news .news-list-box ul.news-list { padding: 0; margin: 0; list-style: none; display: block; overflow: hidden;}
    section#hp-news .news-list-box ul.news-list li { width: 360px; padding: 0; margin: 20px; float: left;}
    section#hp-news .news-list-box ul.news-list li .news-box { width: 100%; padding: 20px; background-color: #fff; -moz-box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5); box-sizing: border-box;}
    section#hp-news .news-list-box ul.news-list li .news-box .photo { width: 100%; height: 220px; margin: 0 0 20px 0; overflow: hidden;}
    section#hp-news .news-list-box ul.news-list li .news-box .photo img { width: 100%; height: auto;}
    section#hp-news .news-list-box ul.news-list li .news-box .date { width: 100%; color: #666; font-size: 0.9em; letter-spacing: 0.1em;}
    section#hp-news .news-list-box ul.news-list li .news-box .title { width: 100%; margin: 30px 0; color: #3E7E00; font-size: 1.1em; font-weight: 500; letter-spacing: 0.1em;}
    section#hp-news .news-list-box ul.news-list li .news-box .text { width: 100%; margin: 0 0 30px 0; color: #666; font-size: 0.9em;}
    section#hp-news .news-list-box ul.news-list li .news-box .more { width: 100%;}
    section#hp-news .news-list-box ul.news-list li .news-box .more a { color: #B3252F; font-weight: 400; text-decoration: underline;}
    section#hp-news .news-list-box ul.news-list li .news-box .more a:hover { color: #9E8935;}
    
    section#hp-news .hp-news-more-bt { clear: both; width: 13.5vw; margin: 40px auto 0 auto;}
    section#hp-news .hp-news-more-bt a { width: 100%; padding: 5px 0; color: #414141; font-size: 0.8em; letter-spacing: 0.2em; text-align: center; text-decoration: none; border: 1px #414141 solid; background-color: #fff; box-sizing: border-box; display: block;}
    section#hp-news .hp-news-more-bt a:hover { background-color: #eee;}
    
    section#hp-news .news-content-box { clear: both; width: 1000px; margin: 0 auto; position: relative; z-index: 9;}
    section#hp-news .news-content-box .title { width: 100%; color: #3E7E00; font-size: 1.3em; font-weight: 600;}
    section#hp-news .news-content-box .date { width: 100%; padding: 10px 0; font-size: 0.9em; font-weight: 500; text-align: right; border-bottom: 2px #ccc solid;}
    section#hp-news .news-content-box .content { clear: both; width: 100%; padding: 40px; font-size: 1.1em; line-height: 1.8em; box-sizing: border-box;}
    section#hp-news .news-content-box .content img { max-width: 100%; height: auto;}
    
    section#hp-news .goback-bt { clear: both; width: 180px; margin: 0 auto; font-size: 0.8em; letter-spacing: 0.1em; text-align: center;}
    section#hp-news .goback-bt a { width: 100%; padding: 5px 0; color: #414141; text-decoration: none; border: 1px #414141 solid; display: block;}
    section#hp-news .goback-bt a:hover { color: #999; border: 1px #999 solid; background-color: #eee;}
    
    
    /******** section contact ********/
    
    section#hp-contact { clear: both; width: 100%; padding: 8vw 4vw; box-sizing: border-box; position: relative; overflow: hidden;}
    
    section#hp-contact .title-box { width: 100%; margin: 0 0 20px 0; color: #9E8935; text-align: center;}
    section#hp-contact .title-box h1 { font-size: 1.6em; font-weight: 500; line-height: 0.5em; letter-spacing: 0.1em;}
    section#hp-contact .title-box h2 { font-size: 1.1em; line-height: 1em; letter-spacing: 0.1em;}
    section#hp-contact .title-box .underline { clear: both; width: 40px; margin: 10px auto 0 auto; border-top: 1px #9E8935 solid;}
    
    section#hp-contact .hp-contact-position { clear: both; width: 100%;}
    section#hp-contact .hp-contact-position .contact-info { width: 50%; padding: 0 40px; box-sizing: border-box; float: right;}
    section#hp-contact .hp-contact-position .contact-info img.title { width: 70%; height: auto;}
    section#hp-contact .hp-contact-position .contact-info img.title-mo { display: none;}
    section#hp-contact .hp-contact-position .contact-info .info-box { width: 100%; padding: 40px 0 0 12%; color: #9E8935; font-size: 1.2em; font-weight: 500; letter-spacing: 0.1em; box-sizing: border-box;}
    section#hp-contact .hp-contact-position .postion-pic { width: 50%; padding: 0 40px; box-sizing: border-box; float: left;}
    section#hp-contact .hp-contact-position .postion-pic img { width: 100%; height: auto;}
    
    
    /******** section traffic ********/
    
    section#hp-traffic { clear: both; width: 100%; padding: 8vw; box-sizing: border-box; position: relative; overflow: hidden;}
    
    section#hp-traffic .title-box { width: 100%; margin: 0 0 20px 0; color: #9E8935; text-align: center;}
    section#hp-traffic .title-box h1 { font-size: 1.6em; font-weight: 500; line-height: 0.5em; letter-spacing: 0.1em;}
    section#hp-traffic .title-box h2 { font-size: 1.1em; line-height: 1em; letter-spacing: 0.1em;}
    section#hp-traffic .title-box .underline { clear: both; width: 40px; margin: 10px auto 0 auto; border-top: 1px #9E8935 solid;}
    
    section#hp-traffic .hp-traffic-way { clear: both; width: 100%; text-align: center;}
    section#hp-traffic .hp-traffic-way img.title { width: 35%; height: auto;}
    section#hp-traffic .hp-traffic-way .traffic-way { clear: both; width: 52%; margin: 60px auto 0 auto; display: flex; justify-content: flex-start;}
    section#hp-traffic .hp-traffic-way .traffic-way .info-left { width: 35%; font-size: 1.1vw; line-height: 2vw; text-align: left;}
    section#hp-traffic .hp-traffic-way .traffic-way .info-right { width: 65%; font-size: 1.1vw; line-height: 2vw; text-align: left;}
    section#hp-traffic .hp-traffic-way .traffic-way .info-left font.title, .info-right font.title { color: #9E8935; font-size: 1.4vw; font-weight: 500;}
    
    
    /******** section history ********/
    
    section#hp-history { clear: both; width: 100%; padding: 8vw 8vw; margin: 0 0 20px 0; background-color: #9E8935; box-sizing: border-box; position: relative; overflow: hidden;}
    
    section#hp-history img.hp-history-logo { width: 40vw; height: auto; opacity: 0.1; filter: alpha(opacity=10); position: absolute; top: 6vw; right: 6vw;}
    
    section#hp-history .history-title { width: 100%; margin: 0 0 40px 0; display: flex; justify-content: flex-start; align-items: flex-end;}
    section#hp-history .history-title .title-box { width: 140px; color: #fff; text-align: center;}
    section#hp-history .history-title .title-box h1 { font-size: 1.6em; font-weight: 500; line-height: 0.5em; letter-spacing: 0.1em;}
    section#hp-history .history-title .title-box h2 { font-size: 1.1em; line-height: 1em; letter-spacing: 0.1em;}
    section#hp-history .history-title .title-box .underline { clear: both; width: 40px; margin: 10px auto 0 auto; border-top: 1px #fff solid;}
    section#hp-history .history-title .icon-box { width: 40px; padding: 0 60px 20px 0;}
    section#hp-history .history-title .icon-box img { width: 100%; height: auto;}
    section#hp-history .history-title .sub-title { width: calc(100% - 240px); padding: 0 0 20px 0; color: #414141; font-size: 1.4em; font-weight: 500; letter-spacing: 0.1em;}
    
    section#hp-history .history-content { clear: both; width: 100%; color: #fff; font-size: 1.1em; line-height: 1.6em;}
    section#hp-history .history-content font.title-s { color: #414141; font-size: 1.1em; line-height: 2em; font-weight: 500;}
    
    
    /******** section sitemap ********/
    
    section#sitemap { clear: both; width: 100%; padding: 8vw 10vw 14vw 10vw; box-sizing: border-box; position: relative; overflow: hidden;}
    
    section#sitemap img.sitemap-title { width: 15vw; height: auto; position: absolute; bottom: 2vw; right: 8vw; z-index: 1;}
    
    section#sitemap .title-box { width: 100%; margin: 0 0 20px 0; color: #9E8935; text-align: center;}
    section#sitemap .title-box h1 { font-size: 1.6em; font-weight: 500; line-height: 0.5em; letter-spacing: 0.1em;}
    section#sitemap .title-box h2 { font-size: 1.1em; line-height: 1em; letter-spacing: 0.1em;}
    section#sitemap .title-box .underline { clear: both; width: 40px; margin: 10px auto 0 auto; border-top: 1px #9E8935 solid;}
    
    section#sitemap ul#sitemap-list { clear: both; width: 90%; padding: 0; margin: 60px auto 0 auto; list-style: none; display: flex; justify-content: flex-start; flex-wrap: wrap;}
    section#sitemap ul#sitemap-list li { width: calc(100% / 5); padding: 0; margin: 0 0 30px 0;}
    section#sitemap ul#sitemap-list li:nth-child(4) { width: calc(100% / 5 * 2);}
    section#sitemap ul#sitemap-list li a { padding: 0.5vw 1vw; color: #414141; font-size: 1.2vw; text-decoration: none; border-bottom: 1px #414141 solid; box-sizing: border-box;}
    section#sitemap ul#sitemap-list li a:hover { color: #FDF9C5; background-color: #353229;}
    section#sitemap ul#sitemap-list li ul.list-snd { clear: both; width: 100%; padding: 0; margin: 1vw 0 0 0; list-style: none; display: block;}
    section#sitemap ul#sitemap-list li ul.list-snd .list-snd-title { width: 100%; color: #9E8935; font-size: 1vw; box-sizing: border-box; }
    section#sitemap ul#sitemap-list li ul.list-snd li { width: 50%; padding: 0.2vw 0; margin: 0; float: left;}
    section#sitemap ul#sitemap-list li ul.list-snd li a { color: #414141; font-size: 1vw; box-sizing: border-box; border: 0;}
    section#sitemap ul#sitemap-list li ul.list-snd li a:hover { color: #414141; background-color: transparent; text-decoration: underline;}


    /******** section faq ********/
    
    section#faq { clear: both; width: 100%; padding: 8vw calc(50% - 500px); box-sizing: border-box; background-color: #f3f3f3; position: relative; overflow: hidden;}
    
    section#faq img.faq-title { width: 40vw; height: auto; opacity: 0.2; filter: alpha(opacity=20); position: absolute; top: 6vw; right: 6vw; z-index: 1;}
    
    section#faq .title-box { width: 100%; margin: 0 0 20px 0; color: #9E8935; text-align: center;}
    section#faq .title-box h1 { font-size: 1.6em; font-weight: 500; line-height: 0.5em; letter-spacing: 0.1em;}
    section#faq .title-box h2 { font-size: 1.1em; line-height: 1em; letter-spacing: 0.1em;}
    section#faq .title-box .underline { clear: both; width: 40px; margin: 10px auto 0 auto; border-top: 1px #9E8935 solid;}

    .faq-list { clear: both; width: 100%; margin: 0 0 20px 0; position: relative; z-index: 5;}
    .faq-list .faq-q { width: 100%; padding: 8px 15px; color: #9E8935; font-size: 1.2em; font-weight: 600; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
    .faq-list .faq-a { width: 100%; padding: 15px; color: #414141; font-size: 1.1em; box-sizing: border-box;}

    .safety-content { clear: both; width: 100%; line-height: 1.8em;}
    
    
    /******** footer ********/
    
    footer { width: 100%; background-color: #9E8935; display: flex; justify-content: flex-start; align-items: stretch; position: relative;}
    
    footer .add-info { width: calc(100% - 620px); padding: 1vw 0 0 0; color: #fff; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
    footer .add-info .column-1 { width: 200px; padding: 0 0 0 2vw; font-size: 1.1em;}
    footer .add-info .column-2 { width: calc(100% - 240px - 2vw); padding: 0 20px 0 0; font-size: 1.1em; box-sizing: border-box;}
    footer .add-info .column-3 { width: 130px; padding: 0 0 0 2vw;}
    footer .add-info .column-3 a { color: #fff; text-decoration: none;}
    footer .add-info .column-3 a img { width: 16px; height: auto;}
    footer .add-info .column-4 { width: 140px; text-align: center;}
    
    footer .fb-box { width: 360px;}
    
    footer .copyright { width: 260px; color: #9E8935; font-size: 1.4em; background-color: #353229; display: flex; justify-content: center; align-items: center;}
    
    
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
    
    
    /******** top nav ********/
    
    .top-nav-full { width: 100%; padding: 10px; box-sizing: border-box; color: #FDF9C5; font-size: 0.9em; background-color: #353229;}
    .top-nav-full ul { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-end; align-items: center; float: right;}
    .top-nav-full ul li { padding: 0; margin: 0 0 0 20px;}
    .top-nav-full ul li a { color: #FDF9C5; text-decoration: none;}
    .top-nav-full ul li a:hover { color: #FDF9C5;}
    
    .top-nav-full .web-title { width: 50%; line-height: 1em; float: left;}
    
    
    /******** header ********/
    
    header { clear: both; width: 90%; padding: 30px 0; margin: 0 auto; border-bottom: 1px #ccc solid; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start;}
    
    header .logo-bx { width: 220px; float: left; display: none}
    header .logo-bx img { width: 100%; height: auto;}
    
    header nav#pc { display: none;}
    
    header nav#mo { width: 50px; margin: 0 30px 0 20px;}
    
    header nav#mo .nav-icon { width: 50px;}
    header nav#mo .nav-icon img { width: 100%; height: auto; cursor: pointer;}
    
    header nav#mo ul#sub { width: 320px; padding: 30px 20px; box-sizing: border-box; margin: 0; background-color: #353229; list-style: none; display: block; position: absolute; top: 39px; left: -320px; z-index: 999;}
    header nav#mo ul#sub .nav-close-icon { width: 40px; margin: 0 0 30px 0; float: right; cursor: pointer;}
    header nav#mo ul#sub .nav-close-icon img { width: 100%; height: auto;}
    header nav#mo ul#sub li { clear: both; width: 100%; padding: 0; margin: 0; border-bottom: 1px #7F7F7F solid;}
    header nav#mo ul#sub li:last-child { border-bottom: 0;}
    header nav#mo ul#sub li a { width: 100%; padding: 30px 20px; color: #FDF9C5; text-decoration: none; display: flex; justify-content: center; align-items: flex-end; box-sizing: border-box;}
    header nav#mo ul#sub li a .menu-b { margin: 0 10px 0 0; font-size: 1.2em; line-height: 1em; display: block;}
    header nav#mo ul#sub li a .menu-s { font-size: 0.9em; line-height: 1em; display: block;}    
    header nav#mo ul#sub li a:active { color: #fff; background-color: #9E8935;}
    header nav#mo ul#sub li a.sel { color: #fff; background-color: #9E8935;}
    header nav#mo ul#sub li.line { padding: 0 0 10px 0; display: flex; align-items: flex-end;}
    
    header .lang-bx { width: 140px; position: relative; cursor: pointer;}
    header .lang-bx img { width: 100%; height: auto;}
    header .lang-bx .lang-nav-box { width: 140px; position: absolute; top: 40px; left: 0; z-index: 99; display: none;}
    header .lang-bx .lang-nav-box .tri1 { width: 0px; height: 0px; padding: 0; margin: 0 auto; border-style: solid; border-width: 0px 10px 15px 10px; border-color: transparent transparent #353229 transparent;}
    header .lang-bx .lang-nav-box ul.lang-nav { clear: both; width: 100%; padding: 0; margin: 0; border: 1px #353229 solid; list-style: none; display: block;}
    header .lang-bx .lang-nav-box ul.lang-nav li { width: 100%; padding: 0; margin: 0;}
    header .lang-bx .lang-nav-box ul.lang-nav li a { width: 100%; padding: 10px; color: #414141; font-size: 1em; text-align: center; text-decoration: none; background-color: #fff; box-sizing: border-box; display: block;}
    header .lang-bx .lang-nav-box ul.lang-nav li a:hover { background-color: #eee;}
    header .lang-bx .lang-nav-box ul.lang-nav li a.sel { color: #fff; background-color: #353229;}
    
    
    /******** section main ********/
    
    section#hp-main { clear: both; width: 90%; padding: 60px 0; margin: 0 auto; text-align: center; background-color: #fff; box-sizing: border-box;}
    
    section#hp-main img.hp-main-pic { width: 90%; height: auto;}
    
    section#hp-main .hp-about-content { clear: both; width: 100%; text-align: center;}
    section#hp-main .hp-about-content img.title { width: 70%; height: auto;}
    section#hp-main .hp-about-content .text-bx { clear: both; width: 50%; margin: 40px auto 0 auto; font-size: 1.1em; line-height: 1.8em; box-sizing: border-box;}
        
    section#hp-main .hp-about-more-bt { clear: both; width: 200px; margin: 60px auto;}
    section#hp-main .hp-about-more-bt a { width: 100%; padding: 5px 0; color: #414141; font-size: 0.8em; letter-spacing: 0.2em; text-align: center; text-decoration: none; border: 1px #414141 solid; background-color: #fff; box-sizing: border-box; display: block;}
    section#hp-main .hp-about-more-bt a:hover { background-color: #eee;}

    section#hp-advocacy { clear: both; width: 100%; padding: 60px 20px; box-sizing: border-box;}
    section#hp-advocacy .title-box { width: 100%; margin: 0 0 20px 0; color: #9E8935; text-align: center;}
    section#hp-advocacy .title-box h1 { font-size: 1.6em; font-weight: 500; line-height: 0.5em; letter-spacing: 0.1em;}
    section#hp-advocacy .title-box h2 { font-size: 1.1em; line-height: 1em; letter-spacing: 0.1em;}
    section#hp-advocacy .title-box .underline { clear: both; width: 40px; margin: 10px auto 0 auto; border-top: 1px #9E8935 solid;}
    section#hp-advocacy .adv-list { clear: both; width: 80%; padding: 6px 20px; margin: 0 auto 10px auto; border-radius: 30px; border: 1px #ccc solid; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
    section#hp-advocacy .adv-list .icon { width:40px; color: #9E8935; font-size: 1.4em;}
    section#hp-advocacy .adv-list .text { width: calc(100% - 40px); font-size: 1.1em;}
    section#hp-advocacy .adv-list .text a { color: #414141; text-decoration: none;}
    section#hp-advocacy .adv-list .text a:hover { color: #9E8935;}
    
    
    /******** section about ********/
    
    section#hp-about { clear: both; width: 100%; padding: 60px 0; margin: 0 0 20px 0; background-color: #9E8935; box-sizing: border-box; position: relative; overflow: hidden;}
    
    section#hp-about img.hp-about-logo { display: none;}
    
    section#hp-about img.hp-about-logo-mo { width: 55vw; height: auto; opacity: 0.1; filter: alpha(opacity=10); position: absolute; top: 0; right: -10vw; z-index: 1;}
    
    section#hp-about .info-bx { width: 80%; margin: 0 auto; box-sizing: border-box;}
    section#hp-about .info-bx .icon-box { width: 100%; margin: 0 0 20px 0; text-align: center;}
    section#hp-about .info-bx .icon-box img { width: 40px; height: auto;}
    section#hp-about .info-bx .title-box { width: 100%; margin: 0 0 10px 0; color: #fff; text-align: center;}
    section#hp-about .info-bx .title-box h1 { font-size: 1.6em; font-weight: 500; line-height: 0.5em; letter-spacing: 0.1em;}
    section#hp-about .info-bx .title-box h2 { font-size: 1.1em; line-height: 1em; letter-spacing: 0.1em;}
    section#hp-about .info-bx .underline { clear: both; width: 40px; margin: 0 auto; border-top: 1px #fff solid;}
    section#hp-about .info-bx .about-more-bt { clear: both; width: 200px; margin: 0 auto; font-size: 0.8em; letter-spacing: 0.1em; text-align: center;}
    section#hp-about .info-bx .about-more-bt a { width: 100%; padding: 5px 0; color: #fff; text-decoration: none; border: 1px #fff solid; display: block;}
    section#hp-about .info-bx .about-more-bt a:hover { color: #414141; border: 1px #414141 solid; background-color: #eee;}
    
    section#hp-about .info-text-bx { clear: both; width: 70%; margin: 40px auto 60px auto; color: #fff; font-size: 1.1em; line-height: 1.8em;}
    section#hp-about .info-text-bx .title { width: 100%; margin: 0 0 30px 0; color: #414141; font-size: 1.2em; font-weight: 500; text-align: center;}
    
    /*section#hp-about .photos-list-box { clear: both; width: 100%;}
    section#hp-about .photos-list-box .banner-bx { width: 100%; height: 20vw; overflow: hidden;}
    section#hp-about .photos-list-box .banner-bx-mo { display: none;}*/
    
    section#hp-about .about-photos-list { clear: both; width: 740px; margin: 60px auto 0 auto; overflow: hidden;}
    section#hp-about .about-photos-list ul#about-photos { height: 250px; padding: 0; margin: 0; list-style: none; display: block; overflow: hidden;}
    section#hp-about .about-photos-list ul#about-photos li { width: 350px; padding: 0; margin: 10px; float: left;}
    section#hp-about .about-photos-list ul#about-photos li img { width: 100%; height: auto; -moz-box-shadow:4px 4px 8px -2px rgba(20%,20%,40%,0.6); -webkit-box-shadow:4px 4px 8px -2px rgba(20%,20%,40%,0.6); box-shadow:4px 4px 8px -2px rgba(20%,20%,40%,0.6);}
    section#hp-about .about-photos-list .photos-list-bt { clear: both; width: 100%; display: flex; justify-content: center; align-items: center;}
    section#hp-about .about-photos-list .photos-list-bt .arrow-prev, section#hp-about .about-photos-list .photos-list-bt .arrow-next { width: 30px; margin: 0 20px; color: #fff; font-size: 2em; text-align: center; cursor: pointer;}
    
    
    /******** section places ********/
    
    section#hp-places { clear: both; width: 100%; padding: 8vw; box-sizing: border-box; position: relative; overflow: hidden;}
    
    section#hp-places img.hp-places-title { width: 55vw; height: auto; position: absolute; top: 20vw; right: -8vw; z-index: 1;}
    section#hp-places img.hp-places-title2 { display: none;}
    
    section#hp-places .info-bx { width: 80%; margin: 0 auto; box-sizing: border-box;}
    section#hp-places .info-bx .icon-box { width: 100%; margin: 0 0 20px 0; text-align: center;}
    section#hp-places .info-bx .icon-box img { width: 40px; height: auto;}
    section#hp-places .info-bx .title-box { width: 100%; margin: 0 0 10px 0; color: #9E8935; text-align: center;}
    section#hp-places .info-bx .title-box h1 { font-size: 1.6em; font-weight: 500; line-height: 0.5em; letter-spacing: 0.1em;}
    section#hp-places .info-bx .title-box h2 { font-size: 1.1em; line-height: 1em; letter-spacing: 0.1em;}
    section#hp-places .info-bx .underline { clear: both; width: 40px; margin: 0 auto; border-top: 1px #9E8935 solid;}
    
    section#hp-places .places-column-x4 { clear: both; width: 100%; margin: 5vw 0 0 0; display: flex; justify-content: flex-start; align-items: flex-end; flex-wrap: wrap; position: relative; z-index: 9;}
    section#hp-places .places-column-x4 .column-bx { width: 50%; padding: 0 40px; margin: 0 0 40px 0; box-sizing: border-box;}
    section#hp-places .places-column-x4 .column-bx.low { }
    section#hp-places .places-column-x4 .column-bx .icon-bx { width: 100%; text-align: center;}
    section#hp-places .places-column-x4 .column-bx .icon-bx img { width: auto; height: 80px;}
    section#hp-places .places-column-x4 .column-bx .title-bx { width: 100%; margin: 10px 0; font-size: 1.6em; font-weight: 500; letter-spacing: 0.2em; text-align: center;}
    section#hp-places .places-column-x4 .column-bx .list-bx { clear: both; width: 240px; padding: 0 20px; margin: 0 auto; font-size: 1.1em; line-height: 2em; box-sizing: border-box;}
    section#hp-places .places-column-x4 .column-bx .list-bx .number { clear: both; width: 60px; float: left;}
    section#hp-places .places-column-x4 .column-bx .list-bx .name { width: calc(100% - 60px); float: left;}
    section#hp-places .places-column-x4 .column-bx .list-bx .name a { color: #414141; text-decoration: none;}
    section#hp-places .places-column-x4 .column-bx .list-bx .name a:hover { color: #9E8935;}
    section#hp-places .places-column-x4 .column-bx .list-bx.color-1 { border-left: 6px #be504d solid;}
    section#hp-places .places-column-x4 .column-bx .list-bx.color-2 { border-left: 6px #f59446 solid;}
    section#hp-places .places-column-x4 .column-bx .list-bx.color-3 { border-left: 6px #98b959 solid;}
    section#hp-places .places-column-x4 .column-bx .list-bx.color-4 { border-left: 6px #8064a0 solid;}
    
    
    /******** section stall info ********/
    
    section#hp-stall { clear: both; width: 100%; padding: 4vw 8vw 8vw 8vw; box-sizing: border-box; position: relative; overflow: hidden;}
    
    section#hp-stall img.hp-stall-title { display: none;}
    
    section#hp-stall .hp-stall-info { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; position: relative; z-index: 9;}
    section#hp-stall .hp-stall-info .line-v { width: 10px; height: 180px; display: block;}
    section#hp-stall .hp-stall-info .line-v.color-1 { background-color: #A7514E;}
    section#hp-stall .hp-stall-info .line-v.color-2 { background-color: #DF944D;}
    section#hp-stall .hp-stall-info .line-v.color-3 { background-color: #A2B960;}
    section#hp-stall .hp-stall-info .line-v.color-4 { background-color: #78649E;}
    section#hp-stall .hp-stall-info .info-content-box { width: calc(100% - 10px); padding: 0 20px; box-sizing: border-box;}
    section#hp-stall .hp-stall-info .info-content-box .title-bar { width: 100%; margin: 0 0 30px 0; display: flex; justify-content: flex-start; align-items: flex-start; position: relative;}
    section#hp-stall .hp-stall-info .info-content-box .title-bar .title { width: calc(100% - 60px - 20px);}
    section#hp-stall .hp-stall-info .info-content-box .title-bar .title h1 { padding: 0; margin: 0; font-size: 1.8em; font-weight: 500; line-height: 1em; letter-spacing: 0.1em;}
    section#hp-stall .hp-stall-info .info-content-box .title-bar .icons { width: calc(60px + 20px); display: flex; justify-content: flex-end; align-items: center;}
    section#hp-stall .hp-stall-info .info-content-box .title-bar .icons img { width: 30px; height: auto; margin: 0 0 0 10px; cursor: pointer;}
    section#hp-stall .hp-stall-info .info-content-box .title-bar .icons img.img-sel { display: none;}
    section#hp-stall .hp-stall-info .info-content-box .title-bar .icons .social-box { width: 160px; padding: 10px 0; text-align: center; border: 1px #ccc solid; border-radius: 10px; background-color: #353229; box-sizing: border-box; display: none; justify-content: center; align-items: center; position: absolute; top: 50px; right: 0;}
    section#hp-stall .hp-stall-info .info-content-box .title-bar .icons .social-box img.fb { width: 13px; height: auto; margin: 0 10px;}
    section#hp-stall .hp-stall-info .info-content-box .title-bar .icons .social-box img.line { width: 26px; height: auto; margin: 0 10px;}
    section#hp-stall .hp-stall-info .info-content-box .title-bar .icons .social-box img.copy { width: 26px; height: auto; margin: 0 10px;}
    section#hp-stall .hp-stall-info .info-content-box .text-content { clear: both; width: 100%; margin: 0 0 30px 0; font-size: 1.1em; line-height: 1.6em;}
    section#hp-stall .hp-stall-info .info-content-box .contact-info { clear: both; width: 100%; padding: 30px 0; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
    section#hp-stall .hp-stall-info .info-content-box .contact-info .title { width: 90px; padding: 3px; margin: 0 0 5px 0; font-size: 1.1em; text-align: center; color: #353229; border-radius: 1vw; background-color: #FDF9C5; box-sizing: border-box;}
    section#hp-stall .hp-stall-info .info-content-box .contact-info .info { width: calc(100% - 90px); padding: 3px; margin: 0 0 5px 0; font-size: 1.1em; word-break: break-all; box-sizing: border-box;}
    section#hp-stall .hp-stall-info .info-content-box .contact-info .info a { color: #414141; text-decoration: none;}
    section#hp-stall .hp-stall-info .info-content-box .contact-info .info a:hover { text-decoration: underline;}
    section#hp-stall .hp-stall-info .info-content-box .payment-info { clear: both; width: 100%; margin: 30px 0 0 0; color: #666; font-size: 1em; display: flex; justify-content: flex-end; align-items: center;}
    section#hp-stall .hp-stall-info .info-content-box .payment-info img.icon { width: 24px; height: auto; margin: 0 5px 0 15px;}
    section#hp-stall .hp-stall-info .photos-box { display: none;}
    section#hp-stall .hp-stall-info .photos-box-mo { clear: both; width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap;}
    section#hp-stall .hp-stall-info .photos-box-mo .title-bar { width: 100%; padding: 0 10px; margin: 0 0 30px 0; display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box;}
    section#hp-stall .hp-stall-info .photos-box-mo .title-bar .title { width: 160px; font-size: 2em; font-weight: 500; letter-spacing: 0.1em;}
    section#hp-stall .hp-stall-info .photos-box-mo .title-bar .underline-color-1 { width: calc(100% - 160px); border-bottom: 10px #A7514E solid;}
    section#hp-stall .hp-stall-info .photos-box-mo .title-bar .underline-color-2 { width: calc(100% - 160px); border-bottom: 10px #DF944D solid;}
    section#hp-stall .hp-stall-info .photos-box-mo .title-bar .underline-color-3 { width: calc(100% - 160px); border-bottom: 10px #A2B960 solid;}
    section#hp-stall .hp-stall-info .photos-box-mo .title-bar .underline-color-4 { width: calc(100% - 160px); border-bottom: 10px #78649E solid;}
    section#hp-stall .hp-stall-info .photos-box-mo .photo-info { width: calc(100% / 2 - 20px); margin: 10px;}
    section#hp-stall .hp-stall-info .photos-box-mo .photo-info .photo { width: 100%; height: 22vw; overflow: hidden;}
    section#hp-stall .hp-stall-info .photos-box-mo .photo-info .photo img { width: 100%; height: auto;}
    section#hp-stall .hp-stall-info .photos-box-mo .photo-info .infor { width: 100%; font-size: 0.9em;}
        
    
    /******** section news ********/
    
    section#hp-news { clear: both; width: 100%; padding: 8vw 0; background-color: #f3f3f3; box-sizing: border-box; position: relative; overflow: hidden;}
    
    section#hp-news img.hp-news-title { width: 15vw; height: auto; position: absolute; bottom: 2vw; right: 8vw; z-index: 1;}
    section#hp-news img.hp-news-title-mo { display: none;}
    
    section#hp-news img.page-news-title { width: 50vw; height: auto; opacity: 0.2; filter: alpha(opacity=20); position: absolute; top: 6vw; right: -8vw;}
    
    section#hp-news .title-box { width: 100%; margin: 0 0 20px 0; color: #9E8935; text-align: center;}
    section#hp-news .title-box h1 { font-size: 1.6em; font-weight: 500; line-height: 0.5em; letter-spacing: 0.1em;}
    section#hp-news .title-box h2 { font-size: 1.1em; line-height: 1em; letter-spacing: 0.1em;}
    section#hp-news .title-box .underline { clear: both; width: 40px; margin: 10px auto 0 auto; border-top: 1px #9E8935 solid;}
    
    section#hp-news .hp-news-list-box { clear: both; width: 720px; margin: 0 auto; overflow: hidden; position: relative; z-index: 9;}
    section#hp-news .hp-news-list-box ul.hp-news-list { height: 530px; padding: 0; margin: 0; list-style: none; display: block; overflow: hidden;}
    section#hp-news .hp-news-list-box ul.hp-news-list li { width: 320px; padding: 0; margin: 20px; float: left;}
    section#hp-news .hp-news-list-box ul.hp-news-list li .news-box { width: 100%; padding: 20px; background-color: #fff; -moz-box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5); box-sizing: border-box;}
    section#hp-news .hp-news-list-box ul.hp-news-list li .news-box .photo { width: 100%; height: 200px; margin: 0 0 20px 0; overflow: hidden;}
    section#hp-news .hp-news-list-box ul.hp-news-list li .news-box .photo img { width: 100%; height: auto;}
    section#hp-news .hp-news-list-box ul.hp-news-list li .news-box .date { width: 100%; color: #666; font-size: 0.9em; letter-spacing: 0.1em;}
    section#hp-news .hp-news-list-box ul.hp-news-list li .news-box .title { width: 100%; margin: 30px 0; color: #3E7E00; font-size: 1.1em; font-weight: 500; letter-spacing: 0.1em;}
    section#hp-news .hp-news-list-box ul.hp-news-list li .news-box .text { width: 100%; margin: 0 0 30px 0; color: #666; font-size: 0.9em;}
    section#hp-news .hp-news-list-box ul.hp-news-list li .news-box .more { width: 100%;}
    section#hp-news .hp-news-list-box ul.hp-news-list li .news-box .more a { color: #B3252F; font-weight: 400; text-decoration: underline;}
    section#hp-news .hp-news-list-box ul.hp-news-list li .news-box .more a:hover { color: #9E8935;}
    
    section#hp-news .news-list-box { clear: both; width: 720px; margin: 0 auto; position: relative; z-index: 9;}
    section#hp-news .news-list-box ul.news-list { padding: 0; margin: 0; list-style: none; display: block; overflow: hidden;}
    section#hp-news .news-list-box ul.news-list li { width: 320px; padding: 0; margin: 20px; float: left;}
    section#hp-news .news-list-box ul.news-list li .news-box { width: 100%; padding: 20px; background-color: #fff; -moz-box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5); box-sizing: border-box;}
    section#hp-news .news-list-box ul.news-list li .news-box .photo { width: 100%; height: 200px; margin: 0 0 20px 0; overflow: hidden;}
    section#hp-news .news-list-box ul.news-list li .news-box .photo img { width: 100%; height: auto;}
    section#hp-news .news-list-box ul.news-list li .news-box .date { width: 100%; color: #666; font-size: 0.9em; letter-spacing: 0.1em;}
    section#hp-news .news-list-box ul.news-list li .news-box .title { width: 100%; margin: 30px 0; color: #3E7E00; font-size: 1.1em; font-weight: 500; letter-spacing: 0.1em;}
    section#hp-news .news-list-box ul.news-list li .news-box .text { width: 100%; margin: 0 0 30px 0; color: #666; font-size: 0.9em;}
    section#hp-news .news-list-box ul.news-list li .news-box .more { width: 100%;}
    section#hp-news .news-list-box ul.news-list li .news-box .more a { color: #B3252F; font-weight: 400; text-decoration: underline;}
    section#hp-news .news-list-box ul.news-list li .news-box .more a:hover { color: #9E8935;}
    
    section#hp-news .news-list-box .news-scroller-bt { clear: both; width: 100%; margin: 30px 0 0 0; display: flex; justify-content: center; align-items: center;}
    section#hp-news .news-list-box .news-scroller-bt .arrow-prev, .news-scroller-bt .arrow-next { width: 30px; margin: 0 10px; color: #9E8935; font-size: 1.6em; text-align: center; cursor: pointer;}
    
    section#hp-news .hp-news-more-bt { clear: both; width: 200px; margin: 60px auto;}
    section#hp-news .hp-news-more-bt a { width: 100%; padding: 5px 0; color: #414141; font-size: 0.8em; letter-spacing: 0.2em; text-align: center; text-decoration: none; border: 1px #414141 solid; background-color: #fff; box-sizing: border-box; display: block;}
    section#hp-news .hp-news-more-bt a:hover { background-color: #eee;}
    
    section#hp-news .news-content-box { clear: both; width: 100%; padding: 0 8vw; margin: 0 auto; position: relative; z-index: 9; box-sizing: border-box;}
    section#hp-news .news-content-box .title { width: 100%; color: #3E7E00; font-size: 1.3em; font-weight: 600;}
    section#hp-news .news-content-box .date { width: 100%; padding: 10px 0; font-size: 0.9em; font-weight: 500; text-align: right; border-bottom: 2px #ccc solid;}
    section#hp-news .news-content-box .content { clear: both; width: 100%; padding: 40px 0; font-size: 1.1em; line-height: 1.8em; box-sizing: border-box;}
    section#hp-news .news-content-box .content img { max-width: 100%; height: auto;}
    
    section#hp-news .goback-bt { clear: both; width: 180px; margin: 0 auto; font-size: 0.8em; letter-spacing: 0.1em; text-align: center;}
    section#hp-news .goback-bt a { width: 100%; padding: 5px 0; color: #414141; text-decoration: none; border: 1px #414141 solid; display: block;}
    section#hp-news .goback-bt a:hover { color: #999; border: 1px #999 solid; background-color: #eee;}
    
    
    /******** section contact ********/
    
    section#hp-contact { clear: both; width: 100%; padding: 8vw 4vw; margin: 0 0 20px 0; box-sizing: border-box; background-color: #9E8935; position: relative; overflow: hidden;}
    
    section#hp-contact .title-box { width: 100%; margin: 0 0 20px 0; color: #fff; text-align: center;}
    section#hp-contact .title-box h1 { font-size: 1.6em; font-weight: 500; line-height: 0.5em; letter-spacing: 0.1em;}
    section#hp-contact .title-box h2 { font-size: 1.1em; line-height: 1em; letter-spacing: 0.1em;}
    section#hp-contact .title-box .underline { clear: both; width: 40px; margin: 10px auto 0 auto; border-top: 1px #fff solid;}
    
    section#hp-contact .hp-contact-position { clear: both; width: 100%;}
    section#hp-contact .hp-contact-position .contact-info { width: 80%; margin: 0 auto; text-align: center;}
    section#hp-contact .hp-contact-position .contact-info img.title { display: none;}
    section#hp-contact .hp-contact-position .contact-info img.title-mo { width: 80%; height: auto;}
    section#hp-contact .hp-contact-position .contact-info .info-box { clear: both; width: 90%; padding: 60px 0; margin: 0 auto; color: #fff; font-size: 2.6vw; font-weight: 500; letter-spacing: 0.1em; text-align: left; box-sizing: border-box;}
    section#hp-contact .hp-contact-position .postion-pic { clear: both; width: 80%; margin: 0 auto; box-sizing: border-box;}
    section#hp-contact .hp-contact-position .postion-pic img { width: 100%; height: auto;}
    
    
    /******** section traffic ********/
    
    section#hp-traffic { clear: both; width: 100%; padding: 8vw; box-sizing: border-box; position: relative; overflow: hidden;}
    
    section#hp-traffic .title-box { width: 100%; margin: 0 0 20px 0; color: #9E8935; text-align: center;}
    section#hp-traffic .title-box h1 { font-size: 1.6em; font-weight: 500; line-height: 0.5em; letter-spacing: 0.1em;}
    section#hp-traffic .title-box h2 { font-size: 1.1em; line-height: 1em; letter-spacing: 0.1em;}
    section#hp-traffic .title-box .underline { clear: both; width: 40px; margin: 10px auto 0 auto; border-top: 1px #9E8935 solid;}
    
    section#hp-traffic .hp-traffic-way { clear: both; width: 100%; text-align: center;}
    section#hp-traffic .hp-traffic-way img.title { width: 60%; height: auto;}
    section#hp-traffic .hp-traffic-way .traffic-way { clear: both; width: 70%; margin: 60px auto 0 auto;}
    section#hp-traffic .hp-traffic-way .traffic-way .info-left { width: 100%; margin: 0 0 30px 0; font-size: 1.1em; line-height: 2em; text-align: left;}
    section#hp-traffic .hp-traffic-way .traffic-way .info-right { width: 100%; font-size: 1.1em; line-height: 2em; text-align: left;}
    section#hp-traffic .hp-traffic-way .traffic-way .info-left font.title, .info-right font.title { color: #9E8935; font-size: 1.4em; font-weight: 500;}
        
    
    /******** section history ********/
    
    section#hp-history { clear: both; width: 100%; padding: 8vw 8vw; margin: 0 0 20px 0; background-color: #9E8935; box-sizing: border-box; position: relative; overflow: hidden;}
    
    section#hp-history img.hp-history-logo { width: 40vw; height: auto; opacity: 0.1; filter: alpha(opacity=10); position: absolute; top: 6vw; right: 6vw;}
    
    section#hp-history .history-title { width: 100%; margin: 0 0 40px 0; display: flex; justify-content: flex-start; align-items: flex-end;}
    section#hp-history .history-title .title-box { width: 140px; color: #fff; text-align: center;}
    section#hp-history .history-title .title-box h1 { font-size: 1.6em; font-weight: 500; line-height: 0.5em; letter-spacing: 0.1em;}
    section#hp-history .history-title .title-box h2 { font-size: 1.1em; line-height: 1em; letter-spacing: 0.1em;}
    section#hp-history .history-title .title-box .underline { clear: both; width: 40px; margin: 10px auto 0 auto; border-top: 1px #fff solid;}
    section#hp-history .history-title .icon-box { width: 40px; padding: 0 60px 20px 0;}
    section#hp-history .history-title .icon-box img { width: 100%; height: auto;}
    section#hp-history .history-title .sub-title { width: calc(100% - 240px); padding: 0 0 20px 0; color: #414141; font-size: 1.4em; font-weight: 500; letter-spacing: 0.1em;}
    
    section#hp-history .history-content { clear: both; width: 100%; color: #fff; font-size: 1.1em; line-height: 1.6em;}
    section#hp-history .history-content font.title-s { color: #414141; font-size: 1.1em; line-height: 2em; font-weight: 500;}
    
    
    /******** section sitemap ********/
    
    section#sitemap { clear: both; width: 100%; padding: 8vw 8vw 14vw 8vw; box-sizing: border-box; position: relative; overflow: hidden;}
    
    section#sitemap img.sitemap-title { width: 20vw; height: auto; position: absolute; bottom: 2vw; right: 8vw; z-index: 1;}
    
    section#sitemap .title-box { width: 100%; margin: 0 0 20px 0; color: #9E8935; text-align: center;}
    section#sitemap .title-box h1 { font-size: 1.6em; font-weight: 500; line-height: 0.5em; letter-spacing: 0.1em;}
    section#sitemap .title-box h2 { font-size: 1.1em; line-height: 1em; letter-spacing: 0.1em;}
    section#sitemap .title-box .underline { clear: both; width: 40px; margin: 10px auto 0 auto; border-top: 1px #9E8935 solid;}
    
    section#sitemap ul#sitemap-list { clear: both; width: 100%; padding: 0; margin: 60px auto 0 auto; list-style: none; display: flex; justify-content: flex-start; flex-wrap: wrap;}
    section#sitemap ul#sitemap-list li { width: calc(100% / 3); padding: 0; margin: 0 0 30px 0;}
    section#sitemap ul#sitemap-list li:nth-child(4) { width: calc(100% / 3 * 2);}
    section#sitemap ul#sitemap-list li a { padding: 0.5vw 1vw; color: #414141; font-size: 1.1em; text-decoration: none; border-bottom: 1px #414141 solid; box-sizing: border-box;}
    section#sitemap ul#sitemap-list li a:hover { color: #FDF9C5; background-color: #353229;}
    section#sitemap ul#sitemap-list li ul.list-snd { clear: both; width: 100%; padding: 0; margin: 20px 0 0 0; list-style: none; display: block;}
    section#sitemap ul#sitemap-list li ul.list-snd .list-snd-title { width: 100%; color: #9E8935; font-size: 0.9em; box-sizing: border-box; }
    section#sitemap ul#sitemap-list li ul.list-snd li { width: 50%; padding: 3px 0; margin: 0; float: left;}
    section#sitemap ul#sitemap-list li ul.list-snd li a { color: #414141; font-size: 0.9em; box-sizing: border-box; border: 0;}
    section#sitemap ul#sitemap-list li ul.list-snd li a:hover { color: #414141; background-color: transparent; text-decoration: underline;}


    /******** section faq ********/
    
    section#faq { clear: both; width: 100%; padding: 8vw 0; box-sizing: border-box; background-color: #f3f3f3; position: relative; overflow: hidden;}
    
    section#faq img.faq-title { width: 50vw; height: auto; opacity: 0.2; filter: alpha(opacity=20); position: absolute; top: 6vw; right: -8vw; z-index: 1;}
    
    section#faq .title-box { width: 100%; margin: 0 0 20px 0; color: #9E8935; text-align: center;}
    section#faq .title-box h1 { font-size: 1.6em; font-weight: 500; line-height: 0.5em; letter-spacing: 0.1em;}
    section#faq .title-box h2 { font-size: 1.1em; line-height: 1em; letter-spacing: 0.1em;}
    section#faq .title-box .underline { clear: both; width: 40px; margin: 10px auto 0 auto; border-top: 1px #9E8935 solid;}

    .faq-list { clear: both; width: 80%; margin: 0 auto 20px auto; position: relative; z-index: 5;}
    .faq-list .faq-q { width: 100%; padding: 8px 15px; color: #9E8935; font-size: 1.2em; font-weight: 600; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
    .faq-list .faq-a { width: 100%; padding: 15px; color: #414141; font-size: 1.1em; box-sizing: border-box;}

    section#faq .safety-content { clear: both; width: 100%; padding: 0 20px; line-height: 1.8em; box-sizing: border-box;}
    
    
    /******** footer ********/
    
    footer { width: 100%; padding: 30px 0 0 0; background-color: #9E8935;}
    
    footer .add-info { width: 100%; padding: 0 30px; box-sizing: border-box; color: #fff;}
    footer .add-info .column-1 { width: 200px; margin: 0 0 20px 0; font-size: 1.1em; float: left;}
    footer .add-info .column-2 { width: calc(100% - 470px); margin: 0 0 20px 0; font-size: 1.1em; float: left;}
    footer .add-info .column-3 { width: 130px; float: left;}
    footer .add-info .column-3 a { color: #fff; text-decoration: none;}
    footer .add-info .column-3 a img { width: 16px; height: auto;}
    footer .add-info .column-4 { width: 140px; text-align: center; float: left;}
    
    footer .fb-box { clear: both; width: 360px; margin: 30px auto;}
    
    footer .copyright { clear: both; width: 100%; padding: 15px 0; color: #9E8935; font-size: 1.4em; background-color: #353229; display: flex; justify-content: center; align-items: center;}
    
    
}

@media screen and (max-width: 767px) {
    
    
    /******** top nav ********/
    
    .top-nav-full { width: 100%; padding: 10px; box-sizing: border-box; color: #FDF9C5; font-size: 0.9em; background-color: #353229;}
    .top-nav-full ul { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-end; align-items: center; float: right;}
    .top-nav-full ul li { padding: 0; margin: 0 0 0 20px;}
    .top-nav-full ul li a { color: #FDF9C5; text-decoration: none;}
    .top-nav-full ul li a:active { color: #FDF9C5;}
    
    .top-nav-full .web-title { width: 50%; line-height: 1em; float: left;}
    
    
    /******** header ********/
    
    header { clear: both; width: 90%; padding: 30px 0; margin: 0 auto; border-bottom: 1px #ccc solid; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start;}
    
    header .logo-bx { width: 220px; float: left; display: none}
    header .logo-bx img { width: 100%; height: auto;}
    
    header nav#pc { display: none;}
    
    header nav#mo { width: 50px; margin: 0 30px 0 0;}
    
    header nav#mo .nav-icon { width: 50px;}
    header nav#mo .nav-icon img { width: 100%; height: auto; cursor: pointer;}
    
    header nav#mo ul#sub { width: 320px; padding: 30px 20px; box-sizing: border-box; margin: 0; background-color: #353229; list-style: none; display: block; position: absolute; top: 39px; left: -320px; z-index: 999;}
    header nav#mo ul#sub .nav-close-icon { width: 40px; margin: 0 0 30px 0; float: right; cursor: pointer;}
    header nav#mo ul#sub .nav-close-icon img { width: 100%; height: auto;}
    header nav#mo ul#sub li { clear: both; width: 100%; padding: 0; margin: 0; border-bottom: 1px #7F7F7F solid;}
    header nav#mo ul#sub li:last-child { border-bottom: 0;}
    header nav#mo ul#sub li a { width: 100%; padding: 30px 20px; color: #FDF9C5; text-decoration: none; display: flex; justify-content: center; align-items: flex-end; box-sizing: border-box;}
    header nav#mo ul#sub li a .menu-b { margin: 0 10px 0 0; font-size: 1.2em; line-height: 1em; display: block;}
    header nav#mo ul#sub li a .menu-s { font-size: 0.9em; line-height: 1em; display: block;}    
    header nav#mo ul#sub li a:active { color: #fff; background-color: #9E8935;}
    header nav#mo ul#sub li a.sel { color: #fff; background-color: #9E8935;}
    header nav#mo ul#sub li.line { padding: 0 0 10px 0; display: flex; align-items: flex-end;}
    
    header .lang-bx { width: 140px; position: relative; cursor: pointer;}
    header .lang-bx img { width: 100%; height: auto;}
    header .lang-bx .lang-nav-box { width: 140px; position: absolute; top: 40px; left: 0; z-index: 99; display: none;}
    header .lang-bx .lang-nav-box .tri1 { width: 0px; height: 0px; padding: 0; margin: 0 auto; border-style: solid; border-width: 0px 10px 15px 10px; border-color: transparent transparent #353229 transparent;}
    header .lang-bx .lang-nav-box ul.lang-nav { clear: both; width: 100%; padding: 0; margin: 0; border: 1px #353229 solid; list-style: none; display: block;}
    header .lang-bx .lang-nav-box ul.lang-nav li { width: 100%; padding: 0; margin: 0;}
    header .lang-bx .lang-nav-box ul.lang-nav li a { width: 100%; padding: 10px; color: #414141; font-size: 1em; text-align: center; text-decoration: none; background-color: #fff; box-sizing: border-box; display: block;}
    header .lang-bx .lang-nav-box ul.lang-nav li a:active { background-color: #eee;}
    header .lang-bx .lang-nav-box ul.lang-nav li a.sel { color: #fff; background-color: #353229;}
    
    
    /******** section main ********/
    
    section#hp-main { clear: both; width: 100%; padding: 60px 20px; margin: 0 auto; text-align: center; background-color: #fff; box-sizing: border-box;}
    
    section#hp-main img.hp-main-pic { width: 100%; height: auto;}
    
    section#hp-main .hp-about-content { clear: both; width: 100%; text-align: center;}
    section#hp-main .hp-about-content img.title { width: 90%; height: auto;}
    section#hp-main .hp-about-content .text-bx { clear: both; width: 80%; margin: 40px auto 0 auto; font-size: 1.1em; line-height: 1.8em; text-align: left; box-sizing: border-box;}
        
    section#hp-main .hp-about-more-bt { clear: both; width: 200px; margin: 60px auto;}
    section#hp-main .hp-about-more-bt a { width: 100%; padding: 5px 0; color: #414141; font-size: 0.8em; letter-spacing: 0.2em; text-align: center; text-decoration: none; border: 1px #414141 solid; background-color: #fff; box-sizing: border-box; display: block;}
    section#hp-main .hp-about-more-bt a:active { background-color: #eee;}

    section#hp-advocacy { clear: both; width: 100%; padding: 60px 20px; box-sizing: border-box;}
    section#hp-advocacy .title-box { width: 100%; margin: 0 0 20px 0; color: #9E8935; text-align: center;}
    section#hp-advocacy .title-box h1 { font-size: 1.6em; font-weight: 500; line-height: 0.5em; letter-spacing: 0.1em;}
    section#hp-advocacy .title-box h2 { font-size: 1.1em; line-height: 1em; letter-spacing: 0.1em;}
    section#hp-advocacy .title-box .underline { clear: both; width: 40px; margin: 10px auto 0 auto; border-top: 1px #9E8935 solid;}
    section#hp-advocacy .adv-list { clear: both; width: 100%; padding: 6px 20px; margin: 0 auto 10px auto; border-radius: 30px; border: 1px #ccc solid; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
    section#hp-advocacy .adv-list .icon { width:40px; color: #9E8935; font-size: 1.4em;}
    section#hp-advocacy .adv-list .text { width: calc(100% - 40px); font-size: 1.1em;}
    section#hp-advocacy .adv-list .text a { color: #414141; text-decoration: none;}
    section#hp-advocacy .adv-list .text a:hover { color: #9E8935;}
    
    
    /******** section about ********/
    
    section#hp-about { clear: both; width: 100%; padding: 60px 0; margin: 0 0 20px 0; background-color: #9E8935; box-sizing: border-box; position: relative; overflow: hidden;}
    
    section#hp-about img.hp-about-logo { display: none;}
    
    section#hp-about img.hp-about-logo-mo { width: 55vw; height: auto; opacity: 0.1; filter: alpha(opacity=10); position: absolute; top: 0; right: -10vw; z-index: 1;}
    
    section#hp-about .info-bx { width: 80%; margin: 0 auto; box-sizing: border-box;}
    section#hp-about .info-bx .icon-box { width: 100%; margin: 0 0 20px 0; text-align: center;}
    section#hp-about .info-bx .icon-box img { width: 40px; height: auto;}
    section#hp-about .info-bx .title-box { width: 100%; margin: 0 0 10px 0; color: #fff; text-align: center;}
    section#hp-about .info-bx .title-box h1 { font-size: 1.6em; font-weight: 500; line-height: 0.5em; letter-spacing: 0.1em;}
    section#hp-about .info-bx .title-box h2 { font-size: 1.1em; line-height: 1em; letter-spacing: 0.1em;}
    section#hp-about .info-bx .underline { clear: both; width: 40px; margin: 0 auto; border-top: 1px #fff solid;}
    section#hp-about .info-bx .about-more-bt { clear: both; width: 200px; margin: 0 auto; font-size: 0.8em; letter-spacing: 0.1em; text-align: center;}
    section#hp-about .info-bx .about-more-bt a { width: 100%; padding: 5px 0; color: #fff; text-decoration: none; border: 1px #fff solid; display: block;}
    section#hp-about .info-bx .about-more-bt a:active { color: #414141; border: 1px #414141 solid; background-color: #eee;}
    
    section#hp-about .info-text-bx { clear: both; width: 100%; padding: 0 20px; margin: 40px auto 60px auto; color: #fff; font-size: 1.1em; line-height: 1.8em; box-sizing: border-box;}
    section#hp-about .info-text-bx .title { width: 100%; margin: 0 0 30px 0; color: #414141; font-size: 1.2em; font-weight: 500; text-align: center;}
    
    /*section#hp-about .photos-list-box { clear: both; width: 100%;}
    section#hp-about .photos-list-box .banner-bx { display: none;}
    section#hp-about .photos-list-box .banner-bx-mo { width: 100%; height: 50vw; overflow: hidden;}*/
    
    section#hp-about .about-photos-list { clear: both; width: 340px; margin: 60px auto 0 auto; overflow: hidden;}
    section#hp-about .about-photos-list ul#about-photos { height: 240px; padding: 0; margin: 0; list-style: none; display: block; overflow: hidden;}
    section#hp-about .about-photos-list ul#about-photos li { width: 320px; padding: 0; margin: 10px; float: left;}
    section#hp-about .about-photos-list ul#about-photos li img { width: 100%; height: auto; -moz-box-shadow:4px 4px 8px -2px rgba(20%,20%,40%,0.6); -webkit-box-shadow:4px 4px 8px -2px rgba(20%,20%,40%,0.6); box-shadow:4px 4px 8px -2px rgba(20%,20%,40%,0.6);}
    section#hp-about .about-photos-list .photos-list-bt { clear: both; width: 100%; display: flex; justify-content: center; align-items: center;}
    section#hp-about .about-photos-list .photos-list-bt .arrow-prev, section#hp-about .about-photos-list .photos-list-bt .arrow-next { width: 30px; margin: 0 20px; color: #fff; font-size: 2em; text-align: center; cursor: pointer;}
    
    
    /******** section places ********/
    
    section#hp-places { clear: both; width: 100%; padding: 8vw 20px; box-sizing: border-box; position: relative; overflow: hidden;}
    
    section#hp-places img.hp-places-title { width: 55vw; height: auto; position: absolute; top: 20vw; right: -8vw; z-index: 1;}
    section#hp-places img.hp-places-title2 { display: none;}
    
    section#hp-places .info-bx { width: 80%; margin: 0 auto; box-sizing: border-box;}
    section#hp-places .info-bx .icon-box { width: 100%; margin: 0 0 20px 0; text-align: center;}
    section#hp-places .info-bx .icon-box img { width: 40px; height: auto;}
    section#hp-places .info-bx .title-box { width: 100%; margin: 0 0 10px 0; color: #9E8935; text-align: center;}
    section#hp-places .info-bx .title-box h1 { font-size: 1.6em; font-weight: 500; line-height: 0.5em; letter-spacing: 0.1em;}
    section#hp-places .info-bx .title-box h2 { font-size: 1.1em; line-height: 1em; letter-spacing: 0.1em;}
    section#hp-places .info-bx .underline { clear: both; width: 40px; margin: 0 auto; border-top: 1px #9E8935 solid;}
    
    section#hp-places .places-column-x4 { clear: both; width: 100%; margin: 5vw 0 0 0; position: relative; z-index: 9;}
    section#hp-places .places-column-x4 .column-bx { width: 100%; padding: 0 40px; margin: 0 0 40px 0; box-sizing: border-box;}
    section#hp-places .places-column-x4 .column-bx.low { }
    section#hp-places .places-column-x4 .column-bx .icon-bx { width: 100%; text-align: center;}
    section#hp-places .places-column-x4 .column-bx .icon-bx img { width: auto; height: 80px;}
    section#hp-places .places-column-x4 .column-bx .title-bx { width: 100%; margin: 10px 0; font-size: 1.6em; font-weight: 500; letter-spacing: 0.2em; text-align: center;}
    section#hp-places .places-column-x4 .column-bx .list-bx { clear: both; width: 280px; padding: 0 20px; margin: 0 auto; font-size: 1.1em; line-height: 2em; box-sizing: border-box;}
    section#hp-places .places-column-x4 .column-bx .list-bx .number { clear: both; width: 60px; float: left;}
    section#hp-places .places-column-x4 .column-bx .list-bx .name { width: calc(100% - 60px); float: left;}
    section#hp-places .places-column-x4 .column-bx .list-bx .name a { color: #414141; text-decoration: none;}
    section#hp-places .places-column-x4 .column-bx .list-bx .name a:active { color: #9E8935;}
    section#hp-places .places-column-x4 .column-bx .list-bx.color-1 { border-left: 6px #be504d solid;}
    section#hp-places .places-column-x4 .column-bx .list-bx.color-2 { border-left: 6px #f59446 solid;}
    section#hp-places .places-column-x4 .column-bx .list-bx.color-3 { border-left: 6px #98b959 solid;}
    section#hp-places .places-column-x4 .column-bx .list-bx.color-4 { border-left: 6px #8064a0 solid;}
    
    
    /******** section stall info ********/
    
    section#hp-stall { clear: both; width: 100%; padding: 4vw 20px 8vw 20px; box-sizing: border-box; position: relative; overflow: hidden;}
    
    section#hp-stall img.hp-stall-title { display: none;}
    
    section#hp-stall .hp-stall-info { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; position: relative; z-index: 9;}
    section#hp-stall .hp-stall-info .line-v { width: 10px; height: 180px; display: block;}
    section#hp-stall .hp-stall-info .line-v.color-1 { background-color: #A7514E;}
    section#hp-stall .hp-stall-info .line-v.color-2 { background-color: #DF944D;}
    section#hp-stall .hp-stall-info .line-v.color-3 { background-color: #A2B960;}
    section#hp-stall .hp-stall-info .line-v.color-4 { background-color: #78649E;}
    section#hp-stall .hp-stall-info .info-content-box { width: calc(100% - 10px); padding: 0 20px; box-sizing: border-box;}
    section#hp-stall .hp-stall-info .info-content-box .title-bar { width: 100%; margin: 0 0 30px 0; display: flex; justify-content: flex-start; align-items: center; position: relative;}
    section#hp-stall .hp-stall-info .info-content-box .title-bar .title { width: calc(100% - 60px - 20px);}
    section#hp-stall .hp-stall-info .info-content-box .title-bar .title h1 { padding: 0; margin: 0; font-size: 1.8em; font-weight: 500; line-height: 1em; letter-spacing: 0.1em;}
    section#hp-stall .hp-stall-info .info-content-box .title-bar .icons { width: calc(60px + 20px); display: flex; justify-content: flex-end; align-items: center;}
    section#hp-stall .hp-stall-info .info-content-box .title-bar .icons img { width: 30px; height: auto; margin: 0 0 0 10px; cursor: pointer;}
    section#hp-stall .hp-stall-info .info-content-box .title-bar .icons img.img-sel { display: none;}
    section#hp-stall .hp-stall-info .info-content-box .title-bar .icons .social-box { width: 160px; padding: 10px 0; text-align: center; border: 1px #ccc solid; border-radius: 10px; background-color: #353229; box-sizing: border-box; display: none; justify-content: center; align-items: center; position: absolute; top: 50px; right: 0;}
    section#hp-stall .hp-stall-info .info-content-box .title-bar .icons .social-box img.fb { width: 13px; height: auto; margin: 0 10px;}
    section#hp-stall .hp-stall-info .info-content-box .title-bar .icons .social-box img.line { width: 26px; height: auto; margin: 0 10px;}
    section#hp-stall .hp-stall-info .info-content-box .title-bar .icons .social-box img.copy { width: 26px; height: auto; margin: 0 10px;}
    section#hp-stall .hp-stall-info .info-content-box .text-content { clear: both; width: 100%; margin: 0 0 30px 0; font-size: 1.1em; line-height: 1.6em;}
    section#hp-stall .hp-stall-info .info-content-box .contact-info { clear: both; width: 100%; padding: 30px 0; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
    section#hp-stall .hp-stall-info .info-content-box .contact-info .title { width: 80px; padding: 3px; margin: 0 0 5px 0; font-size: 1em; text-align: center; color: #353229; border-radius: 1vw; background-color: #FDF9C5; box-sizing: border-box;}
    section#hp-stall .hp-stall-info .info-content-box .contact-info .info { width: calc(100% - 80px); padding: 3px; margin: 0 0 5px 0; font-size: 1em; word-break: break-all; box-sizing: border-box;}
    section#hp-stall .hp-stall-info .info-content-box .contact-info .info a { color: #414141; text-decoration: none;}
    section#hp-stall .hp-stall-info .info-content-box .contact-info .info a:hover { text-decoration: underline;}
    section#hp-stall .hp-stall-info .info-content-box .payment-info { clear: both; width: 100%; margin: 30px 0 0 0; color: #666; font-size: 1em; display: flex; justify-content: flex-end; align-items: center;}
    section#hp-stall .hp-stall-info .info-content-box .payment-info img.icon { width: 24px; height: auto; margin: 0 5px 0 15px;}
    section#hp-stall .hp-stall-info .photos-box { display: none;}
    section#hp-stall .hp-stall-info .photos-box-mo { clear: both; width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap;}
    section#hp-stall .hp-stall-info .photos-box-mo .title-bar { width: 100%; margin: 0 0 30px 0; display: flex; justify-content: flex-start; align-items: center;}
    section#hp-stall .hp-stall-info .photos-box-mo .title-bar .title { width: 160px; font-size: 2em; font-weight: 500; letter-spacing: 0.1em;}
    section#hp-stall .hp-stall-info .photos-box-mo .title-bar .underline-color-1 { width: calc(100% - 160px); border-bottom: 10px #A7514E solid;}
    section#hp-stall .hp-stall-info .photos-box-mo .title-bar .underline-color-2 { width: calc(100% - 160px); border-bottom: 10px #DF944D solid;}
    section#hp-stall .hp-stall-info .photos-box-mo .title-bar .underline-color-3 { width: calc(100% - 160px); border-bottom: 10px #A2B960 solid;}
    section#hp-stall .hp-stall-info .photos-box-mo .title-bar .underline-color-4 { width: calc(100% - 160px); border-bottom: 10px #78649E solid;}
    section#hp-stall .hp-stall-info .photos-box-mo .photo-info { width: 100%; margin: 0 0 20px 0;}
    section#hp-stall .hp-stall-info .photos-box-mo .photo-info .photo { width: 100%; overflow: hidden;}
    section#hp-stall .hp-stall-info .photos-box-mo .photo-info .photo img { width: 100%; height: auto;}
    section#hp-stall .hp-stall-info .photos-box-mo .photo-info .infor { width: 100%; font-size: 0.9em;}
        
    
    /******** section news ********/
    
    section#hp-news { clear: both; width: 100%; padding: 8vw 0; background-color: #f3f3f3; box-sizing: border-box; position: relative; overflow: hidden;}
    
    section#hp-news img.hp-news-title { display: none;}
    section#hp-news img.hp-news-title-mo { width: 60vw; height: auto; opacity: 0.2; filter: alpha(opacity=20); position: absolute; top: 20vw; right: -8vw; z-index: 1;}
    
    section#hp-news img.page-news-title { width: 60vw; height: auto; opacity: 0.2; filter: alpha(opacity=20); position: absolute; top: 20vw; right: -8vw;}
    
    section#hp-news .title-box { width: 100%; margin: 0 0 20px 0; color: #9E8935; text-align: center;}
    section#hp-news .title-box h1 { font-size: 1.6em; font-weight: 500; line-height: 0.5em; letter-spacing: 0.1em;}
    section#hp-news .title-box h2 { font-size: 1.1em; line-height: 1em; letter-spacing: 0.1em;}
    section#hp-news .title-box .underline { clear: both; width: 40px; margin: 10px auto 0 auto; border-top: 1px #9E8935 solid;}
    
    section#hp-news .hp-news-list-box { clear: both; width: 340px; margin: 0 auto; overflow: hidden; position: relative; z-index: 9;}
    section#hp-news .hp-news-list-box ul.hp-news-list { height: 510px; padding: 0; margin: 0; list-style: none; display: block; overflow: hidden;}
    section#hp-news .hp-news-list-box ul.hp-news-list li { width: 300px; padding: 0; margin: 20px; float: left;}
    section#hp-news .hp-news-list-box ul.hp-news-list li .news-box { width: 100%; padding: 20px; background-color: #fff; -moz-box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5); box-sizing: border-box;}
    section#hp-news .hp-news-list-box ul.hp-news-list li .news-box .photo { width: 100%; height: 180px; margin: 0 0 20px 0; overflow: hidden;}
    section#hp-news .hp-news-list-box ul.hp-news-list li .news-box .photo img { width: 100%; height: auto;}
    section#hp-news .hp-news-list-box ul.hp-news-list li .news-box .date { width: 100%; color: #666; font-size: 0.9em; letter-spacing: 0.1em;}
    section#hp-news .hp-news-list-box ul.hp-news-list li .news-box .title { width: 100%; margin: 30px 0; color: #3E7E00; font-size: 1.1em; font-weight: 500; letter-spacing: 0.1em;}
    section#hp-news .hp-news-list-box ul.hp-news-list li .news-box .text { width: 100%; margin: 0 0 30px 0; color: #666; font-size: 0.9em;}
    section#hp-news .hp-news-list-box ul.hp-news-list li .news-box .more { width: 100%;}
    section#hp-news .hp-news-list-box ul.hp-news-list li .news-box .more a { color: #B3252F; font-weight: 400; text-decoration: underline;}
    section#hp-news .hp-news-list-box ul.hp-news-list li .news-box .more a:active { color: #9E8935;}
    
    section#hp-news .news-list-box { clear: both; width: 100%; margin: 0 auto; position: relative; z-index: 9;}
    section#hp-news .news-list-box ul.news-list { padding: 0; margin: 0; list-style: none; display: block; overflow: hidden;}
    section#hp-news .news-list-box ul.news-list li { width: 320px; padding: 0; margin: 20px auto 30px auto;}
    section#hp-news .news-list-box ul.news-list li .news-box { width: 100%; padding: 20px; background-color: #fff; -moz-box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5); box-sizing: border-box;}
    section#hp-news .news-list-box ul.news-list li .news-box .photo { width: 100%; height: 200px; margin: 0 0 20px 0; overflow: hidden;}
    section#hp-news .news-list-box ul.news-list li .news-box .photo img { width: 100%; height: auto;}
    section#hp-news .news-list-box ul.news-list li .news-box .date { width: 100%; color: #666; font-size: 0.9em; letter-spacing: 0.1em;}
    section#hp-news .news-list-box ul.news-list li .news-box .title { width: 100%; margin: 30px 0; color: #3E7E00; font-size: 1.1em; font-weight: 500; letter-spacing: 0.1em;}
    section#hp-news .news-list-box ul.news-list li .news-box .text { width: 100%; margin: 0 0 30px 0; color: #666; font-size: 0.9em;}
    section#hp-news .news-list-box ul.news-list li .news-box .more { width: 100%;}
    section#hp-news .news-list-box ul.news-list li .news-box .more a { color: #B3252F; font-weight: 400; text-decoration: underline;}
    section#hp-news .news-list-box ul.news-list li .news-box .more a:active { color: #9E8935;}
    
    section#hp-news .news-list-box .news-scroller-bt { clear: both; width: 100%; margin: 30px 0 0 0; display: flex; justify-content: center; align-items: center;}
    section#hp-news .news-list-box .news-scroller-bt .arrow-prev, .news-scroller-bt .arrow-next { width: 30px; margin: 0 10px; color: #9E8935; font-size: 1.6em; text-align: center; cursor: pointer;}
    
    section#hp-news .hp-news-more-bt { clear: both; width: 200px; margin: 60px auto;}
    section#hp-news .hp-news-more-bt a { width: 100%; padding: 5px 0; color: #414141; font-size: 0.8em; letter-spacing: 0.2em; text-align: center; text-decoration: none; border: 1px #414141 solid; background-color: #fff; box-sizing: border-box; display: block;}
    section#hp-news .hp-news-more-bt a:active { background-color: #eee;}
    
    section#hp-news .news-content-box { clear: both; width: 100%; padding: 0 20px; margin: 0 auto; position: relative; z-index: 9; box-sizing: border-box;}
    section#hp-news .news-content-box .title { width: 100%; color: #3E7E00; font-size: 1.3em; font-weight: 600;}
    section#hp-news .news-content-box .date { width: 100%; padding: 10px 0; font-size: 0.9em; font-weight: 500; text-align: right; border-bottom: 2px #ccc solid;}
    section#hp-news .news-content-box .content { clear: both; width: 100%; padding: 40px 0; font-size: 1.1em; line-height: 1.8em; box-sizing: border-box;}
    section#hp-news .news-content-box .content img { max-width: 100%; height: auto;}
    
    section#hp-news .goback-bt { clear: both; width: 180px; margin: 0 auto; font-size: 0.8em; letter-spacing: 0.1em; text-align: center;}
    section#hp-news .goback-bt a { width: 100%; padding: 5px 0; color: #414141; text-decoration: none; border: 1px #414141 solid; display: block;}
    section#hp-news .goback-bt a:hover { color: #999; border: 1px #999 solid; background-color: #eee;}
    
    
    /******** section contact ********/
    
    section#hp-contact { clear: both; width: 100%; padding: 8vw 20px; margin: 0 0 20px 0; box-sizing: border-box; background-color: #9E8935; position: relative; overflow: hidden;}
    
    section#hp-contact .title-box { width: 100%; margin: 0 0 20px 0; color: #fff; text-align: center;}
    section#hp-contact .title-box h1 { font-size: 1.6em; font-weight: 500; line-height: 0.5em; letter-spacing: 0.1em;}
    section#hp-contact .title-box h2 { font-size: 1.1em; line-height: 1em; letter-spacing: 0.1em;}
    section#hp-contact .title-box .underline { clear: both; width: 40px; margin: 10px auto 0 auto; border-top: 1px #fff solid;}
    
    section#hp-contact .hp-contact-position { clear: both; width: 100%;}
    section#hp-contact .hp-contact-position .contact-info { width: 90%; margin: 0 auto; text-align: center;}
    section#hp-contact .hp-contact-position .contact-info img.title { display: none;}
    section#hp-contact .hp-contact-position .contact-info img.title-mo { width: 100%; height: auto;}
    section#hp-contact .hp-contact-position .contact-info .info-box { clear: both; width: 100%; padding: 60px 0; margin: 0 auto; color: #fff; font-size: 1.2em; font-weight: 500; letter-spacing: 0.1em; text-align: left; box-sizing: border-box;}
    section#hp-contact .hp-contact-position .postion-pic { clear: both; width: 100%; margin: 0 auto; box-sizing: border-box;}
    section#hp-contact .hp-contact-position .postion-pic img { width: 100%; height: auto;}
    
    
    /******** section traffic ********/
    
    section#hp-traffic { clear: both; width: 100%; padding: 8vw 20px; box-sizing: border-box; position: relative; overflow: hidden;}
    
    section#hp-traffic .title-box { width: 100%; margin: 0 0 20px 0; color: #9E8935; text-align: center;}
    section#hp-traffic .title-box h1 { font-size: 1.6em; font-weight: 500; line-height: 0.5em; letter-spacing: 0.1em;}
    section#hp-traffic .title-box h2 { font-size: 1.1em; line-height: 1em; letter-spacing: 0.1em;}
    section#hp-traffic .title-box .underline { clear: both; width: 40px; margin: 10px auto 0 auto; border-top: 1px #9E8935 solid;}
    
    section#hp-traffic .hp-traffic-way { clear: both; width: 100%; text-align: center;}
    section#hp-traffic .hp-traffic-way img.title { width: 80%; height: auto;}
    section#hp-traffic .hp-traffic-way .traffic-way { clear: both; width: 90%; margin: 60px auto 0 auto;}
    section#hp-traffic .hp-traffic-way .traffic-way .info-left { width: 100%; margin: 0 0 30px 0; font-size: 1.1em; line-height: 2em; text-align: left;}
    section#hp-traffic .hp-traffic-way .traffic-way .info-right { width: 100%; font-size: 1.1em; line-height: 2em; text-align: left;}
    section#hp-traffic .hp-traffic-way .traffic-way .info-left font.title, .info-right font.title { color: #9E8935; font-size: 1.4em; font-weight: 500;}
        
    
    /******** section history ********/
    
    section#hp-history { clear: both; width: 100%; padding: 8vw 8vw; margin: 0 0 20px 0; background-color: #9E8935; box-sizing: border-box; position: relative; overflow: hidden;}
    
    section#hp-history img.hp-history-logo { width: 60vw; height: auto; opacity: 0.1; filter: alpha(opacity=10); position: absolute; top: 6vw; right: -6vw;}
    
    section#hp-history .history-title { width: 100%; margin: 0 0 20px 0; display: flex; justify-content: flex-start; align-items: flex-end; flex-wrap: wrap;}
    section#hp-history .history-title .title-box { width: 140px; color: #fff; text-align: center;}
    section#hp-history .history-title .title-box h1 { font-size: 1.6em; font-weight: 500; line-height: 0.5em; letter-spacing: 0.1em;}
    section#hp-history .history-title .title-box h2 { font-size: 1.1em; line-height: 1em; letter-spacing: 0.1em;}
    section#hp-history .history-title .title-box .underline { clear: both; width: 40px; margin: 10px auto 0 auto; border-top: 1px #fff solid;}
    section#hp-history .history-title .icon-box { width: 40px; padding: 0 60px 20px 0;}
    section#hp-history .history-title .icon-box img { width: 100%; height: auto;}
    section#hp-history .history-title .sub-title { clear: both; width: 100%; margin: 20px 0; color: #414141; font-size: 1.4em; font-weight: 500; letter-spacing: 0.1em;}
    
    section#hp-history .history-content { clear: both; width: 100%; color: #fff; font-size: 1.1em; line-height: 1.6em;}
    section#hp-history .history-content font.title-s { color: #414141; font-size: 1.1em; line-height: 2em; font-weight: 500;}
    
    
    /******** section sitemap ********/
    
    section#sitemap { clear: both; width: 100%; padding: 8vw 20px 10vw 20px; box-sizing: border-box; position: relative; overflow: hidden;}
    
    section#sitemap img.sitemap-title { width: 25vw; height: auto; position: absolute; bottom: 2vw; right: 8vw; z-index: 1;}
    
    section#sitemap .title-box { width: 100%; margin: 0 0 20px 0; color: #9E8935; text-align: center;}
    section#sitemap .title-box h1 { font-size: 1.6em; font-weight: 500; line-height: 0.5em; letter-spacing: 0.1em;}
    section#sitemap .title-box h2 { font-size: 1.1em; line-height: 1em; letter-spacing: 0.1em;}
    section#sitemap .title-box .underline { clear: both; width: 40px; margin: 10px auto 0 auto; border-top: 1px #9E8935 solid;}
    
    section#sitemap ul#sitemap-list { clear: both; width: 100%; padding: 0; margin: 60px auto 0 auto; list-style: none; display: flex; justify-content: flex-start; flex-wrap: wrap;}
    section#sitemap ul#sitemap-list li { width: 100%; padding: 0; margin: 0 0 30px 0;}
    section#sitemap ul#sitemap-list li a { padding: 0.5vw 1vw; color: #414141; font-size: 1.1em; text-decoration: none; border-bottom: 1px #414141 solid; box-sizing: border-box;}
    section#sitemap ul#sitemap-list li a:hover { color: #FDF9C5; background-color: #353229;}
    section#sitemap ul#sitemap-list li ul.list-snd { clear: both; width: 100%; padding: 0; margin: 20px 0 0 0; list-style: none; display: block;}
    section#sitemap ul#sitemap-list li ul.list-snd .list-snd-title { width: 100%; color: #9E8935; font-size: 0.9em; box-sizing: border-box; }
    section#sitemap ul#sitemap-list li ul.list-snd li { width: 100%; padding: 3px 0; margin: 0;}
    section#sitemap ul#sitemap-list li ul.list-snd li a { color: #414141; font-size: 0.9em; box-sizing: border-box; border: 0;}
    section#sitemap ul#sitemap-list li ul.list-snd li a:hover { color: #414141; background-color: transparent; text-decoration: underline;}


    /******** section faq ********/
    
    section#faq { clear: both; width: 100%; padding: 40px 20px; box-sizing: border-box; background-color: #f3f3f3; position: relative; overflow: hidden;}
    
    section#faq img.faq-title { width: 60vw; height: auto; opacity: 0.2; filter: alpha(opacity=20); position: absolute; top: 20vw; right: -8vw; z-index: 1;}
    
    section#faq .title-box { width: 100%; margin: 0 0 20px 0; color: #9E8935; text-align: center;}
    section#faq .title-box h1 { font-size: 1.6em; font-weight: 500; line-height: 0.5em; letter-spacing: 0.1em;}
    section#faq .title-box h2 { font-size: 1.1em; line-height: 1em; letter-spacing: 0.1em;}
    section#faq .title-box .underline { clear: both; width: 40px; margin: 10px auto 0 auto; border-top: 1px #9E8935 solid;}

    .faq-list { clear: both; width: 100%; margin: 0 0 20px 0; position: relative; z-index: 5;}
    .faq-list .faq-q { width: 100%; padding: 8px 15px; color: #9E8935; font-size: 1.2em; font-weight: 600; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
    .faq-list .faq-a { width: 100%; padding: 15px; color: #414141; font-size: 1.1em; box-sizing: border-box;}

    .safety-content { clear: both; width: 100%; line-height: 1.8em;}
    
    
    /******** footer ********/
    
    footer { width: 100%; padding: 30px 0 0 0; background-color: #9E8935;}
    
    footer .add-info { width: 100%; padding: 0 20px; box-sizing: border-box; color: #fff;}
    footer .add-info .column-1 { width: 100%; margin: 0 0 20px 0; font-size: 1.1em;}
    footer .add-info .column-2 { width: 100%; margin: 0 0 20px 0; font-size: 1.1em;}
    footer .add-info .column-3 { width: 130px; float: left;}
    footer .add-info .column-3 a { color: #fff; text-decoration: none;}
    footer .add-info .column-3 a img { width: 16px; height: auto;}
    footer .add-info .column-4 { width: 140px; text-align: center; float: left;}
    
    footer .fb-box { clear: both; width: 360px; margin: 30px auto;}
    
    footer .copyright { clear: both; width: 100%; padding: 15px 0; color: #9E8935; font-size: 1.4em; background-color: #353229; display: flex; justify-content: center; align-items: center;}
    
    
}