@charset "utf-8";

.main-visual {position: relative; overflow: hidden; margin-top: 100px;}
.main-visual .origin .item {position: relative; height: calc(100vh - 100px);}
.main-visual .item .img-wrap {position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; background-repeat: no-repeat; background-position: center bottom; -webkit-background-size: cover; background-size: cover; }
.main-visual .item.slick-active .img-wrap {transform: scale(1.06); transition: all 4.5s;}

.main-visual .thumb {position:absolute; max-width:1450px; width:100%; padding:0 15px; top:0; left:50%; transform:translateX(-50%);}
.main-visual .thumb .item {position: relative;}
.main-visual .main-btn {display: flex; padding-top: 140px; margin-bottom: 35px;}
.main-visual .main-btn .paging ul {display: flex; margin: 0 -10px;}
.main-visual .main-btn .paging ul li {position: relative; padding: 0 17px; transition: all 0.6s;}
.main-visual .main-btn .paging ul li.slick-active {padding-right: 83px;}
.main-visual .main-btn .paging ul li:after {content: ''; width: 0; height: 1px; background: #fff; position: absolute; top: 50%; right: 0; opacity: 0; transition: all 0.6s;}
.main-visual .main-btn .paging ul li.slick-active:after {width: 60px; opacity: 1;}
.main-visual .main-btn .paging ul li button {display: block; font-size: 14px; font-weight: 500; color: #fff; opacity: 0.5; border: 0; background: none; cursor: pointer;}
.main-visual .main-btn .paging ul li button:before {content: '0';}
.main-visual .main-btn .paging ul li.slick-active button {opacity: 1;}
.main-visual .main-btn .controler {margin-left: 20px;}
.main-visual .main-btn .controler button {border: 0; background: none; font-size: 0; width: 10px; height: 10px; background-repeat: no-repeat; background-position: center center; background-size: contain;}
.main-visual .main-btn .controler .stop {background-image: url('../img/main/main-pause-btn.png');}
.main-visual .main-btn .controler .play {background-image: url('../img/main/main-play-btn.png'); display: none;}
.main-visual .text-wrap h2 {font-family: 'NanumSquare'; font-size: 60px; font-weight: 800; line-height: 1.3em; color: #fff;}
.main-visual .thumb .item.slick-active .text-wrap h2 {animation: text-right 1.5s both .5s;}
@keyframes text-right {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }
    60% {
        transform: translateX(30px);
        opacity: 1;
    }
    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}

/* main-banner */
.main-banner {margin-top: -270px;}
.main-banner .wrap {display: flex; border-radius: 10px; overflow: hidden; box-shadow: 0px 0px 27px 0px rgba(159, 162, 161, 0.18);}
.main-banner .wrap > div {max-width: 710px;	width: 100%;}
.main-banner .title {display: flex; justify-content: space-between; padding: 19px 30px;}
.main-banner .left .title {background-color: #00a651;}
.main-banner .right .title {background-color: #fcaf17;}
.main-banner .title h3 {position: relative; font-size: 25px; font-weight: 700; color: #fff; padding-left: 30px;}
.main-banner .title h3:before {content: ''; width: 23px; height: 23px; background-repeat: no-repeat; background-position: center center; background-size: contain; position: absolute; top: 50%; left: 0; margin-top: -11px;}
.main-banner .left .title h3:before {background-image: url('../img/main/banner-info-icon.png');}
.main-banner .right .title h3:before {background-image: url('../img/main/banner-hour-icon.png');}
.main-banner .title a {display: flex; align-items: center; transition: all 0.4s;}
.main-banner .title a:hover {transform: rotate(360deg);}
.main-banner .cont {background: #fff; padding: 34px 50px 50px;}
.main-banner .left .cont {position: relative; z-index: 1; border-right: 1px solid #ddd; height: calc(100% - 66px);}
.main-banner .left .cont:before {content: ''; width: 143px; height: 198px; background-image: url('../img/main/banner-bg.png'); background-repeat: no-repeat; background-position: right bottom; background-size: contain; position: absolute; top: 53px; right: 50px; z-index: -1;}
.main-banner .left .cont .top {padding-bottom: 14px; margin-bottom: 28px; border-bottom: 1px solid #ddd;}
.main-banner .left .cont .top p {font-size: 18px; font-weight: 600; line-height: 1.7em; color: #333;}
.main-banner .left .cont .top ul {margin-top: 15px;}
.main-banner .left .cont .top ul li {display: flex; align-items:  center; margin-bottom: 6px;}
.main-banner .left .cont .top ul li .icon {width: 27px; height: 27px; background-repeat: no-repeat; background-position: center center; background-size: contain; margin-right: 10px;}
.main-banner .left .cont .top ul li:nth-child(1) .icon {background-image: url('../img/main/banner-subway-icon.png');}
.main-banner .left .cont .top ul li:nth-child(2) .icon {background-image: url('../img/main/banner-parking-icon.png');}
.main-banner .left .cont .top ul li p {font-size: 16px; line-height: 1.3em; color: #666;}
.main-banner .left .cont .top ul li b {font-weight: 700; color: #333; margin-right: 10px;}
.main-banner .left .cont .bottom {display: flex; align-items: center;}
.main-banner .left .cont .bottom .icon {width: 33px; height: 29px; background-image: url('../img/main/banner-tel-icon.png'); background-repeat: no-repeat; background-position: center center; background-size: contain; margin-right: 18px;}
.main-banner .left .cont .bottom a {font-family: 'NanumSquare'; font-size: 35px; font-weight: 800; color: #333;}
.main-banner .right .cont .table {border-spacing: 0; border-collapse: collapse;}
.main-banner .right .cont table {margin-bottom: 25px;}
.main-banner .right .cont table col {width: 20%;}
.main-banner .right .cont table thead {background: #fdf5e4; border-radius: 30px; overflow: hidden;}
.main-banner .right .cont table thead th {font-size: 16px; font-weight: 700; color: #333; text-align: center; padding: 9px 5px;} 
.main-banner .right .cont table thead th:not(:last-child) {border-right: 1px solid #ddd;} 
.main-banner .right .cont table tbody tr {border-bottom: 1px solid #ddd;}
.main-banner .right .cont table tbody td {font-size: 15px; font-weight: 500; line-height: 1.4em; color: #666; text-align: center; padding: 12px 5px;}
.main-banner .right .cont table tbody td:not(:last-child) {border-right: 1px solid #ddd;}
.main-banner .right .cont ul {display: flex; flex-wrap: wrap;}
.main-banner .right .cont ul li {position: relative; width: 50%; font-size: 16px; line-height: 1.4em; color: #666; margin-bottom: 10px; padding-left: 15px;}
.main-banner .right .cont ul li:before {content: ''; width: 4px; height: 4px; background: #fcaf17; position: absolute; top: 7px; left: 0;}
.main-banner .right .cont ul li span {font-weight: 700; color: #f70d0d;}

/* section 공통 */
.sec-title {margin-bottom: 55px;}
.sec-title h3 {position: relative; font-family: 'NanumSquare'; font-size: 55px; font-weight: 800; line-height: 1.4em; color: #000; padding-top: 40px; text-align: center;}
.sec-title h3:before {content: ''; width: 47px; height: 29px; background-image: url('../img/main/title-deco.png'); background-repeat: no-repeat; background-position: center center; background-size: contain; position: absolute; top: 0; left: 50%; margin-left: -23px;}
.sec-title h3 span {color: #00a650;}
.sec-title p {font-size: 18px; line-height: 1.77em; color: #666; margin-top: 22px; text-align: center;}

/* section01 */
.sec01 {padding: 120px 0 130px;}
#main .sec01 .contain {max-width: 1600px; padding: 0 90px;}
.sec01 .items {margin: 0 -15px 48px;}
.sec01 .item {padding: 0 15px;}
.sec01 .item a {height: 410px; border-radius: 10px; overflow: hidden; border: 1px solid #ddd; padding: 52px 35px 53px; text-align: center; transition: all 0.4s;}
.sec01 .item a:hover {border: 1px solid #00a650;}
.sec01 .item .icon {position: relative; width: 136px; height: 136px; background-repeat: no-repeat; background-position: center center; background-size: contain; margin: 0 auto 37px; border-radius: 50%; box-shadow: 5px 8.66px 10px 0px rgba(64, 63, 63, 0.15); transition: all 0.6s;}
.sec01 .item01 .icon {background-image: url('../img/main/sec01-01.png');}
.sec01 .item02 .icon {background-image: url('../img/main/sec01-02.png');}
.sec01 .item03 .icon {background-image: url('../img/main/sec01-03.png');}
.sec01 .item04 .icon {background-image: url('../img/main/sec01-04.png');}
.sec01 .item05 .icon {background-image: url('../img/main/sec01-05.png');}
.sec01 .item01 a:hover .icon {background-image: url('../img/main/sec01-01-on.png');}
.sec01 .item02 a:hover .icon {background-image: url('../img/main/sec01-02-on.png');}
.sec01 .item03 a:hover .icon {background-image: url('../img/main/sec01-03-on.png');}
.sec01 .item04 a:hover .icon {background-image: url('../img/main/sec01-04-on.png');}
.sec01 .item05 a:hover .icon {background-image: url('../img/main/sec01-05-on.png');}
.sec01 .item .icon:before {position: absolute; top: -12px; left: -12px; width: 160px; height: 160px; content: ''; background-image: url('../img/main/sec01-circle.png'); background-repeat: no-repeat; background-position: center center; background-size: contain; transition: all 0.4s;}
.sec01 .item a:hover .icon:before {background-image: url('../img/main/sec01-circle-on.png'); animation: rotate 2s linear infinite;}
@keyframes rotate {
    from {
        transform: rotate(0deg); 
    }
    to {
        transform: rotate(360deg); 
    } 
}
.sec01 .item h4 {font-size: 30px; line-height: 1.3em; font-weight: 700; color: #000; margin-bottom: 14px; transition: all 0.4s;}
.sec01 .item a:hover h4 {color: #00a650;}
.sec01 .item p {font-size: 16px; line-height: 1.6em; color: #666;}
section .slick-arrow {position: absolute; top: 50%; width: 25px; height: 44px; margin-top: -22px; background-repeat: no-repeat; background-size: contain; background-color: transparent; border: 0; font-size: 0; transition: all 0.4s;}
section .slick-prev {left: -50px; background-image: url('../img/main/prev-btn.png');}
section .slick-next {right: -50px; background-image: url('../img/main/next-btn.png');}
section .slick-prev:hover {left: -60px;}
section .slick-next:hover {right: -60px;} 
.sec01 .notice {background: #f7f7f7; padding: 40px 65px 44px; border-radius: 10px; margin-bottom: 50px;}
.sec01 .notice b {display: block; font-size: 20px; font-weight: 700; line-height: 1.5em; color: #000; margin-bottom: 8px;}
.sec01 .notice ul li {position: relative; font-size: 17px; line-height: 1.7em; color: #666; padding-left: 7px;}
.sec01 .notice ul li:before {position: absolute; top: 12px; left: 0; content: ''; width: 3px; height: 3px; background: #666; border-radius: 50%;} 
.sec01 .more-btn {text-align: center;}
.more-btn a {position: relative; display: inline-block; width: 180px; font-size: 20px; font-weight: 700; line-height: 58px; color: #00a651; border: 1px solid #00a651; border-radius: 30px; text-align: center; transition: all 0.4s; overflow: hidden;}
.more-btn a:before {content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 0; background-color: #00a651; z-index: -1; transition: all 0.4s;}
.more-btn a:hover {color: #fff;}
.more-btn a:hover:before {width: 100%;}

/* section02 */
.sec02 {background-image: url('../img/main/sec02-bg.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; padding: 80px 0;}
.sec02 .wrap {display: flex; flex-wrap: wrap;}
.sec02 .title {max-width: 465px; width: 100%; padding-top: 75px;}
.sec02 .title b {display: block; font-family: 'NanumSquare'; font-size: 16px; letter-spacing: 0.43em; font-weight: 700; color: rgba(255,255,255,0.5); margin-bottom: 27px;}
.sec02 .title h3 {font-family: 'NanumSquare'; font-size: 55px; font-weight: 800; line-height: 1.3em; color: #fff; margin-bottom: 66px;}
.sec02 .more-btn a {background: #fcaf17; color: #fff; border: 1px solid #fcaf17; z-index: 5;}
.sec02 .more-btn a:before {background-color: #fff; z-index: -1;}
.sec02 .more-btn a:hover {color: #fcaf17;}
.sec02 .more-btn a:hover:before {width: 100%;}
.sec02 .details {padding-left: 115px; padding-top: 190px;}
.sec02 .details h4 {font-family: 'NanumSquare'; font-size: 30px; line-height: 1.4em; font-weight: 700; color: #fff; margin-bottom: 17px;}
.sec02 .details li {position: relative; font-size: 18px; font-weight: 600; line-height: 1.78em; color: #fff; padding-left: 23px;}
.sec02 .details li:before {content: ''; width: 6px; height: 6px; background: #fcaf17; border-radius: 50%; position: absolute; top: 12px; left: 0;}

/* section03 */
.sec03 {padding: 130px 0 130px;}
#main .sec03 .contain {max-width: 1600px; padding: 0 90px;}
.sec03 .sec-title {margin-bottom: 63px;}
.sec03 .items {margin: 0 -25px 50px;}
.sec03 .item {padding: 0 25px;}
.sec03 .item a {position: relative; border-radius: 10px; overflow: hidden; z-index: 1;}
.sec03 .item a:before {content: ''; width: 100%; height: 100%; border: 1px solid #ddd; border-radius: 10px; position: absolute; top: 0; left: 0; transition: all 0.4s;}
.sec03 .item a:hover:before {border: 1px solid #00a650; z-index: 2;}
.sec03 .pic {position:relative; height:0; padding-bottom:56.82%; overflow:hidden; transition:all 0.6s;}
.sec03 .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;}
.sec03 .text {padding: 33px 40px 35px;}
.sec03 .text h4 {font-size: 22px; font-weight: 600; line-height: 1.5em; color: #000; height:calc(1.5em * 1 * 2); overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; margin-bottom: 23px; transition: all 0.4s;}
.sec03 .text p {font-size: 16px; line-height: 1.4em; color: #666;}
.sec03 a:hover .text h4 {color: #00a650;}
.sec03 .more-btn {text-align: center;}

/* section04 */
.sec04 {background-image: url('../img/main/sec04-bg.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; padding: 130px 0 150px;}
.sec04 .sec-title {margin-bottom: 0;}
.sec04 .sec-title h3 {font-size: 50px; text-align: left; padding-top: 55px;}
.sec04 .sec-title h3:before {left: 0; margin-left: 0;}
.sec04 .wrap {display: flex; flex-wrap: wrap; margin: -17px;}
.sec04 .wrap > div {width: 33.333%; padding: 17px;}
.sec04 .wrap > div:nth-child(2), .sec04 .wrap > div:nth-child(3) {margin-top: 55px;}
.sec04 a {position: relative; padding: 50px 50px; min-height: 250px; border-radius: 10px; overflow: hidden; background-repeat: no-repeat; background-position: center center; background-size: cover;}
.sec04 div:nth-child(2) a {background-image: url('../img/main/sec04-box-bg01.jpg');}
.sec04 div:nth-child(3) a {background-color: #fff;}
.sec04 div:nth-child(4) a {background-image: url('../img/main/sec04-box-bg02.jpg');}
.sec04 div:nth-child(5) a {background-color: #fff;}
.sec04 div:nth-child(6) a {background-image: url('../img/main/sec04-box-bg03.jpg');}
.sec04 a h4 {font-size: 34px; font-weight: 700; line-height: 1.3em; color: #000; margin-bottom: 20px;}
.sec04 div:nth-child(even) a h4 {color: #fff;}
.sec04 a p {position: relative; width: 105px; font-size: 15px; font-weight: 600; line-height: 30px; background: #fcaf15; color: #fff; border-radius: 15px; text-align: center; padding-right: 13px;}
.sec04 div:nth-child(4) a p {background: #009e4d;}
.sec04 a p:after {position: absolute; top: 50%; right: 15px; width: 8px; height: 8px; margin-top: -4px; content: ''; background-image: url('../img/main/sec04-more-btn.png'); background-repeat: no-repeat; background-position: center center; background-size: contain; transition: all 0.4s;}
.sec04 a:hover p:after {transform: rotate(180deg);}
.sec04 .icon {position: absolute; bottom: 40px; right: 40px; width: 78px; height: 78px; overflow:hidden;}
.sec04 .icon:before {content:''; width:100%; height: 156px; position:absolute; top:0; left:0; background-position: bottom center; transition: all 0.5s;}
.sec04 div:nth-child(2) .icon:before {background-image: url('../img/main/sec04-icon01.png');}
.sec04 div:nth-child(3) .icon:before {background-image: url('../img/main/sec04-icon02.png');}
.sec04 div:nth-child(4) .icon:before {background-image: url('../img/main/sec04-icon03.png');}
.sec04 div:nth-child(5) .icon:before {background-image: url('../img/main/sec04-icon04.png');}
.sec04 div:nth-child(6) .icon:before {background-image: url('../img/main/sec04-icon05.png');}
.sec04 a:hover .icon:before {background-position:top center;}

/* section05 */
.sec05 {padding: 135px 0;}
.sec05 .slide {position: relative; overflow: hidden; margin-bottom: 50px;}
.sec05 .items {margin: 0 -40px;}
.sec05 .item {padding: 0 40px; } 
.sec05 .item figure {position: relative; border-radius: 10px; overflow: hidden;}
.sec05 .item figure:before {content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #000; opacity: 0.3; z-index: 2; transition: all 0.4s;}
.sec05 .item.slick-center figure:before {opacity: 0;}
.sec05 .arrows {position: absolute; top: 50%; left: 50%; max-width: 1600px; width: 100%; padding: 0 90px; transform: translate(-50%,-50%); margin-top: 8px;}
.sec05 .slick-arrow {position: absolute; top: 0; width: 25px; height: 44px;}
.sec05 .slick-prev {left: 15px;}
.sec05 .slick-next {right: 15px;}
.sec05 .slick-prev:hover {left: 5px;}
.sec05 .slick-next:hover {right: 5px;} 
.sec05 .more-btn {text-align: center;}

/* section06 */
.sec06 {position: relative; padding: 125px 0 95px;}
.sec06:before {content: ''; width: 50%; height: 100%; background-image: url('../img/main/sec06-bg01.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; position: absolute; top: 0; left: 0; z-index: -2;}
.sec06:after {content: ''; width: 50%; height: 100%; background-image: url('../img/main/sec06-bg02.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; position: absolute; top: 0; right: 0; z-index: -2;}

.sec06 .row {display: flex;}
.sec06 .row > div {width:50%; text-align:center;}
.sec06 .text {padding: 0 15px;}
.sec06 .text h3 {font-size: 50px; font-weight: 700; line-height: 1.4em; color: #fff; margin-bottom: 20px; text-align: center;}
.sec06 .text p {font-size: 18px; line-height: 1.5em; color: #fff; margin-bottom: 43px; text-align: center;}
.sec06 .more-btn {text-align: center;}
.sec06 .more-btn a {color: #fff; border: 1px solid #fff;}
.sec06 .more-btn a:before {background-color: #fff;}
.sec06 .more-btn a:hover {color: #00a651;}
.sec06 .more-btn a:hover:before {width: 100%;}