@charset "utf-8";
/* CSS Document */
/*header*/
#header{border-bottom:5px solid #36b5d8; background: #FFF;}
.nav a{font-size:15px; color:#333333;}
.nav span.line{width:1px; height:15px; background:#a9a6a6; display:inline-block;}
.phone{ width:20%; float:right; margin-top: 2.4em; background:url(images/icon-topphone.png) left no-repeat;padding: 6px 0px 3px 40px;background-position: 0 -3px;}
.phone a{ color:#0082ad;font-family: "Times New Roman", Times, serif;font-size: 30px;}
.phone i{ background-color:#0082ad; color:#FFF; border-radius:99em; padding:1em;}
.d2{ background:url(images/d-img01.png) no-repeat; background-size: cover;}
.d2-2{ background-color: rgba(245,246,246,0.7); float:right;padding: 5em 1em 8em 1em;}
.d1{ margin:2em 0;}
.d1 .col-3 ,.d1 .col-4{ padding:1em;}
.frm{transition: 0.5s;width: 100%;height: auto;cursor: pointer;box-shadow: 0 0 5px rgba(0,0,0,0.1);}
.frm:hover{transform: translateY(-15px);box-shadow: 0 0px 5px rgba(0,0,0,0.3);}
.frm .info{ color:#666; padding:0 1em;}
.info hr{background: #195fab;height: 3px;}
h4.subject{ margin:0.5em 0}
h1.tit{ color: #666;; font-size:40px; font-weight:normal; text-align:center;}
.ct{ margin:2em 0 1em 0;}
.subnav ul li ul li a {padding-left: 0.7em;border: none;font-size: 15px;color: #666;background: url(images/icon-sub.png) left no-repeat;font-weight: normal;line-height: 120%;}
.bannertit{ background-color:#f4f4f4;}
.bannertit h1{position: absolute;color: #FFF;font-size: 40px;text-align: left;font-weight: bold;text-shadow: 3px 3px 4px rgba(0,0,0,0.8);display: block;transform: translateX(-55%);bottom: 0;right: 1em;line-height: 1.5em;}
.tit2{font-size: 28px;font-weight: normal;color: #000;text-align: left;border-bottom: 1px dashed #ccc;padding-bottom: 0.2em;padding-top: 0.2em;padding-left: 0.5em;border-left: 8px solid #D1DEE2;float: left;width: 100%;}
.case ul li{list-style-type:none; display: inline-block;}
.case ul {margin: 0;padding: 0;list-style: none;}
.phone1{ position:fixed; right:0.5em; border-radius:5em; background-color:#36b5d8; padding: 0.5em;box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.3); z-index:100; bottom:30%;}
.phone1 a{color:#FFF;}
/*footer*/
#footer{text-align:center; color:#FFF; padding:1.5em 0; background-color:#1b5ea6;}
#footer a{color:#FFF;}
#footer img{position: absolute;right: 0%;top: -7px;}



/*btn*/
.d2 .more{ background-color:#f16833; color:#FFF; padding:0.3em 1.5em;}

/*effect*/
.fadein{opacity:0; transform:translateY(-30px); transition:.5s ease-in-out !important;}
.fadein.in{opacity:1; transform:translateY(0px);}
.fadeinR{opacity:0; transform:translateX(500px); transition:1.5s ease-in-out;}
.fadeinR.in{opacity:1; transform:translateX(0px);}
.fadeinL{opacity:0; transform:translateX(-500px); transition:1.5s ease-in-out;}
.fadeinL.in{opacity:1; transform:translateX(0px);}




.fixedbtn{position:fixed; bottom:15vh; right:2%; z-index: 400;  vertical-align: middle; display:inline-block;}
.fixedbtn img{width:100%; height:auto;}
.fixedbtn a{display:block; width:55px; height:55px; overflow: hidden; text-align: center; vertical-align: middle; border-radius:100%; margin-bottom:3px;}








@media screen and (max-width:767px) {/*mobile*/
/*nav*/
#header{padding:0;}
.nav a:hover{background:#333; color:#fff;}

.bannertit h1{bottom: -10px; font-size:20px;}
.d2-2 {padding: 5em 1em;}
#footer img{position: initial;}

}
@media screen and (min-width:768px) and (max-width:1199px){/*pad*/
/*nav*/
#header{padding:0;}
.nav{width:55%; text-align:right;}
.nav a{padding:0.5em 1em;}
.phone a { font-size:20px;}
.phone{ width:20%;margin-top: 2px;}
#footer img {right: 0%;top: -7px;}
.bannertit h1{bottom: -17px;}
#footer{text-align: left;font-size: 14px;}
}
@media screen and (min-width:900px) and (max-width:1199px){/*desktop*/
/*nav*/
.nav a{padding:0.5em 2em;}
#footer{text-align:center;font-size: 14px;}

}
@media screen and (min-width:1200px){/*desktop*/
/*header*/
/*nav*/
.nav a{padding:0.5em 1.5em;}
.nav a:hover{color:#d13a00;}
}