@charset "utf-8";
/* 簡單流變媒體
注意: 流變媒體要求您必須移除 HTML 中媒體的高度和寬度屬性
http://www.alistapart.com/articles/fluid-images/ 
*/


.top-menu-bgcolor{ background-color: rgba(255, 255, 255, 0); transition: 0.2s ease-in-out;}

.top-operate-box{ display: -webkit-flex; display: flex; flex-wrap: wrap;  justify-content: flex-end; align-items: center; width: 22%; margin: 30px 1% -70px 77%; z-index: 10000; position: absolute; transition: 0.2s ease-in-out;}
    .top-operate-box-search{display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; width: 80%; margin: 10px 10% 20px; padding:5px 6px; box-sizing: border-box; border: 1px #666 solid;}
        .top-operate-box-search input{ width: calc(100% - 35px); background:none; border:none; font-size:0.9em;}
        .top-operate-box-search a{display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: center; width:35px; text-align: center; text-decoration: none; font-size: 1.05em; color:#333;}
            .top-operate-box-search a:visited{ color:#333;}
            .top-operate-box-search a:hover{ color:#81674b;}
            .top-operate-box-search a:active{ color:#333;}
        .search-pc-style{ display: none;}
        .search-ph-style{ display: flex;}
    .top-operate-box-language{display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; width:100%; margin:0; padding:5px 3px; box-sizing: border-box; border: 1px #666 solid;}
        .top-operate-box-language i{ width:16px; font-size: 0.85em; color:#333;}
        .top-operate-box-language select{ width:calc(100% - 16px); background:none; border:none; font-size:0.9em;}

.index-runimg-title-style{ position:relative;}
    .index-runimg-title-style h3{ position:absolute; top:42%; width:76%; margin:0 12%; text-align: center; font-size: 1.25em; font-weight: bolder; letter-spacing: 1px; color:#81674b; text-shadow: -1px 0 #FFF, 0 1px #FFF,1px 0 #FFF, 0 -1px #FFF; z-index: 100;}

.index-product-link-text{padding-top: 5px; text-decoration: none; }
    .index-product-link-text IW{ border-radius: 17px; overflow: hidden;}
    .index-product-link-text img{ transition: 0.3s ease-in-out;}
    .index-product-link-text:hover > IW > img{ transform: scale(1.1);}
    .index-product-link-text p{ color:#333;}

    .product-link-style IW{ border-radius: 17px; overflow: hidden;}
    .product-link-style img{ transition: 0.3s ease-in-out;}
    .product-link-style:hover > IW > img{ transform: scale(1.1);}

.index-adbox-style XX{ width:40%; margin: 0 30%;}
.index-adbox-style img{ border-radius: 0;}
.index-adbox-style-text{ font-weight: bolder; color:#7c6852;}

.footer-box-shadow{ margin: 20px 0 0; background-color: #FFF; box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.08);} 
.footer-link-icon-style a{ width:38px; height:38px; margin:0 5px; text-align: center; text-decoration: none; padding:3px 0; font-size: 1.35em; color:#81674b; border:1px #81674b solid; border-radius: 50%; transition: 0.2s ease-in-out;}
    .footer-link-icon-style-FB:hover{ color:#4367b3; border-color: #4367b3;}
    .footer-link-icon-style-IG:hover{ color:#f33b3f; border-color: #f33b3f;}
    .footer-link-icon-style-Line:hover{ color:#00b900; border-color: #00b900;}

.page-banner-style{ margin-top: 0; position:relative;}
.page-banner-special-style{ padding-top: 90px;}
    .page-banner-style h2{ position:absolute; top:65%; left:5%; width: 90%; text-align: center; font-size: 1.35em; font-weight: bolder; letter-spacing: 2px; color:#FFF;}
    .page-banner-text-revision{ margin-top:-8%;}

.path-link-style a{text-decoration: none;}

.page-product-recommended-width{ width:90%; margin:0 5%;}
    .page-product-recommended-style{ width:49% !important; margin: 0 0.5% !important;}  
        .page-product-recommended-style IW{ float: left; width:100%; border-radius: 17px; overflow: hidden;}
        .page-product-recommended-style img{ transition: 0.3s ease-in-out;}
        .page-product-recommended-style:hover > IW > img{ transform: scale(1.1);}
        .page-product-recommended-style p{ text-align: center;}

.product-box-title-new-style{display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; width:100%;}
    .title-left-new-style{display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: center; width:100%;}
    .title-right-new-style{display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width:100%;}
        .title-right-new-style p{ width:45px;}
        .title-right-new-style .dropdown{ width: 100px;}
        .title-right-new-style button{ width:100%; text-align: left;}

.product-share-icon{ position:relative;}
    .product-share-icon-box{ position:absolute; top:12px; right:15px; width: auto; z-index: 100;}
        .product-share-icon-box a{ float:left; width:35px !important; height:35px; margin:0 5px; text-align: center; text-decoration: none; padding:3px 0; font-size: 1.25em; color:#FFF; background-color:#81674b; border-radius: 50%; transition: 0.2s ease-in-out;}
            .product-share-icon-box-link:hover{ background-color:#666; color:#FFF;}
            .product-share-icon-box-FB:hover{ background-color:#4367b3; color:#FFF;}
            .product-share-icon-box-IG:hover{ background-color:#f33b3f; color:#FFF;}
            .product-share-icon-box-Line:hover{ background-color:#00b900; color:#FFF; }



.editor-img-style img{ width: auto; max-width: 100% !important; display:block; margin:auto;}
    .editor-img-style p, .editor-img-style p span{font-size: min(3em, 0.8em); line-height: 1.35em;}

.service-left-menu-style{position: absolute; top:-50px; width:27%; margin-left: -1%; }
    .service-left-menu-style ul, .service-left-menu-style ul li{list-style-type:none; width:100%; margin:0; padding:0;}
    .service-left-menu-style ul li{ margin:10px 0;}
        .service-left-menu-style a{ width:100%; padding:0 5px 0 10px; box-sizing: border; text-decoration: none; color:#333; transition: 0.2s ease-in-out; position: relative; z-index: 3;}
            .service-left-menu-style a::before{ position:absolute; content:""; top:-2px; left: 0; width:3px; height: 24px; background-color: #81674b; transition: 0.2s ease-in-out; z-index: -1;}
                

.recruit-new-style{display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center;  width:100%; margin:25px 0;}
    .recruit-new-style-box{ width:80%; margin:25px 10%;}
        .recruit-new-style-box img{ width:100%; border:1px #999 solid; transition: 0.2s ease-in-out;}
        .recruit-new-style-box:hover > img{ border-color: #e69540;}

.assets-page-img-style{ width:100%; margin:0;}
    .assets-page-img-style img{ width: auto; max-width: 100%; display:block; margin:auto;}

.assets-page-img-style-margintop{ margin-top: 100px !important;}
    
.assets-style{display: -webkit-flex; display: flex; flex-wrap: wrap; width:100%;}
    .assets-style-box{ width:94%; margin:20px 3%; text-decoration: none; background-color: #f3efe4; border-radius: 10px; overflow: hidden;}
        .assets-style-box-img{ width:100%; margin:0; position: relative;}
            .assets-style-box-img span{ position:absolute; top:0; left:0; width:100%; height:100%; margin:0; background-color: rgba(0, 0, 0, 0); z-index: 3; transition: 0.2s ease-in-out;}
            .assets-style-box-img p{position: absolute; top:calc(50% - 15px); left: calc(50% - 15px); width:30px; height: 30px; text-align: center; padding:6px 0; font-size:1em; letter-spacing: 1px; color:#FFF; border: 2px #FFF solid; border-radius: 50%; z-index: 5; opacity: 0; transition: 0.2s ease-in-out;}
            .assets-style-box-img img{ width: 100%;}
                .assets-style-box:hover > .assets-style-box-img > span{ background-color: rgba(0, 0, 0, 0.6);}
                .assets-style-box:hover > .assets-style-box-img > p{ top:calc(50% - 40px); left: calc(50% - 40px); width:80px; height: 80px; text-align: center; padding:23px 0; font-size:1.25em; opacity:1;}
        .assets-style-box-text{ width: 86%; margin:0 7%;}
            .assets-style-box-text h2{ width:100%; margin:10px 0; font-size: 1.25em; font-weight: bolder; color:#81674b;}
            .assets-style-box-text hr{ width:100%; height:1px; margin:0; background-color: #AAA; border:none;}
            .assets-style-box-text p{ width:100%; margin:12px 0; font-size: 0.9em; font-weight: bolder; color:#999;}
                .assets-style-box-text p::after{ content:"...";}
    .assets-style-content{ width:90%; margin:30px 5% 0;}
        .assets-style-content h1{ width:100%; margin:0 0 18px; font-size: 1.25em; font-weight: bolder; color:#81674b;}
        .assets-style-content-box{ width:100%; padding:10px;}
            .assets-style-content-box img{ max-width: 100% !important;}
            .assets-style-content-box-button{display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: center; width:100%;}

.sales-office-style{display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: flex-start !important; width:100%;}   
    .sales-office-style-box{ width:84%; margin:20px 8%; padding: 6px; box-sizing: border;  transition: 0.2s ease-in-out;}
    .sales-office-style-box:hover{ background-color: #EFEFEF;}
        .sales-office-style-box iframe{ width:100%; height:260px;}
        .sales-office-style-box h2{ width:100%; margin:12px 0; font-size: 1.25em; font-weight: bolder;color:#333;} 
        .sales-office-style-box p, .sales-office-style-box a{display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: flex-start; width:100%; margin:6px 0; font-size: 0.85em;}
            .sales-office-style-box a{text-decoration: none; transition: 0.25s ease-in-out;}
            .sales-office-style-box XX{ width:25px; color:#81674b;}
            .sales-office-style-box PT{ width:calc(100% - 25px); color:#666; transition: 0.25s ease-in-out;}
            .sales-office-style-box a:hover > PT{ text-decoration: underline; color: #82684d;}

.contact-content-new-display-style{display: -webkit-flex; display: flex; flex-wrap: wrap; flex-direction: column-reverse; align-items: center; width:100%;}
    .contact-content-new-display-style-map{ width: 100%; margin: 20px 0 0;}
        .contact-content-new-display-style-map iframe{ width: 100%; height:45vh;}
    .contact-content-new-display-style-form{ width:100%; margin: 0;}
        .contact-content-new-display-style-form form{ width: 100%;}
        .contact-content-new-display-style-form input{ width:100%; margin:0 0 5px; padding:15px; box-sizing: border; border:none; border-bottom:1px #7c6852 solid; outline: none;}
    .contact-content-new-display-style-revise{display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: flex-end; width:100%; margin:15px 0 0;}
        .contact-content-new-display-style-revise-button{ width: 100%;}
            .contact-content-new-display-style-revise-button button{ width: 90px; margin: 0 calc(50% - 45px) 15px; padding: 10px 0; text-align: center; border-radius: 0;}
        .contact-content-new-display-style-revise-time{ width:100%; margin:0; text-align: center;}
            .contact-content-new-display-style-revise-time p{ width:100%; margin:0 0 2px; font-size: 0.9em; line-height: 1.35em; color:#999;}

.footer-menu-pc-style{ display: none;}
.footer-menu-ph-style{ display: inline-block;}
    .footer-menu-ph-style ul {  list-style-type: none;}
    .footer-menu-ph-style .accordion { width: 100%; margin: 0 auto; background: #FFF; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}
        .footer-menu-ph-style .accordion .link { cursor: pointer;  display: block;  padding: 15px 15px 15px 0;  color: #000;  font-size: 1.25em;  font-weight: bolder;  position: relative;  -webkit-transition: all 0.4s ease;  -o-transition: all 0.4s ease;  transition: all 0.4s ease;}
        .footer-menu-ph-style .accordion li i {   position: absolute; top: 16px; left: 12px;  font-size: 18px;  color: #595959;  -webkit-transition: all 0.4s ease;  -o-transition: all 0.4s ease;  transition: all 0.4s ease;}
        .footer-menu-ph-style .accordion li i.fa-chevron-down { right: 12px; left: auto; font-size: 16px;}
        .footer-menu-ph-style .accordion li.open i.fa-chevron-down { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);}
        .footer-menu-ph-style .accordion li.default .submenu {display: block;}
    /* Submenu-----------------------------*/
    .footer-menu-ph-style .submenu { display: none; font-size: 1.05em; line-height: 1.25em;}
        .footer-menu-ph-style .submenu a { display: block; text-decoration: none; color: #666; margin: 0 0 10px -15px; padding:0 12px; border-left:2px #81674b solid; -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease;}


@media only screen and (min-width: 481px) {
    .top-operate-box{ width: 20%; margin: 30px 2% -70px 78%;}
        .top-operate-box-search{ width: 60%; margin: 10px 20% 20px; padding:4.5px 5px;}
            .top-operate-box-search input{ width: calc(100% - 35px); font-size:0.85em;}
            .top-operate-box-search a{ width:35px; font-size: 1.05em;}
        .top-operate-box-language{ width:100%; margin:0; padding:6px 5px;}
            .top-operate-box-language i{ width:18px; font-size: 1.05em;}
            .top-operate-box-language select{ width:calc(100% - 18px); font-size:0.85em;}
            
    .index-runimg-title-style h3{width:80%; top:38%; margin:0 10%; font-size: 1.85em;}
        
        
        .page-banner-style h2{ top:60%; font-size: 1.65em;}
        .page-banner-text-revision{ margin-top:-7%;}
    

}

@media only screen and (min-width: 580px) {
    .service-left-menu-style{ width:28%; margin-left: -5%;}
        .service-left-menu-style a{ padding:0 15px;}
}

@media only screen and (min-width: 681px) {
    .top-operate-box{ width: 25%; margin: 30px 2% -70px 73%;}
        .top-operate-box-search{ width: 99%; margin: 0 1% 0 0; padding:4.5px 5px;}
            .top-operate-box-search input{ width: calc(100% - 35px); font-size:0.85em;}
            .top-operate-box-search a{ width:35px; font-size: 1.05em;}
            .search-pc-style{ display: flex;}
            .search-ph-style{ display: none;}
        .top-operate-box-language{ width:39%; margin:0; padding:6px 5px;}
            .top-operate-box-language i{ width:18px; font-size: 1.05em;}
            .top-operate-box-language select{ width:calc(100% - 18px); font-size:0.85em;}
            
    .index-runimg-title-style h3{width:82%; top:35%; margin:0 9%; font-size: 2.35em;}    
    
    .editor-img-style p, .editor-img-style p span{font-size: min(5em, 0.9em);}
        
        
        .page-banner-style h2{ top:58%; font-size: 2em;}
        .page-banner-text-revision{ margin-top:-4%;}

        .page-product-recommended-width{ width:80%; margin:0 10%;}
            .page-product-recommended-style{ width:31.3% !important; margin: 0 1% !important;}
            
    .service-left-menu-style{ width:25%; margin: 0;}
            .service-left-menu-style a:hover{ color:#FFF !important; cursor: pointer;}
            .service-left-menu-style a:hover::before{ width:100%;}

    .recruit-new-style{  width:100%; margin:30px 0;}
        .recruit-new-style-box{ width:30.3%; margin:25px 1.5%;}        

    .assets-style{width:100%;}
        .assets-style-box{ width:48%; margin:25px 1%;}
            .assets-style-box-img{ width:100%; margin:0;}
                    .assets-style-box:hover > .assets-style-box-img > p{ top:calc(50% - 40px); left: calc(50% - 40px); width:80px; height: 80px; text-align: center; padding:23px 0; font-size:1.25em; opacity:1;}
            .assets-style-box-text{ width: 86%; margin:0 7%;}
                .assets-style-box-text h2{ width:100%; margin:10px 0; font-size: 1.35em;}
                .assets-style-box-text hr{ width:100%; height:1px; margin:0;}
                .assets-style-box-text p{ width:100%; margin:12px 0; font-size: 1em; }
        .assets-style-content{ width:100%; margin:10px 0 0;}
            .assets-style-content h1{ width:100%; margin:20px 0; font-size: 1.45em;}
            .assets-style-content-box{ width:100%; padding:18px;}

    .sales-office-style{ width:100%;}   
        .sales-office-style-box{ width:48%; margin:30px 1%; padding: 12px;}
            .sales-office-style-box iframe{ width:100%; height:240px;}
            .sales-office-style-box h2{ width:100%; margin:12px 0; font-size: 1.25em;} 
            .sales-office-style-box p, .sales-office-style-box a{ width:100%; margin:6px 0; font-size: 0.9em;}
                .sales-office-style-box XX{ width:20px;}
                .sales-office-style-box PT{ width:calc(100% - 20px);}


        .contact-content-new-display-style-revise{ flex-direction: row-reverse; width:100%; margin:15px 0 0;}
            .contact-content-new-display-style-revise-button{ width: 50%;}
                .contact-content-new-display-style-revise-button button{ width: 80px; margin: 0 0 0 calc(100% - 80px); padding: 10px 0;}
            .contact-content-new-display-style-revise-time{ width:50%; margin:0; text-align: right;}
                .contact-content-new-display-style-revise-time p{ width:100%; margin:0 0 2px; font-size: 0.9em;}
    

}

@media only screen and (min-width: 768px) {
    .footer-menu-pc-style{ display: flex;}
    .footer-menu-ph-style{ display: none;}
}

@media only screen and (min-width: 992px) {
    .dropdown:hover > .dropdown-menu {display: block !important;}/*選單移過下拉*/
    .top-menu-bgcolor{ height:160px;}
    .collapse-menu-pcbg{ background:none !important;}

    .collapse-menu-pcul-width{ width:190px !important;}
    .collapse-menu-pcul-fontsize li{font-size: 0.95em;}


    .top-operate-box{ width: 19%; margin: 60px 1% -100px 80%;}
        .top-operate-box-search{ width: 99%; margin: 0 1% 0 0; padding:4.5px 5px;}
            .top-operate-box-search input{ width: calc(100% - 35px); font-size:0.85em;}
            .top-operate-box-search a{ width:35px; font-size: 1.05em;}
        .top-operate-box-language{ width:39%; margin:0; padding:6px 5px;}
            .top-operate-box-language i{ width:18px; font-size: 1.05em;}
            .top-operate-box-language select{ width:calc(100% - 18px); font-size:0.85em;}

    .page-banner-style{ margin-top: 30px;}
        .page-banner-style h2{ top:53%; font-size: 2.25em;}
        .page-banner-text-revision{ margin-top:-4%;}

        .title-left-new-style{ justify-content: flex-start; width:50%;}
        .title-right-new-style{ justify-content: flex-end; width:50%;}

    .assets-page-img-style{ width:100%; margin:0;}
    .assets-page-img-style-margintop{ margin-top: 150px !important;}

    .service-left-menu-style{top:120px;}

    .contact-content-new-display-style{flex-direction: row; width:100%;}
        .contact-content-new-display-style-map{ width: 47%; margin: 0 3% 0 0;}
            .contact-content-new-display-style-map iframe{ width: 100%; height:45vh;}
        .contact-content-new-display-style-form{ width:50%; margin: 0;}
            .contact-content-new-display-style-form form{ width: 100%;}
            .contact-content-new-display-style-form input{ width:100%; margin:0 0 5px; padding:15px; }

        .product-share-icon-box{ top:8px; right:0;}
}

@media only screen and (min-width: 1025px) {
    .top-operate-box{ width: 15%; margin: 60px 1% -100px 84%;}
        .top-operate-box-search{ width: 99%; margin: 0 1% 0 0; padding:4.5px 5px;}
            .top-operate-box-search input{ width: calc(100% - 35px); font-size:0.85em;}
            .top-operate-box-search a{ width:35px; font-size: 1.05em;}
        .top-operate-box-language{ width:39%; margin:0; padding:6px 5px;}
            .top-operate-box-language i{ width:18px; font-size: 1.05em;}
            .top-operate-box-language select{ width:calc(100% - 18px); font-size:0.85em;}

    .index-runimg-title-style h3{width:80%; top:35%; margin:0 10%; font-size: 3em;}    
    
    .editor-img-style p, .editor-img-style p span{font-size: min(6em, 1em);}
}

@media only screen and (min-width: 1200px) {
    .top-operate-box{ width: 12%; margin: 60px 1% -100px 87%;}
        .top-operate-box-search{ width: 99%; margin: 0 1% 0 0; padding:5px 6px;}
            .top-operate-box-search input{ width: calc(100% - 35px); font-size:0.9em;}
            .top-operate-box-search a{ width:35px; font-size: 1.15em;}
        .top-operate-box-language{ width:39%; margin:0; padding:6px;}
            .top-operate-box-language i{ width:23px; font-size: 1.15em;}
            .top-operate-box-language select{ width:calc(100% - 23px); font-size:0.9em;}

    .page-banner-style h2{ font-size: 2.85em;}
    .page-banner-text-revision{ margin-top:-3%;}
    
    .page-product-recommended-width{ width:70%; margin:0 15%;}

    .recruit-new-style{  width:100%; margin:35px 0;}
        .recruit-new-style-box{ width:25.3%; margin:25px 4%;}       

    .assets-style{width:100%;}
        .assets-style-box{ width:31.3%; margin:30px 1%;}
            .assets-style-box-img{ width:100%; margin:0;}
                    .assets-style-box:hover > .assets-style-box-img > p{ top:calc(50% - 40px); left: calc(50% - 40px); width:80px; height: 80px; text-align: center; padding:23px 0; font-size:1.25em; opacity:1;}
            .assets-style-box-text{ width: 86%; margin:0 7%;}
                .assets-style-box-text h2{ width:100%; margin:10px 0; font-size: 1.35em;}
                .assets-style-box-text hr{ width:100%; height:1px; margin:0;}
                .assets-style-box-text p{ width:100%; margin:12px 0; font-size: 1em; }
            .assets-style-content h1{ width:100%; margin:20px 0; font-size: 1.65em;}
            .assets-style-content-box{ width:100%; padding:20px;}

    .sales-office-style{ width:100%;}   
        .sales-office-style-box{ width:28%; margin:30px 2%; padding: 15px;}
            .sales-office-style-box iframe{ width:100%; height:260px;}
            .sales-office-style-box h2{ width:100%; margin:12px 0; font-size: 1.25em;} 
            .sales-office-style-box p, .sales-office-style-box a{ width:100%; margin:6px 0; font-size: 0.9em;}
                .sales-office-style-box XX{ width:20px;}
                .sales-office-style-box PT{ width:calc(100% - 20px);}


        
}

@media only screen and (min-width: 1400px) {
    .top-operate-box{ width: 10%; margin: 60px 3% -100px 87%;}
        .top-operate-box-search{ width: 97%; margin: 0 3% 0 0; padding:5px 6px;}
            .top-operate-box-search input{ width: calc(100% - 35px); font-size:0.9em;}
            .top-operate-box-search a{ width:35px; font-size: 1.15em;}
        .top-operate-box-language{ width:35%; margin:0; padding:6px;}
            .top-operate-box-language i{ width:23px; font-size: 1.15em;}
            .top-operate-box-language select{ width:calc(100% - 23px); font-size:0.9em;}
    

}

@media only screen and (min-width: 1561px) {
    .collapse-menu-pcbg ul{ width: 40%;} 
}