html {width: 100%;overflow-x:hidden; }
body{
    overflow-x: hidden;
    position: relative;
    max-width: 100%;
}




@media (max-width:1200px){html,body{min-height: auto}}


body {background:url(../images/bg_rt.png) no-repeat right top;z-index:0;}

@media (max-width:768px){body.index section.winH {background:rgba(255,255,255,0);}}

*{font-family:'Raleway','微軟正黑體';}



/*==通用======================================================================*/


.winH { height: 100%;min-height:700px}
@media (max-width:1200px){.winH { height:auto;}}


.rotate_-l80                             {
                                        -moz-transform:rotate(180deg);
                                        -webkit-transform:rotate(180deg);
                                        -o-transform:rotate(180deg);
                                        -ms-transform:rotate(180deg);
                                        transform:rotate(180deg);
                                        }  


.rotate_l80                             {
                                        -moz-transform:rotate(-180deg);
                                        -webkit-transform:rotate(-180deg);
                                        -o-transform:rotate(-180deg);
                                        -ms-transform:rotate(-180deg);
                                        transform:rotate(-180deg);
                                        }  


.rotate_-90                             {
                                        -moz-transform:rotate(-90deg);
                                        -webkit-transform:rotate(-90deg);
                                        -o-transform:rotate(-90deg);
                                        -ms-transform:rotate(-90deg);
                                        transform:rotate(-90deg);
                                        }   

.rotate_90                             {
                                        -moz-transform:rotate(90deg);
                                        -webkit-transform:rotate(90deg);
                                        -o-transform:rotate(90deg);
                                        -ms-transform:rotate(90deg);
                                        transform:rotate(90deg);
                                        }                                                                                 


.skewNdeg                              {   
                                            
                                            -moz-transform-origin: left bottom;
                                            -webkit-transform-origin: left bottom;
                                            -o-transform-origin: left bottom;
                                            transform-origin: left bottom;    
                                            transform: skew(30deg);
                                            -moz-transform: skew(30deg);
                                            -webkit-transform: skew(30deg);
                                            -o-transform: skew(30deg);
                                            
                                        }

.skew-Ndeg                              {   
                                            
                                            -moz-transform-origin: left bottom;
                                            -webkit-transform-origin: left bottom;
                                            -o-transform-origin: left bottom;
                                            transform-origin: left bottom;    
                                            transform: skew(-30deg);
                                            -moz-transform: skew(-30deg);
                                            -webkit-transform: skew(-30deg);
                                            -o-transform: skew(-30deg);
                                            
                                        }


.btn-cus:hover{background: #E27800}

.btn-cus-2,
.btn-cus-2:active,
.btn-cus-2:visited  {color:#000;border:1px solid #F08D1D;border-radius:0;padding:10px 50px;background-color:rgba(255,255,255,0.5)}
.btn-cus-2:hover  {color:#000;background:#F08D1D;}


.h_equal_w {padding-bottom:100%;}



.contact_icon{position:relative;}
.contact_icon>a {background:url(../images/contact.png) no-repeat;width:30px;height:30px;border:0;position:absolute;top:-25px;left:25px;}
.contact_icon>a:hover {background:url(../images/contact_hover.png) no-repeat}




/* 內頁 換頁樣式*/
.pagenav   {float: left;margin-bottom:100px;padding:3px;position:relative;margin-top:100px;}
.pagenav li a{color:#000;padding:0px;display:inline-block;font-size:1.2em;font-family:'Raleway';}
.pagenav li a.active,
.pagenav li a:hover{color:#fff;}

.pagenav li:first-child,
.pagenav li:last-child{}

.pagenav li.arrow{position:relative ; width:1.8em;}
.pagenav a > .pre{    
    border-width:0.6em;
    border-style:solid;
    border-color:transparent #000 transparent  transparent ;
    position:absolute;
    bottom:-0.3em;
    margin-left:-0.5em;
    }

.pagenav a > .next{    
    border-width:0.6em;
    border-style:solid;
    border-color:transparent  transparent  transparent #000 ;
    position:absolute;
    bottom:-0.3em;
    margin-right:-0.5em;
}

.pagenav > li > .pagenav_bk{width:100%;position:absolute;top:0.1em;z-index:-1;padding-top:2.4em;}


.faq.pagenav {float: none}
.faq.pagenav a{padding:10px 50px;font-size: 14px}
.faq.pagenav a img {margin-top:-4px;}


/* 內頁 上方選單*/
.page .menu {position:absolute; bottom:0;right:0;}
.page .menu ul {margin-bottom:0}
.page .menu ul li {text-align:right}
.page .menu ul li a {display:inline-block;padding-left:2em;padding-right:1em;color:#fff;font-family:'Raleway';}
.page .menu ul li a.active,
.page .menu ul li a:hover {padding-left:100px;background-color:#000;}

@media (max-width:670px) {
    .page .menu {position:relative;margin-top:20px}    
}

@media (max-width: 990px){
    .page .menu ul li {margin-bottom: 10px;text-align: center;}    
    .page .menu ul li a {padding:2px 50px;}
    .page .menu ul li a.active,
    .page .menu ul li a:hover {padding:2px 50px;background-color:#000;}
    .page .menu {width: 100%;position: static;margin:20px 0;}
    .page .menu.project {display: none;}

}






/*==首頁區塊======================================================================*/


.bgline {
    width: 250px;
    background: #F08D1D;    
    position: absolute;
    z-index: -100;
}


.foot_bk_r{position:absolute;height:100%;bottom:0;left:65%;width:100%;z-index:-1;}
.foot_bk_page{position:fixed;height:100%;width:100%;z-index:-1;top:0;right:-100%;
                                            -moz-transform-origin: left top;
                                            -webkit-transform-origin: left top;
                                            -o-transform-origin: left top;
                                            transform-origin: left top;    
                }
@media (max-width:992px) { .bgline,.foot_bk_r ,.foot_bk_page {display: none} }                


.toplogo_bk{position:absolute; ;top:0;left:0;z-index:-1;}
.toplogo_bk {
    border-style: solid;
    border-color: transparent transparent #F08D1D transparent;
    border-width: 0 45px 45px 0;
    height: 0;
    width: 180px;
    margin:0 0 50px 0;
    z-index:-1;
}

.toplogo_bk:after {
    content: "";
    position: absolute;
    top: 45px;
    left: ;
    width: 180px;
    height: 0;
    border-style: solid;
    border-color: transparent transparent transparent #F08D1D;
    border-width: 0 60px 310px 180px;
}



/*--Navbar--*/
header {position:relative;}
header.index {background:url(../images/bg_lt.png) no-repeat left bottom;} 

@media (max-width:1200px){header.index{min-height:780px;}}
@media (max-width:768px){
    header.index{min-height:0!important;margin: 50px 0;}
    header.index > div {
    position: relative;   ;
    left:50%;
    transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);  
    -moz-transform: translate(-50%,0);
    -webkit-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    margin-left: 0 !important;
    margin-right: 0 !important;

    }

    .index_ball img {width: 100%;}

}

@media (max-width:620px){
    header.index .wCenter_hCenter,
    header.index .wCenter_hCenter > img{width:100%;}
}


header.page {padding-top:150px;}
header.page h4 {line-height:1.6em;font-weight:normal;}

nav.NavBar     {height:70px;}

             

nav.NavBar     {background:rgba(255,255,255,.85);font-size:13px;font-family:'Raleway';padding-right:20px;overflow:hidden;border:0;max-width: 100%}
nav.NavBar  section   {position:relative;height:100%;}

nav.NavBar .toplogo, 
nav.NavBar .topmenu {height:100%;position:relative;}

nav.NavBar .toplogo {width:15%;min-width:121px;}
nav.NavBar .topmenu {width:85%;min-width:825px;}
  
nav.NavBar  ul  {margin-bottom:0;}
nav.NavBar  ul  li   {padding-left:50px;}
nav.NavBar  ul  li:first-child {padding:0;}
nav.NavBar  ul  li > a {display:block;}
nav.NavBar  ul  li > a:hover {color:#F08D1D;}
nav.NavBar  ul  li > a:hover .menuline {width:100%;}
nav.NavBar .menuline {width:25px;height:1px;}

.z-index-1{z-index: -1}


@media (max-width:1200px) and (min-width: 840px){nav.NavBar ul li{padding-left: 30px;} nav.NavBar .topmenu {min-width:none}}
/* 選單英文版使用 */
/* @media (max-width:1020px) and (min-width: 840px){nav.NavBar ul li {padding-left: 10px;padding-right:0;}} */
@media (max-width:1020px) and (min-width: 840px){nav.NavBar .topmenu {width: 80%;min-width: 0;}} 
@media (max-width:840px){nav.NavBar .topmenu {display: none} .navbar-toggle { display: block;margin-top:16px;}}
@media (min-width:840px){nav.NavBar .topmenu_sm{display:none;} .navbar-toggle { display: none;}}

.topmenu_sm .navbar-toggle {position:absolute;right:0;}
.topmenu_sm .navbar-toggle:focus,
.topmenu_sm .navbar-toggle:hover {background:#F08D1D !important;border:0 !important;}
.topmenu_sm .navbar-toggle .icon-bar {background: #F08D1D !important;}
.topmenu_sm .navbar-toggle:focus .icon-bar,
.topmenu_sm .navbar-toggle:hover .icon-bar {background: #fff !important;}
.topmenu_sm {position: fixed;padding:0;right:0;top:0;width: 100%;z-index:1100;}
.topmenu_sm .menu_sm{background:rgba(255,255,255,0.9);padding:20px 0;}
.topmenu_sm li{padding:10px 10px !important;text-align: center}
.topmenu_sm li .menuline{width:0px !important}
.topmenu_sm li:hover .menuline{width:100% !important}

.topmenu_sm *{transition: none;-webkit-transition:none;}



/*--各區塊標題--*/
.NewProject > div > div > div > div.title_area,
.title_area {min-height:240px;min-width:315px}
.title_area > div:first-child {margin-bottom:1em;width:325px;}


.title_area .Title_EN {
    font-family: 'Raleway', sans-serif;
    font-size: 3em;
    font-weight: 300;
    line-height: 1em;
    font-style: italic;
    margin-right: 0.5em;
    -ms-word-break: break-all;
     word-break: break-all;    
}


.title_area .Title_CH {
    font-size: 1em;
    font-family: '微軟正黑體', arial;
    font-size: 1.1em;
    color:#F08D1D;
    display: inline;
}

.title_area .w_txt {color:#fff;}




@media (max-width: 990px){
.title_area {width: 100% !important}
.title_area > div:first-child {width: 100%}
}



@media (max-width: 990px){
    .title_area {text-align:center;}
    .title_area .Title_EN{display: block;margin:0;    word-break: normal;}
    .title_area .skewNdeg,
    .title_area .skew-Ndeg {/*transform:none;-webkit-transform:none;*/transform-origin:center center;-webkit-transform-origin:center center;}
}


@media (max-width: 768px){
    .title_area {min-width:0;}
}





 .BlockInfo {min-height:90px;}

 .BlockInfo > div {
    float: left;
    height: 90px;
    border: 1px solid #000;
    background: rgba(255,255,255,0);
}

 .BlockInfo > div:nth-child(1) {
    width: 20px;
    border-right: 0;
}

 .BlockInfo > div:nth-child(2) {
    
    border: 0;
    color: #808080;
    font-size: 1.5em;

}

.BlockInfo > div:nth-child(2) > article {    
    position: relative;
    margin:auto 20px;
    top: 50%;   
    transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);  
    -moz-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
}

.BlockInfo > div:nth-child(3) {
    width: 20px;
    border-left: 0;
}

.BlockInfo > div:nth-child(4) {clear:both;margin-top:10px;border:0;height:inherit;}

.page_service  .BlockInfo+div{width: 280px !important}
@media (max-width: 860px) {
    .page_about  .BlockInfo       {width: 100% !important}
}
@media (max-width: 990px) {
        .page_service .BlockInfo+div{width: 100% !important}
        .BlockInfo       {text-align: center;}
        .BlockInfo > div {display: inline-block;vertical-align: middle;margin-bottom: 20px;float: none}
        .BlockInfo > div:nth-child(2) > article {margin:0;}
}


@media (max-width:350px) {
	.BlockInfo > div:nth-child(2) {font-size: 1.2em;}
}





/*--關於百逃來--*/
.AboutBuyers       {background:url(../images/bg_left.png) no-repeat; background-position:left bottom;}
.AboutBuyers > div {position:relative;}
.AboutBuyers .content {position:static;padding:130px 0}
.AboutBuyers .content .ptxt{margin:0;font-size: 14px;line-height: 1.8;}


.AboutBuyers  .title_area > div:first-child {width:auto;}
.AboutBuyers  .video {text-align:center;}
.AboutBuyers  .video iframe{height: 335px}
@media (max-width:1200px) {
    .AboutBuyers .content {padding:50px;}
    .AboutBuyers  .video iframe{height: 300px}
}





/*--服務項目--*/
.OurService                   {height: 900px}
.OurService > div             {position:relative;height:100%;}
.OurService > div > div        {margin-top:270px;} /*區塊上方同Navbar，定位區塊時才不會被Navbar遮到*/
.OurService > div > div > div  {position:absolute;}
.OurService  [class*="circle"] {
                            width:220px;
                            height:220px; 
                            border-radius:99em;
                            background-color:rgba(255,255,255,0.7);
                            border:1px solid #F08D1D;
                            padding:25px;
                            line-height:1.3em;
                            text-align:center;
                            position: absolute;
                        }


.OurService {background:url(../images/bg_rm.png) no-repeat;background-position:right center;}

.OurService.page {position:relative;background:url(../images/bg_left.png) no-repeat;background-position:left bottom;height:850px;margin-bottom:50px;}
.OurService.page > div > div,
.OurService.page > div > div > div{height: 100%}
.OurService.page > div > div > div{margin-left:-180px}
.OurService.page > div > div  {margin-top:0;}


.OurService  .circle_01 {top:-200px;}
.OurService  .circle_02 {top:-260px;left:250px;padding-top:40px;}
.OurService  .circle_03 {top:-150px;left:480px;width:190px;height:190px;}
.OurService  .circle_04 {top:220px;width:215px;height:215px;padding:40px 10px 25px 10px;}
.OurService  .circle_05 {top:320px;left:235px;width:210px;height:210px;padding:35px 5px;}
.OurService  .circle_mobile {top:0;display:inline-block;position: static;width:240px;height:240px;padding:35px;margin:20px;}
.OurService  .circle_mobile.s01 {}
.OurService  .circle_mobile.s02 {}
.OurService  .circle_mobile.s03 {padding:47px;}
.OurService  .circle_mobile.s04 {padding:55px 0;}
.OurService  .circle_mobile.s05 {padding:45px;}


.OurService.page .right_text {position:absolute;bottom:-180px;right:-300px;width:420px;height:190px;color:#000;}
.OurService.page .right_text h4 {font-weight:normal;font-size:1.5em;}
.OurService.page .right_text p {line-height:1.8em;font-size:0.9em;}

.OurService [class*="circle"] p:first-child   {font-family: 'Raleway', sans-serif;font-style:italic;font-size:19px;}
.OurService [class*="circle"] p:nth-child(2)  {font-size: 17px; color:#F08D1D;}
.OurService [class*="circle"] p:last-child    {font-size: 13px; color:#000;}




.OurService  [class*="circle"] .line {display: inline-block;height: 1px; border-top:1px solid #F08D1D;position: absolute;}
.OurService  [class*="circle"] .line:after {content:'●'; display: inline-block;color:#F08D1D;float:right;margin-right:-10px;margin-top:-8px;}


.OurService  .circle_01 .line {width:160px;top:297px;left:50px;}
.OurService  .circle_01 .line {
    transform: rotate(80deg);
    -ms-transform: rotate(80deg);
    -moz-transform: rotate(80deg);
    -webkit-transform: rotate(80deg);
    -o-transform: rotate(80deg);
}

.OurService  .circle_02 .line {width:160px;top:280px;left:-45px;}
.OurService  .circle_02 .line {
    transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    -o-transform: rotate(120deg);
}


.OurService  .circle_03 .line {width:95px;top:205px;left:-40px;}
.OurService  .circle_03 .line {
    transform: rotate(115deg);
    -ms-transform: rotate(115deg);
    -moz-transform: rotate(115deg);
    -webkit-transform: rotate(115deg);
    -o-transform: rotate(115deg);
}



.OurService  .circle_04 .line {width:80px;top:55px;left:200px;}
.OurService  .circle_04 .line {
    transform: rotate(-40deg);
    -ms-transform: rotate(-40deg);
    -moz-transform: rotate(-40deg);
    -webkit-transform: rotate(-40deg);
    -o-transform: rotate(-40deg);
}





.OurService  .circle_05 .line {width:65px;top:-30px;left:95px;}
.OurService  .circle_05 .line {
    transform: rotate(-70deg);
    -ms-transform: rotate(-70deg);
    -moz-transform: rotate(-70deg);
    -webkit-transform: rotate(-70deg);
    -o-transform: rotate(-70deg);
}







@media (max-width:1200px){
    .OurService                   {height: auto;min-height: 900px}
    .OurService > div             {position:static;height:auto;}
    .OurService > div > div        {/*margin-top:100px;*/text-align: center;}
    .OurService > div > div > div  {position:static;}
    
    .OurService .title_area  {height:420px;}

    .OurService.page .right_text {width:300px;right:-160px;}
    .OurService.page .right_text p{text-align:left; }
}
          

@media (max-width:992px){
    .index .OurService                   {min-height:1350px}
    .index .OurService > div > div       {margin-top: 40px;padding:0 10%;}
}


@media (max-width:768px){
    .index .OurService                   {min-height:1900px;background: none}
    
    header.index,
    .page_faq,
    .page_contact,
    .page_about,
    .page_project, 
    .page_project_detail,
    .page_service,    
    .OurService.page {background: none !important}
    
    .page_faq .page_faq_left_bk,
    .page_project .page_project_left_bk, 
    .page_project_detail .page_project_left_bk {display: none}

}



@media (max-width:992px) {
    .OurService.page > div > div > div {margin-left:0;}
    .OurService.page > div > div,
    .OurService.page > div > div > div,
    .OurService.page {height:auto;}


    /*.OurService  .circle_mobile.s01,
    .OurService  .circle_mobile.s02,
    .OurService  .circle_mobile.s03,
    .OurService  .circle_mobile.s04,
    .OurService  .circle_mobile.s05 {padding:40px !important;}*/
}          



/*--最新案例--(首內頁分有用到*/
.NewProject                                 {background:url(../images/bg_lb.png) no-repeat;background-position:left bottom;padding-bottom: 60px;display: table;width: 100%}
.SiteShowNav .item                          {overflow:hidden; padding-bottom: 100%;height:0;position:relative;margin-bottom:40px;}
.SiteShowNav .thumbnail                     {width:100%;height:75%;padding:0;border-radius:0;position:absolute;background:none;left:0;background:#eee}
.SiteShowNav .thumbnail img                 {max-width: none;}

.SiteShowNav .item span.arrow {
    height: 0;
    border-left: 1.2em solid transparent;
    border-top: 1.5em solid rgba(240, 141, 29,1);
    border-right: 1.2em solid transparent;
    width: 0;
    display: inline-block;
    position: absolute;
    z-index: 100;
    bottom: 10;
    left:50%;
    transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);  
    -moz-transform: translate(-50%,0);
    -webkit-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    display:none;
}

.SiteShowNav.index>div>div                          {display: none}
.SiteShowNav.index>div>div:nth-child(1),
.SiteShowNav.index>div>div:nth-child(2),
.SiteShowNav.index>div>div:nth-child(3)             {display:inline-block;}



.SiteShowNav .logomask                      {position:absolute;height: 75%;width:100%;top:0;background:rgba(255,255,255,0);top:0;left:0;z-index:1;opacity: 0;color:#fff;text-align: center;vertical-align: middle;}
.SiteShowNav .logomask img                  {max-height:55%;max-width:70%;opacity: 0}
.SiteShowNav .logomask div                  {display: inline-block;text-align: center;vertical-align: middle;height: 95%;width: 90%;position: relative;border:2px solid #fff;margin-top:5%;background: url(../images/detail.png) no-repeat bottom center;background-size:100%;font-weight: bold;font-size: 20px}


.SiteShowNav .item.actived span.arrow{display:block;}

.SiteShowNav .logomask.type2                {height:100%;top:0;background:none;}

.SiteShowNav .circle_more                   {position:absolute;z-index:100;bottom:0;width:100%;height:25%;text-align:center;display:table;/*background:#F08D1D;*/border-top:2px solid #fff;}
.SiteShowNav .circle_more div               {display:table-cell;text-align: center;vertical-align: middle;height: 100%;color:#000;background:none;}

@media (max-width: 768px) {
    .SiteShowNav .circle_more                   {top:75%;height:15%;}
}


.SiteShowNav .item.actived > .logomask >img,
.SiteShowNav .item:hover > .logomask >img   {opacity: 1}
.SiteShowNav .item.actived > .logomask,
.SiteShowNav .item:hover > .logomask        {background:rgba(240, 141, 29,0.8);opacity: 1;}
.SiteShowNav .item:hover > .logomask.type2  {background:none;}
.SiteShowNav .item > .thumbnail > img        {right:0;}
.SiteShowNav .item:hover > .thumbnail > img  {width:120%;right:-10%;}


.SiteShowNav .item:hover > .circle_more div,
.SiteShowNav .item.active > .circle_more {background: #F08D1D;color:#fff;}





.SiteShowBody_L .arrow_r              {
                                        -moz-transform:rotate(-90deg);
                                        -webkit-transform:rotate(-90deg);
                                        -o-transform:rotate(-90deg);
                                        -ms-transform:rotate(-90deg);
                                        transform:rotate(-90deg);
                                        }


.SiteShowBody_L  div.SiteShowBody_L_back {
                                            width: 100%;
                                            background-color: #000;
                                            transform-origin: left top;
                                            -ms-transform-origin: left top;
                                            -o-transform-origin: left top;
                                            -webkit-transform-origin: left top;
                                            -moz-transform-origin: left top;
                                            height: 100%;
                                        }



.SiteShowBody_L > div:first-child             {width:100%;height:200px;position:relative;overflow:hidden}
.SiteShowBody_L div.SiteShowBody_L_LogoArea   {left: 70%;}

.SiteShowBody_L div.SiteShowBody_L_LogoArea  span.arrow  {
    height: 0;
    border-top: 1.2em solid transparent;
    border-left: 1.5em solid rgba(240, 141, 29,1);
    border-bottom: 1.2em solid transparent;
    width: 0;
    display: inline-block;
    position: absolute;
    right: 0;
    top: 50%;
}


.page_photo .SiteShowNav .thumbnail,
.page_photo .SiteShowNav .thumbnail {height: 100%}
.page_photo .SiteShowNav .thumbnail img {height: 100%}
.page_photo .SiteShowNav .item {margin-bottom: 20px}
.page_photo .SiteShowNav .item > .thumbnail > img        {top:0;}
.page_photo .SiteShowNav .item:hover > .thumbnail > img  {height:120%;width:auto;top:-10%;}



/*.index .SiteShowNav .logomask ,
.index .SiteShowNav .thumbnail {height: 75%}
.index .SiteShowNav .thumbnail img {height: 100%}
.index .SiteShowNav .item > .thumbnail > img        {top:0;}
.index .SiteShowNav .item:hover > .thumbnail > img  {height:120%;width:auto;top:-10%;}*/

@media (max-width: 992px){ .index .SiteShowNav > div > div {    width: 33.333334% !important;}}
@media (max-width: 768px){ .index .SiteShowNav > div > div {    width: 50% !important;}}
@media (max-width: 440px){ .index .SiteShowNav > div > div {    width: 100% !important;}}
@media (max-width: 768px){ 
    .index .SiteShowNav .item { margin-bottom: 0;}
    .index .SiteShowNav .circle_more div {height:2em;display: inline-block;overflow: hidden;}
}



.SiteShowBody_R > div > div:first-child {position:relative}
.SiteShowBody_R_img                    {border:1px solid #eee;overflow:hidden;position:relative;}
.SiteShowBody_R .SiteInfo              {position: absolute;z-index:100;height:50;width:450px;right:-80px;top:66px;padding:8px 80px;color:#fff;font-size:20px;}
.SiteShowBody_R .SiteInfo_txt          {position: absolute;height:inherit;top:130px;right:0;width:300px;font-size:13px; background:rgba(255,255,255,0.9);padding:15px;z-index:100;}
.SiteShowBody_R .SiteInfo .linkicon     {margin-right:10px;}

@media (max-width: 992px) {
    .SiteShowBody_R .SiteInfo_txt {position: static; text-align: center;width: 70%;margin:20px auto;}
    .SiteShowBody_L_LogoArea {clear: both;width: 100%;text-align: center;padding-top:50px;}
}



@media (max-width:768px) {.NewProject{min-height:auto;margin-bottom:40px;}}  



@media (max-width:1200px) {    
    .NewProject {background:none}        
    .SiteShowNav{width:100% !important;}
    .SiteShowNav > div > div {width:33.33333% !important;}
    .SiteShowBody_R {margin-bottom: 80px}

}


@media (max-width:992px) {
    .SiteShowBody_R > div > div ,
    .SiteShowBody_R {width:100% !important}
	.SiteShowNav > div > div {width:50% !important;}
}  
    



@media (max-width:768px) {
    .SiteShowNav > div > div {width:50% !important;}
    .SiteShowNav.index > div > div {width:33.33333% !important;}
}

@media (max-width: 440px){ .SiteShowNav.index > div > div {    width: 100% !important;}}

@media (max-width:440px) {
    .SiteShowNav > div > div {width:100% !important;}    
}




/*--版底(頁尾)--*/
footer {padding:20px;background: #333 !important}
/*footer {position: absolute;right:20px;bottom:10px;}*/

footer.index {margin-top:0;}
footer *{color:#fff;}
footer .footer_title > div > div{padding: 0}
footer hr {border:1.5px solid;margin-bottom:-25px}
footer h5 {line-height: 1.5em}
footer .footer_title h3,
footer .footer_title p,
footer .footer_title ul {padding-left:40px;}

footer .cis1-darker,
footer .cis3-darker {color:#F08D1D;}


footer .footer_title h3 {font-size:1.5em;font-weight:normal;}
footer .footer_title h3 span {padding:0 10px;color:#000;}

footer .footer_title p,
footer .footer_title ul  {font-size:0.8em;margin-left:45px;line-height:2em;}

footer [class*="footer_title_icon"] {background:url(../images/footer_icon.png) no-repeat #F08D1D;width:35px;height:35px;float:left;margin-top:-5px;}
footer .footer_title_icon_1          {background-position: 3px}
footer .footer_title_icon_2          {background-position: -30px}
footer .footer_title_icon_3          {background-position: -65px}


footer .footer_title > div > div:first-child{width:20%;}
footer .footer_title > div > div:last-child{width:30%;}


/*footer .copyright > h6  {color:#71420E;}*/

footer .web_market,
footer .design_service {border-right:1px solid rgba(255,255,255,0.2);padding-left: 40px}
footer .keyword {border-right:1px solid rgba(255,255,255,0.2); padding:0 20px}
footer .keyword .b {font-weight: bold}
footer .keyword .big {font-size:1.1em;}
footer .keyword .biger {font-size:1.2em;}
footer .keyword .bigest {font-size:1.8em;}
footer .keyword .small {font-size:0.5em;}

footer ul.servicelist   {margin-left:-20px;}
footer ul.servicelist li {margin-left:-20px;padding-left:0;}



@media (max-width:992px){
                        footer .Bbox_1c {width:100% !important;} 
                        footer h3 {font-size:20px !important ;} 
                        
                        footer .keyword,
                        footer .web_market,
                        footer .design_service {border:0;}
                    }
                       
@media (max-width:1200px){footer .margin_base_lr {margin-left:10px !important;margin-right:10px !important;}}

@media (max-width:768px){
                        footer {padding-top:40px;padding-left:15%;padding-right:15%;}
                        footer .Bbox_1c {max-width: 320px !important;margin: 0 auto !important;}
                        footer div {width:100% !important;text-align:center !important;margin: 0 0 10px 0!important;padding: 0 0 !important;}
                        footer .keyword {border:0 !important; padding:0 !important;}                        
                        footer ul.servicelist li {list-style:none;    width: 50%;    display: inline-block;}
                        footer .margin_base_lr {margin-left: 0!important;margin-right: 0 !important}

                        

}

@media (max-width: 480px){ footer ul.servicelist li {   width: 100%;}}




@media (min-width: 1200px) {
    footer .Bbox_1c {width:1220px;}
}





/*--側邊浮動--*/
.sideblock {
    margin-left:20px;
    padding:5px;    
    padding-bottom:0;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;    
    top:30%;
    background:rgba(255,255,255,0.8);
    z-index: 1000;
    right:auto;
    left:0;
}

.sideblock > ul {position:relative; }
.sideblock .line {position:absolute;top:0;width:1px;height:100%;margin:0 5px;z-index:-1}

.sideblock > ul li {margin-bottom:70px;}
.sideblock > ul li:last-child {margin-bottom:0;}

.sideblock > ul > li > a {  border-radius:99em;
                            background-color:rgba(240, 141, 29, 1);
                            border:1px solid #F08D1D;
                            width:10px;
                            height:10px;
                            display:block;
                            }

.sideblock > ul > li > a.active,
.sideblock > ul > li > a:hover,
.sideblock > ul > li > a:after {background:#333;}

@media (max-width:1200px){.sideblock{display:none}}



/*內頁-案例*/
.page_project .itemlist {padding-left:20px;padding-right:20px;}
.page_project,
.page_project_detail                    {background:url(../images/bg_lt.png) no-repeat left top;position:relative;} 
.page_project .SiteShowNav              {width: 100%; height:inherit;}
.page_project .page_project_left_bk,
.page_project_detail .page_project_left_bk{position:absolute;left:0;bottom:0;z-index: -1}

.page_project_detail .showimg              {margin-top:50px;}
.page_project_detail .info                 {width:200px;margin:0;font-size:0.8em;line-height:2em}
/*
.project_info  .logo                        {width:100%;position:relative;padding-bottom:25px;}
.project_info  .logo  .bk                {
                                            border-top: 310px solid rgba(0,0,0,0);
                                            border-left: 180px solid transparent;
                                            border-right: 180px solid transparent; 
                                            display:inline-block;
                                            
                                            
                                         }
*/
.project_info .logo                     {margin-bottom:30px;margin-top:50px;}  
.project_info .logo > img               {max-width:200px;/* position:absolute;top:45%; */max-height:200px }  
/*.project_info .info > p                 {margin-bottom:250px;}*/
@media (max-width:768px){
    .project_info  * {text-align: center;}
    .page_project_detail .info {width: 100%}
    .project_info .info > p{margin-bottom:40px;background:rgba(255,255,255,0.8);padding:20px;}
    .page_project_detail .showimg {margin-top:40px;}
}



.project_class {overflow: hidden;position: relative;padding:0 !important;margin-left: 10px;}
.project_class span {background:url(../images/small_arrow_white_r.png)no-repeat center,#000;background-position-x:90%;color:#fff;cursor: pointer;padding:5px 20px;display: inline-block;position: relative;z-index: 100;padding-right:40px;float: left;}
.project_class ul{display: inline-block;margin-left:3px;position: relative;left:-100%;}
.project_class:hover ul{left:0;}
.project_class ul li{background: #F08D1D;display: inline-block;float: left;margin:0 3px;}
.project_class ul li a{color:#fff;display: inline-block;width: 100%;padding:5px 10px;}
.project_class ul li:hover{background: #000}


@media (min-width: 992px) {
    .project_class {
    -moz-transform-origin: left bottom;
    -webkit-transform-origin: left bottom;
    -o-transform-origin: left bottom;
    transform-origin: left bottom;
    transform: skew(-30deg);
    -moz-transform: skew(-30deg);
    -webkit-transform: skew(-30deg);
    -o-transform: skew(-30deg);
    }
    .project_class ul {left:0;background: #000;margin:0;width: 97%;text-align: center;margin-bottom: 10px}
    .project_class ul li { margin: 0;float:none;background: #000; /*padding:0 10px;*/}
    .project_class ul li.active,
    .project_class ul li:hover {background: #F08D1D}
    .project_class ul li a {        
        -moz-transform-origin: left bottom;
        -webkit-transform-origin: left bottom;
        -o-transform-origin: left bottom;
        transform-origin: left bottom;
        transform: skew(30deg);
        -moz-transform: skew(30deg);
        -webkit-transform: skew(30deg);
        -o-transform: skew(30deg);
        padding-left: 20px;
        padding-right: 0;
        padding-top:2px;
        padding-bottom: 2px;
    }
    .project_class span {display: none}
}


@media (max-width: 992px) {
  .project_class {overflow:visible;margin:auto 0;padding:0 10px !important;}
  .project_class span {width: 100%;text-align: center;background:#000;padding:10px 0;}
  .project_class span img{padding-left:10px;}
  .project_class ul {position: absolute;z-index: 999;left:0;margin:0;padding: 0 10px;width: 100%;opacity: 0;height:0;}
  .project_class ul li{margin:0;padding:0;float: none;display: inline-block;width: 100%;text-align: center;height: 0}
  .project_class:hover ul {top:45px;opacity: 1;}
  .project_class:hover ul li{padding:8px 0;height: auto}
}





/*內頁-關於我們*/
.page_about {background:url(../images/bg_lt.png) no-repeat left center;}
.page_about .BlockInfo article {width: 170px}
.page_about > div > div > div {margin:65px 0;padding-left:70px;}
.page_about > div > div > div:nth-child(2)  p{/*padding-right:18%;*/}
.page_about > div > div > div:nth-child(3)  p{/*padding-right:25%;*/}
.page_about .Bbox_in_2c_L2 .BlockInfo {width:22%;}
.page_about .Bbox_in_2c_L2 > div > div  {width:78%;}

.page_about .about_video {position: relative;padding-bottom: 56%;overflow: hidden;}
.page_about .about_video iframe {position:absolute;top:0;left:-2%;width: 105%;height: 105%;}

@media (max-width:1200px) {.page_about > div > div > div {padding-left:40px}}
@media (max-width:992px) {
    .page_about .Bbox_1c {width:100%}
    .page_about .Bbox_1c .BlockInfo{min-width:270px;margin-bottom:20px;}
    .page_about .Bbox_1c .BlockInfo,
    .page_about .Bbox_1c .BlockInfo+div{float:left;}
    .page_about .Bbox_1c .BlockInfo+div{width:65%;}
    .page_about > div > div > div  p {padding-right:40px !important}

}

@media (max-width:860px) { 
    .page_about > div > div > div {padding:0 100px}
    .page_about > div > div > div:first-child {padding:0 20px}
    .page_about .Bbox_1c .BlockInfo+div{width:100%;}
    .page_about > div > div > div {margin:30px 0;}
    .page_about > div > div > div  p {padding-right:0 !important}
}

@media (max-width:480px) { 
    .page_about > div > div > div {padding:0 20px}
}




.page_about .markinglist                {margin:80px auto;}
.page_about .markinglist                {display: flex;display:-webkit-flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;justify-content: center;text-align: center;}
.page_about .markinglist .item          {width: 20%;padding:10px;}
.page_about .markinglist .item h5       {margin-bottom: 0;font-size:1.5em;}
.page_about .markinglist .item p        {line-height: 1em;font-size:1em;font-family: 'Raleway', sans-serif;text-transform:uppercase;font-style: italic;font-weight: 300}
.page_about .markinglist .item img      {margin-bottom:1em;padding:30px;border:1px solid #F08D1D;border-radius: 100%;width: 100%;background:#fff;}

@media (max-width: 768px) {.page_about .markinglist .item          {width:33.333334%} }
@media (max-width: 440px) {.page_about .markinglist .item          {width:50%} }







/*內頁-聯絡我們*/
.page_contact   {background:url(../images/bg_lt.png) no-repeat left top;}
.page_contact form {background:url(../images/bg_left.png) no-repeat left bottom;padding-bottom:100px}

.page_contact .checkbox-inline + .checkbox-inline,
.page_contact .radio-inline + .radio-inline {margin-left:0;}

.contact_info .contact_tel {color:#3D9649;}

form textarea,
form input[type="text"],form select {outline:none;border:0;padding:0;margin:0;font-size:1.2em;font-weight:normal;width:70%;background-color:transparent;line-height:1.1em;}
form select {width: auto;color:#aaa;}
form input[type="checkbox"],
form input[type="radio"] {height: 1em;width: 1em;margin: 0;}
form input.short {width:55px;}

form textarea {resize:none;overflow:hidden;height:200px;width: 80%;}

form label {color:#aaa;font-size:1.3em;line-height:1em;padding-bottom:0.8em;font-weight:normal;}

form span.arrow {
    height: 0;
    border-top: 0.7em solid transparent;
    border-left: 1em solid rgb(240, 141, 29);
    border-bottom: 0.7em solid transparent;
    width:0;
    display:inline-block;
    margin-right:10px;
}

form div.icon{float:left;}
form div.icon img{padding-right: 10px;float: left; padding-left: 10px;}
form span.star {color:#FF0000;margin-left:-10px;float:left;font-size:1.5em;line-height:1.3em;}
form  .form_item > div {margin-bottom:30px;margin-top:30px;padding-left:25px;padding-right:40px;}
form  .form_item   .form_items > div:nth-of-type(2) {border-bottom: 1px solid #F08D1D; padding-bottom: 0.3em;}
form .note {color:red;top:30px;position:absolute;display:inline-block;left:90px;font-weight:normal;}
form label.txt{padding-bottom:0;}
form .form_item .radio-inline, 
form .form_item .checkbox-inline{color:#000;}


@media (max-width:840px){
    .page_contact form > .Bbox_1c{background:rgba(255,255,255,0.8)}
    header.contact {background:rgba(255,255,255,0.8)}
}


@media (max-width:768px){
    form  .form_item > div {padding-left:20px;padding-right:0;}
}

@media (max-width:440px){
    form .radio-inline, .checkbox-inline ,
    form  .form_items {width: 100% !important}

}


@media (max-width:840px){
    .page.contact {padding-left:10%;padding-right: 10%}
    .page_contact {padding:0 10%;}
}




/*內頁-FAQ*/
.page_faq {background:url(../images/bg_lt.png) no-repeat;background-position:left top;position:relative;}
.page_faq .page_faq_left_bk     {position:absolute;left:0;bottom:0;z-index:-1}

.page_faq .faq_list             {margin-top:100px;}
.page_faq .faq_list .panel      {background:none;margin-bottom:10px;}
.page_faq .faq_list .panel h4 a {font-size:1.2em;font-weight:normal;color:#F08D1D;display:inline-block; width:85% ;vertical-align: top;}
.page_faq .faq_list .panel h4 label {color:#aaa;font-size:0.8em;font-weight:normal;padding-left:2.5em;display: block}
.page_faq .faq_list .panel > div:nth-child(2) > div  {border-width:0 0 0 1px;padding-left:1em;margin-left:3em;padding-right:-3em;}
.page_faq .panel .arrow {
    height: 0;
    border-left: 1.3em solid rgb(240, 141, 29);
    border-top: 0.8em solid transparent;
    border-bottom: 0.8em solid transparent;    
    width:0;
    display:inline-block;
    margin-right:10px;
    margin-top: -0.3em;
    position:relative;
}


.page_faq .panel .open {
   
    border-top: 1.3em solid rgb(240, 141, 29);
    border-left: 0.8em solid transparent;
    border-right: 0.8em solid transparent; 
    top:1em;   
    
}


.page_faq .arrow > span {position:absolute;font-size:2.5em;font-family: 'Hind', sans-serif;font-style: italic;top:-0.5em;left:-0.6em;font-weight:300;}
.page_faq .panel .arrow.open > span {top:-0.7em;left:-0.3em;}

@media (max-width: 990px) {
    .page_faq .faq_list {padding:0 10%;}
    .page_faq .faq_list {background:rgba(255,255,255,0.3);}
}



/*內頁-我們的服務*/
.page_service {background:url(../images/bg_lt.png) no-repeat;background-position:left top;position:relative;}
.page_service .page_service_left_bk     {position:absolute;left:0;bottom:0;z-index:-1}
.page_service .service_item {height:245px;margin-bottom:10px;background-color:rgba(255,255,255,1);position:relative;}
.page_service .service_item h4.EN{font-family: 'Raleway', sans-serif;}
.page_service .service_item p{line-height:1.5em;}
.page_service .service_item a.arrow_y {position:absolute;bottom:5px;right:10px;}
.page_service .service_item a.arrow_y:nth-child(even){left:10px;}

.page_service .service_item > div > div {height:100%;}

.page_service .sologn {/*position:absolute ; bottom:50;*/width:280px;z-index:1;margin-top:50px;}


.page_service .service_item .service_pic {overflow:hidden;padding:0;}


.page_service .Bbox_in_2c_L4.service_item > div > div:nth-child(1){width:40% !important;}
.page_service .Bbox_in_2c_L4.service_item > div > div:nth-child(2){width:60% !important;}
.page_service .Bbox_in_2c_L4.service_item > div > div:first-child{border-width:0 3px 0 0;}

.page_service .Bbox_in_2c_L8.service_item > div > div:nth-child(1){width:60% !important;}
.page_service .Bbox_in_2c_L8.service_item > div > div:nth-child(2){width:40% !important;border-width:0 0 0 3px;}
.page_service .Bbox_in_2c_L8.service_item > div > div:last-child{}



@media (max-width:992px) {
    .page_service .content {padding:0 10%;}
    .page_service .content > div > div {float:none;width:100%;}
    .page_service .service_item {margin-bottom:40px;background:rgba(255,255,255,0.7)}
    .page_service .Bbox_in_2c_L4.service_item > div > div:nth-child(1){width:33.334% !important;}
    .page_service .Bbox_in_2c_L4.service_item > div > div:nth-child(2){width:66.666% !important;}
    .page_service .Bbox_in_2c_L8.service_item > div > div:nth-child(2){width:33.334% !important;}
    .page_service .Bbox_in_2c_L8.service_item > div > div:nth-child(1){width:66.666% !important;}
    .page_service .sologn {width:100% !important;position:static;bottom:0;padding:0;margin-top:10px;margin-bottom:0}
    .page_service .sologn h3{text-align: center;}

}



.service_mobile {max-width: 80%;margin:0 auto;}
.service_mobile .service_pic{max-width: 100%;}
.service_mobile .arrow_y{top:80%;}
.service_mobile > div {margin-bottom: 50px}
.service_mobile ul li a{color:#333;}











.page_photo .item article {
    position: absolute;
    width: 100%;
    bottom: 20px;
    text-align: center;
    background: #F08D1D;
    color: #fff;}

.fancybox-overlay *{    
    -webkit-transition:none;
    transition: none;
    }



/* for 動畫 */
.AboutBuyers .Bbox_1c,
.index .OurService .Bbox_1c,
.NewProject .Bbox_1c {opacity: 0;}

.index_animation {
    -webkit-animation-duration: 3s;
    -moz-animation-duration: 3s;
    -webkit-animation-name: scrollright;
    -moz-animation-name: scrollright;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;


    animation-direction:alternate;
    animation-name:index_animation;
    -webkit-animation-name:index_animation;    
}

@media (max-width: 768px){
    .index_animation {
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;    
    }
}

@keyframes index_animation {  
  from  {opacity:0;margin-top:80px; }
  50%   {opacity:.85;margin-top:-10px;}
  to    {opacity:1;margin-top:0;}
}

@-o-keyframes index_animation{  
  from  {opacity:0;margin-top:80px; }
  50%   {opacity:.85;margin-top:-10px;}
  to    {opacity:1;margin-top:0;}
}
@-moz-keyframes index_animation{  
  from  {opacity:0;margin-top:80px; }
  50%   {opacity:.85;margin-top:-10px;}
  to    {opacity:1;margin-top:0;}
}
@-webkit-keyframes index_animation{  
  from  {opacity:0;margin-top:80px; }
  50%   {opacity:.85;margin-top:-10px;}
  to    {opacity:1;margin-top:0;}
}




.index_ball {position: relative;display: inline-block;}
.index_ball .over {position: absolute;top:0;left:0;}
.index_ball .ball {top: -40px; left: 15;}


.index_ball+p {display: block;position: absolute;bottom:-60px;width: 100%;}


@media (max-width: 600px) {
    .index_ball img {padding:0;}
    .index_ball img {max-width: 100%}
    .index_ball .ball {top: -25px; left: 5px;}
}


.index_ball_animation {
    -webkit-animation: index_ball_animation 10s infinite linear;
    -moz-animation: index_ball_animation 10s infinite linear;
    -o-animation: index_ball_animation 10s infinite linear;
    animation: index_ball_animation 10s infinite linear;   
}



@keyframes index_ball_animation {  
  from  {transform: rotate(0deg);}
  to    {transform: rotate(360deg);}
}



@-webkit-keyframes index_ball_animation {  
  from  {-webkit-transform: rotate(0deg);}
  to    {-webkit-transform: rotate(360deg);}
}










/* for price & seo page*/
.sem_title {text-align: center;margin-bottom: 40px}
.sem_title .BlockInfo{display: inline-block;}
.sem_title .BlockInfo article {font-size:21px;}
.sem_title .BlockInfo article span {font-size:36px;}
.sem_title .BlockInfo article span {line-height: 1.3em}
@media (max-width: 440px) {
    .sem_title .BlockInfo article {font-size: 16px}

}


/* price page*/
.page_price                           {margin:0 auto;margin-bottom: 100px;width: 95%;max-width: 1060px;/*background: rgba(255,255,255,.65);*/padding:20px 0;}
.page_price .fz21                     {font-size:21px;}

.price_block                          {display:flex;display:-webkit-flex;padding:0;margin:65px auto;justify-content:center;-webkit-justify-content:center;flex-wrap:wrap;-webkit-flex-wrap:wrap;}
.price_block .price_pc                {display:inline-block;width:160px;height:150px;background: url(../images/price-pc.svg) no-repeat center center;text-align: center}
.price_block .price_pc:nth-child(1)   {background: url(../images/price-pc-3.svg) no-repeat center center/100% auto;}
.price_block .price_pc:nth-child(3)   {background: url(../images/price-pc-6.svg) no-repeat center center/100% auto;}
.price_block .price_pc:nth-child(5)   {background: url(../images/price-pc-10.svg) no-repeat center center/100% auto;}
.price_block .price_pc:nth-child(7)   {background: url(../images/price-pc-20.svg) no-repeat center center/100% auto;}
.price_block .price_pc:nth-child(9)   {background: url(../images/price-pc-30.svg) no-repeat center center/100% auto;}
.price_block .price_pc span           {font-family:  sans-serif;color:#fff;font-size:38px;}
.price_block .price_arrow             {display:inline-block;width:60px;height:150px;background: url(../images/price-arrow.png) no-repeat center center}
@media (max-width: 440px){
    .price_block .price_arrow {width: 100%;transform: rotate(90deg);-webkit-transform: rotate(90deg);}
}
.price_icon    {display: flex;display:-webkit-flex;justify-content:center;-webkit-justify-content:center;flex-wrap:wrap;-webkit-flex-wrap:wrap;padding: 0;list-style: none}
.price_icon li {padding:25px;}


.page_price .sem_title {margin-bottom: 120px}




/* price seo*/
.page_seo {background: rgba(255,255,255,.95);display: table;margin:0 auto;margin-bottom: 100px;padding-bottom: 100px;width: 100%; max-width: 1440px;}

.pie {width:200px;height:200px;border-radius: 100%;overflow: hidden;position: relative;}

.page_seo .block01{display: flex;display:-webkit-flex;justify-content:center;-webkit-justify-content:center;flex-wrap:wrap;-webkit-flex-wrap:wrap;text-align: center;margin-top:100px;}
.page_seo .block01 .item {padding:0 25px;}
.page_seo .block01 .item p{display:inline-block;max-width:160px;text-align: center;margin-top:30px;line-height: 2em}

.page_seo .block02{display:table;max-width: 640px;margin:150px auto;text-align: center;padding:0 10px;}

.page_seo .block03 {text-align: center;}
.page_seo .block03 img{max-width:100%;margin:0 auto;}

.page_seo .block04 {width:90%;max-width:580px;display: table;margin:80px auto;background: #E6E6E6;text-align: center;padding:40px;}
.page_seo .block04 h4{font-size:18px;color:#808080;margin-bottom: 40px}
.page_seo .block04 ul{padding: 0;margin:0;display: inline-block;list-style: none;margin-bottom: 20px}
.page_seo .block04 li{display: inline-block;vertical-align: top;float: left;}
.page_seo .block04 li div{display:table-cell;}
.page_seo .block04 li:after{content:'';display:table-cell;width:80px;background: url(../images/icon-cross.png) no-repeat top center;background-position:center 5px }
.page_seo .block04 li:last-child:after{display: none}
@media (max-width: 460px){
    .page_seo .block04 {padding: 10px}
    .page_seo .block04 li:after {width: 50px}
}



.page_seo .block05                                  {text-align: center;border-radius: 50px;max-width: 1140px;padding:40px;width: 90%;margin:0 auto;margin-bottom: 120px}
.page_seo .block05 article                          {margin:45px 0;}
.page_seo .block05 h3                               {font-size:21px;}
.page_seo .block05 h4                               {margin-bottom: 25px}
.page_seo .block05 p                                {line-height: 2em}
.page_seo .block05 p,
.page_seo .block05 img                              {max-width: 100%}
.page_seo .block05 .item                            {display: table;max-width: 810px;margin:0 auto;margin-bottom: 40px}
.page_seo .block05 .item div                        {display: table-cell;text-align: left;vertical-align: top;}
.page_seo .block05 .item div.col_s                  {width: 260px;}
.page_seo .block05 .item:nth-of-type(2) div         {vertical-align: middle;}
.page_seo .block05 .item:nth-of-type(2) div.col_s   {text-align: right;}
@media (max-width: 768px){
    .page_seo .block05 .item  div p {margin:20px auto;}
    .page_seo .block05 .item:nth-of-type(2) div.col_s,
    .page_seo .block05 .item  div{display: inline-block;width: 100%;text-align: center;}
}
@media (max-width: 400px){
.page_seo .block05 .item div.col_s                  {width:100%}
}



.page_seo .block06                             {text-align: center;max-width: 1060px;margin:0 auto;display: table;width: 90%}
.page_seo .block06 h3                          {font-size:21px;margin-bottom: 55px}
.page_seo .block06 .markinglist                {display: flex;display:-webkit-flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;justify-content: center;}
.page_seo .block06 .markinglist .item          {width: 25%;border:1px solid #ccc;padding:40px 20px;}
.page_seo .block06 .markinglist .item p        {line-height: 2em;margin-top:18px;font-size:13px;}
.page_seo .block06 .markinglist .item.w50      {width: 50%;border:0;text-align: left;padding-top:100px;}
.page_seo .block06 .markinglist .item.w50 img  {width: 350px;max-width: 100%}
.page_seo .block06 .markinglist .item.w50 ul   {font-size:21px;}
.page_seo .block06 .markinglist .item img      {margin-bottom: 30px;}

@media (max-width: 990px){.page_seo .block06 .markinglist .item      {width: 50%;} }
@media (max-width: 600px){
    .page_seo .block06 .markinglist .item.w50,
    .page_seo .block06 .markinglist .item      {width: 80%;}
}







/* for 動畫 */
.show_step {opacity: 0;transition: none;-webkit-transition:none;}
.showhide_hide {opacity: 0;}

.showhide_show {
    -webkit-animation-duration: 1.5s;
    -moz-animation-duration: 1.5s;
    
    
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;

    animation-direction:alternate;

    -webkit-animation-name: scroll_show;
    -moz-animation-name: scroll_show;    
    animation-name:scroll_show;
    position: relative;
    
}



@keyframes scroll_show {  
  from  {opacity:0;top:30px;}
  50%   {opacity:.85;top:-30px;}
  to    {opacity:1;top:0;}
}

@-o-keyframes scroll_show{  
  from  {opacity:0;top:30px;}
  50%   {opacity:.85;top:-30px;}
  to    {opacity:1;top:0;}
}
@-moz-keyframes scroll_show{  
  from  {opacity:0;top:30px;}
  50%   {opacity:.85;top:-30px;}
  to    {opacity:1;top:0;}
}
@-webkit-keyframes scroll_show{  
  from  {opacity:0;top:30px;}
  50%   {opacity:.85;top:-30px;}
  to    {opacity:1;top:0;}
}









/* index header v2 -------------------------------*/
header.index {min-height:100vh;}
.index_welcome                           {margin-bottom:40px;width: 90%;max-width:850px;margin: 0 auto;padding-top: 100px;text-align: center;}
.index_welcome .index_welcome_area       {position: relative;display: inline-block;padding-bottom: 61.5%;width: 100%;overflow: hidden;}
.index_welcome .index_welcome_area .obj  {position: absolute;}
.index_welcome img                       {max-width: 100%}
.index_welcome .infotxt h2 {font-size:22px;line-height:1.3em}
.index_welcome .infotxt h3 {font-size:18px;margin-bottom: 50px}

.index_welcome .obj:nth-child(1) {width: 47%}
.index_welcome .obj:nth-child(2) {width: 49%}
.index_welcome .obj:nth-child(3) {width: 30%}
.index_welcome .obj:nth-child(4) {width: 12.235%}


/*for animation*/
.index_welcome .slogon,
.index_welcome .infotxt,
.index_welcome .obj {
    -webkit-animation-duration: .8s;   
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-direction:alternate;
    animation-duration: .8s;
    animation-fill-mode: forwards;
    animation-direction:alternate;
    opacity: 0;    
}

.index_welcome .slogon {-webkit-animation-delay:1.2s; animation-delay:1.2s;  -webkit-animation-name: index_welcome_animation_slogon; animation-name:index_welcome_animation_slogon;}
.index_welcome .obj:nth-child(1){-webkit-animation-delay: 0s; animation-delay: 0s;-webkit-animation-name: index_welcome_animation_1; animation-name:index_welcome_animation_1;}
.index_welcome .obj:nth-child(2){-webkit-animation-delay: .3s; animation-delay: .3s;-webkit-animation-name: index_welcome_animation_2; animation-name:index_welcome_animation_2;}
.index_welcome .obj:nth-child(3){-webkit-animation-delay: .6s; animation-delay: .6s;-webkit-animation-name: index_welcome_animation_3; animation-name:index_welcome_animation_3;}
.index_welcome .obj:nth-child(4){-webkit-animation-delay: .9s; animation-delay: .9s;-webkit-animation-name: index_welcome_animation_4; animation-name:index_welcome_animation_4;}
.index_welcome .infotxt {-webkit-animation-delay: 2s; animation-delay: 2s;  -webkit-animation-name: index_welcome_animation_infotxt; animation-name:index_welcome_animation_infotxt;}

@keyframes index_welcome_animation_slogon {  
  from  {opacity:0;}
  to    {opacity:1;}
}

@keyframes index_welcome_animation_infotxt {  
  from  {opacity:0;}  
  to    {opacity:1;}
}


@keyframes index_welcome_animation_1 {  
  from  {opacity:0;right:0;top:0;}
  to    {opacity:1;right:5%;top:0;}
}

@keyframes index_welcome_animation_2 {  
  from  {opacity:0;left:-50px;bottom:20px;}
  to    {opacity:1;left:0;bottom:20px;}
}

@keyframes index_welcome_animation_3 {  
  from  {opacity:0;bottom:0;right:-20px;}
  to    {opacity:1;bottom:0;right:0;}
}

@keyframes index_welcome_animation_4 {  
  from  {opacity:0;bottom:-30px;left:42%;}
  to    {opacity:1;bottom:0;left:42%;}
}


@-o-keyframes index_welcome_animation_slogon {from  {opacity:0;} to    {opacity:1;} }
@-o-keyframes index_welcome_animation_infotxt {from  {opacity:0;} to    {opacity:1;} }
@-o-keyframes index_welcome_animation_1 {from  {opacity:0;right:0;top:0;} to    {opacity:1;right:5%;top:0;} }
@-o-keyframes index_welcome_animation_2 {from  {opacity:0;left:-50px;bottom:20px;} to    {opacity:1;left:0;bottom:20px;} }
@-o-keyframes index_welcome_animation_3 {from  {opacity:0;bottom:0;right:-20px;} to    {opacity:1;bottom:0;right:0;} }
@-o-keyframes index_welcome_animation_4 {from  {opacity:0;bottom:-30px;left:42%;} to    {opacity:1;bottom:0;left:42%;} }

@-moz-keyframes index_welcome_animation_slogon {from  {opacity:0;} to    {opacity:1;} }
@-moz-keyframes index_welcome_animation_infotxt {from  {opacity:0;} to    {opacity:1;} }
@-moz-keyframes index_welcome_animation_1 {from  {opacity:0;right:0;top:0;} to    {opacity:1;right:5%;top:0;} }
@-moz-keyframes index_welcome_animation_2 {from  {opacity:0;left:-50px;bottom:20px;} to    {opacity:1;left:0;bottom:20px;} }
@-moz-keyframes index_welcome_animation_3 {from  {opacity:0;bottom:0;right:-20px;} to    {opacity:1;bottom:0;right:0;} }
@-moz-keyframes index_welcome_animation_4 {from  {opacity:0;bottom:-30px;left:42%;} to    {opacity:1;bottom:0;left:42%;} }

@-webkit-keyframes index_welcome_animation_slogon {from  {opacity:0;} to    {opacity:1;} }
@-webkit-keyframes index_welcome_animation_infotxt {from  {opacity:0;} to    {opacity:1;} }
@-webkit-keyframes index_welcome_animation_1 {from  {opacity:0;right:0;top:0;} to    {opacity:1;right:5%;top:0;} }
@-webkit-keyframes index_welcome_animation_2 {from  {opacity:0;left:-50px;bottom:20px;} to    {opacity:1;left:0;bottom:20px;} }
@-webkit-keyframes index_welcome_animation_3 {from  {opacity:0;bottom:0;right:-20px;} to    {opacity:1;bottom:0;right:0;} }
@-webkit-keyframes index_welcome_animation_4 {from  {opacity:0;bottom:-30px;left:42%;} to    {opacity:1;bottom:0;left:42%;} }





.sideVideo {position: fixed;right:0;top:50%;}
.sideVideo a:before {transition: all .3s ease-out;-webkit-transition: all .3s ease-out;}
.sideVideo a:before {content: '';position: absolute;top:0;left:0;right:0;bottom:0;background: url(../images/play.png) no-repeat center center,rgba(240, 141, 29, 0.5);border:3px solid rgba(240, 141, 29, 1);opacity:0}
.sideVideo a:hover:before {background: url(../images/play.png) no-repeat center center,rgba(240, 141, 29, 0.2);opacity: 1}


.sideVideo ,
.sideVideo *    {transition: all .3s ease-out;-webkit-transition: all .3s ease-out;}
.sideVideo      {opacity: 0;padding-top:10px;}
.sideVideo.show {opacity: 1;padding-top:0;}
.sideVideo a    {background:rgba(240, 141, 29, 0.5);display: inline-block;width:180px;height:100px;padding:1em;text-align: center}
.sideVideo a    {color:#fff;letter-spacing: 3px;font-size:1.3em;line-height: 2.3em;font-weight: bold}
.sideVideo             {background:url(../images/sidevideo.jpg)no-repeat center center/cover;}
.sideVideo.result      {background:url(../images/sidevideo2.jpg)no-repeat center center/cover;}


@media (max-width: 768px){
    .sideVideo   {top:auto;bottom:30px;}
    .sideVideo a {width:60px;height: 60px;display: inline-block;position: relative;overflow: hidden;}
    .sideVideo a:before {background: url(../images/play.png) no-repeat center center,rgba(240, 141, 29,.8);border-radius: 10px;overflow: hidden;}
    .sideVideo a:before {opacity: .85}
    .sideVideo a:hover:before {background: url(../images/play.png) no-repeat center center,rgba(240, 141, 29,1);}
    .sideVideo a img{display: none}

}














[name="google_conversion_frame"] {height: 0}

/* 20161104 Add Video*/
.topmenu_sm .navbar-toggle:focus, .topmenu_sm .navbar-toggle:hover{
    background-color: #FFF!important;
}
.topmenu_sm .navbar-toggle:focus .icon-bar, .topmenu_sm .navbar-toggle:hover .icon-bar{
    background-color: #F08D1D !important;
}

.topmenu_sm .navbar-toggle:focus, .topmenu_sm .navbar-toggle:hover{
    background-color: #FFF;
}
.topmenu_sm .navbar-toggle:focus, .topmenu_sm .navbar-toggle:hover{
    background-color: 
}
.menu_sm {
    max-height: 100vh;
    overflow-y: auto;
}
.menu_sm > li{
    background-color: rgba(240,141,29,1);
}
.menu_sm > li > a{
    color: #FFF;
}
.menu_sm li a{
    width: 100%;
    display: inline-block;
}
.submenu_sm{
   padding-left: 0;
    overflow:  hidden;
    max-height: 0;
    transition: all .3s;
    -webkit-transition: all .3s;
}
.menu_sm > li.active > .submenu_sm,
.submenu_sm > li.active > .submenu_sm
{
    max-height: 100%;
}
.menu_sm > li,
.submenu_sm > li{
    padding: 10px 0!important;
    list-style: none;
}
.submenu_sm > li.active >.submenu_sm > li{
    border-bottom: 1px solid #aaa
}
.submenu_sm.subM2{background-color: rgba(244,172,90,1);}
.submenu_sm.subM2 > li{border-bottom: 1px solid rgba(240,141,29,1);
border-bottom: 1px solid rgba(255,255,255,0.8);}

.submenu_sm.subM3{background-color: rgba(255,255,255,1)}
.submenu_sm.subM2 > li > a{color:#FFF;}
.submenu_sm.subM3 > li > a{color:#000;}
.waterWall .waterfall_photos{
    padding-top: 40px;
}





.waterWall,
.videoList,
.waterWall__grid,
.videoList__grid{
    width: 100%;
    box-sizing: border-box;
    position: relative;
    display: inline-block;
}
.waterWall__grid{
    cursor: pointer;
}
.waterWall__Items,
.videoList__Items{
    display: inline-block;
    padding: 0 10px;
    box-sizing: border-box;
    margin-bottom: 20px;
}
.waterWall__Items{
    width: 25%;
}
.videoList__Pic,
.waterWall__Pic{
    position: relative;
    display: inline-block;
    width: 100%;
    overflow: hidden;
}
.videoList__Pic{
    height: 0;
    padding-bottom: 56.2%;
}
.waterWall__Pic:before,
.videoList__Pic:before{
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(240, 141, 29,0.8);
    background-image: url(../images/detail.png);
    background-position: bottom center;
    background-size: 100%;
    background-repeat: no-repeat;
    opacity: 0;
    transition: all .6s ease-in-out;
    -webkit-transition: all .6s ease-in-out;
}
.waterWall__Pic img,
.videoList__Pic img{
    width: auto;
    height: auto;
    max-height: 100%;
    max-width:  100%;
    margin:  0 auto;
    display: block;
    transform: scale(1,1);
    -webkit-transform: scale(1,1);
    transition: all .6s ease-in-out;
    -webkit-transition: all .6s ease-in-out;
}
.videoList__Pic img{
    position: absolute;
}
.waterWall_Title,
.videoList__Title{
    width: 100%;
    display: inline-block;
    text-align: center;
    font-family: 'Raleway','微軟正黑體';
    height: 75px;
    line-height: 75px;
    color: #000;
    border-top: 1px solid rgba(255,255,255,0);
}

.waterWall .waterWall__grid:hover .waterWall__Pic:before,
.videoList .videoList__grid:hover .videoList__Pic:before{
    opacity: 1;
}
.waterWall .waterWall__grid:hover .waterWall__Pic img,
.videoList .videoList__grid:hover .videoList__Pic img{
    transform: scale(1.2,1.2);
    -webkit-transform: scale(1.2,1.2);
}
.waterWall .waterWall__grid:hover .waterWall_Title,
.videoList .videoList__grid:hover .videoList__Title{
    background-color: #F08D1D;
    color: #FFF;
    border-top: 1px solid rgba(255,255,255,1);
}
.grid-sizer{width: 25%;display: block;position: absolute!important;z-index: -1000!important;}
.grid-item {; width: 25%; }
.waterWall__Area{width: 100%; box-sizing: border-box;box-shadow: 1px 2px 4px 0px rgba(0,0,0,0.3);box-shadow: 0 2px 10px #aaa;-webkit-box-shadow: 0 2px 10px #aaa;background-color: #FFF;
}
.videoList{
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    margin-left: 0!important;
    margin-right: 0!important;
}