@import url(font-awesome/css/font-awesome.min.css);
body { margin:0; font-family:"Microsoft JhengHei",Arial,Helvetica,sans-serif; font-size:13px;}
img { border:0; height:auto; max-width:100%; }
a { text-decoration:none; color:#035584; transition: all 0.2s ease-out 0s; }
a:hover { color:#035584;}

.main-Box, .top-Box, .menu-Box, .banner-Box, .content2-Box, { max-width:1004px; margin:0 auto; text-align:left; position:relative; clear:both;}

header .menu_list{ display:none; }

.top-bg { min-height:26px; background:#00aee3; font-size:13px;}
.top-Box { padding-right:30px; padding-top:2px; text-align:right;}
.top-Box a { color:#000; display:inline-block; padding-right:30px;}
.top-Box a:hover { color:#fff;}

.menu-bg { background:url(../images/menu-bg.png) repeat-x; height:94px;}
.logo { padding-top:15px; position:relative; z-index:9999; float:left;}


.idx-about .text, .idx-new .ul{ max-width:1004px; margin:0 auto;}

.idx-about { font-family: 'Poppins',Arial,Helvetica,sans-serif; background:url(../images/idx-about-bg.png) no-repeat center top; display:flex; justify-content:center; padding:47px 0 43px; text-align:center;}
.idx-about .title01 { text-align:left; border-bottom:1px solid #035584; line-height:1; color:#035584; font-size:34px; position:relative; margin-bottom:10px; font-weight: bold;}
.idx-about .title01::before{ content:none; }
.idx-about .title01 span{ font-size:86px; font-family:"Source Serif 4"; font-weight:bold; letter-spacing:-12.5px; margin:0 21px 0 0; }
.idx-about>div{ }
.idx-about>div:nth-child(1) { max-width:985px; }
.idx-about>div:nth-child(2) { max-width:600px; padding:0px 20px;  }
.idx-about .text { font-size:16px; line-height:1.5; letter-spacing:0; position:relative; text-align:justify; }
.idx-about a.button { background:#7a7a7a; border-radius:30px; color:#fff; display:inline-block; font-size:9px; padding:3px 12px; text-align:center; max-width:64px; float:right; margin-top:5px; transition:.4s ease; }
.idx-about a.button::after{ content:"\f061"; font: normal normal normal 14px/1 FontAwesome; margin-left:4px; }
.idx-about a.button:hover { background:#035584; }
.idx-about .idx-cert{ display:flex; margin-top:55px; flex-wrap: wrap;}
.idx-about .idx-cert > div{ margin-bottom: 20px;margin-right: 1.9%;}

.idx-certification{ position:relative; color:#fff;}
.idx-certification .title01{ font-size:93px; font-family:"Source Serif 4"; }
.idx-certification .text{ font-size:18px; font-family:'poppins'; }
.idx-certification .position{ position:absolute; top:50%; left:10%; transform:translateY(-50%); }

.idx-new { text-align:center; background:#fff; padding:68px 0 46px; position:relative; box-shadow:0 5px 7px -2px rgba(0,0,0,.3); z-index:1; }
.idx-new .title01{ color:#035584; font-size:30px; margin:0 0 46px; position:relative;}
.idx-new .title01::before{ content:''; background:#035584; height:1px; position:absolute; bottom:-5px; left:50%; transform:translateX(-50%); width:40px; }
.idx-new .title01 a {
    font-size: 34px;
    font-family:'poppins';
}
.idx-new ul, .idx-new li{ margin:0; padding:0; list-style-type:none; }
.idx-new ul{ display:flex; justify-content:center; }
.idx-new li{ text-align:center; position:relative; width:calc(100% / 5); }
.idx-new li::before{ background:#8996a0;  content:""; height:48px; position:absolute; top:calc(50% - 24px); right:0; width:2px; }
.idx-new li:last-child::before{ content:none; }
.idx-new li a{ color:#4e4e4e; font-size:14px; line-height:1.5;}
.idx-new .text{ padding:0 20px; }

.date{ background:#035584; border:3px solid #fff; border-radius:50%; line-height:1.5; color:#fff; font-size:14px; height:94px; margin:0 auto; text-align:center; transition:all .2s ease-in-out; width:94px; }
a:hover .date{ background:#003554; }
.date::after{  content:"\f063"; display:block; font: normal normal normal 14px/1 FontAwesome; margin-top:5px; transition:all .2s ease-in-out;}
a:hover .date::after{ transform:translateY(5px); }
.date .year{ display:block; font-size:21px; margin-top:13px;}

.idx-slogan{ position:relative; overflow:hidden; height:305px; background: url(../images/idx-pic.jpg) no-repeat center; background-attachment:fixed; }
.idx-slogan .img img{ display:block; }
.txt{ left:50%; top:50%; transform:translate(-50%, -50%); position:absolute; }
h1 { color:#fff; font-size:24px; }

@media only screen and (max-width: 1440px) { 
    .idx-about { padding:47px 40px 43px; }
    .idx-about>div:nth-child(2) {
        max-width: 560px;
        padding: 0;
    }
}

@media only screen and (max-width: 1024px) {
    .idx-about .text, .idx-new .ul{ padding: 0 10px;}
    .idx-about{ display:block; padding:10px 20px; }
    .idx-about > div:nth-child(2){ max-width:none; }  
    .idx-about a.button{ display:block; margin:10px auto; float:none; }
    .idx-about .title01{ text-align:center; font-size: 26px; }
    .idx-about .title01 span{ font-size:42px; letter-spacing:0; margin:0; font-family:"Microsoft JhengHei",Arial,Helvetica,sans-serif;}
    .idx-about .text{ padding:0; text-align:left; }
    .idx-certification{ padding:10px 0; overflow:hidden; }
    .idx-certification .position{ position:relative; transform:none; left:0; top:0; text-align:center;}
    .idx-certification .img img{ max-width:none; position:absolute; }
    .idx-certification .title01{ font-size:4em; }
    .idx-slogan{ background-attachment:scroll; }
}

@media only screen and (max-width: 768px) {
    .idx-slogan .img img{ max-width:none; }
    .rslides img{ min-width:180vw; position:relative; left:50%; transform:translateX(-33%); }
    .idx-about>div:first-child img { width:65%; }
}

@media only screen and (max-width: 570px) { 
    .idx-new ul{ display:block; }
    .idx-new li{ margin-bottom:10px; width:auto; }
    .idx-slogan{ background-attachment:scroll; }
}

@media only screen and (max-width: 500px) { 
    .idx-certification .title01{ text-align:center; font-size:3em; }
    .idx-certification .text{ text-align:center; font-size: 16px; }
    .idx-new li::before{ content:none; }

}

@media only screen and (max-width: 430px) {
	.idx-about .idx-cert > div{width: calc(100% / 4);margin-right: 0;}
}

@media only screen and (max-width: 414px) {
.logo  { padding-top:26px;}
.logo img { width:220px;}
}

@media only screen and (max-width: 320px) {  }