/* 共用 */
.title { color:#006098; font-size:2rem; padding-bottom:15px; margin-bottom:30px; }
.title .bbimg { background: url("./images/img_h1.png") no-repeat center bottom; background-size:80px; padding-bottom:15px; }
a.more { color:#3ac9d9; padding-bottom:5px; border-bottom:1px solid #3ac9d9; text-decoration: none; }
a.more:hover { color:#006098; border-bottom:1px solid #006098; }

.homeArea { padding:60px 0px; }

.subtitle { color:#bd9f77; font-size:0.8rem; font-weight:bold; font-family:"Times New Roman"; margin-bottom:40px; padding-left:4px; }
.detail { color:#8a7457; float:right; padding:0px 5px 10px 5px; border-bottom:2px solid #8a7457; }
.detail:hover { text-decoration: none; color:#bd9f77; border-bottom:2px solid #bd9f77; }
.tmenu { text-align:left; position: relative; }
.tmenu .detail { position: absolute; right:10px; bottom:25px; }


.loading { background-color:rgba(255,255,255,1); position: fixed; top:0; left:0; width:100%; height:100%; z-index:10000; }
.loading img { width:auto; padding-top:30vh; }

.top { position: relative; }
.top .topbnr .bnr { width:100%; height:100vh; }
.mhtop { height:148px; }

/* ====== kaitek ====== */
.kaitek .content { margin-bottom:40px; color:#474747; text-align:justify; line-height: 30px; }

/* ====== about ====== */
.about { background: url('./images/img_about.jpg') no-repeat center center; background-size:cover;  height:380px;  }

/* ====== service ====== */
.service .serall { position:relative; padding-bottom:40px; }
.service .serbg { position: absolute; top:0; left:0; bottom:0; right:0; background: url("./images/bg_product.png") no-repeat right bottom; background-size: auto calc(100% - 40px); z-index:-1; }
.service .items { width:calc(100%); float:left; display: flex; padding-bottom:20px; }
.service .items > .item { flex:1; display: flex; justify-content: center; align-items: center; color:#fff; position: relative; }
/* .service .items > .item:first-of-type { margin-left:0px; } */
/* .service .items > .item:last-of-type { margin-right:0px; } */

.service .items .item .name { color:#fff; position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:1.5rem; z-index:1; }
.service .items .item .mask { position: absolute; top:0; left:0; width:100%; height:100%; background-color: rgba(0,0,0,0.4); }
.service .items .item .serbtn { position: absolute; left:50%; transform: translate(-50%); bottom:40px; width:42px; height:42px; background: url("./images/btn_go.png") no-repeat center center; background-size:cover; z-index:1; }
.service .items .item:hover .mask { background-color: rgba(0,0,0,0.6); }
.service .items .item:hover .serbtn { background: url("./images/btn_go_o.png") no-repeat center center; background-size:cover; }
.service .more { float:right; margin-right:40px; }

/* ====== news ====== */
.news .bnews { margin-bottom:40px; }
.news .bnews .new { display: flex; padding:10px 20px; text-align:left; }
.news .bnews .new .date { width:190px; }
.news .bnews .new .content { color:#093f9b; text-decoration: none; }
.news .bnews .new .content:hover { color:#54bdf2; }
.news .bnews .new.odd { background-color:#f1f1f1; }

/* ====== ytembed ====== */
.ytembed { background:url("./images/bg_video.gif")no-repeat left top; background-color:#23b0c4; }
.ytembed .bytembed { display:flex; }
.ytembed .bytembed .lyt { flex:2; max-width:640px; }
.ytembed .bytembed .ryt { flex:1; padding-left:45px; text-align:justify; color:#fff; }
.ytembed .bytembed .ryt .name {  font-size:2rem; padding-bottom:35px; }
.ytembed .bytembed .ryt .prod { margin:20px 0px; }

/* ====== bbnr ====== */
.bbnr { background: url("./images/bg_bbnr.png") no-repeat center center; background-size:cover; }

/* amination area init */
.kaitek, .service, .news { transform:translateY(100px); opacity: 0; }
.upslideAni { animation:upslide .8s; transform:translateY(0px); opacity: 1; }
/* animation */
@keyframes upslide {
    0% { transform:translateY(100px); opacity: 0; }
    100% { transform: translateY(0px); opacity: 1; }
}


/************************** 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%;
}


@media (max-width:1198.98px){
    .mhtop { height:88px; }
}

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

@media (min-width:992px){
    .kaitek .content { max-width:920px; }
}



@media (min-width:768px) and (max-width:991.98px){

    /* ====== service ====== */
    .service .items .item .name { font-size:1.2rem; }
    .service .items .item .serbtn { bottom:20px; }
    
    /* ====== ytembed ====== */
    /* .ytembed .bytembed .lyt { max-width:480px; height:240px; } */
    .ytembed .bytembed .ryt { padding-left:25px; }
}

@media (max-width:991.98px) and (orientation: landscape){
    .top .topbnr .bnr { height:100vh; }
}

@media (max-width:767.98px){
    .detail { padding-bottom:5px; }

    .top .topmenu .menu .mb1 { display:none; }

    /* ====== service ====== */
    .service .items { display: block; }
    .service .items .item .name { font-size:1.5rem; }

    /* ====== news ====== */
    .news .bnews .new { display: block; }

    /* ====== ytembed ====== */
    .ytembed .bytembed { display: block; }
    .ytembed .bytembed .ryt { padding-left:0px; width:100%; }
}


@media (max-width:767.98px){
    .mhtop { height:60px; }
    .title { font-size:2rem; }

    /* ====== about ====== */
    .about { height:180px;  }

    /* ====== service ====== */
    .service .serbg { right:-10px; background-size:90%; }

    /* ====== news ====== */
    .news .bnews .new { padding:20px; }

    /* ====== ytembed ====== */
    /* .ytembed .bytembed .lyt { height:240px; } */
    .ytembed .bytembed .ryt .name { padding:30px 0px; }
    .ytembed .bytembed .ryt .prod { margin:20px 0px; }
    
    /* ====== bbnr ====== */
    .bbnr .bbnr1 { padding-bottom:20px; }
}