/*Content CSS*/
#contact{overflow: hidden;}
section > article{padding: 90px 0 110px;}
section > article:nth-of-type(even){background-color: #f7f7f7;}
.sub_inner{width: 100%; max-width: 1400px; padding: 0 50px; margin: 0 auto;}

.sub_inner h3{border-bottom: solid 1px #ddd; padding-bottom: 45px; margin-bottom: 70px;}
.fs_60{font-family: 'Gothic A1', sans-serif; font-size: 60px; font-weight: 700; line-height: 1;}
.fs_27{font-family: 'Gothic A1', sans-serif; font-size: 27px; font-weight: 700;}
.fs_17{font-size: 17px; font-weight: 300; color: #555; line-height: 27px; color: rgba(255,255,255,.8);}
.bar{position: relative; padding-left: 16px;}
.bar::before{content: ''; display: block; width: 3px; height: 28px; background-color: #1f255d; position: absolute; left: 0; top: 10px;}

.map_wrap .root_daum_roughmap .wrap_map{height: 500px;}

.contact_list{display: flex; background-color: #1f255d; padding: 45px 40px 45px 60px; width: calc(100% - 200px); margin: -50px auto 0; z-index: 1; position: relative;}
.contact_list li{flex-grow: 1; color: #fff; display: flex; border-right: solid 1px rgba(255,255,255,.2); align-items: baseline;}
.contact_list li:first-child{max-width: 70%; padding-right: 40px;}
.contact_list li:last-child{border: 0; padding-left: 40px;}
.contact_list li:last-child i{font-size: 32px; min-width: 34px;}
.contact_list li i{font-size: 34px; display: block; margin-right: 25px; transition: .5s;}
.contact_list li p{margin-top: 15px;}
.contact_list li:hover i{transform: rotateY(180deg);}

@media screen and (max-width: 1400px) {
    .contact_list{padding: 40px; width: calc(100% - 100px);}


}

@media screen and (max-width: 1024px) {
    section > article{padding: 50px 0;}
    .sub_inner{padding: 0 30px;}
    .fs_60{font-size: 40px; }
    .fs_27{font-size: 20px; line-height: 1.4;}
    .fs_17{font-size: 14px; line-height: 1.7;}
    .bar{padding-left: 10px;}
    .bar::before{height: 17px; top: 9px;}
    .contact_list{padding: 40px 30px;}
    .contact_list li:last-child i{font-size: 25px; min-width: 27px;}
    .contact_list li:first-child{padding-right: 30px;}
    .contact_list li:last-child{padding-left: 20px;}
    .contact_list li i{font-size: 27px; margin-right: 15px;}

    .sub_inner h3{padding-bottom: 30px; margin-bottom: 50px; text-align: center;}
    .map_wrap .root_daum_roughmap .wrap_map{height: 350px;}


}
@media screen and (max-width: 768px){
    .contact_list {flex-wrap: wrap; width: calc(100% - 60px); padding: 0 30px;}
    .contact_list li{width: 100%;  border-bottom: solid 1px rgba(255,255,255,.2); border-right: 0; padding: 20px 0 23px !important;}
    .contact_list li:first-child{max-width: initial;}
    .contact_list li p{margin-top: 5px;}
    .contact_list li:last-child i{font-size: 20px; min-width: 23px;}
    .contact_list li i{font-size: 23px; margin-right: 10px;}
    .contact_list br{display: none;}
}

@media screen and (max-width: 640px) {
    .sub_inner{padding: 0 20px;}
    .fs_60{font-size: 35px; }
    .fs_27{font-size: 18px;}
    .fs_17{font-size: 13px; }
    .bar::before{top: 8px;}

    .map_wrap .root_daum_roughmap .wrap_map{height: 300px;}

    .contact_list {flex-wrap: wrap; width: calc(100% - 40px); padding: 0 20px;}
    .sub_inner h3{padding-bottom: 20px; margin-bottom: 35px;}


}