/*------------ contact ------------*/

.contact-content {
    max-width: 1080px;
    margin: 0 auto;
}

.contact-info {
    width: 100%;
    display: table;
    margin: 35px auto 45px;
    position: relative;
}

.contact-info:before {
    content: "";
    display: block;
    height: 26px;
    width: 100%;
    max-width: 970px;
    margin: 0 auto;
    position: absolute;
    top: 100%;
    left: 50%;
    margin: 0 0 0 -485px;
    background: url('../images/contact/shadow.png') no-repeat;
}

.contact-info .col {
    display: table-cell;
    position: relative;
}

.contact-info .text {
    width: 391px;
    background: #F2EBE1;
    vertical-align: top;
    padding: 20px 30px 20px 35px;
}

.contact-info .logo {
    text-align: center;
    margin: 0 0 35px 0;
}

.contact-info ul {
    font-size: 16px;
    line-height: 1.6;
    color: #666666;
}

.contact-info ul li + li {
    margin: 15px 0 0 0;
}

.contact-info ul i {
    width: 45px;
    height: 45px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px 0 0;
    background: url('../images/contact/ic.png');
}

.contact-info ul .fax i {
    background-position: 0 -45px;
}

.contact-info ul .mail i {
    background-position: 0 -90px;
}

.contact-info ul .add i {
    background-position: 0 -135px;
}

.contact-info ul span {
    display: inline-block;
    vertical-align: middle;
   /* width: calc(100% - 55px);*/
}

.contact-info .map iframe {
    width: 100%;
    height: 495px;
    outline: 0;
    padding: 0;
    margin: 0 0 -5px 0;
}

.contact-info .map:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 6px solid rgba(255, 255, 255, .5);
	pointer-events: none;
	z-index: 1;
	 -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.contact-traffic {
    margin: 0 auto 55px;
    font-size: 15px;
    color: #666666;
    line-height: 1.75;
}

.contact-traffic i {
    width: 107px;
    height: 30px;
    display: inline-block;
    color: #fff;
    font-size: 17px;
    font-style: normal;
    text-align: center;
    background: url('../images/contact/bg.png');
}

.contact-traffic li {
    margin-bottom: 20px;
}

.contact-traffic ul,
.contact-traffic span {
    width: calc(100% - 135px);
    display: inline-block;
    vertical-align: top;
    margin: 0 0 0 15px;
}

.contact-title {
    font-size: 23px;
    color: #201C1C;
    letter-spacing: 9px;
    margin: 0 auto 10px;
    border-bottom: 3px solid #D1D1CF;
    position: relative;
}

.contact-title:before {
    content: "";
    width: 180px;
    height: 3px;
    position: absolute;
    bottom: -3px;
    left: 0;
    background: #7C3707;
}

.contact-traffic ul span {
    width: calc(100% - 65px);
}


/*------------ rwd ------------*/

@media screen and (max-width: 1024px) {
    .contact-info:before {
        left: 0%;
        max-width: 100%;
        margin: 0 0 0 0;
    }
}

@media screen and (max-width: 900px) {
    .contact-info,
    .contact-info .col {
        display: block;
    }
    .contact-info ul {
        text-align: left;
        max-width: 350px;
        margin: 0 auto;
    }
    .contact-info .text {
        width: 100%;
        text-align: center;
        padding: 20px 10px 10px 10px;
    }
    .contact-info .map iframe {
        height: 300px;
    }
}

@media screen and (max-width: 767px) {
    .contact-traffic i {
        display: block;
    }
    .contact-traffic ul,
    .contact-traffic span {
        display: block;
        width: auto;
        margin: 5px 0 0 0;
    }
    .contact-traffic ul span {
        width: auto;
    }
}