/* .testFont { font-family:"Times New Roman"; font-size:2rem; } */
/* 共用 */
.title { color:#003966; font-size:2rem; padding-bottom: 5px; margin-bottom:40px; line-height:50px; border-bottom:1px solid #5cb8f1; display: inline-block; }
.mh3 { height:30px; }
.mh6 { height:60px; }

.loading { background-color:#fff; position: fixed; top:0; left:0; width:100%; height:100%; z-index:10000; }
.loading img { width:auto; padding-top:30vh; }
/* 圖片淡入淡出 */
/* @keyframes showin {
    0% { opacity: 0; }
    100% { opacity: 1; }
} */

/* @keyframes showout {
    0% { opacity: 1; }
    100% { opacity: 0; }
} */

.top { position: relative; }
.top .topbnr .bnr { width:100%; height:calc(100vh - 80px); }
.topnb { top:calc(100vh - 80px); }
.topnb.ontop { top:0vh; }
/* .logo { position: absolute; left:40px; top:48px; z-index:2; } */
/* .logo img { width:auto; } */
.product { padding:80px 0px 40px; }
.product { background: url("./images/bg_op.jpg") no-repeat top center; background-color:#f1f1f1; }
.product .pd { margin-bottom:40px; }
.product .pd .area { height:100%; background-color:#fff; }
.product .pd .area:hover { background-color:#f2b90c; }
.product .pd .des { padding:20px; }
.product .pd .des .pdname { color:#003966; font-size:1.25rem; padding-bottom:10px; }
/* .product .pd .des .price { white-space: nowrap; font-family:"Helvetica"; }
.product .pd .des .price1 { color:#fca311; font-size:0.875rem; }
.product .pd .des .offer { font-size:1rem; font-weight: bold; }
.product .pd .des .price2 { color:#919191; font-size:0.875rem; }*/
/* .product .pdbd { border-bottom:1px solid #e2e2e2; margin-bottom: 10px; margin-top: 10px; }  */

/* .mingyung { padding-top:30px; }
.mingyung .ytcont { padding:0px 30px; }
.mingyung .ytcont .name { color:#14213d; font-size:1.5rem; }
.mingyung .ytcont .content { color:#474747; padding:40px 0px; text-align: justify; font-size:1.125rem; } */

.linkBnr { display:flex; flex-wrap: wrap; }
.linkBnr > div { flex:0 0 25%; }
.linkBnr .txt { display: flex; justify-content: center; align-items:center; color:#fff; font-size:2rem; }
.linkBnr .txt:hover { background-color:rgba(0,0,0,0.7); }

.news { padding:80px 0px; }
.news .new { font-size:1.125rem; border-bottom:1px dotted #e2e2e2; padding:20px 0px; display: flex; justify-content: space-between; }
/* .news .new.first { padding-top:0px; } */
.news .new a { color:#003966; text-decoration: none; }
.news .new a:hover { color:#f2b90c; }
.news .new .date { color:#4b8ca6; font-size:0.875rem; flex:0 0 100px; }
.news .more a { text-decoration: none; color:#4b8ca6; display: inline-block; margin-top:40px; padding:7px 30px; border:1px solid #4b8ca6; border-radius: 3px; }
.news .more a:hover { border:1px solid #f2b90c; background-color:#f2b90c; color:#003966; }

.info { padding:60px 0px; background-color:#f1f1f1; }
.info .tit { font-size:1.25rem; color:#003966; display: inline-block; border-bottom:1px solid #0597f2; padding-bottom:5px; margin-bottom:20px; }
.info .content { color:#474747; }
.info .content a { color:#474747; text-decoration: none; }
.info .content .link:hover { color:#fdd000; }
.info .opt .icon { color:#17607d; padding-bottom:5px; }
.info .opt .content { padding-bottom:5px; }
.info .opt .content .gm a { font-size:0.7rem; color:#474747; border-radius: 5px; border:1px solid #474747; padding:0px 6px; display: inline-block; text-decoration: none; }
.info .opt .content .gm:hover a { border:1px solid #f2b90c; background-color:#f2b90c; color:#003966; }
.info .qr .content { padding-bottom:10px; font-family: "微軟正黑體"; font-size:0.875rem; }
.info .qr img { width:auto; }

/************************** video rwd **************************/
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 0px;
	height: 0;
	overflow: hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position: absolute;
	top: 0;left: 0;
	width: 100%;
	height: 100%;
}

.video-container-4by3 {
	position: relative;
	padding-bottom: 75%;
	padding-top: 0px;
	height: 0;
	overflow: hidden;
}

.video-container-4by3 iframe, .video-container object, .video-container embed {
	position: absolute;
	top: 0;left: 0;
	width: 100%;
	height: 100%;
}

/* amination area init */
/* .cont, .prod,.btmbnr, .newcont { transform:translateY(100px); opacity: 0; } */
.upslideAni { animation:upslide 2s; transform:translateY(0px); opacity: 1; }
/* animation */
@keyframes upslide {
    0% { transform:translateY(100px); opacity: 0; }
    100% { transform: translateY(0px); opacity: 1; }
}


@media (max-width:1199.98px){
    .topnb { top:0px; }
    .top .topbnr .bnr { height:100vh; }
}

@media (max-width:1199.98px) and (min-width:992px){
    /* .top .topbnr .bnr { height:60vh; } */

}

@media (min-width:992px){
    
}

@media (max-width:991.98px){
    .linkBnr > div { flex:0 0 50%; }

    /* .mingyung .ytcont { padding:0px 15px; }
    .mingyung .ytcont .name { margin-top:40px; }
    .mingyung .ytcont .content { padding:20px 0px; } */

    /* .product .pd .des .price { height:45px; } */

    .info .qr { padding-top:40px; }
}



@media (min-width:768px) and (max-width:991.98px){
    
    /* .top .topbnr .bnr { height:60vh; } */
    /* .logo { height:120px; width:120px; }
    .logo img { padding-top:15px; width:auto; height:80px; }
    
    .top .logo img { width:45%; }

    .news .new .newt { font-size:1.2rem; }
    .news .new .date { font-size:1rem; }

    .contactus .name { margin-bottom:20px; } */

}

/* 手機橫寬991.98內 banner全版 */
/* @media (max-width:991.98px) and (orientation: landscape){
    .top .topbnr .bnr { height:100vh; }
} */


@media (min-width:768px){

}

@media (max-width:767.98px){
    
    .linkBnr > div { flex:0 0 100%; }

    /* .logo { left:30px; } */
    /* .flower { background-size:cover; } */
    /* .flower .content { padding-bottom:80px; } */
    
    .product .pd { margin-bottom:20px; }
    .news .new { display: block; }
    .info .contact { padding-top:40px; }
}

/* @media (max-width:767.98px) and (min-width:576px){
    .product .pd { margin:40px 0px; }
} */

@media (max-width:767.98px){
    .titbg { height:140px; }
    .titbg .tit { padding-top:40px; font-size:2rem; }

    .holiday,.flower { padding:60px 0px; }
    .holiday .row div:first-child { margin-bottom:20px; }
    /* .title { font-size:2rem; }
    .logo { left:15px; padding:15px; height:100px; width:100px; }
    .logo img { height:50px; padding-top:0px; }

    .top .topmenu .menu .mb2 { width:60px; height:60px; font-size:1rem; }
    .top .topmenu .subject .toplogo { height:60px; padding:15px 0px; }
    .top .topmenu .subject .toplogo img { height:30px; } */

    .product .pd .des .pdname { font-size:1.2rem; }
    .product .pd .des .price1 { font-size:1rem; }
    .product .pd .des .offer { font-size:1.2rem; }
    .product .pd .des .price2 { font-size:0.9rem; }
}

/*************************************** 
                jcarousel
***************************************/

/** Carousel Controls **/

.control-prev{
    left: 50px;
    /* background: url("../../images/arr_left.png") no-repeat center center; */
}

.control-next{
    right: 50px;
    /* background: url("../../images/arr_right.png") no-repeat center center; */
}

.jcarousel-control-prev,
.jcarousel-control-next {
    top: 50%;
    /* bottom:0px; */
    
    margin-top: -15px;
    /* width: 80px; */
    /* height: 80px; */
    padding:24px 0px;
    font-size:2.3rem;
    color: #003966;
    /* opacity: 0.4; */
}
.jcarousel-control-prev:hover,
.jcarousel-control-next:hover {
    /* color: #fff; */
    color: #f2b90c;
}

.controlbd {
    position: absolute;
    left:79px;
    top:30px;
    height:20px;
    width:1px;
    background-color:#e2e2e2;
}


.slide-btn{
    position: absolute;
    bottom: 0vh;
    left:50%;
    /* background:url("../../images/img_down.png") no-repeat center center; */
    /* background-size: contain; */
    width: 60px;
    height: 60px;
    color: #fff;
    font-size:0.9rem;
    transform:translate(-50%,0);
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    /* animation: shadow-pulse 1s infinite; */
}

.slide-btn:hover{
    cursor: pointer;
    color:#fff;
    text-decoration: none;
}

.slide-btn .slidebd {
    position: relative; 
    height:40px;
    width:2px;
    background-color: rgba(255,255,255,0.2);
    margin-left:29px;
    overflow: hidden;
}

.slide-btn .slidebd .bar {
    position: absolute;
    top:0px;
    height:20px;
    width:2px;
    background-color:#fff;
    animation: jump 2s infinite;
}

@keyframes jump {
    0% { top:-20px; }
    100% { top:40px; }
}

@keyframes shadow-pulse{
    0% { box-shadow: 0 0 0 0px rgba(255,255,255,0.2); }
    100% { box-shadow: 0 0 00 35px rgba(255,255,255,0); }
}




/** Carousel Pagination **/

.jcarousel-pagination {
    /* bottom: -60px; */
    /* left: 50%; */
    position: absolute;
    bottom: 3vh;
    right: 25px;
    height:30px;
    /* -webkit-transform: translate(-50%, 0); */
    /* -ms-transform: translate(-50%, 0); */
    /* transform: translate(-50%, 0); */
    margin: 0;
}

.pagin a {
    padding : 10px 0px;
    text-indent: -9999px;
}

.pagin a span {
    text-decoration: none;
    display: inline-block;
    /* font-size: 11px; */
    height: 12px;
    width: 12px;
    line-height: 20px;
    background: #003966;
    /* border-bottom: 2px solid #fff; */
    /* color: #fff; */
    border-radius: 25px;
    margin:0px 10px;
    

    /* margin:0px 4px; */

    /* -webkit-box-shadow: 0 0 2px #4E443C; */
    /* -moz-box-shadow: 0 0 2px #4E443C; */
    /* box-shadow: 0 0 2px #4E443C; */
}

.pagin a:hover span { 
    /* background:#bd9f77;  */
    /* border-bottom: 2px solid #bd9f77; */
}

.jcarousel-pagination a span.active {
    background: transparent;
    border:1px solid #003966;
    /* border-bottom: 2px solid #66493d; */
    /* height: 6px; */
    /* color: #fff; */
    /* opacity: 1; */

    /* -webkit-box-shadow: 0 0 2px #F0EFE7; */
    /* -moz-box-shadow: 0 0 2px #F0EFE7; */
    /* box-shadow: 0 0 2px #F0EFE7; */
}

@media (min-width:768px) and (max-width:991.98px){
    /* .slide-btn { bottom: 3vh; } */
    .jcarousel-pagination { bottom: 3vh; }
}

@media (max-width:767.98px){
    .control-prev { left: 20px; }
    .control-next { right: 20px; }
}

@media (max-width:767.98px){
    .controlbd { left:59px; height:20px; top:20px; }
    .jcarousel-pagination{ right:40px; }
    .slide-btn { width:60px; height:60px; }
}