/*Waterfall 瀑布流版面  masonry.js ---- grid ---- */
.grid {}

/* ---- grid-item ---- */
/* fluid 5 columns */

.grid-sizer{min-height: 500px;}

.grid-sizer,
.grid-item { 
  /*min-width: 300px;*/
    
    height: auto;
}



.grid-item {/*  float: left;*/}



.grid-item--gigante {
/*  width: 360px;*/
 
  height: auto;
  background: yellow;
  z-index: 2; /* above other items */
}



/*RESET--------------------------------*/

#header.navOpened {
    background-image: linear-gradient(to right, #b27e86 0%, #7961ab 60%, #98b7a7 90%, #98b7a7 100%);
}
#mobileDropMenu.opened{
  
    background-image: linear-gradient(to right, #b27e86 0%, #7961ab 60%, #98b7a7 90%, #98b7a7 100%);
    
    /*background-color: #000000;*/
}

#mobileDropMenu .smallCat{border-color: #b27e86; color: #fff;}



.container{
	padding-left:10px;
	padding-right:10px;
	position: relative;
	}


[class*="col-"]{
padding:10px 12px;
}

h1,h2,h3{ line-height: normal;}

/*YAHOO TRACING CODE*/
[class*="col-"] img[src^="https://sp.analytics"]{
    width: auto;
    margin: 0;
}



.trigger-icon, .trigger-icon:before, .trigger-icon:after, #poiSection .galleryCol .foodImgLarge.mustTry span, footer {
    background-color: #000000;
}



.trigger-icon, .trigger-icon:before, .trigger-icon:after{ background-color: #fff;}
/*END RESET--------------------------------*/


.desktop{ display: none !important;}

.mainContent>section{ position: relative;}

.bgYellow{ background-color: #fdc733}

.color_stress1{ color: #0071d0;}
.color_stress2{ color: #f76841;}



/* key view */
#kv{overflow: hidden;}
#kv .container{ position: relative; height: 100%;}

.TT_kv{ position: absolute; top: 0; left: 50px;
display: inline-block; background: url(../img/index/TT_kv.png) center 0 no-repeat;
    width: 50%; height: 550px;
    z-index: 1;
    background-size:contain;
    color: transparent;
}

.TT_kv::selection {
	background: transparent;
	color: transparent;
}
.TT_kv::-moz-selection {
	background: transparent;
	color: transparent;
}


#kv .kvdesc{
	/*margin-top:55px; */
    background-image: url(../img/index/kv_L.jpg);
	background-position: center top; background-repeat: no-repeat;
    background-size: cover;
     height: 400px;
	
	}

#kv .kvdesc a{
    display: block;
    width: 100%;
    height: 100%;
}

/*路線圖*/
.section_metroLine{ background: url(../img/index/bg_metro.jpg) center 0 no-repeat; padding: 30px 0;}

.section_metroLine img{}


/*週邊景點*/
.section_spot{}
.section_spot [class*="col-"] {
    padding: 0;
}

.section_spot .thumbnail{position: relative;}
.section_spot h2{position: absolute; bottom: 10px; left: 10px; color: #fff; z-index: 2;
font-size: 16px;}


/*部落客---------------*/
.section_blogTop{ 
    background:#e8e8e8 url(../img/blog/bg_blogtop_M.jpg) -55px 0 no-repeat;
    
    height: 230px;
    
    /*background-size: auto 230px;*/
    background-size: cover;
    
}

.section_blogTop .container{ height: 100%; }

.blogger_intro{
    position: absolute; right: 8%; top: 18%; 
    width: 50%; line-height: 1.8;
    }

.blogger_intro a{ border-bottom: solid #7961ab 3px;}

/*部落客景點*/
.color1{ color: #ab6772;}


.section_blog_spot01{
   background:#f4f4f4 url(../img/blog/bg_blog01.jpg) right 0 no-repeat;
    background-size: cover;
}


.blog_spot_top_header{
    text-align: center;
    background:url(../img/blog/bg_blog_text_01.png) center 10px no-repeat; 
    
    padding: 15px 0 10px;
}


.blog_spot_top_content [class*="col-"] {
    padding: 0;
}


.store_info{
    margin: 0;
    position: absolute;
    bottom: 0;
    background: #000;
    color: #fff;
    padding: 6px 10px;
    
     
}

.store_info .tt{ font-family: 'Roboto', 'Noto Sans TC',sans-serif;
    font-weight: 500;
}
/*Horizontal Block 平行區塊*/
.store_info.s1,.store_info.s3{
    display: flex;
    flex-direction:column; 
}

.store_info.s1{ 
   
    
    width: 73%; right: -35px; 
    
    background-image: linear-gradient(120deg, #b27e86 0%, #7961ab 60%, #98b7a7 90%, #98b7a7 100%);
}



.store_info.s3{ 
    width: 88%; left:-35px;
    align-items:flex-end;
    
    background-image: linear-gradient(-120deg, #b27e86 0%, #7961ab 60%, #a2b4ab 75%, #a2b4ab 100%);
}



.store_info.s3 .store_desc{
    padding-right: 35px;
}


/*vertical Block 垂直區塊*/
.store_info.s2,.store_info.s4{   
    display: flex;
    flex-direction:column;
    /*text-align: center;*/
    height: 90%;
    padding-top: 10%;
    
}


.store_info.s2{ 
    justify-content:flex-start;
    
    
    width: calc(13px * 5); 
    width: 50%; left: -35%; 
    
     /*background-image: linear-gradient(to left, #b27e86 0%, #7961ab 60%, #a2b4ab 75%, #a2b4ab 100%);*/
     background-image: linear-gradient(to left, #b27e86 0%, #7961ab 60%,#7961ab 100%);
}

.store_info.s4{
    
    justify-content:flex-end;
    width: 50%; right: -30%;
    
/*    background-image: linear-gradient(to right, #b27e86 0%, #7961ab 80%, #a2b4ab 99%, #a2b4ab 100%);*/
    background-image: linear-gradient(to right, #b27e86 0%, #7961ab 80%,#7961ab 100%);
}



/*Triangle 三角形*/
.store_info.s1:before,.store_info.s2:after,
.store_info.s3:after,.store_info.s4:before
{
    position: absolute;
    
    content: ''; display: inline-block;
    width: 0; height: 0;   
    border-style: solid;
    
}


.store_info.s1:before,
.store_info.s4:before{
    left: -15px; top: 20%;
    border-width: 10px 20px 10px 0;
    border-color: transparent #b27e86 transparent transparent;
}

.store_info.s2:after,
.store_info.s3:after{
    right: -15px; top: 20%;
    border-width: 10px 0 10px 20px;
    border-color: transparent transparent transparent #b27e86;
}

.store_info.s2:after,.store_info.s4:before{top: 50%;}

/*CUSTOMIZE Animation Style------------------------------*/
.custAnimate[class*="objSlideIn"]{transition: all .3s linear;}

a:hover .s1.custAnimate.objSlideInRight{
    transform:translateX(-10%);
}


a:hover .s2.custAnimate.objSlideInLeft{
    transform:translateX(30%);
}


a:hover .s3.custAnimate.objSlideInLeft{
    transform:translateX(10%);
}

a:hover .s4.custAnimate.objSlideInRight{
    transform:translateX(-30%);
}

.store_info .store_desc{ display: block; font-size: 13px;}

.blogStop{
    
    width: calc(20px*3);
    height: calc(20px*3);
    font-size: 20px;
    
    padding: 20px;
    line-height: 1.2;
    
    margin: 0 auto;
    
    border-radius: 50%;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    background: #7961ab;
   
    line-height: 1;
   
    display: flex; 
    align-items:center;

}


.section_blog_spot02{
   background:#f4f4f4 url(../img/blog/bg_blog02.jpg) center 0 no-repeat;
    position: relative;
    
    overflow: hidden;
    background-size: cover;
    
}


.section_blog_spot02 .container{
    z-index: 2; 
    
}



.section_blog_spot02:after{
    content: ' ';
    position: absolute;
    
    margin: 0 auto; left: 0; right: 0;top: 0;
    display: inline-block;
    width: 6px;
    height: 100%;
    /*z-index: 1;*/
    background: #7961ab;
    
}

.section_blog_spot02 .blog_spot{ padding-top: 25px;}





[class*="circle-"] .info{background:#f4f4f4; display: inline-block; text-align: center;}

[class*="circle-"][class*="col-"] img {
    width: 50%; margin-top: 10px
}

.section_blog_spot02 [class*="square-"]{
     background-repeat: no-repeat;
     background-position: center 0;
     background-size: cover;
    padding-left: 7%; padding-right: 7%;
}


.section_blog_spot02 .square-1{background-image:url(../img/blog/bg_blog_text_01.png); }
.section_blog_spot02 .square-2{background-image:url(../img/blog/bg_blog_text_02.png);}

.section_blog_spot02 [class*="square-"] .thumbnail{/* 
    width: 90%; margin: 0 auto;*/}


.section_blog_spot02 [class*="square-"] p{ margin-top: 0;}
.section_blog_spot02 [class*="square-"] img{ margin-bottom: 8px;}


/*食品展贊助單位*/
.wrap-vendor-list{ /*display: none;*/}
.wrap-vendor-list li{ float: left; width: 93px; height: 100%; box-sizing: border-box; padding: 5px;}
.wrap-vendor-list li a{ display: block; border: 1px solid #c6c6c6;}

.wrap-notice{ margin-bottom: 25px;}
.wrap-notice h2{ border-bottom: 1px solid #c6c6c6; line-height: 3rem; margin-bottom: 10px;}
.wrap-notice ul li{ margin-bottom: .5em;}

.wrap-notice ol{ padding-left: 1.5rem;}
.wrap-notice ol li{ margin-bottom: 1em;}

#Section_Sponser .wrap-vendor-list{ /*text-align: center;*/}



/*官方資訊*/
.section_officialInfo{}

.section_officialInfo [class*="col-"] {
    padding: 0;
}

.section_officialInfo .img_crop{ 
    max-height: 455px;
    /*height: calc(535px / 960 * 100% );*/
    
}

.section_officialInfo .img_crop:after{
    content: '';
    display: block;
    background-position: center 0;
    background-repeat: no-repeat;
   
    
    position: absolute; top: 0; width: 100%; height: 100%; 
}

.section_officialInfo .content{
    position: absolute;
    
    margin: 0 auto; left: 0; right: 0;
    text-align: center; font-size: 1rem;
    z-index: 1;
    
    width: 60%; max-width: 380px;
    height: 60%;
    top: 20%;
    
        display: flex;
/*    flex-direction:column;*/
    align-items:flex-end;
}



.section_officialInfo .site .img_crop:after{
     background-image: url(../img/index/mask_site.png);
}
.section_officialInfo .site .content{
    background: url(../img/index/logo_tymetro.svg) center 0 no-repeat;
    
    background-size: contain;
    

}
.section_officialInfo .site .btn_detail{
    width: 100%;
    border-width: 2px;
    padding: 6px 15px;
    
    font-size: 1rem;
    color: #000;
}

.section_officialInfo .video .img_crop:after{
    /* 
    background-image: url(../img/index/mask_video.png);
    opacity: 1;*/
    
    display: none;
}




.section_officialInfo .video .content{
   /* background: url(../img/index/video_play.png) center 0 no-repeat;
  
    background-size: auto 50%;
  */
}


.section_officialInfo .video .videoname{ width: 100%; text-align: center;}


.videoContent{
    position: absolute; top: 0; width: 100%; height: 100%;
}




/*MEDIA QUERIES----------------------------------------------------*/

@media screen and (min-width:425px) { 
    .store_info.s1{ width: 70%; }
    .store_info.s2{ width: 45%; }
    .store_info.s3{ width: 70%; }
    .store_info.s4{ width: 45%; }
    
} 

@media screen and (min-width:480px) {    
    
   #kv .kvdesc{height: 550px;}
   
    
    
    
    .section_spot h2{font-size: 18px;}
    
    .section_blogTop{ background-position: 0 0;}
    .blogger_intro{top: 25%;}
    
    
    .store_info.s1{ width: 90%; right: -25px;}
    .store_info.s2{ width: 45%; }
    .store_info.s3{ width: 95%;  left:-25px;}    
    .store_info.s4{ right: -10%;}
    
    .img_crop_s4{ 
        position: absolute;
        top: 0;
        right: calc(100% /3);
        
        display: block; 
        height: 100%; width:  calc(100% *2 / 3);
        overflow: hidden;
    } 
    
    .store_info.s3 .tt{ padding-right: 10px; }
    .store_info.s3 .store_desc {padding-right: 0; }

    
    
    .store_info{font-size: 13px;} 
   
    
    
    
}



@media screen and (min-width:640px) {
    #kv .kvdesc{
	 background-image: url(../img/index/kv_L.jpg);
     height: 400px;
	}
    
    .store_info.s1{ width: 75%; right: -35px;}
    .store_info.s2{ width: 45%; }
    .store_info.s3{ width: 77%;  left:-35px;}
    .store_info.s4{ right: -10%;}
    
    .wrap-vendor-list{ display: inline-block;}
    
}

@media screen and (min-width:641px) {
    
    .mobile{ display: none !important;}
    .desktop{ display: block !important;}
    
	.section_blogTop{ 
         background-image: url(../img/blog/bg_blogtop.jpg);
         background-position: center 0;
         height: 180px;
    }
    
    .blogger_intro{ margin: 0 auto; left: 0; right: -20%;}
    
    [class*="circle-"][class*="col-"]{ padding: 10px 7% 20px 7%;}
    
    [class*="circle-"] .info{ text-align: left;background:transparent;}
    
    
    [class*="circle-"][class*="col-"] img {}
    .section_blog_spot02 .circle-1{
        float: right;
    }
    .section_blog_spot02 [class*="square-"]{padding-top: 45px;}
    .section_blog_spot02 .square-1{padding-right: 0;}
    .section_blog_spot02 .square-2{padding-left: 3px;}
}

@media screen and (min-width:768px) {
    .store_info .tt{ font-size: 16px;}  
    
    .store_info.s1{ width: 70%; right: -15%;}
    .store_info.s2{ width: 42%; }
    .store_info.s3{ width: 72%;  left:-15%;}
    .store_info.s4{ width: 40%; height: 80%; padding-top: 20%;}
    
}



@media screen and (min-width:960px) {
    
  #kv .kvdesc{height: 600px;}
    
   .section_blog_spot02:after{ width: 9px;} 
   .section_blog_spot02 .square-2{padding-left: 5px;} 
    
    
    
  .blogger_intro{top: 30%;}  
    
    [class*="circle-"][class*="col-"]{ 
        padding-left:10%; padding-right:  10%;}
    
    [class*="circle-"][class*="col-"] img {margin-top: 30px}
    
     .section_officialInfo .content{width: 50%; height:50%;    top: 25%}
    
    
    
    
    .store_info{ padding-top: 10px; padding-bottom: 10px;}
    .store_info.s2{ width: 40%; }
    .store_info.s4{ width: 30%; }
    
    
    
    
}

@media screen and (min-width:1024px) {
    
    
     .store_info .tt{ font-size: 18px;}  
    .store_info .store_desc{ font-size: 15px;}
    
    
    
    .section_blogTop{ height: 250px;}
	.blogger_intro{ top: 35%; font-size: 18px; }
    
   
    .blogStop{ 
        font-size: 30px;
            width: calc(30px*3);
    height: calc(30px*3);
    }
}


@media screen and (min-width:1280px) {
	
    #kv .kvdesc{
     background-size: auto;   
     height: 700px;
	}
    
    
    
    .section_spot h2{font-size: 20px;}
    
    .section_blogTop{ height: 325px;}
    .blogger_intro{width: 45%;} 
    
    .store_info.s1{ width: 45%; min-width: 290px; right: -7%;}
    .store_info.s2{ width: 45%; }
    .store_info.s3{ width: 48%; min-width: 300px; left:-6%;}
    .store_info.s4{ right: -10%;}
     .store_info.s2,.store_info.s4{  height: 70%; padding-top: 30%;}
    
    .section_officialInfo .site .content{
        background-position: center 10px;
    } 
  
}




@media (max-device-width: 767px), screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape), screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape){    
	
    #kv .kvdesc{ height: 400px;}
    .footer_vendor{ font-size: 81.25%; }
}


@media (max-width:767px){
	
    .wrap-vendor-list li{ width: 75px;}    
    footer .OR_CI{ display: none;}
    
}



@media screen and (min-width:481px) and (max-width:649px){
    
    .footer_vendor{text-align: left;}
    .footer_vendor *{vertical-align: top;}
    .wrap-vendor-main span,.wrap-vendor-list span{
        display: block; 
    }
    
    .partner ul{ width: 100%;}
    
    .wrap-vendor-main a{ display: block; box-sizing: border-box; padding: 5px 0;}
    .wrap-vendor-main img{ width: 90%; }

}


@media (max-width:600px){
   #header { padding: 3px 0;}
}


@media (max-width:480px){
    
  
    .wrap-vendor-list li{width: 80px;}    
    .footer_vendor{ text-align: left;}
    .wrap-vendor-main,.wrap-vendor-list{ width: 95%; margin: 0px auto;/* display: block;*/}
  
    
}


@media (max-width:375px){ 
    
    .wrap-vendor-main,.partner{ width: 99%;}  
    
}


@media (max-width:320px){
    
    .section_spot h2{font-size: 20px;}
    
    
    
    .partner ul{ width: 78%;}    
    .wrap-vendor-list li{ width: 70px;}
 }