/* .testFont { font-family:"Times New Roman"; font-size:2rem; } */
/* 共用 */
/*.title { color:#1d2088; font-size:2rem; line-height:50px; }*/

.title {

    font-size: 2rem;
    line-height: 50px;
    text-align: center;
    font-weight: 300;
    color: #222;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    grid-template-rows: 27px 0;
    grid-gap: 20px;
    align-items: center;
    width: 25%;
    margin: 0 auto;
}

.title:after, .title:before {
    content: " ";
    display: block;
    border-bottom: 2px solid #c50000;
    border-top: 1px solid #c50000;
    height: 7px;
    background-color: #f8f8f8;
}

.product .col-12.col-md-6.col-lg-3.pd:hover {
    box-shadow: 0 .3125rem .9375rem 0 rgba(0, 0, 0, .07);
}

.product .more {
    padding:7px 30px; border-radius: 5px; border:1px solid #c50000 ; color:#c50000 ; display: inline-block; background-color: transparent;
}

.product .more {
    transition: box-shadow 300ms ease-in-out, color 300ms ease-out;
}

.product .more:hover {
    box-shadow: 0 0 40px 40px #c50000 inset;
    text-decoration: none;color:#ffffff ;
}


.contactus .more.sml {
    padding:7px 30px; border-radius: 5px; border:1px solid #ffffff ; color:#ffffff ; display: inline-block; background-color: transparent;
}

.contactus .more.sml {
    transition: box-shadow 300ms ease-in-out, color 300ms ease-out;
}

.contactus .more.sml:hover {
    box-shadow: 0 0 40px 40px #c50000 inset;
    text-decoration: none;color:#c50000 ;
border:1px solid #c50000 ;color:#ffffff ; 
}












/*.more { padding:7px 30px; border-radius: 5px; border:1px solid #1d2088; color:#1d2088; display: inline-block; background-color: transparent; }*/
.more.sml { padding:7px 45px; }
/*.more:hover { background-color:#1d2088; color:#fdd000; text-decoration: none; }*/
.mh3 { height:30px; }
.mh6 { height:60px; }

.loading { background-color:#fdd000; position: fixed; top:0; left:0; width:100%; height:100%; z-index:10000; }
.loading img { width:auto; padding-top:30vh; }

.logo { height:160px; width:160px; left:200px; }
.logo img { padding-top:20px; width:15rem; }

.top { position: relative; }
.top .topbnr .bnr { width:100%; height:100vh; }
/* 圖片放大 */
@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:#ffffff; }
.product .items { margin:40px 0px; }
.product .pd .des { padding:20px; }
.product .pd .des a { text-decoration: none; }
.product .pd .des a:hover > .pdname { color:#472e07; }

.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:#a36a11; 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:#1b8bba; font-size:0.875rem; }
.news .more { margin-top:40px; }

.epure { padding:80px 0px; background-color:#f3fafe; }
.epure .ytcont { padding:0px 100px; }
.epure .ytcont .name { color:#1d2088; font-size:1.75rem; }
.epure .ytcont .content { padding:40px 0px; text-align: justify; }

.contactus { color:#fff; padding:80px 0px; background: url("./images/img_over3.png") repeat-x center bottom,url("./images/bg_foot.jpg") no-repeat center center; background-size:auto,cover; }
.contactus .name { font-size:1.5rem; margin-bottom:40px; }
.contactus .content { margin-bottom:20px; }


.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; }

/************************** 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:1199.98px){
    .logo { left:50px; }
}

@media (max-width:1199.98px) and (min-width:992px){
    .top .topbnr .bnr { height:50vh; }
    
    .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; }
    .logo img { padding-top:15px; width:auto; height:80px; }
    .top .topbnr .bnr { height:50vh; }
    .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:100vh; }
}

@media (min-width:768px){

    .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){
    .title { 
    font-size: 2rem;
    line-height: 50px;
    text-align: center;
    font-weight: 300;
    color: #222;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    grid-template-rows: 27px 0;
    grid-gap: 20px;
    align-items: center;
    width: 85%;
    margin: 0 auto; }

.title:after, .product .title:before {
    content: " ";
    display: block;
    border-bottom: 2px solid #c50000;
    border-top: 1px solid #c50000;
    height: 7px;
    background-color: #f8f8f8;
}

    .logo { left:15px; padding:15px; height:100px; width:100px; }
    .logo img { height:auto; padding-top:0px;width: 12.5rem; }

    .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; }  
}