@charset "utf-8";

body{
	margin:0;
	padding: 0;
	font-family: Verdana, Geneva, sans-serif,"微軟正黑體";
	font-size: 16px;
	overflow-y: scroll;
    background-color: #aeecf3;
}
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/*-----------set-top-header-----------*/
/*.setop.navbar-default{
    width: 100%;
    position: fixed;
    z-index: 21;
    top: 0;
}*/




/*-----------GO top-----------*/
.scroll2top:link,
.scroll2top:visited{
	background:url(../images/top.png) no-repeat 0 0;  
	width:80px; 
	height:80px; 
	margin-right: 6%; 
	bottom:0px;
}
.scroll2top:hover{
	background:url(../images/top.png) no-repeat 0 -80px;
	-webkit-animation: icon-up 0.75s ease-out;
	-moz-animation: icon-up 0.75s ease-out;
	-o-animation: icon-up 0.75s ease-out;
	animation: icon-up 0.75s ease-out;
	
}
@keyframes icon-up {
  0%,
  50%,
  100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  25%,
  75% {
    -webkit-transform: translateY(-6px);
    -moz-transform: translateY(-6px);
    -o-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}

/*主視覺_跳動大標*/
.mainViewBox {
    margin: 0 auto;
    padding: 0;
    position: relative;
    width: 100%;
}
.mainViewBox img {
    position: absolute;
    top:0;
    left: 0;
    /*left: calc(50% - 25%);
    max-width: 1009px; 
    width: calc(100% - 45%);*/
    width: 100%;
    border: 0;
    -webkit-animation: bounceIn 1s;
    -moz-animation:bounceIn 1s;
    -o-animation:bounceIn 1s;
    animation: bounceIn 1s;
}
@-webkit-keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -moz-animation:cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -o-animation:cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    -moz-transform: scale3d(.3, .3, .3);
    -o-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    -moz-transform: scale3d(1.1, 1.1, 1.1);
    -o-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    -moz-transform:scale3d(.9, .9, .9); 
    -o-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    -moz-transform: scale3d(1.03, 1.03, 1.03);
    -o-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    -moz-transform: scale3d(.97, .97, .97);
    -o-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1); 
    -moz-transform: scale3d(1, 1, 1);
    -o-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}


/*----------- 標題-框架設定 -----------*/
.wrapper{
	padding-top: 15px;
	padding-bottom: 5%;
    background: url(../images/bg-bottom-lg.jpg) no-repeat 0 bottom; 
    background-size: 100%;
}

/*內容外框*/
.layout{
	margin: 0 auto;
	background-color: rgba(255,255,255,0.9);
	overflow: hidden;
	width: 100%;
	border:5px solid #cef7fc;
	box-shadow: 0px 0px 20px rgba(109,214,226,0.9);
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
    padding: 5% 3%;	
}
.intro{
    font-size: 1.125em;
    color: #000000;
    line-height: 1.8;
}
.layout > a{
    display: block;
    padding: 20px 10px;    
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    -o-border-radius:30px;
    border-radius: 30px;
    text-decoration: none;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all  .5s ease-in-out;
    transition: all  .5s ease-in-out;
}
.layout > a:hover{
    background-color: #e3fcff;
}
.title{
    margin: 15px auto;
}
.txt .date{
    margin: 20px 0;
    font-size: 1.125em;
    color: #000000;
}
.txt img{   
    -webkit-border-radius:15px 50px 15px;
    -moz-border-radius:15px 50px 15px;
    -o-border-radius:15px 50px 15px;
    border-radius:15px 50px 15px;
    border: 3px solid #aeecf3;
}
.txt h2{
    font-size: 1.6em;
    color: #0c89df;
    line-height: 1.5;
}
.txt ol{
    list-style-type: decimal;
    list-style-position: initial;
    margin-left: 30px;
}
.txt ol li{
    font-size: 1.125em;
    line-height: 1.5;
    color: #000000;
}
.txt .price{
    display: block;
    float: right;
    margin-top: 30px;
    margin-right: 20px;
    font-size: 1.125em;
    color: #ff00c8;
    font-family: Verdana, Geneva, sans-serif,"微軟正黑體";
}
.txt .price span{
    font-size: 2.5em;
}
hr.hr-style {
    border-top: 1px dotted #ff00c8;
    text-align: center;
}
hr.hr-style:after {
    font: normal normal normal 14px/1 FontAwesome;
    content: "\f004";
    display: inline-block;
    position: relative;
    top: -10px;
    padding: 0 10px;
    background: #ffffff;
    color: #ff00c8;
    font-size: 18px;
}

/*----------- 商品區 -----------*/

/* c26模組 */
.group-type-ph{
    margin: 0 auto;
    text-align: center;
}
.ph{
    width:33%;
    position:relative; 
    display:inline-block; 
    float:none; 
    overflow:hidden; 
    margin:0 auto;
    padding:0;
    box-sizing: border-box;
     /*
    transition:all .3s ease-out; 
    border:1px solid #b5b0a3;
    border-radius:10px;
    box-shadow: 0 0 0 1px #fff;*/
}


/*.group-type-ph:after{content:""; display:block; clear:both; line-height:0; height:0; visibility:hidden;padding:1% 0;}
.ph.left{margin-left:0px;}*/
.ph-img{ margin:0 auto;display:block;width:100%;}
.ph-img img{width:100%;display:block; border:0;}
.ph a{
    background-color:#ffffff;
    display:block;
    padding:0;
    overflow:hidden;
    box-shadow: 0px 0px 0px 1px #fff;
    border-radius:10px;
    border:1px solid #ccc;
    margin: 25px 7px 0 7px;
    transition:all .3s ease-out;
    box-sizing:border-box;
    text-decoration: none;
}
.ph a:hover{box-shadow:1px 1px 5px 1px rgba(128,128,128,.3);text-decoration: none;}
.ph a img{border:none;display: block;width:100%;}
.ph-title{
    display:block; 
    font-size:1.18em;
    line-height:1.5em; /* max-height:2.2em;*/ 
    overflow:hidden; 
    padding:0 10px; 
    margin:8px auto 1px; 
    color:#0B87DD; 
    font-family:"微軟正黑體";
    font-weight: 700;
    /*height:105px;*/
    box-sizing: border-box;
    text-align: left;
 }
.ph-detail{
    font-size:1em; 
    border-top: 1px dotted #ccc;
    background-color:#ffffff; 
    padding: 10px 10px; 
    color:#333; 
    font-family:"微軟正黑體"; 
    line-height:1.5em; 
    max-height:250px; 
    overflow:hidden; 
    /*height:180px;*/ 
    text-overflow: ellipsis;
    margin:5px 10px 1px; 
    text-align: left;
}
.ph-feature{
    display:block; 
    color:#FF00C8;
    font-size:15px; 
    line-height:1.4em; 
    padding:4px 8px 5px 10px; 
    overflow:hidden;
    font-family:"微軟正黑體";
    max-height:70px; 
    overflow:hidden;
    width: 90%;
    text-align:justify;
    margin-left:10px;
    margin-bottom:70px;
}
.ph .price{
    font-size:20px; 
    float:right;
    font-family:"Impact,微軟正黑體"; 
    color:#FF00C8;
    letter-spacing:0px;
    text-align: center;
    position:absolute;
    padding-top: 20px; 
    margin:auto 0 0 auto;
    right: 18px; 
    bottom:0;
    width:200px;
    height: 86px;
}
.ph .price span{font-size:48px;  font-family:'Impact';}
.ph .price i{ display:none;}
.ph:hover .ph-title{color:#FF00C8;}
/*.ph:hover .ph-detail{background-color:#EEEEEE;}*/
.ph .price span:after{
    content:"起"; 
    display:inline; 
    font-size:15px; 
    position:relative; 
    top:-1px; 
    font-weight: 700; 
    font-family:"微軟正黑體"; 
    margin-left:-9px;
}