@charset "utf-8";

.main-visual {margin-top: 110px;}
.main-visual .container {position: relative; max-width: 1870px; width: 100%; padding: 0 15px; margin: 0 auto;}
.main-visual .item {position: relative; height: calc(100vh - 110px); border-radius: 32px 32px 32px 100px; overflow: hidden;}
.main-visual .item .img-box {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; z-index: -1;}
.main-visual .item.slick-active .img-box {transform: scale(1.06); transition: all 4s;}
.main-visual .item .text-box {display: flex; justify-content: center;align-items: center; flex-direction: column; height: 100%; text-align: center; padding-bottom: 65px;}
.main-visual .item .text-box h2 {font-family: 'Cafe24Ohsquare'; font-size: 50px; line-height: 1.4em; color: #fff; margin-bottom: 27px;}
.main-visual .item .text-box h2 .highlight {position: relative;}
.main-visual .item .text-box h2 .highlight:before {z-index: -1; position: absolute; top: -3px; left: -10px; content: ''; width: 0; height: 100%; background: linear-gradient(90deg, #01A2D4 0%, #266F37 48.56%, #E8983B 100%); }
.main-visual .item .text-box p {font-size: 22px; font-weight: 600; line-height: 1.6em; color: #fff;}
.main-visual .item.slick-active .text-box h2 {animation: text-up 1.2s both 0.4s;}
.main-visual .item.slick-active .text-box h2 .highlight:before {width: calc(100% + 20px); transition: all 1s 1.2s;}
.main-visual .item.slick-active .text-box p {animation: text-up 1.2s both 0.6s;}
.main-visual .slick-dots {position: absolute; bottom: 155px; left: 50%; transform: translateX(-50%); display: flex; margin: 0 -3px;}
.main-visual .slick-dots li {padding: 0 3px;}
.main-visual .slick-dots li button {position: relative; width: 52px; height: 4px; background: #999; border:0; font-size: 0;}
.main-visual .slick-dots li button:after {position: absolute; top: 0; left: 0; content: ''; width: 0; height: 4px; background: #E0711D; transition: all 2s;}
.main-visual .slick-dots li.slick-active button:after {width: 100%;}
@keyframes text-up {
    0% {
        filter: blur(10px);
        transform: translateY(50px);
        opacity: 0;
    }

    100% {
        filter: blur(0);
        transform: translateY(0);
        opacity: 1;
    }
}
.consulting-banner {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; align-items: center; background: #fff; border-radius: 24px 24px 0 0; }
.consulting-banner .wrap {display: flex; justify-content: space-between; align-items: center; height: 100%; padding: 25px 43px 25px 75px;}
.consulting-banner h3 {position: relative; font-size: 32px; font-weight: 700; line-height: 1.4em; color: #222; padding-left: 60px; margin-right: 60px;}
.consulting-banner h3:before {position: absolute; top: 0; left: 0; content: ''; width: 39px; height: 39px; background: url('../img/main/logo_symbol.png') no-repeat center center/39px auto;}
.consulting-banner .cont {display: flex;}
.consulting-banner .input-wrap {display: flex; margin-right: 42px;}
.consulting-banner .input-wrap input {width: 270px; height: 50px; border: 1px solid #ccc; border-radius: 8px; padding: 0 25px; font-size: 16px; font-weight: 500; color: #000; background: #f5f5f5;}
.consulting-banner .input-wrap input::placeholder {color: #999;}
.consulting-banner .input-wrap input:focus {outline: none; background: #fff;}
.consulting-banner .input-wrap input::-webkit-outer-spin-button,
.consulting-banner .input-wrap input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
.consulting-banner .input-name {margin-right: 17px;}
.consulting-banner .terms-wrap {display: flex; justify-content: space-between; align-items: center; width: 292px;}
.consulting-banner .terms-wrap .terms-agree {display: flex; align-items: center;}
.consulting-banner .terms-wrap .terms-agree input[type="checkbox"] {position: relative; width: 20px; height: 20px; border: 2px solid #666; background: #f9f9f9 ; border-radius: 50%; appearance: none; margin: 0 !important;}
.consulting-banner .terms-wrap .terms-agree input[type="checkbox"]:after {opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); content: ''; width: 10px; height: 10px; background: #666; border-radius: 50%;}
.consulting-banner .terms-wrap .terms-agree input[type="checkbox"]:checked:after {opacity: 1;}
.consulting-banner .terms-wrap .terms-agree label {font-size: 16px; font-weight: 500; line-height: 1.6em; color: #666; margin-left: 8px;}
.consulting-banner .terms-wrap .pop_privacy {width: 96px; height: 30px; border: 1px solid #999; border-radius: 15px; font-size: 14px; font-weight: 500; color: #666; text-align: center; transition: all 0.5s;}
.consulting-banner .terms-wrap .pop_privacy:hover {background: #999; color: #fff;}
.consulting-banner .btn-submit {display: block; width: 350px; height: 100px; border-radius: 24px 24px 0 24px; background: #E0711D; font-size: 28px; font-weight: 700; color: #fff; border: 0;}

.section01 {padding-top: 120px;}
.section01 .sec-cont ul {display: flex; margin: 0 -18px;}
.section01 .sec-cont ul li {width: 25%; padding: 0 18px;}
.section01 .sec-cont ul li a {position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 315px; height: 100%; border-radius: 32px; border: 4px solid #EEE; padding: 48px 40px 56px; transition: all 0.5s;}
.section01 .sec-cont ul li a:hover {border: 4px solid #35BFEE; background: #35BFEE; box-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.25);}
.section01 .sec-cont ul li .text h3 {font-size: 32px; font-weight: 700; line-height: 1.4em; color: #222; margin-bottom: 13px; transition: all 0.5s;}
.section01 .sec-cont ul li a:hover .text h3 {color: #fff;}
.section01 .sec-cont ul li .text p {font-size: 16px; font-weight: 500; line-height: 1.6em; color: #666; transition: all 0.5s;}
.section01 .sec-cont ul li a:hover .text p {color: #f8f8f8;}
.section01 .sec-cont ul li .btn-more {opacity: 1; position: relative; display: inline-block; font-size: 18px; font-weight: 700; line-height: 1em; color: #666; padding-right: 30px; transition: all 0.3s;}
.section01 .sec-cont ul li a:hover .btn-more {opacity: 0;}
.section01 .sec-cont ul li .btn-more:after {position: absolute; top: 50%; right: 0; margin-top: -12px; content: ''; width: 24px; height: 24px; background: url('../img/main/btn_more.png') no-repeat center center;}
.section01 .sec-cont ul li .icon {position: absolute; bottom: 24px; right: 22px; width: 88px; height: 88px; background-repeat: no-repeat; background-position: center center;}
.section01 .sec-cont ul li:nth-child(1) .icon {background-image: url('../img/main/section01_icon01.png');}
.section01 .sec-cont ul li:nth-child(2) .icon {background-image: url('../img/main/section01_icon02.png');}
.section01 .sec-cont ul li:nth-child(3) .icon {background-image: url('../img/main/section01_icon03.png');}
.section01 .sec-cont ul li:nth-child(4) .icon {background-image: url('../img/main/section01_icon04.png');}

.section02 {padding: 120px 0 83px; background: url('../img/main/section02_bg.png') no-repeat right bottom;}
.section02 .section-title {text-align: center; margin-bottom: 40px;}
.section-title b {display: block; font-size: 20px; font-weight: 400; line-height: 1.4em; letter-spacing: 2px; color: #127939;}
.section-title h3 {font-size: 50px; font-weight: 800; line-height: 1.4em; color: #000;}
.section02 .sec-cont ul {display: flex; margin: 0 -18px;}
.section02 .sec-cont ul li {flex: 1; padding: 0 18px;}
.section02 .sec-cont ul li:nth-child(odd) {padding-bottom: 86px;}
.section02 .sec-cont ul li:nth-child(even) {padding-top: 86px;}
.section02 .sec-cont ul li a {position: relative; min-height: 524px; height: 100%; border-radius: 32px; padding: 48px 38px; overflow: hidden; transition: all 0.5s;}
.section02 .sec-cont ul li:nth-child(1) a {background: linear-gradient(160deg, #308453 37.82%, #0B1E13 133.15%);}
.section02 .sec-cont ul li:nth-child(2) a {background: linear-gradient(159deg, #BBA165 10.24%, #6C5520 58.21%);}
.section02 .sec-cont ul li:nth-child(3) a {background: linear-gradient(160deg, #3B76AE 30.12%, #183148 135.68%);}
.section02 .sec-cont ul li a:hover {box-shadow: 10px 16px 30px 0 rgba(0, 0, 0, 0.30);}
.section02 .sec-cont ul li h4 {position: relative; z-index: 5; font-size: 36px; font-weight: 300; line-height: 1.4em; color: #fff; margin-bottom: 37px;}
.section02 .sec-cont ul li h4 span {display: block; font-weight: 700;}
.section02 .sec-cont ul li .btn-more {opacity: 0; transform: translateY(20px); z-index: 5; position: relative; width: 148px; line-height: 56px; padding: 0 24px; font-size: 20px; font-weight: 700; color: #222; background: #fff; border-radius: 28px; transition: all 0.5s;}
.section02 .sec-cont ul li .btn-more:after {position: absolute; top: 50%; right: 24px; margin-top: -12px; content: ''; width: 24px; height: 24px; background: url('../img/main/btn_more.png') no-repeat center center;}
.section02 .sec-cont ul li a:hover .btn-more {opacity: 1; transform: translateY(0);}
.section02 .sec-cont ul li .backdrop {position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: right bottom; transition: all 0.5s; background-size: contain;}
.section02 .sec-cont ul li:nth-child(1) .backdrop {background-image: url('../img/main/section02_bg01.png');}
.section02 .sec-cont ul li:nth-child(2) .backdrop {background-image: url('../img/main/section02_bg02.png');}
.section02 .sec-cont ul li:nth-child(3) .backdrop {background-image: url('../img/main/section02_bg03.png');}
.section02 .sec-cont ul li a:hover .backdrop {transform: scale(1.04);}

.section03 {padding: 120px 0;}
.section03 .wrap {display: flex; height: 100%; margin: 0 -18px;}
.section03 .wrap > div {padding: 0 18px;}
.section03 .main-notice {width: 1%; flex: 1 1 auto;}
.section03 .main-notice .section-title {margin-bottom: 16px;}
.section03 .main-notice ol {border-top: 2px solid #222;}
.section03 .main-notice ol li {border-bottom: 1px solid #ccc ;}
.section03 .main-notice ol li a {display: flex; justify-content: space-between; align-items: center; padding: 32px; transition: all 0.5s;}
.section03 .main-notice ol li .title p {font-size: 20px; font-weight: 400; line-height: 1.6em; color: #000; height:calc(1.6em * 1 * 1); overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; padding-right: 45px; transition: all 0.5s;}
.section03 .main-notice ol li .date {font-size: 18px; font-weight: 400; line-height: 1.6em; color: #666; transition: all 0.5s;}
.section03 .main-notice ol li a:hover {background: #e7f1eb;}
.section03 .main-notice ol li a:hover .title p {color: #127939; font-weight: 700;}
.section03 .main-contact {max-width: 596px; width: 100%; margin-top: 86px;}
.section03 .main-contact .inner {display: flex; flex-direction: column; justify-content: space-between; height: 100%; background: #eaf2ed url('../img/main/section03_contact_bg.png') no-repeat right bottom; border-radius: 32px; padding: 50px 40px 33px 42px;}
.section03 .main-contact .text-box p:nth-child(1) {font-size: 32px; font-weight: 700; line-height: 1.4em; color: #444;}
.section03 .main-contact .text-box p:nth-child(2) {font-size: 22px; font-weight: 400; line-height: 1.6em; color: #666; margin-bottom: 8px;}
.section03 .main-contact .text-box a {display: inline-block; font-size: 50px; font-weight: 700; line-height: 1.4em; color: #222;}
.section03 .main-contact .btn a {display: flex; justify-content: center; align-items: center; padding: 16px; border-radius: 16px; background: #127939; text-align: center; transition: all 0.5s;}
.section03 .main-contact .btn a:hover {background: #1b8842; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);}
.section03 .main-contact .btn .icon {width: 40px; height: 40px; background: url('../img/main/section03_icon_kakao.png') no-repeat center center;}
.section03 .main-contact .btn .text {position: relative; padding-left: 28px; margin-left: 28px; font-size: 20px; font-weight: 700; line-height: 1.6em; color: #fff;}
.section03 .main-contact .btn .text:before {position: absolute; top: 50%; left: 0; margin-top: -10px; content: ''; width: 1px; height: 20px; background: rgba(255,255,255,0.2);}

.section04 {border-top: 1px solid #eee;}
.section04 .wrap {display: flex; align-items: center; height: 90px;}
.section04 .wrap > div {position: relative;}
.section04 .wrap > div:after {position: absolute; top: 50%; right: 0; margin-top: -10px; content: ''; width: 1px; height: 20px; background: #eee;}
.section04 .wrap > div:last-child:after {display: none; }
.section04 .wrap > div a {padding: 0 80px;}
.section04 .wrap > div:nth-child(1) a {padding-left: 20px;}
.section04 .wrap > div:last-child a {padding-right: 20px;}