@charset "utf-8";

.main {position: relative;}
.main-inner {display: flex; flex-direction: row-reverse;}
.main-content {width: calc(100% - 485px);}
.main-visual {position: relative; width:100%; height:100vh;}
.main-visual .main-slide .item {position: relative; width: 100%; height: 100vh;}
.main-visual .main-slide .img-box {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; transform: scale(1.1); z-index: 1;}
.main-visual .item.slick-active .img-box {transform: scale(1); transition: all 3.5s;}
.main-visual .text-slide {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 1145px; width: 100%; padding: 0 15px; z-index: 5;}
.main-visual .text-slide .item {height: 100%;}
.main-visual .text-slide .text-box {height: 100%; margin-top: 150px;}
.main-visual .text-slide .text-box h2 {font-size: 57px; font-weight: 700; line-height: 1.4em; letter-spacing: -1.14px; color: #fff; text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); margin-bottom: 8px; }
.main-visual .text-slide .text-box p {font-size: 33px; font-weight: 600; line-height: 1.5em; letter-spacing: -0.66px; color: #fff;}
.main-visual .text-slide .slick-active .text-box h2 {animation: text-up 1.2s both 0.4s;}
.main-visual .text-slide .slick-active .text-box p {animation: text-up 1.2s both 0.5s;}
@keyframes text-up {
    0% {
        filter: blur(5px);
        transform: translateY(-60px);
        opacity: 0;
    }

    100% {
        filter: blur(0);
        transform: translateY(0);
        opacity: 1;
    }
}

.main-visual .paging {margin-top: 40px;}
.main-visual .slick-dots {display: flex; gap: 14px;}
.main-visual .slick-dots button {width: 12px; height: 12px; border-radius: 6px; background: #fff; border:0; font-size: 0; transition: all 0.5s;}
.main-visual .slick-dots .slick-active button {width: 80px;}

.main-section-title {text-align: center; margin-bottom: 100px;}
.main-section-title .en-title {font-family: "Poppins", sans-serif; font-size: 20px; font-weight: 600; line-height: 1.85em; letter-spacing: 6.6px; color: #084C98; margin-bottom: 3px;}
.main-section-title h3 {font-family: "Poppins", sans-serif; font-size: 54px; font-weight: 600; line-height: 1.29em; letter-spacing: -1.08px; color: #333; margin-bottom: 14px;}
.main-section-title .ko-desc {font-size: 18px; line-height: 1.55em; letter-spacing: -0.36px; color: #767676;}
.main-section-title-wh .en-title {color: #fff;}
.main-section-title-wh h3 {color: #fff;}
.main-section-title-wh .ko-desc {color: #fff;}

.main-service {background: url('../img/main/service-bg.jpg') no-repeat 50% 50% / cover;}
.main-service .section-inner {position: relative; display: flex; flex-direction: column; min-height: 800px;}
.main-service .main-section-title {position: absolute; top: 180px; left: 50%; transform: translateX(-50%); width: calc(100% - 30px); z-index: 5;}
.main-service .main-section-title-wh .ko-desc {display: inline-block; background: #333; border-radius: 30px; padding: 3px 17px;}
.main-service .service-items {flex: 1; display: flex; align-items: stretch; height: auto;}
.main-service .service-item {position: relative; flex: 1; display: flex; flex-direction: column; padding: 435px 0 80px;}
.main-service .service-item:after {position: absolute; bottom: 0; left: 0; content: ''; width: 100%; height: 0; transition: all 0.8s;}
.main-service .service-item:hover:after {height: 100%;}
.main-service .service-item:nth-child(odd):after {background: rgba(8, 76, 152, 0.70);}
.main-service .service-item:nth-child(even):after {background: rgba(130, 124, 88, 0.70);}
.main-service .service-item-text {position: relative; height: 100%; text-align: center; padding: 30px; z-index: 5;}
.main-service .service-item:not(:last-child) .service-item-text {border-right: 1px solid rgba(255, 255, 255, 0.23);}
.main-service .service-item-text .num {font-size: 24px; font-weight: 700; line-height: 1.54em; letter-spacing: -0.48px; color: #fff; margin-bottom: 22px;}
.main-service .service-item-text .title {font-size: 24px; font-weight: 700; line-height: 1.54em; letter-spacing: -0.48px; color: #fff; margin-bottom: 22px;}
.main-service .service-item-text .desc {font-size: 18px; line-height: 1.55em; letter-spacing: -0.36px; color: #fff;}

.main-problem {padding: 180px 0 115px; background: url('../img/main/problem-bg.jpg') no-repeat 50% 50%/cover;}
.main-problem .problem-list {margin-bottom: 105px;}
.main-problem .problem-items {display: flex; flex-wrap: wrap; margin: -15px -20px;}
.main-problem .problem-item {width: 50%; padding: 15px 20px;}
.main-problem .problem-item-inner {height: 100%; padding: 37px 45px 50px; border-radius: 10px; background: linear-gradient(115deg, rgba(255, 255, 255, 0.87) 63.2%, rgba(195, 195, 195, 0.23) 100%); box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);}
.main-problem .problem-title {margin-bottom: 28px;}
.main-problem .problem-title h4 {position: relative; font-size: 22px; font-weight: 500; line-height: 1.68em; letter-spacing: -0.44px; color: #333; padding-left: 42px;}
.main-problem .problem-title h4:before {position: absolute; top: 1px; left: 0; content: ''; width: 32px; height: 32px; background-repeat: no-repeat; background-position: left center;}
.main-problem .problem-item:nth-child(1) .problem-title h4:before {background-image: url('../img/main/problem-icon01.png');}
.main-problem .problem-item:nth-child(2) .problem-title h4:before {background-image: url('../img/main/problem-icon02.png');}
.main-problem .problem-item:nth-child(3) .problem-title h4:before {background-image: url('../img/main/problem-icon03.png');}
.main-problem .problem-item:nth-child(4) .problem-title h4:before {background-image: url('../img/main/problem-icon04.png');}
.main-problem .problem-item:nth-child(5) .problem-title h4:before {background-image: url('../img/main/problem-icon05.png');}
.main-problem .problem-item:nth-child(6) .problem-title h4:before {background-image: url('../img/main/problem-icon06.png');}
.main-problem .problem-desc {font-size: 18px; line-height: 1.55em; letter-spacing: -0.36px; color: #333; word-break: break-all;}
.main-problem .problem-desc b {color: #084C98;}
.main-problem .problem-overview-text {text-align: center;}
.main-problem .problem-overview-text h5 {font-size: 52px; font-weight: 800; line-height: 1.21em; letter-spacing: -1.04px; color: #333; margin-bottom: 26px;}
.main-problem .problem-overview-text h5 span {position: relative; color: #084C98;}
.main-problem .problem-overview-text h5 span:before {position: absolute; top: -13px; left: 50%; transform: translateX(-50%); content: ''; width: 8px; height: 8px; background: #084C98; border-radius: 50%;}
.main-problem .problem-overview-text .desc01 {font-size: 35px; font-weight: 300; line-height: 1.6em; letter-spacing: -0.7px; color: #333;}
.main-problem .problem-overview-text .desc02 {font-size: 44px; font-weight: 300; line-height: 1.6em; letter-spacing: -0.88px; color: #333;}
.main-problem .problem-overview-text .desc02 b {font-weight: 500;}

.main-solution {padding-top: 180px;}
.main-solution .solution-list {margin-bottom: 120px;}
.main-solution .solution-items {margin: 0 -23px;}
.main-solution .solution-items .slick-track {display: flex;}
.main-solution .solution-item {position: relative; height: auto; display: flex; padding: 45px 23px 0;}
.main-solution .solution-item:before {position: absolute; top: 0; left: 50%; transform: translateX(-50%); content: ''; width: calc(100% - 46px); height: 4px; background: #333;}
.main-solution .solution-item-inner {position: relative; display: flex; flex-direction: column; width: 100%; padding-bottom: 218px; border-radius: 10px; overflow: hidden;}
.main-solution .solution-text {position: relative;}
.main-solution .solution-text h4 {font-size: 24px; font-weight: 700; line-height: 1.54em; letter-spacing: -0.48px; color: #333; margin-bottom: 24px;}
.main-solution .solution-text p {font-size: 18px; font-weight: 400; line-height: 1.55em; letter-spacing: -0.36px; color: #333; word-break: break-all;}
.main-solution .solution-text p b {font-weight: 700;}
.main-solution .solution-backdrop {position: absolute; width: 100%; height: 188px; bottom: 0; left: 0; border-radius: 10px; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; transition: all 0.6s;}
.main-solution .solution-item-inner:hover .solution-backdrop {height:100%;}
.main-solution .slick-current .solution-item-inner .solution-backdrop {height:100%;}
.main-solution .solution-item01 .solution-backdrop {background-image: url('../img/main/solution-img01.jpg');}
.main-solution .solution-item02 .solution-backdrop {background-image: url('../img/main/solution-img02.jpg');}
.main-solution .solution-item03 .solution-backdrop {background-image: url('../img/main/solution-img03.jpg');}
.main-solution .solution-item04 .solution-backdrop {background-image: url('../img/main/solution-img04.jpg');}
.main-solution .solution-item05 .solution-backdrop {background-image: url('../img/main/solution-img05.jpg');}
.main-solution .solution-item06 .solution-backdrop {background-image: url('../img/main/solution-img06.jpg');}
.main-solution .solution-item07 .solution-backdrop {background-image: url('../img/main/solution-img07.jpg');}
.main-solution .solution-item08 .solution-backdrop {background-image: url('../img/main/solution-img08.jpg');}
.main-solution .solution-over {opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 70px 45px; background: rgba(8, 76, 152, 0.8); }
.main-solution .solution-over h4 {font-size: 24px; font-weight: 700; line-height: 1.54em; letter-spacing: -0.48px; color: #fff; margin-bottom: 24px; transform: translateY(20px); opacity: 0;/* transition: all 0.5s; */}
.main-solution .solution-over p {font-size: 18px; font-weight: 400; line-height: 1.55em; letter-spacing: -0.36px; color: #fff; transform: translateY(20px); opacity: 0; word-break: break-all;}
.main-solution .solution-over p b {font-weight: 700;}
.main-solution .solution-item-inner:hover .solution-over {opacity: 1; transition: opacity 0.6s 0.4s;}
.main-solution .solution-item-inner:hover .solution-over h4,
.main-solution .solution-item-inner:hover .solution-over p {transform: translateY(0); opacity: 1; transition: all 0.6s 0.4s;}
.main-solution .slick-current .solution-item-inner .solution-over {opacity: 1; transition: opacity 0.6s 0.4s;}
.main-solution .slick-current .solution-item-inner .solution-over h4,
.main-solution .slick-current .solution-item-inner .solution-over p {transform: translateY(0); opacity: 1; transition: all 0.6s 0.4s;}
.main-solution .solution-controler {display: flex; justify-content: flex-end; align-items: center; gap: 26px; margin-top: 40px; margin-right: 20px;}
.main-solution .solution-controler .paging {display: flex; align-items: center; gap: 10px; font-family: "Poppins", sans-serif;}
.main-solution .solution-controler .paging .current {font-size: 31px; font-weight: 500; line-height: 1.2em; letter-spacing: -0.62px; color: #084C98;}
.main-solution .solution-controler .paging .divider {width: 1px; height: 10px; background: #999;}
.main-solution .solution-controler .paging .total {font-size: 18px; line-height: 1.5em; letter-spacing: -0.36px; color: #767676;}
.main-solution .solution-controler .arrows {display: flex; gap: 10px;}
.main-solution .solution-controler .slick-arrow {width: 38px; height: 38px; border: 1px solid #999; border-radius: 50%; font-size: 0; transition: all 0.5s;}
.main-solution .solution-controler .slick-arrow:hover {border: 1px solid ##084C98;}
.main-solution .solution-controler .slick-prev {background: #fff url('../img/main/solution-btn-prev.png') no-repeat 50% 50%;}
.main-solution .solution-controler .slick-next {background: #fff url('../img/main/solution-btn-next.png') no-repeat 50% 50%;}
.main-solution .solution-controler .slick-prev:hover {background: #084C98 url('../img/main/solution-btn-prev-over.png') no-repeat 50% 50%;}
.main-solution .solution-controler .slick-next:hover {background: #084C98 url('../img/main/solution-btn-next-over.png') no-repeat 50% 50%;}
.main-solution .certification-list {position: relative; padding-bottom: 127px;}
.main-solution .certification-list:before {position: absolute; bottom: 0; left: 0; content: ''; width: 100%; height: 70%; background: #084C98;}
.main-solution .certification-items {margin: 0 -20px;}
.main-solution .certification-item {padding: 0 20px;}
.main-solution .certification-item .pic {position:relative; height:0; padding-bottom:133.333%; border-radius: 10px; overflow:hidden; transition:all 0.6s;}
.main-solution .certification-item .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.6s;}

.main-process {padding: 180px 0 190px;}
.main-process .process-items {display: flex;}
.main-process .process-item {position: relative; width: 25%; padding: 0 30px;}
.main-process .process-item:after {position: absolute; top: 27%; right: 0; content: ''; width: 1px; height: 38%; background: rgba(153, 153, 153, 0.39);}
.main-process .process-item:last-child:after {display: none;}
.main-process .process-num-title {font-size: 20px; font-weight: 400; line-height: 1.65em; letter-spacing: -0.4px; color: #fff; text-align: center; padding: 3px 25px; border-radius: 39px; background: #084C98; margin-bottom: 30px;}  
.main-process .process-num-title b {font-weight: 700;}
.main-process .process-icon {text-align: center; margin-bottom: 10px;}
.main-process .process-num {position: relative; font-family: "Poppins", sans-serif; font-size: 132px; font-weight: 600; line-height: 0.25em; letter-spacing: -2.64px; color: #f2f2f2; text-align: center; z-index: -1; margin-bottom: 4px;}
.main-process .process-title {min-height: 48px; font-size: 20px; font-weight: 700; line-height: normal; color: #333; text-align: center; margin-bottom: 19px;}
.main-process .process-desc {display: flex; justify-content: center;}
.main-process .process-desc li {position: relative; font-size: 18px; line-height: 1.4em; color: #767676; padding-left: 26px;}
.main-process .process-desc li:before {position: absolute; top: 10px; left: 10px; content: ''; width: 3px; height: 3px; border-radius: 50%; background: #767676;}

.main-portfolio {padding: 180px 0 130px; background: url('../img/main/portfolio-bg.jpg') no-repeat 50% 50%/cover;}
.main-portfolio .portfolio-list {margin-bottom: 80px;}
.main-portfolio .portfolio-items {display: flex; flex-wrap: wrap; margin: -19px;}
.main-portfolio .portfolio-item {width: 33.3333%; padding: 19px;}
.main-portfolio .portfolio-item a {border-radius: 10px; background: #fff;}
.main-portfolio .portfolio-item-img .pic {position:relative; height:0; padding-bottom:71.88%; border-radius: 10px; overflow:hidden; transition:all 0.6s;}
.main-portfolio .portfolio-item-img .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.6s;}
.main-portfolio a:hover .portfolio-item-img .pic img {transform: scale(1.12) translateY(-50%);}
.main-portfolio .portfolio-item-text {padding: 27px 20px 23px;}
.main-portfolio .portfolio-item-title {font-size: 20px; font-weight: 700; line-height: 1.2em; color: #333; margin-bottom: 12px; height:calc(1.2em * 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;}
.main-portfolio .portfolio-item-desc {font-size: 18px; line-height: 1.4em; color: #767676; margin-bottom: 20px; height:calc(1.4em * 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;}
.main-portfolio .portfolio-item-date {font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 500; line-height: 1.4em; color: #999;}
.main-portfolio .search-box {position: relative; max-width: 464px; width: 100%; margin: 0 auto 34px;}
.search-box input {width: 100%; height: 44px; padding: 0 46px 0 18px; border: 1px solid #084C98; background: #D9D9D9; font-size: 18px; letter-spacing: -0.36px; color: #333; outline: none;}
.search-box input::placeholder {color: #999;}
.search-box .btn-search {position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; background: url('../img/main/portfolio-btn-search.png') no-repeat center; border: none; cursor: pointer;}

.pagination {display: flex; align-items: center; justify-content: center; gap: 30px;}
.pagination button {width: 24px; height: 24px; background-color: transparent; border: 0; transition: all 0.5s;}
.pagination button:hover {opacity: 0.5;}
.pages {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1px;}
.pages a {display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; font-size: 18px; letter-spacing: -0.36px; color: #084C98; text-align: center;}
.pages a.active {background: #084C98; border-radius: 50%; color: #fff;}

.contact-form {width: 485px;}
.contact-form-inner {position: sticky; top: 0; height: 100vh; max-height: 100vh; overflow-y: auto; border-left: 10px solid #084C98;}
.contact-form .form-banner {text-align: center; background: linear-gradient(90deg, #084C98 0%, #4EA043 100%); box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); padding: 25px 10px;}
.contact-form .form-banner p {position: relative; padding-left: 45px; display: inline-block; font-size: 22px; font-weight: 700; line-height: normal; color: #fff; text-align: center;}
.contact-form .form-banner p:before {position: absolute; top: 0; left: 0; content: ''; width: 24px; height: 24px; background: url('../img/main/icon-search.png') no-repeat 50% 50%;}
.contact-form .form-wrap {padding: 26px 24px 40px;}
.contact-form .form-header {display: flex; align-items: center; flex-wrap: wrap; gap: 10px 47px; margin-bottom: 20px;}
.contact-form .form-header h3 {font-size: 30px; font-weight: 700; letter-spacing: -0.6px; color: #333;}
.contact-form .form-header a {position: relative; padding-left: 31px; font-family: "Poppins", sans-serif; font-size: 30px; font-weight: 600; line-height: normal; color: #333;}
.contact-form .form-header a:before {position: absolute; top: 10px; left: 0; content: ''; width: 23px; height: 23px; background: url('../img/main/icon-tel.png') no-repeat 50% 50%;}
.contact-form .form-row {display: flex;}
.contact-form .form-row:not(:last-child) {margin-bottom: 18px;}
.contact-form .form-title {max-width: 82px; width: 100%;}
.contact-form .form-title label {font-size: 18px; font-weight: 600; line-height: 1.66em; letter-spacing: -0.36px; color: #333;}
.contact-form .form-title .required {color: #E65656;}
.contact-form .form-field { width: 1%; flex: 1 1 auto;}
.contact-form .form-field .input-group {display: flex; flex-direction: column; gap: 15px;}
.contact-form .form-field .input-group-row {display: flex; gap: 15px;}
.contact-form .form-field .input-group-row button {width: 150px; font-size: 20px; color: #fff; border-radius: 15px; border: none; background: #084C98;}
.contact-form .form-field input[type="text"] {width: 100%; height: 60px; padding: 0 19px; border: 1px solid #E8E8E8; border-radius: 15px; font-size: 20px; letter-spacing: -0.4px; color: #333;}
.contact-form .form-field input[type="text"]:placeholder {color: #767676;}
.contact-form .form-field .check-group {display: flex; flex-wrap: wrap; gap: 13px 5px;}
.contact-form .form-field .check {width: calc(50% - 5px); display: flex; gap: 15px; cursor: pointer;}
.contact-form .form-field .check input {display: none;}
.contact-form .form-field .check-mark {max-width: 16px; width: 100%; height: 16px; border: 1px solid #999; border-radius: 50%; position: relative; margin-top: 6px;}
.contact-form .form-field .check input:checked + .check-mark {border-color: #084C98;}
.contact-form .form-field .check-mark::after {content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; background: #084C98; border-radius: 50%; transform: translate(-50%, -50%) scale(0); transition: 0.2s;}
.contact-form .form-field .check input:checked + .check-mark::after {transform: translate(-50%, -50%) scale(1);}
.contact-form .form-field .check-text {width: 1%; flex: 1 1 auto; font-size: 20px; line-height: 1.4em; letter-spacing: -0.4px; color: #000;}
.contact-form .form-agree {padding-top: 20px; margin-top: 20px; border-top: 1px solid #F2F2F2;}
.contact-form .form-agree h3 {font-size: 24px; font-weight: 700; line-height: normal; color: #333; margin-bottom: 19px;}
.contact-form .form-agree .agree-row {/* display: flex; align-items: center; flex-wrap: wrap; gap: 4px; */}
.contact-form .form-agree .agree-check {display: flex; gap: 15px; cursor: pointer; font-size: 18px; font-weight: 600; line-height: 1.66em; letter-spacing: -0.36px; color: #333;}
.contact-form .form-agree .agree-check input {display: none;}
.contact-form .form-agree .check-mark {max-width: 16px; width: 100%; height: 16px; border: 1px solid #999; position: relative; margin-top: 8px;}
.contact-form .form-agree .check-mark::after {content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: 0.2s;}
.contact-form .form-agree .agree-check input:checked + .check-mark {background: #084C98; border-color: #084C98;}
.contact-form .form-agree .agree-check input:checked + .check-mark::after {transform: rotate(45deg) scale(1);}
.contact-form .form-agree .agree-check .check-text b {font-weight: 600; color: #E21F1F;}
.contact-form .form-agree a {display: inline-block; font-size: 18px; font-weight: 600; line-height: 1.66em; letter-spacing: -0.36px; color: #333;}
.contact-form .btn-area {margin-top: 20px; text-align: center;}
.contact-form .btn-submit {font-size: 20px; font-weight: 600; line-height: 1.5em; letter-spacing: -0.4px; color: #fff; text-align: center; padding: 14px 73px; background: #084C98; border-radius: 64px; border: 2px solid #084C98; transition: all 0.5s;}
.contact-form .btn-submit:hover {color: #084C98; background: #fff;}