@charset "utf-8";
/*banner*/
.banner{ width: 100%; overflow: hidden; position: relative; margin-top: 93px; }
.banner .imgbox{ position:relative; z-index:1; }
.banner .imgbox img{ width:100%; }
.banner .btns{ position:absolute; z-index:2; bottom:10px; width:100%; left:0px; text-align:center; }
.banner .btns .btn{ display:inline-block; vertical-align:middle; margin:0 8px; width:12px; height:12px; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; background:rgba(255,255,255,0.5); }
.banner .btns .btn:hover,.banner .btns .btn.hold{ background:rgba(255,255,255,1); }


/*快捷*/
.inmenu{ background:#fff; padding:30px 0; text-align:center; }
.inmenu .gs{ display:inline-block; vertical-align:middle; }
.inmenu .grids{ display:inline-block; vertical-align:middle; text-decoration:none; padding:0 38px; }
.inmenu .grids .imgs{ width:64px; height:62px; background-position:center; background-repeat:no-repeat; background-size:64px; margin:auto; }
.inmenu .grids .imgs_01{ background-image:url(../image/index/c_btn01.png); }
.inmenu .grids .imgs_02{ background-image:url(../image/index/c_btn02.png); }
.inmenu .grids .imgs_03{ background-image:url(../image/index/c_btn03.png); }
.inmenu .grids .imgs_04{ background-image:url(../image/index/c_btn04.png); }
.inmenu .grids .imgs_05{ background-image:url(../image/index/c_btn05.png); }
.inmenu .grids .texts{ font-size:1.063rem; color:#333; position:relative; }



/*大標/小標*/
.intitle{ font-size:2.188rem; color:#333; font-weight:500; text-align:center; }
.intitle.col_w{ color:#fff; }
.intxts{ font-size:1.063rem; color:#333; font-weight:100; text-align:center; }
.intxts.col_w{ color:#fff; }

.classbtn{ text-align:center; padding:10px 0 0 0; }
.classbtn .btns{ display:inline-block; vertical-align:middle; border:1px solid #0e3f8f; color:#0e3f8f; padding:0px 15px; font-size:1.063rem; font-weight:300; margin:0 6px; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; }
.classbtn.col_w .btns{ color:#fff; border:1px solid #fff; }

/*動態*/
.dynamic{ background:#f5f5f5; background-image:url(../image/index/shadow.png); background-repeat:no-repeat; background-position:top center; padding:50px 15px 65px 15px; }
.dynamic .dylist{ max-width:1240px; padding:25px 0 0 0; margin:0 auto; font-size:0rem; display:flex; }
.dynamic .dylist .fgrids{ display:block; width:31%; background:#0e3f8f; position:relative; padding:10px; }
.dynamic .dylist .fgrids .shadow{ background-image:url(../image/index/shadow_a.png); width:110px; height:117px; position:absolute; bottom:-12px; right:-12px; z-index:100; }
.dynamic .dylist .fgrids .imgs{ width:100%; height:0; padding-bottom:84%; position:relative; overflow:hidden; }
.dynamic .dylist .fgrids .imgs img{ max-width:100%; position:absolute; top:0; left:0; bottom:0; right:0; margin:auto; }
.dynamic .dylist .fgrids .ftitle{ color:#fff; font-size:1.563rem; text-decoration:none; font-weight:500; width:100%; margin-top:5px; display:block; }
.dynamic .dylist .fgrids .ftitle:focus{ background: #6bdeff; outline: 2px solid #6bdeff;}
.dynamic .dylist .fgrids .ftxt{ color:#fff; font-size:0.813rem; }
.dynamic .dylist .fgrids .mores{ padding:10px 0 0 0; display:block; }
.dynamic .dylist .fgrids .mores:focus{ background: #6bdeff; outline: 2px solid #6bdeff;}
.dynamic .dylist .fgrids .mores .icon{ display:inline-block; vertical-align:middle; background-image:url(../image/index/arrow_w.png); background-size:100%; width:14px; height:14px; }
.dynamic .dylist .fgrids .mores .tmore{ display:inline-block; vertical-align: middle; font-size:0.813rem; color:#fff; margin:0 0 0 5px; line-height:100%; }


.dynamic .dylist .grids{ display:block; vertical-align:top; width:23%; padding:5px; position:relative; background:#fff; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.dynamic .dylist .grids .imgs{ width:100%; font-size:0rem; margin-bottom:5px; }
.dynamic .dylist .grids .imgs img{ width:100%; }
.dynamic .dylist .grids .titles{ width:100%; height:52px; overflow:hidden; font-size:1.063rem; color:#333; font-weight:500; padding:0 10px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; display:block; }
.dynamic .dylist .grids .txts{ width:100%; height:105px; overflow:hidden; font-size:0.813rem; color:#333; font-weight:100; padding:0 10px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;  position:relative; z-index:101; line-height: 26px; }
.dynamic .dylist .grids .date{ text-align:left; padding:5px 10px; font-size:0rem; }
.dynamic .dylist .grids .date .datetxt{ display:inline-block; vertical-align:middle; background:#ccc; padding:0px 4px; color:#333; font-size:0.75rem; line-height:normal; }
.dynamic .dylist .grids .mores{ padding:3px 10px 8px 10px; display:block; }
.dynamic .dylist .grids .mores .icon{ display:inline-block; vertical-align:middle; background-image:url(../image/index/arrow.png); background-size:100%; width:14px; height:14px; }
.dynamic .dylist .grids .mores .tmore{ display:inline-block; vertical-align: middle; font-size:0.813rem; color:#000; margin:0 0 0 5px; line-height:100%; }
.dynamic .dylist .grids .shadow{ background-image:url(../image/index/shadow_a.png); width:110px; height:117px; position:absolute; bottom:-12px; right:-12px; z-index:100; }

/*產品*/
.porbox{ background:#fff; padding:30px 0; text-align:center; }
.porbox .dylist{ max-width:1290px; padding:25px 0 0 0; margin:0 auto; font-size:0rem; }
.porbox .dylist .grids{ display:inline-block; vertical-align:top; width:33%; padding:0 25px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.porbox .dylist .grids .titles{ display:block; font-size:1.063rem; color:#333; font-weight:500; text-align:left; margin:0 0 10px 0; }
.porbox .dylist .grids .datebox{ display:block; margin:0 0 10px 0; text-align:left; }
.porbox .dylist .grids .datebox .s1{ display:inline-block; vertical-align:middle; background:#0e3f8f; text-decoration:none; font-size:0.813rem; color:#fff; font-weight:500; padding:0 5px; }
.porbox .dylist .grids .datebox .s2{ display:inline-block; vertical-align:middle; color:#0e3f8f; font-size:0.813rem; font-weight:bold; margin:0 0 0 5px; }
.porbox .dylist .grids .txts{ font-size:0.813rem; color:#333; font-weight:100; text-align:left; line-height: 26px; }
.porbox .dylist .grids .mores{ padding:10px 0 0 0; display:block; text-align:left; }
.porbox .dylist .grids .mores .icon{ display:inline-block; vertical-align:middle; background-image:url(../image/index/arrow.png); background-size:100%; width:14px; height:14px; }
.porbox .dylist .grids .mores .tmore{ display:inline-block; vertical-align: middle; font-size:0.813rem; color:#000; margin:0 0 0 5px; line-height:100%; }
.porbox .dylist .grids .imgs{ width:100%; text-align:center; margin:15px 0 0 0; }
.porbox .dylist .grids .imgs img{ max-width:100%; display: inline-block; }

.porbox .dylong{ border-top:1px solid #ddd; padding:35px 0 30px 0; margin:60px 0 0 0; overflow:hidden; }
.porbox .dylong .wh{ width:100%; padding: 40px; box-sizing: border-box; }
.porbox .dylong .wh .grids{ display:inline-block; width:340px; vertical-align:top; }
.porbox .dylong .wh .grids .qnber{ text-align:center; font-size:9.375rem; color:#e6ebf4; position:relative; z-index:1; font-weight:900; }
.porbox .dylong .wh .grids .bombox{ position:relative; z-index:2; margin-top:-100px; }
.porbox .dylong .wh .grids .bombox .texts{ font-size:1.5rem; font-weight:500; margin:0 0 10px 0; }
.porbox .dylong .wh .grids .bombox .btns{ display:inline-block; background:#f8f8f8; color:#555; font-size:1.5rem; padding:0 15px; line-height:36px; border: 1px solid #ccc; }

/*案例*/
.casebox{ padding:60px 0 65px 0; text-align:center; background-image: url(../image/index/casebg.jpg); background-attachment:fixed; }
.casebox .dylist{ max-width:996px; padding:25px 0 0 0; margin:0 auto; }
.casebox .dylist .grids{ background:rgba(255,255,255,0.9); display:table; width:100%; margin:0 0 5px 0; }
.casebox .dylist .grids .gimg{ display:table-cell; vertical-align:top; padding:15px 25px; width:80px; }
.casebox .dylist .grids .gimg .pic{ width:80px; height:78px; background-position:center; background-repeat:no-repeat; background-size:80px; }
.casebox .dylist .grids .gimg .pic02{ background-image:url(../image/index/c_btn02.png); }
.casebox .dylist .grids .gimg .pic03{ background-image:url(../image/index/c_btn03.png); }
.casebox .dylist .grids .gimg .pic04{ background-image:url(../image/index/c_btn04.png); }

.casebox .dylist .grids .gtxt{ display:table-cell; vertical-align:top; padding:15px 0; text-align:left; }
.casebox .dylist .grids .gtxt .gtitle{ font-size:1.563rem; color:#000; margin:0 0 5px 0; font-weight:500; }
.casebox .dylist .grids .gtxt .gtxts{ font-size:0rem; }
.casebox .dylist .grids .gtxt .gtxts a{ display:inline-block; vertical-align:middle; margin:5px 10px 5px 0; border:1px solid #777; padding:0 10px; line-height:26px; font-size:1rem; color:#000; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; }

/*影音專區*/
.videobox{ font-size:0rem; padding:10px 0; }
.videobox .grids{ display:inline-block; vertical-align:top; width:50%; padding:0 13px 0 0; }
.videobox .grids:nth-child(even){ padding:0 0 0 13px; }
.videobox .grids .vbox{ display:block; width:100%; height:0; padding-bottom:56%; position:relative; overflow:hidden; }
.videobox .grids .vbox iframe{ width:100%; height:100%; position:absolute; left:0; top:0; }
.videobox .grids .vbox img{ position:absolute; left:0; top:0; bottom:0; right:0; margin:auto; width:100%; }
.videobox .grids .vtitle{ display:block; font-size:1.875rem; color:#000; text-align:center; padding:15px 0 0 0; }


/*訂閱電子報*/
.joinbox{ background:#f5f5f5; padding:60px 0 95px 0; text-align:center;  }
.joinbox .jinblock{ padding:15px 15px 0 15px; }
.joinbox .jinText{ display:inline-block; vertical-align:middle; font-size:1.063rem; color:#444; padding:10px 0; }
.joinbox .jinsub{ display:inline-block; vertical-align:middle; }
.joinbox .jinsub .jinput{ display:inline-block; vertical-align:middle; background:#fff; border:1px solid #777; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; line-height:35px; height:35px; padding:0 10px; font-size:1rem; color:#333; margin:5px 0; }
.joinbox .jinsub .jbtn{ display:inline-block; vertical-align:middle; border:none; background:none; background-color:#f0ce2e; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; line-height:37px; height:37px; padding:0 20px; font-size:1rem; color:#333; cursor:pointer; margin:5px 0 5px 5px; }


/*================================●●●●●●●●●●●●Hover●●●●●●●●●●●●================================*/
@media screen and (min-width:1024px){
/*大標/小標*/
.classbtn .btns:hover{ color:#fff; background:#0e3f8f; }

/*快捷*/
.inmenu .grids:hover .texts:after{ position:absolute; bottom:-10px; left:0; right:0; margin:auto; background: #f0ce2e; height:2px; display:block; content:"";  }

/*動態*/
.dynamic .dylist .fgrids:hover{ box-shadow: 5px 7px 5px 0px rgba(0,0,0,.2); position: relative; z-index: 1; top: -7px; transition: .2s; }
.dynamic .dylist .grids:hover{ box-shadow: 5px 7px 5px 0px rgba(0,0,0,.2); position: relative; z-index: 1; top: -7px; transition: .2s; }

/*產品*/
.porbox .dylong .wh .grids .bombox .btns:hover{ background:#f0ce2e; color:#333; }

/*案例*/
.casebox .dylist .grids .gtxt .gtxts a:hover{ background:#fff; }
}


/*================================●●●●●●●●●●●●平板●●●●●●●●●●●●================================*/
@media screen and (min-width:768px) and (max-width:1023px){
/*動態*/
.dynamic .dylist{ text-align:center; display:block; }
.dynamic .dylist .grids{ width:33.333%; display:inline-block; vertical-align:top; }

.dynamic .dylist .fgrids{ display:block; width:auto; }
.dynamic .dylist .fgrids:after{ content:""; display:block; clear:both; }
.dynamic .dylist .fgrids .wimg{ width:50%; float:left; }
.dynamic .dylist .fgrids .ftitle{ width:auto; margin-left:53%; text-align:left; }
.dynamic .dylist .fgrids .ftxt{ width:auto; margin-left:53%; text-align:left; }
.dynamic .dylist .fgrids .mores{ position: absolute; bottom: 15px; right: 15px; z-index: 101; }


/*案件*/
.casebox .dylist{ margin:0 10px; }

/*產品*/
.porbox .dylong .wh .grids{ width:280px; }
.porbox .dylong .wh .grids .qnber{ font-size:6.25rem; }
.porbox .dylong .wh .grids .bombox{ margin-top: -70px; }
.porbox .dylong .wh .grids .bombox .texts{ font-size:1.25rem; }
.porbox .dylong .wh .grids .bombox .btns{ font-size:1.25rem; line-height:30px; }

}

/*================================●●●●●●●●●●●●手機●●●●●●●●●●●●================================*/
@media screen and (max-width:767px){
/*banner*/
.banner{ /*height:197px; */margin-top:62px; position:relative; }	
.banner .imgbox{ /*height:197px; */}
.banner .imgbox img{ height:100%; position:absolute; transform:translateX(-50%) translateY(-50%); left:50%; top:50%; }
/*大標/小標*/
.intitle{ font-size:1.75rem; }
.intxts{ font-size:0.875rem; }

.classbtn .btns{ padding:0px 5px; font-size:1rem; margin: 0 3px; }
/*快捷*/
.inmenu{ padding:10px; font-size:0rem; }
.inmenu .grids{ padding:0 8px 0 0; }
.inmenu .grids:last-child{ padding:0px; }
.inmenu .grids .imgs{ width:32px; height:31px; background-size:32px; margin:0 auto; }
.inmenu .grids .texts{ font-size:0.813rem; padding: 2px 0 0 0; }	
/*動態*/
.dynamic{ padding:30px 0 35px 0; }
.dynamic .dylist{ text-align:center; display:block; }
.dynamic .dylist .grids{ display:block; width:auto; position:relative; padding:10px; margin:0 0 5px 0; }
.dynamic .dylist .grids:after{ content:""; clear:both; display:block; }
.dynamic .dylist .grids .imgs{ width:100px; position:absolute; top:10px; left:10px; }
.dynamic .dylist .grids .titles{ text-align:left; margin:0 0 0 110px; padding:0px; width:auto; }
.dynamic .dylist .grids .txts{ display:none; }
.dynamic .dylist .grids .date{ margin:0 0 0 110px; padding:0px; width:auto; }
.dynamic .dylist .grids .mores{ display:none;  }
.dynamic .dylist .grids .shadow{ display:none; }

.dynamic .dylist .fgrids{ display:block; width:auto; }
.dynamic .dylist .fgrids:after{ content:""; display:block; clear:both; }
.dynamic .dylist .fgrids .wimg{ width:100px; float:left; }
.dynamic .dylist .fgrids .ftitle{ width:auto; margin-top:0; margin-left:110px; text-align:left; font-size:1.25rem; }
.dynamic .dylist .fgrids .ftxt{ width:auto; margin-left:110px; text-align:left; font-size:0.75rem; }
.dynamic .dylist .fgrids .mores{ display:none; }
.dynamic .dylist .fgrids .shadow{ display:none; }

/*產品*/
.porbox .dylist .grids{ display:block; width:auto; padding:15px 15px 20px 15px; border-bottom:1px solid #ccc; }
.porbox .dylist .grids:last-child{ border:none; }
.porbox .dylong{ margin:40px 0 0 0; }
.porbox .dylong .wh .grids img{ width:96px; }

.porbox .dylong .wh .grids{ width:160px; }
.porbox .dylong .wh .grids .qnber{ font-size:4.375rem; }
.porbox .dylong .wh .grids .bombox{ margin-top: -45px; }
.porbox .dylong .wh .grids .bombox .texts{ font-size:1rem; }
.porbox .dylong .wh .grids .bombox .btns{ font-size:1rem; line-height:24px; }

/*案例*/
.casebox{ padding:30px 0; }
.casebox .dylist{ margin:0 15px; }
.casebox .dylist .grids{ display:block; position:relative; }
.casebox .dylist .grids .gimg{ display:block; position:absolute; padding:15px; width:60px; }
.casebox .dylist .grids .gimg .pic{ width:60px; height:59px; background-size:60px; }
.casebox .dylist .grids .gtxt{ display:block; }
.casebox .dylist .grids .gtxt .gtitle{ padding:10px 0 0 90px; margin:0 0 15px 0; }
.casebox .dylist .grids .gtxt .gtxts{ padding:0 10px; }

/*訂閱電子報*/
.joinbox .jinsub .jinput{ display:block; }
.joinbox .jinsub .jbtn{ margin:5px 5px 0 5px; }


}