/* .testFont { font-family:"Times New Roman"; font-size:2rem; } */
/* 共用 */
.title { color:#bd2148; font-size:2rem; line-height:50px; }
.more { padding:7px 30px; border-radius: 50px; border:1px solid #bd2148; color:#bd2148; display: inline-block; background-color: transparent; }
.more.sml { padding:7px 45px; }
/*.more:hover { background-color:#ffffff; color:#bd2148; text-decoration: none; }*/


.more {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
  /*background: #ffffff;*/
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  border-radius: 99em;

}
.more:before {
  border-radius: 99em;
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /*background: #e1e1e1;*/
  border-radius: 100%;
  -webkit-transform: scale(2);
  transform: scale(2);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.more:hover, .more:focus, .more:active {
  color: white;
  background-color:#bd2148;
  text-decoration: none; 
}
.more:hover:before, .more:focus:before, .more:active:before {
  -webkit-transform: scale(0);
  transform: scale(0);
}


.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:220px; position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); }


/*.logo img { padding-top:15px; width:auto; }*/

.top { position: relative; }
.top .topbnr .bnr { width:100%; height: calc(100vh - 80px); }
/* 圖片放大 */
@keyframes zoomin {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

.top .topmenu { position: absolute; top:0px; left:0px; width:100%; }
/* .top .topmenu .menu { float:right; } */
.top .topmenu .menu .mbtn { float:left; position: absolute; width:80px; height:80px; color:#ffffff; font-size:1.5rem; border:none; }
.top .topmenu .menu .mbtn:hover { background-color: #bd9f77; }
.top .topmenu .menu .envelope_btn { right:160px; top:0px; }
.top .topmenu .menu .search_btn { right:80px; top:0px; }
.top .topmenu .menu .menu_btn { right:0px; top:0px; z-index:10; }

.top .topmenu .menu .mb1 { background-color:rgba(0,0,0,0.2); }
.top .topmenu .menu .mb2 { background-color:#000000; }

.top .topmenu .subject { position: absolute; top:-100vh; height:100vh; width:100%; background-color:#303030; z-index:9; transition: top 0.3s; overflow:hidden; }
.top .topmenu .subject .toplogo { height:80px; padding:10px 0px; background-color:#66493d; text-align: center; }
.top .topmenu .subject .toplogo img { width:auto; }
.top .topmenu .subject .content { max-width:390px; padding:15px; margin:0 auto; }
.top .topmenu .subject .content ul { text-align: left; padding:60px 0px; }
.top .topmenu .subject .content ul .submenu { border-top: 1px solid #262626; padding:20px 0px; }
.top .topmenu .subject .content ul .submenu a { color:#ffffff; font-size:1.2rem; text-decoration: none; }
.top .topmenu .subject .content ul .submenu .name { color:#8a7457; }
.top .topmenu .subject .content ul .submenu .date { color:#ababab; }


.product { padding:80px 0px; background-color:#fefbf3; }
.product .items { margin:40px 0px; }
.product .pd .des { padding:20px; }
.product .pd .des a { text-decoration: none; }
.product .pd .des a:hover > .pdname { color:#e07f13; }
.product .pd .des .pdname { color:#474747; font-size:1.25rem; padding-bottom:10px; }
.product .pd .des .price { white-space: nowrap; font-family:"Helvetica"; }
.product .pd .des .price1 { color:#bd2148; font-size:0.875rem; }
.product .pd .des .offer { font-size:1rem; font-weight: bold; }
.product .pd .des .price2 { color:#ababab; font-size:0.875rem; }

.news { padding:80px 0px; /*background: url("./images/img_over1.png") repeat-x center top,url("./images/img_over2.png") repeat-x center bottom; */}
.news .new { display: flex; margin-top:40px; }
.news .new .newt { flex:5; text-align: left; color:#303030; text-decoration:none; word-break: break-all; }
.news .new .newt:hover { color:#1d2088; }
.news .new .date { flex:3; color:#e07f13; font-size:0.875rem; }
.news .more { margin-top:40px; }

.epure { padding:80px 0px; background-color:#fefbf3; }
.epure .ytcont { padding:0px 100px; }
.epure .ytcont .name { color:#bd2148; font-size:1.75rem; }
.epure .ytcont .content { padding:40px 0px; text-align: justify; }

.contactus { color:#fff; padding:80px 0px; background:#bd2148 url("./images/img_over3.png") repeat-x center bottom; background-size:auto; }
.contactus .name { font-size:1.5rem; margin-bottom:40px; }
.contactus .content { margin-bottom:20px; }
.contactus .more { color:#fff; border:1px solid #fff; }
.contactus .more:hover { color:#bd2148; border:1px solid  transparent; background-color:#ffffff;}
.contactus .more:hover {-webkit-transform: perspective(1px) translateZ(0);transform: perspective(1px) translateZ(0);
-webkit-transition-duration: 0.3s;transition-duration: 0.3s;-webkit-transition-property: color, background-color;transition-property: color, background-color; }

.contactus .linelink img { max-width:110px; }
.contactus .linelink .lineleft { position: relative; }
.contactus .linelink .lineleft .mask { position: absolute; left:0; right:0; top:0; bottom:0; background-color:rgba(255,255,255,0.4); display: none; }
.contactus .linelink .lineleft:hover > .mask { display: block; cursor: pointer; }
.contactus .linecont { padding-left:20px; }
.contactus .linecont > div { margin-bottom:5px; }
.contactus .linecont .lineid { color:#fff; text-decoration: none; }
.contactus .linecont .lineid:hover { color:#1d2088; }

.home_ad_overlay { position:fixed; top:0; left:0; width:100%; height:100vh; z-index:500; background-color:rgba(10, 10, 10, 0.6); }
.home_ad_html { position:absolute; top:100px; left:50%; transform: translateX(-50%); border:0px solid #aaa; z-index:501; color:#fff; }
.home_ad_content { max-width:90vw; position:relative; text-align:center; }
.home_ad_content * { max-width:90vw; }
.home_ad_content > div { margin:0 auto; }
.home_ad_content img { height:auto !important; }
.home_ad_content .wclose { color:#fff; position:absolute; top:-30px; right:0; font-size:21px; text-decoration:none; }

/************************** 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 (min-width:1550px){
    .product .container,
    .news .container,
    .epure .container,
    .contactus .container,
    .footer .contrainer { max-width:1520px; }

}
@media (max-width:1300px){
    /*.logo { left:30px; }*/
}

@media (max-width:1199.98px){
    /*.logo { left:50px; }*/
}

@media (max-width:1199.98px) and (min-width:992px){
    .top .topbnr .bnr { height:80vh; }
    
    .news .new { margin-top:20px; }
    .epure .ytcont { padding:0px 60px; }
}

@media (min-width:992px){
    .contactus .linelink { display: flex; max-width:300px; margin:0px auto; }
}

@media (max-width:991.98px){
    .news .new { display: block; }
    .news .new .newt { flex:none; }
    .news .new .date { flex:none; text-align:left; margin-top:10px; }
    .news .more { margin:40px 0px; }

    .epure .ytcont { padding:0px 15px; }
    .epure .ytcont .name { margin-top:60px; }
}



@media (min-width:768px) and (max-width:991.98px){
    /*.logo { height:120px; width:120px; }*/
    
    .top .topbnr .bnr { height:60vh; }
    .top .logo img { width:45%; }

    .news .new .newt { font-size:1.2rem; }
    .news .new .date { font-size:1rem; }

    .contactus .name { margin-bottom:20px; }

}

@media (max-width:991.98px) and (orientation: landscape){
    /*.top .topbnr .bnr { height: calc(100vh - 80px); }*/
}

@media (min-width:768px){

    .top { padding-top:80px; }
    .ashin .cont { width:80%; margin:0 auto; }
    .ashin .cont .ashtxt { width:50%; float:left; height:200px; }
    .ashin .cont .ashimg { width:50%; float:left; }
    .ashin .cont .ashimg img { margin-top:20px; max-width:400px; }

}

@media (max-width:767.98px){
    .loading img { width:160px; }
    .title { font-size:2rem; }
   
    .top { padding-top:60px; }
    .top .topbnr .bnr { height: calc(100vh - 60px); }
    .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 { margin:10px 0px; }
    .product .pd .des { margin:20px 0px; }
    .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; }

    .epure .ytcont .name { margin-top:40px; }
    .epure .ytcont .content { padding:20px 0px; }

    .contactus .name { margin-bottom:20px; }  
}