/*=============================
set
===============================*/
@font-face {
    font-family: "Genyun";
    src: url('../font/GenJyuuGothicX-Medium.ttf?20171005');
}

body {
    margin: 0;
    font-family: 'Genyun', 'LiHei Pro', 'Microsoft JhengHei', sans-serif;
    width: 100%;
    height: 100%;
    font-weight: 400;
}

@font-face {
    font-family: 'iconfont';
    src: url('../font/iconfont.eot');
    src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),
    url('../font/iconfont.woff') format('woff'),
    url('../font/iconfont.ttf') format('truetype'),
    url('../font/iconfont.svg#iconfont') format('svg');
}

.iconfont{
  font-family:"iconfont" !important;
  font-size:30px;font-style:normal;
/*   -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale; */
}

#phone2,
#faceb,
#comm{
    position: fixed;
    bottom: 40px;
    right: 12px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    width: 90px;
    height: 90px;
    z-index: 99;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#phone2 i,
#faceb i,
#comm i{
    color: #fff;
    margin: 0 auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: relative;
    font-size: 60px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#phone2{
  bottom: 25px;
  background: #0288D1;
}
#faceb{
  bottom: 150px;
  background: #3b5998;
}
#comm{
  bottom: 120px;
  background: #20E000;
}
#phone2:hover{
  background: rgba(2,136,209,0.9);
}
#faceb:hover{
  background: rgba(59,89,152,0.9);
}
#comm:hover{
  background: rgba(32,224,0,0.9);
}

#phone2:hover i,
#faceb:hover i,
#comm:hover i 
{
    color: #fff;
    top: 40px;
}



.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: inherit;
    font-weight: 600;
    line-height: 1.1;
    color: #12098c;
}

p {
    font-size: 1.8rem;
}

strong {
    color: #ff0000;
}

.opp{
    opacity: 1;
}




/*=============================
top section
============================*/

.top {
    background:#ccebf7;
    padding-bottom: 2%;
}

.top button {
    font-size: 2rem;
    padding: 3%;
}

.input-group-addon {
    background: #3862ff;
    margin: 2%;
    z-index: 0;
}

.input-group {
    padding: 2% 0;
}

.input-group .form-control {
    height: 100%;
    padding: 5%;
    font-size: 1.5rem;
}
.toptext h2{
    font-size: 3rem;
    margin-top: 0 ;
}
.toptext p{
    margin-top: 5px;
    line-height: 42px;
}
.magt{
    margin: 0 2px;
}
/*===============================
service section
================================*/

.service {
    /*padding: 2%;*/
    /*background: url('../img/pattern.png?20171005') top left repeat ;*/
    background:#ccebf7;
}

.servicetitle p {
    font-size: 2.0rem;
    color: #12098c;
}

.serviceitem {
    padding: 15% 7.5%;
    border: 15px solid #da4453;
    border-radius: 2rem;
    margin: 5% 0;
    background: #FFF;
}

.serviceitem:before {
    content: "";
    position: absolute;
    top: -20px;
    left: 0;
    background: url('../img/check.png?20171005') #5eb1e4;
    border-radius: 50%;
    width: 80px;
    height: 80px;
}

.serviceitem p {
    margin: 0 auto;
    text-align: center;
    font-size: 3rem;
}

.servicerow {
    margin: 5% 0;
}


/*==========================
list section
===========================*/

.list {
    padding: 3% 0;
    background: #f14052;
}
.list img {
    margin: 0 auto;
}
.listcont span,
.listcont h4 {
    display: inline-block
}

.listcont span {
    background: #FFF;
    color: #3997cb;
    margin: 0 1%;
    padding: 2%;
    font-size: 24px;
}

.listcont h4 {
    color: #FFF;
}

.line1,
.line2,
.line3 {
    background: #3398cc;
    margin: 3% 0;
    box-shadow: -6px 5px 10px 1px rgba(0, 0, 0, 0.5);
}

.girl{
    background: url('../img/G2.jpg?20171005') no-repeat top left;
    background-size: auto 100%;
    width: 100%;
    padding: 50%;
    height: 0; 
}

@media (min-width: 1200px) {
    .girl{
        /*padding: 70%;*/
    }
}

/*============================
bottom section
============================*/

.bottom {
    /*padding: 5%;*/
    background: url('../img/pattern.png?20171005') top left repeat ;
}

.bottom .btn {
    color: #fff;
    padding: 5%;
    font-size: 2.5rem;
    margin: 2% 0;
}

.qrrow {
    margin: 3% 0;
}

.qrcode {
    margin: 0 auto;
    right: 0;
    display: inline-block;
}

.qrtext {
    display: inline-block;
    position: relative;
    margin:10% 0; 
}


/*===============================
footer
==================================*/

footer {
    height: 100%;
    width: 100%;
    color: #FFF;
}
footer a{
    color: #FFF;
}