/* Visual */
#visual {position: relative; height: 100vh; background: url(../images/main/visual.jpg) no-repeat center center / cover;}
#visual > .inner {position: relative; overflow: hidden; height: 100%;}
#visual .inner .txt_box {padding: 315px 0 0 0;}
#visual .inner .txt_box span {display: inline-block; font-size: 48px; font-weight: 900; color: #fff; border-bottom: 3px solid #fff; opacity: 0;}
#visual .inner .txt_box strong {display: inline-block; font-family: 'Montserrat'; font-size: 72px; font-weight: 700; color: #fff; border-bottom: 3px solid #fff; opacity: 0;}
#visual .inner .txt_box span.on {animation: opacityAnimation 1s .1s ease 1 forwards;}
#visual .inner .txt_box strong.on {animation: opacityAnimation 1s 0.5s ease 1 forwards;}
@-webkit-keyframes opacityAnimation {
    from { opacity:0;}
    to { opacity:1;}
}
@-moz-keyframes opacityAnimation {
    from { opacity:0;}
    to { opacity:1;}
}
@-o-keyframes opacityAnimation {
    from { opacity:0;}
    to { opacity:1;}
}
@keyframes opacityAnimation {
    from { opacity:0;}
    to { opacity:1;}
}
#visual .btn_scroll {display: block; position: absolute; left: -102px; bottom: 162px; transform: rotate(90deg); width: 214px; height: 12px; line-height: 12px; font-family: 'Montserrat'; font-size: 12px; font-weight: 700; color: #fff; text-align: left; letter-spacing: 0.8em;}
#visual .btn_scroll:before {display: block; position: absolute; right: 0; bottom: 1px; width: 100px; height: 1px; background-color: #fff; content: '';}
#visual .search_wrap {display: block; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; background-color: rgba(0,0,0,0.6);}


/* 메인 컨텐츠 공통 */
.main_contents .section {padding: 100px 0;}
.main_contents .section .inner {position: relative;}
.main_contents .section .inner h2.main_tit {display: block; margin: 0 0 20px; font-size: 32px; font-weight: 900; color: #333; letter-spacing: -0.03em;}
.main_contents .section .inner .btn_more {position: absolute; top: 20px; right: 0; font-weight: 500; color: #364e9a;margin-right: 20px;}

/* 오피스 */
.office_list:after {display: block; clear: both; *zoom: 1; content: '';}
.office_list li {float: left; width: 220px; margin: 50px 0 0 20px;}
.office_list li:nth-child(5n + 1) {margin: 50px 0 0 0;}
.office_list li:nth-child(-n + 5) {margin-top: 0;}
.office_list li a {display: block; position: relative;}
.office_list .label {display: block; position: absolute; top: 10px; left: 10px; width: 70px; height: 22px; line-height: 22px; font-size: 12px; font-weight: 500; text-align: center; color: #fff; background-color: #364e9a; z-index: 1;}
.office_list .img_box {position: relative; overflow: hidden; width: 100%;}
.office_list .img_box:before {display: block; padding-top: 100%; content: '';}
.office_list .img_box img {position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; vertical-align: top; transition: all 0.3s ease-in-out;}
.office_list .txt_box {padding: 15px 10px 25px;}
.office_list .txt_box .tit {display: block; margin: 0 0 10px; font-weight: 500; color: #333;}
.office_list .txt_box .add {display: block; font-size: 14px; color: #666;}
.office_list .txt_box .subway {display: block; font-size: 14px; color: #999;}
.office_list .txt_box .price {overflow: hidden; margin: 10px 0 0 0; line-height: 22px; font-size: 13px; color: #666;}
.office_list .txt_box .price em {display: block; line-height: 22px; font-size: 14px; color: #333;
    transform: translate(0,-4px);
}

.office_list li a:hover .img_box img {transform: scale(1.1);}

/* 공유오피스 */
.main_share_office {background-color: #f6f6f6;}
.office_slide .swiper-slide a {display: block; position: relative; box-sizing: border-box; padding: 10px 10px 0; background-color: #fff;}
.office_slide .swiper-slide .label {display: block; position: absolute; top: 10px; left: 10px; width: 70px; height: 22px; line-height: 22px; font-size: 12px; font-weight: 500; text-align: center; color: #fff; background-color: #6c82ca; z-index: 1;}
.office_slide .swiper-slide .img_box {overflow: hidden; width: 260px; height: 260px;}
.office_slide .swiper-slide .img_box img {width: 100%; height: 100%; vertical-align: top; transition: all 0.3s ease-in-out;}
.office_slide .swiper-slide .txt_box {padding: 15px 10px;}
.office_slide .swiper-slide .txt_box .tit {display: block; margin: 0 0 8px; font-weight: 500; color: #333;}
.office_slide .swiper-slide .txt_box .add {display: block; font-size: 14px; color: #666;}
.office_slide .swiper-slide .txt_box .subway {display: block; margin: 2px 0 0 0; font-size: 14px; color: #999;}
.office_slide .swiper-button-next, 
.office_slide .swiper-button-prev {width: 22px; height: 60px; text-indent: -9999px; background-repeat: no-repeat; background-position: 0 0;}
.office_slide .swiper-button-next {right: -70px; background-image: url(../images/main/arrow_next.png);}
.office_slide .swiper-button-prev {left: -70px; background-image: url(../images/main/arrow_prev.png);}
.office_slide .swiper-slide a:hover .img_box img {transform: scale(1.1);}

/* 사무실 구하기 & 사무실 내놓기 */
.bottom_links {}
.bottom_links ul:after {display: block; clear: both; *zoom: 1; content: '';}
.bottom_links ul li {float: left; width: 50%; height: 200px;}
.bottom_links ul li a {display: block; position: relative; overflow: hidden; width: 100%; height: 100%;}
.bottom_links ul li a .txt_box {position: absolute; top: 50%; transform: translateY(-50%); width: 480px; z-index: 1;}
.bottom_links ul li a .txt_box strong {display: block; margin: 0 0 15px; font-size: 24px; font-weight: 900; color: #fff;}
.bottom_links ul li a .txt_box p {color: #fff;}
.bottom_links ul li a .txt_box button {display: block; position: absolute; right: 0; bottom: 0; padding: 0 17px 0 0; font-size: 14px; color: #fff; background: url(../images/main/arrow_more.png) no-repeat right center; transition: all 0.3s ease-in-out;}
.bottom_links ul li a .bg {position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; transition: 0.3s ease-in-out;}
.bottom_links ul li:nth-child(1) a .bg {background-image: url(../images/main/bottom_bg01.jpg);}
.bottom_links ul li:nth-child(2) a .bg {background-image: url(../images/main/bottom_bg02.jpg);}
.bottom_links ul li:nth-child(1) .txt_box {right: 110px;}
.bottom_links ul li:nth-child(2) .txt_box {left: 110px;}

.bottom_links ul li a:hover .bg {transform: scale(1.1);}
.bottom_links ul li a:hover .txt_box button {right: -15px;}