/* 共用 */
.title { color:#474747; font-size:2rem; line-height:50px; }
.more { padding:7px 30px; border-radius: 50px; border:1px solid #011866; color: #011866; display: inline-block; background-color: #ffffff; transition: .3s}
.more.sml { padding:7px 45px; }
.more:hover { background-color:#011866; color:#fff;border:1px solid #fff; text-decoration: none; }
.mh3 { height:30px; }
.mh6 { height:60px; }
.mhbnr { height:80px; }

.loading { background-color:#fff; position: fixed; top:0; left:0; width:100%; height:100%; z-index:10000; }
.loading img { width:100px; padding-top:calc(50vh - 50px); }

/* .logo { height:160px; width:160px; left:120px; } */
/* .logo img { padding-top:15px; width:75%; } */

.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:#fff; }
.product .items { margin:40px 0px; }
.product .pd .des { padding:20px; }
.product .pd .des a { text-decoration: none; }
.product .pd .des a:hover > .pdname { color:#919191; }
.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:#919191; font-size:0.875rem; }
.product .pd .des .offer { font-size:1rem; font-weight: bold; }
.product .pd .des .price2 { color:#ababab; font-size:0.875rem; }

.epure { padding:80px 0px;background-color: #011866;background: url("./images/bg_video.png") no-repeat 85% center; background-size:cover; }
.epure .ytcont { padding:0px 100px; }
.epure .ytcont .name { color:#ffde00; font-size:1.5rem; }
.epure .ytcont .content { padding:40px 0px; text-align: justify;color:#fff; }

.contactus { color:#fff; padding:80px 0px; background: url("./images/bg_foot.jpg") no-repeat center center; background-size:cover; }
.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:#fff; border:1px solid #000; }

.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 ( max-width:1199.98px ){
    .epure .ytcont { padding:0px 60px; }
}

@media (max-width:991.98px){

    .epure .ytcont { padding:0px 15px; }
    .epure .ytcont .name { margin-top:60px; }

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

@media (max-width:767.98px){
    .title { font-size:2rem; }
    .mhbnr { height:60px; }
    /* .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 { 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; }
}

@media (min-width:768px){

}

@media (min-width:992px){
    .contactus .linelink { display: flex; max-width:300px; margin:0px auto; }
}

@media (min-width:1200px){

}

@media (min-width:1550px){
    .product .container,
    .epure .container,
    .contactus .container,
    .footer .contrainer { max-width:1520px; }
}

@media (min-width:768px) and (max-width:991.98px){
    .top .logo img { width:45%; }
}