/* CSS Document */

.metropolis{width: 100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.title_box {width: 100%;position:relative;padding:0px;text-align:left;}
.title_box .left_box {width: 100%;float:left;position: relative;display: table;border-bottom: 2px solid #005bac;overflow: hidden;height: 50px;}
.title_box .left_box h1{/*width:790px;*/ color:#005bac; font-size:37px; text-align:left;margin:0px 0px 0px 50px;padding:0px;line-height:50px;letter-spacing: 1px;}
.title_box .left_box img{position:absolute;top: 10px;left: 10px;}
.product_all {width: 100%;display:table;}
.product_box {width: 32.9%;display:table;border:1px solid #dcdcdc;background:#FFF;padding:7px;position:relative;float:left;margin:0 6px 7px 0;}
.product_img {width: 243px; height: 191px;}
.product_img img {width: 243px; height: 191px;}
.product_name {line-height:35px;}
.product_name a {font-size:18px; color:#030303; text-decoration:none;font-weight:700;}
.product_name a:hover {color:#F60; font-weight:700;}
.product_description {font-size:14px; color:#7e7b7b; /*height:40px;*/ line-height:20px;}
.product_price {width:100%; font-size:14px; color:#7e7b7b; text-align:right;}
.product_price span {font-size:38px; color:#fc0707;}
.departure_date {display: none;font-size:14px; color:#7e7b7b;}
.departure_date a {font-size:14px; color:#7e7b7b; text-decoration:none;}
.departure_date a:hover {color:#F60;}
.product_offer {display: none;position:absolute; top:160px; background: rgba(0,0,0,0.6); width:243px; line-height: 30px; color: #FFF; padding: 0 5px;}

.product_box:nth-child(3),
.product_box:nth-child(6),
.product_box:nth-child(9),
.product_box:nth-child(12),
.product_box:nth-child(15),
.product_box:nth-child(18),
.product_box:nth-child(21),
.product_box:nth-child(24),
.product_box:nth-child(27),
.product_box:nth-child(30) {margin:0 0 7px 0;}


/***** 區塊式 *****/
.skin_module .metropolis {width: 100%; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.skin_module .metropolis * {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

/** 標題 **/
.skin_module .metropolis .title_box {width:100%;position:relative;padding:0px; text-align:left;}
.skin_module .metropolis .title_box .left_box {width:100%;float:left;position: relative;display: table;border-bottom: 2px solid #e7141a;overflow: hidden;height: 50px;}

/* 標題文字 */
.skin_module .metropolis .title_box .left_box h1{/*width:790px;*/ color:#e7141a; font-size:37px; text-align:left;margin:0px 0px 0px 50px;padding:0px;line-height:50px;letter-spacing: 1px;}

/* 標題icon */
.skin_module .metropolis .title_box .left_box img{position:absolute;top: 0px;left: 0px;}

/** 全部產品 **/
.skin_module .metropolis .product_all {width:100%; display:table;}

/* 單一產品 */
.skin_module .metropolis .product_box {width: 24%;display: table;border:1px solid #dcdcdc;background:#FFF;padding:5px;position:relative;float:left;margin: 10px 6px;}

/* 圖片 */
.skin_module .metropolis .product_img {width: 100%;height: 191px;overflow: hidden;}
.skin_module .metropolis .product_box:hover .product_img img {-webkit-transform:scale(1.2) rotate(0deg); -ms-transform:scale(1.2) rotate(0deg); transform:scale(1.2) rotate(0deg);}
.skin_module .metropolis .product_img img {width: 100%;height: 191px;-webkit-transition: all 0.6s ease;-moz-transition: all 0.6s ease;-o-transition: all 0.6s ease;-ms-transition: all 0.6s ease;}

/* 產品名稱 */
.skin_module .metropolis .product_name {line-height:28px;margin: 10px; text-align: justify;}
.skin_module .metropolis .product_name a {display: block;font-size: 16px;height: 112px;color:#313131;text-decoration:none;font-weight: normal;-webkit-transition: all 0.6s ease;-moz-transition: all 0.6s ease;-o-transition: all 0.6s ease;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;}
.skin_module .metropolis .product_name a:hover {color:#F60; font-weight:normal; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease;-ms-transition: all 0.6s ease;}

/** 自動上架文字 **/
.skin_module .metropolis .product_offer {opacity: 0.0; position:absolute; top: inherit; bottom: 5px; background: rgba(230,20,25,0.8); width:96.7%; font-size:14px; color:#FFF; height:50px; line-height:25px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease;}
.skin_module .metropolis .product_offer span {background: #e7141a; padding: 5px 10px; margin-right: 5px; color: #FFF; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomright: 10px; border-top-left-radius: 10px; border-bottom-right-radius: 10px;}
.skin_module .metropolis .product_box:hover .product_offer {opacity: 1.0;-webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease;}

/** 價錢 **/
.skin_module .metropolis .product_price {width:100%; font-size:14px; color:#0000FF text-align:right;}
.skin_module .metropolis .product_price span {font-size:28px; color:#fc0707;}

/* 出發日期 */
.skin_module .metropolis .departure_date {display: block;font-size:14px; height: 40px; color:#7e7b7b;}
.skin_module .metropolis .departure_date a {font-size:14px; color:#0000FF; text-decoration:none;}
.skin_module .metropolis .departure_date a:hover {color:#F60;}

/* 優惠方案16字 */
.skin_module .metropolis .product_description {display: block;position:absolute; top:166px; background: rgba(0,0,0,0.6); width:96.7%; line-height: 30px; color: #FFF; padding: 0 5px;}



/***** 列表式 *****/
.skin_list .metropolis {width: 100%; padding: 0 ; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.skin_list .metropolis * {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

/** 標題名稱 **/
.skin_list .metropolis .title_box {width:100%;position:relative; height:50px;margin:0px 0px 15px 0px;padding:0px; text-align:left;}
.skin_list .metropolis .title_box .left_box {width:100%;float:left;position: relative;display: table;border-bottom: 2px solid #e7141a;overflow: hidden;height: 50px;}

/* 標題文字 */
.skin_list .metropolis .title_box .left_box h1{/*width:790px;*/ color:#e7141a; font-size:37px; text-align:left;margin:0px 0px 0px 50px;padding:0px;line-height:50px;letter-spacing: 1px;}

/* 標題icon */
.skin_list .metropolis .title_box .left_box img{position:absolute;top: 0px;left: 0px;}

/** 全部產品 **/
.skin_list .metropolis .product_all {width:100%; display:table; margin: 0 -10px;}

/* 單一產品 */
.skin_list .metropolis .product_box {width:100%; display:table; border: none; border-bottom:1px solid #999; background:#FFF; padding:7px; position:relative; float:none; margin:0 10px 10px;}

/* 圖片 */
.skin_list .metropolis .product_img {width: 243px; height: 191px; display: none;}
.skin_list .metropolis .product_img img {width: 243px; height: 191px;}

/* 產品名稱 */
.skin_list .metropolis .product_name {line-height:30px;}
.skin_list .metropolis .product_name a {font-size:18px; color:#313131; text-decoration:none;font-weight:normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.skin_list .metropolis .product_name a:hover {color:#F60; font-weight:normal;}

/** 自動上架文字 **/
.skin_list .metropolis .product_offer {font-size:14px; right: 100px; color:#e7141a; height:50px; width: 50%; top: 60px; bottom: 0; line-height:25px; background:none; margin: 10px 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.skin_list .metropolis .product_offer span {background: #e7141a; padding: 5px 10px; margin-right: 5px; color: #FFF; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomright: 10px; border-top-left-radius: 10px; border-bottom-right-radius: 10px;}

/** 價錢 **/
.skin_list .metropolis .product_price {width:100%; font-size:14px; color:#7e7b7b; text-align:right;}
.skin_list .metropolis .product_price span {font-size:28px; color:#fc0707;}


/* 出發日期 */
.skin_list .metropolis .departure_date {display: block;font-size:14px; color:#7e7b7b;}
.skin_list .metropolis .departure_date a {font-size:14px; color:#0000FF; text-decoration:none;}
.skin_list .metropolis .departure_date a:hover {color:#F60;}

/* 優惠方案16字 */
.skin_list .metropolis .product_description {
    display: block;
    top: 60px;
    color: red;
    width: 100%;
    line-height: 30px;
    padding: 0 5px;
}
@media screen and (min-width:1200px){
    .skin_module .metropolis .product_box {
    width: calc(25% - 12px);
    display: table;
    border: 1px solid #dcdcdc;
    background: #FFF;
    padding: 5px;
    position: relative;
    float: left;
    border-radius: 3px;
    margin: 10px 6px;
}
}
@media only screen and (min-width:992px) and (max-width: 1199px){
    .skin_module .metropolis .product_box {
    width: 32%;
    display: table;
    border: 1px solid #dcdcdc;
    background: #FFF;
    padding: 5px;
    position: relative;
    float: left;
    margin: 10px 6px;
}
}
@media only screen and (min-width:768px) and (max-width: 991px){
    .skin_module .metropolis .product_box {
    width: 48%;
    display: table;
    border: 1px solid #dcdcdc;
    background: #FFF;
    padding: 5px;
    position: relative;
    float: left;
    margin: 10px 6px;
}
}
@media only screen and (max-width: 767px) {
.skin_list .metropolis .product_offer{
    position: unset;
    width: 100% !important;
    -webkit-line-clamp: 3 !important;
    height: 55px !important;
}
    .skin_module .metropolis .product_box {
    width: 100%;
    display: table;
    border: 1px solid #dcdcdc;
    background: #FFF;
    padding: 5px;
    position: relative;
    float: left;
    margin: 10px 0px;
}
.skin_module .metropolis .product_img {
    width: 100%;
    height: 191px;
    overflow: hidden;
}
.skin_module .metropolis .product_name {
    line-height: 28px;
    text-align: justify;
    margin:0;
}
.skin_module .metropolis .product_img img {
    width: 100%;
    height: auto;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
}

}