/* .testFont { font-family:"Times New Roman"; font-size:2rem; } */
/* 共用 */
.title { color:#000; font-size:2.1rem; font-weight: bold; padding-bottom:15px; margin-bottom:30px; }
.title .bbimg { background: url("./images/img_h1.png") no-repeat center bottom; padding-bottom:15px; }
a.more { color:#093f9b; padding-bottom:10px; border-bottom:1px solid #54bdf2; text-decoration: none; }
a.more:hover { color:#54bdf2; border-bottom:1px solid #ffe100; }

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

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

/* ====== service ====== */
.service .serall { position:relative; }
.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:40px; }
.service .items > .item { flex:1; display: flex; justify-content: center; align-items: center; color:#fff; position: relative; }
.service .items .more { width:150px; display: flex; align-items: flex-end; justify-content: center; color:#fff; padding-bottom:0px;  border-bottom:none; }
.service .items .more span { padding-bottom:5px; border-bottom:1px solid #fff; }
.service .items .more:hover > span { color:#54bdf2; border-bottom:1px solid #ffe100; }
.service .items .item .name { 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; }

/* ====== 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-color:#f1f1f1; }
.ytembed .bytembed { display:flex; }
.ytembed .bytembed .lyt {  flex:3; }
.ytembed .bytembed .ryt { flex:1; padding-left:45px; text-align:left; color:#031f51; }
.ytembed .bytembed .ryt .name {  font-size:2rem; padding-bottom:35px; }
.ytembed .bytembed .ryt .prod { margin:20px 0px; }

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

/* amination area init */
.kaitek, .service, .news { 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; }
}


/************************** 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:850px; }
    
    .news .container { max-width:950px; }
    .ytembed .container { max-width:950px; }
}



@media (min-width:768px) and (max-width:991.98px){
    .top .topbnr .bnr { height:60vh; }

    /* ====== service ====== */
    .service .items .more { width:100px; }
    .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; }
    .service .items .more { width:100%; justify-content: flex-end; }

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

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

/* @media (max-width:767.98px) and (min-width:576px){
    .mhtop { height:120px; }
    .title { font-size:4rem; padding-bottom:40px; margin-bottom:80px; }
    .title .bbimg { padding-bottom:40px; background-size:100%; }
    .subtitle { font-size:1rem; margin-bottom:60px; }
    .detail { font-size:1.6rem; font-weight: bold; }
    .homeArea { padding: 100px 0px; }
    a.more { font-size:1.5rem; }

    .kaitek .content { font-size:1.5rem; margin-bottom:60px; line-height: 45px; }


    .about { height:300px;  }


    .service .serbg { right:-20px; background-size:90%; }
    .service .items .item .serbtn { width:80px; height:80px; }
    .service .items .item .name { font-size:3rem; }
    .service .items .more { padding:50px 20px; }


    .news .bnews { margin-bottom:60px; }
    .news .bnews .new { padding:30px 20px; }
    .news .bnews .new .date { font-size:1.5rem; }
    .news .bnews .new .content { font-size:1.9rem; }


    .ytembed .bytembed .ryt .name {  font-size:3rem; padding:60px 0px; }
    .ytembed .bytembed .ryt .content { font-size:1.5rem; }
    .ytembed .bytembed .ryt .prod { margin:40px 0px; }


    .bbnr .bbnr1 { padding-bottom:40px; }
} */

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

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

    /* ====== service ====== */
    .service .serbg { right:-10px; background-size:90%; }
    /* .service .items .item .serbtn { width:80px; height:80px; } */
    .service .items .more { padding:15px 10px; }

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