@charset "utf-8";
/* CSS Document */
/** layout_1220__20170427 **/

/** 基本 **/


.content_Area {position:relative; display:block;width:100%;margin:0px auto;}
.content_Area  a{display:block;}

.Area.auto{ padding:0px 0px; }


.Area.auto:nth-of-type(1){ padding:10px 0px 0px 0px;}


/***************1列4品************************************/
.t1p4{padding-bottom:30px; overflow:hidden;    margin: 80px 0px 40px 0px;}

@media screen and (max-width:767px){.t1p4{ margin:2% 0% 2% 0%;}}



.t1p4 .ulOut{width:98.5%;margin:0px auto 0px auto;  overflow:hidden;  padding:70px 0px 0px 0px; border-radius:0px 0px 15px 15px;}

.Area:nth-of-type(odd)   .t1p4 .ulOut{border:2px solid #fefbf8;
    border-radius: 20px;
    background:rgb(68 159 255);
    box-shadow: inset 0px 0px 3px 3px rgb(29 138 198), 0px 0px 0px 3px rgb(34 108 179)}
.Area:nth-of-type(even)  .t1p4 .ulOut{border:2px solid #fefbf8;
    border-radius: 20px;
    background:rgb(107 220 226);
    box-shadow: inset 0px 0px 3px 3px rgb(42 191 199), 0px 0px 0px 3px rgb(35 174 181)}

.t1p4  .listTitle{display:block;width:90%;overflow:hidden;height:118px;overflow:hidden;z-index:1;position:relative;margin:0% auto 0% auto;z-index:3;}
.Area:nth-of-type(odd)   .listTitle{ 
	display: block;width: 490px;height: 100px;overflow: hidden;z-index: 1;position: relative;margin: 0% auto -40px auto;background: url(auto_title.png?t=1760421722585) top center no-repeat; background-size: 100%;}

.Area:nth-of-type(even)   .listTitle{
	 display: block;width: 490px;height: 100px;overflow: hidden;z-index: 1;position: relative;margin: 0% auto -40px auto;background: url(auto_title2.png?t=1760421722585) top center no-repeat; background-size: 100%;}



@media screen and (max-width:767px){
.Area:nth-of-type(odd)   .listTitle{ 
	width: 80%;height: 17vw;margin: 0% auto -12vw auto;}

.Area:nth-of-type(even)   .listTitle{
	 width: 80%;height: 17vw;margin: 0% auto -12vw auto;}


}



.t1p4  .listTitle h2{width:100%; margin:30px auto 0vw auto;text-align: center;height: auto;font-size:36px;display: inline-block;vertical-align: baseline; font-family: "微軟正黑體","Microsoft JhengHei",Arial;letter-spacing:1px;font-weight:bold;}
.Area:nth-of-type(odd)   .t1p4  .listTitle h2{ color:#FFFFFF;text-align: center;font-size: 2.5em;margin-top: 25px; }
.Area:nth-of-type(even)   .t1p4  .listTitle h2{ color:#FFFFFF;text-align: center;font-size: 2.5em; margin-top: 25px;}

@media screen and (max-width:767px){
.Area:nth-of-type(odd)   .t1p4  .listTitle h2{ font-size: 6vw;margin-top:4.5vw;letter-spacing: 0px;}
.Area:nth-of-type(even) .t1p4 .listTitle h2{ font-size: 6vw;margin-top: 4.5vw;letter-spacing: 0px;}
}


.t1p4 .content_Area ul {display: inline-block; width: 90%;flex-wrap: wrap; display: flex;padding: 10px 0 32px 0;position: relative;margin: auto; overflow: hidden;}
.t1p4 .content_Area ul li {width: 24.2%;margin: auto; margin-bottom: 6px;background-color: rgba(255,255,255,1); overflow: hidden; position: relative;border-radius: 0px;border: 1px solid #fff;border-radius: 5px;}
.t1p4 .content_Area ul li a {width:90%;display:block;overflow:hidden; margin: 15px auto 0 auto;text-decoration:none;position:relative;padding-bottom:13px; }
.t1p4 .content_Area ul li a img { display:block; margin:0px;width:100%;height:auto; margin:0px auto 0px auto;}
.t1p4 .content_Area ul li a  .text_box{width:100%;overflow:hidden;}
.t1p4 .content_Area ul li a h3 { margin:0px auto;max-height:45px;width:100%;overflow:hidden; background:#743b13;display:none; }
.Area:nth-of-type(odd)   ul li a h3 {background:#000; }
.Area:nth-of-type(even)  ul li a h3 {background:#000; }
.t1p4 .content_Area ul li a h3 p{display:block;width:93%;margin:0 auto;color:#fff;font-size:20px;line-height:45px;text-align: center;font-family: "微軟正黑體","Microsoft JhengHei",Helvetica;padding:0px; letter-spacing:0px;overflow:hidden;}

.t1p4 .content_Area ul li a h4 {display:block;margin:8px auto 3px auto;height:55px; font:20px "微軟正黑體","Microsoft JhengHei",Helvetica;text-align:center;color:#000;overflow:hidden;padding: 0 5px;line-height:27px; }
.t1p4 .content_Area ul li a  .text_box{width:100%;overflow:hidden;}
.t1p4 .content_Area ul li a  .priceBox { margin:0; padding:0 8px ;color:#d92670;overflow:hidden;height:45px;text-align:center;}
.t1p4 .content_Area ul li a  .priceBox .money { font: bold 20px Century Gothic;text-align:center;margin-right:-5px;}
.t1p4 .content_Area ul li a  .priceBox .Price { font: bold 32px Century Gothic; letter-spacing:-0.5px;text-align:center;}
.t1p4 .content_Area ul li a  .priceBox  del{margin-right:3px;padding:0px;font-size:20px;font-family:Century Gothic,"微軟正黑體"; color:#777;}
.t1p4 .content_Area ul li a  .priceBox  .slogan{font-size:18px;font-weight:bold;font-family:"微軟正黑體";}
.t1p4 .content_Area ul li a  .priceBox  small{font-size:18px; letter-spacing:-1px; margin-left:0px;font-weight:bold;font-family:"微軟正黑體";}

.t1p4 .more{width:120px;height:50px;position:absolute;right:6%;top:64px;z-index:9;text-align:center;color:#fff8c5;padding:0px 15px 0px 10px; line-height:50px; font-size:22px; border-radius:0px 0px 15px 15px; /*border:2px solid #f27474;*/font-weight:bold;}
.t1p4 .more span{display:block;transform:rotate(90deg); -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform:rotate(90deg); float:right; margin-left:-12px; font-size:18px;}
.Area:nth-of-type(odd)   .t1p4 .more{background:#2261b3; }
.Area:nth-of-type(even)   .t1p4 .more{ background:#23aeb5;}

@media screen and (max-width:767px){
	
	
	.Area.auto{ padding:3.5vw 0px;}
	.t1p4{padding-bottom:2.5vw; overflow:hidden;}

	.t1p4 .ulOut{width:94.5%;padding:1.5vw 0px 3vw 0px;margin:0vw auto 0px auto; border-radius:0px 0px 2vw 2vw;}
	

	.t1p4 .content_Area{margin-top:5vw; }
	.t1p4 .content_Area ul {width:94%;margin:5vw auto;padding:0px;padding-top:6vw;}
	.t1p4 .content_Area ul li {width:49%;margin-bottom:1vw;border-radius:1.2vw;margin-left:0.5vw;border:none;}
	.t1p4 .content_Area ul li a {width:92%;margin: 2vw auto 0 auto;padding-bottom:1.5vw; }
	.t1p4 .content_Area ul li a h3 {max-height:7.5vw;}
	.t1p4 .content_Area ul li a h3 p{width:92%;font-size:3.6vw;line-height:8vw;letter-spacing:-0.1px;font-weight:400; }
	.t1p4 .content_Area ul li a h4 {margin:1.5vw auto 0px auto;height:8.8vw; font-size:3.8vw;padding: 0 1vw;line-height:4.8vw;text-align:left; margin-bottom:1.5vw;}
	.t1p4 .content_Area ul li a  .priceBox { margin:0; padding:0 0px ;height:8vw;text-align:left;letter-spacing:-0.3px;}
	.t1p4 .content_Area ul li a  .priceBox .money { font: bold 4vw Century Gothic;text-align:left;margin-right:-1.5px;}
	.t1p4 .content_Area ul li a  .priceBox .Price { font: bold 6vw Century Gothic; letter-spacing:-0.5px;text-align:left;}
	.t1p4 .content_Area ul li a  .priceBox  del{margin-right:0px;font-size:3vw; margin-left:-0.5px;}
	.t1p4 .content_Area ul li a  .priceBox  .slogan{font-size:3.4vw;margin-left:1.5px;}
	.t1p4 .content_Area ul li a  .priceBox  small{font-size:3vw; letter-spacing:-0.2px; margin-left:0px;}
	
	.t1p4  .listTitle{display:block;width:94.8%;overflow:hidden;height:15vw;overflow:hidden;z-index:1;position:relative;margin:0% auto 0 auto;background-size:100%;z-index:3;letter-spacing:0px;}
	.t1p4  .listTitle h2{width:100%; margin:3.9vw auto 0vw auto;font-size:5.6vw;}
	

	.t1p4 .more{width:auto;height:auto;position:absolute;right:-4vw;top:20vw;z-index:9; text-align:center;padding:1.5vw 7vw 1.5vw 5vw; line-height:7vw; font-size:4.5vw; border-radius:50px;}
	.t1p4 .more span{display:block; float:right; margin-left:5px; font-size:3vw;}

}



/***************************************************************************/


.bbbbox{width:100%;overflow:hidden;padding-bottom:0px; padding-top:15px;position:relative; /*background-color: #ffbbd0;*/}
@media screen and (max-width:767px){
	.bbbbox{padding-bottom:0vw; padding-top:2vw;}
	
}
	
.content_Area li:hover{transform:translateY(-8px);}
/**.t1p4 .content_Area ul li:hover a h3 {background:#d61b30; }**/

.content_Area li {
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.content_Area li  a h3{
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
@media screen and (max-width:767px){
	
	.content_Area li:hover{transform:translateY(0px); }
	/**.t1p4 .content_Area ul li:hover a h3 {background:#000; }**/

}