/* main banner */
.main-visual {width: 100%; height: 100vh; position: relative;}
.main-visual .visual-wrap {width: 100%; height: inherit; display: flex; flex-direction: column; justify-content: flex-end;}

.main-visual .mb-slider {position: absolute; top: 0; left: 0; width: 100%; height: auto; z-index: -1;}
.main-visual .mb-slider .slide-item {height: 100vh; background-position: center; background-repeat: no-repeat; background-size: cover;}
.main-visual .mb-slider .slide-item.slick-active {animation: visualBg 3s ease-out forwards;}
.main-visual .mb-slider .slide-item.vis1 {background-image:url('../img/main_visual1.jpg');}
.main-visual .mb-slider .slide-item.vis2 {background-image:url('../img/main_visual2.jpg');}
.main-visual .mb-slider .slide-item.vis3 {background-image:url('../img/main_visual3.jpg');}

.main-visual .mb-text h2, .main-visual .mb-text p {text-shadow: rgba(0, 0, 0, 5) 0 0 3.5rem;}
.main-visual .mb-text {width: 100%; max-width: var(--contents-inner); padding-left: 4em; color: #fff; position: absolute; top: 70%; left: 30%; transform: translate(-30%, -70%);}
.main-visual .mb-text h2 {font-weight: var(--fontBold); font-size: 4em; letter-spacing: -0.02em; line-height: 1; text-transform: uppercase; white-space: pre-line;}
.main-visual .mb-text p {padding-top: 1em; font-weight: var(--fontSemiBold); font-size: 1.5em; white-space: pre-line;}
.main-visual .mb-text a {display: inline-block; padding: .75rem 3.2rem; margin-top: 3.6em; border: 2px solid #fff; border-radius: 50px; font-weight: var(--fontSemiBold); font-size: 1.2em; text-transform: uppercase;}
.main-visual .mb-text a:hover {background-color: #b84703; border-color: #b84703; color: #fff; text-decoration: none;}

.main-visual .slider-control {width: 100%; display: flex; justify-content: center; align-items: center; gap: 0 8px; position: absolute; bottom: 8em; left: 0;}
.main-visual .slider-control .slick-dots {display: flex; align-items: center; gap: 0 8px;}
.main-visual .slider-control .slick-dots li button {width: 2rem; height: 2rem; font-size: 0; vertical-align: middle; border: 1px solid #fff; border-radius: 100%;}
.main-visual .slider-control .slider-dots .slick-dots .slick-active button {background-color: white;}

@keyframes visualBg {
    0%		{ transform:scale(1.1); opacity: .9;}
    100%	{ transform:scale(1); opacity: 1;}
}
@media (max-width: 1440px) {
  .main-visual .mb-text h2 {font-size: 4em;}
  .main-visual .mb-text p {font-size: 1.6em;}
}
@media (max-width: 1024px) {
  .main-visual .mb-text {padding-left: 3em;}
  .main-visual .mb-text h2 {font-size: 3em;}
  .main-visual .mb-text p {font-size: 1.25em;}
  .main-visual .slider-control {bottom: 2em;}
  .main-visual .slider-control .slick-dots li button {width: 1.6rem; height: 1.6rem;}
}
@media (max-width: 768px) {
    .main-visual, .main-visual .mb-slider .slide-item {height: 90vh;}
    .main-visual .mb-slider .slide-item.vis1 {background-position: center right 65%;}
    .main-visual .mb-slider .slide-item.vis2 {background-position: center right 25%;}
    .main-visual .mb-slider .slide-item.vis3 {background-position: center right 35%;}
    .main-visual .mb-text {padding-left: 2em;}
    .main-visual .mb-text h2 {font-size: 2em;}
    .main-visual .mb-text p {font-size: 1.125em;}
    .main-visual .mb-text a {font-size: 1em; margin-top: 2em;}
    .main-visual .slider-control {bottom: 1.6em;}
    .main-visual .slider-control .slick-dots li button {width: 1.4rem; height: 1.4rem;}
}


.main-cont .m-inner .sec-title {font-weight: var(--fontExtraBold); font-size: 2.6em;}
.main-cont .m-inner .sec-desc {font-size: 1.2em; line-height: 1.6;}
.main-cont .m-inner .sec-cate {font-weight: var(--fontExtraBold); font-size: 1.2em; line-height: 1.6; color: #e95200;}

.business-sec {width: 100%; height: auto; padding-top: 5em;}
.business-sec .m-inner {width: 100%; max-width: var(--contents-inner); margin: 0 auto;}
.business-sec .sec-head {text-align: center;}

.business-sec .busi-wrap {width: 100%; height: auto; margin-top: 1.5em;}
.business-sec .busi-wrap ul {display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: minmax(20.8em, auto); gap: .8em;}
.business-sec .busi-wrap ul li {position: relative; width: 100%; height: 100%; border-radius: 1.6rem; overflow: hidden; background-color: #000;}
.business-sec .busi-wrap ul li a {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-weight: var(--fontBold); font-size: 1.8em; color: #fff; text-shadow: 0 0 30px #000; position: absolute; top: 0; left: 0; z-index: 1; padding: 1em; text-align: center;}
.business-sec .busi-wrap ul li a:hover {text-decoration: none;}
.business-sec .busi-wrap ul li div {width: inherit; height: inherit; background-repeat: no-repeat; background-position: center; background-size: cover; position: absolute; top: 0; left: 0; transition: all .3s linear;}
.business-sec .busi-wrap ul li:hover div {transform: scale(1.2); opacity: .75;}

.business-sec .busi-wrap ul .busi-item1 {background-image: url("../img/busi_item1.jpg");}
.business-sec .busi-wrap ul .busi-item2 {background-image: url("../img/busi_item2.jpg");}
.business-sec .busi-wrap ul .busi-item3 {background-image: url("../img/busi_item3.jpg");}
.business-sec .busi-wrap ul .busi-item4 {background-image: url("../img/busi_item4.jpg");}
.business-sec .busi-wrap ul .busi-item5 {background-image: url("../img/busi_item5.jpg");}
.business-sec .busi-wrap ul .busi-item6 {background-image: url("../img/busi_item6.jpg");}


@media (max-width: 1440px) {
  .main-cont .m-inner .sec-title {font-size: 2.8em;}
  .main-cont .m-inner .sec-cate,
  .main-cont .m-inner .sec-desc {font-size: 1.125em;}

  .business-sec .m-inner {padding: 0 4rem;}
  .business-sec .solut-wrap {column-gap: 2rem;}
}

@media (max-width: 1024px) {
  .main-cont .m-inner .sec-title {font-size: 2.2em;}
  .main-cont .m-inner .sec-cate,
  .main-cont .m-inner .sec-desc {font-size: 1em;}

  .business-sec .m-inner {padding: 0 2rem;}
  .business-sec .busi-wrap ul li a {font-size: 1.4em;}
}
@media (max-width: 768px) {
  .business-sec {padding-top: 2.5em;}
  .business-sec .busi-wrap ul {grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 568px) {
  .business-sec .busi-wrap ul {grid-template-columns: 1fr; grid-auto-rows: minmax(10em, auto);}
}

.company-sec {width: 100%; height: auto; padding: 7.5em 0;}
.company-sec .m-inner {width: 100%; max-width: var(--contents-inner); margin: 0 auto; display: flex; align-items: center; gap: 3rem;}
.company-sec .m-inner .comp-image {flex: 1; flex-shrink: 0;}
.company-sec .m-inner .comp-image img {border-radius: 3rem;}
.company-sec .m-inner .comp-text {flex: 1; font-weight: var(--fontMedium);}
.company-sec .m-inner .comp-message .sec-desc {white-space: pre-line;}
.company-sec .m-inner .comp-message .sec-desc:nth-child(3) {margin-top: 1.2em;}
.company-sec .m-inner .comp-message .sec-desc:last-child {margin-top: 1em;}
.company-sec .m-inner .comp-award {padding-top: 5em;}
.company-sec .m-inner .comp-award .award-title {font-weight: var(--fontBold); font-size: 2.2em; color: #e95200;}
.company-sec .m-inner .comp-award > p {padding-top: 1em;}
.company-sec .m-inner .comp-award .award-detail {margin-top: 1em;}
.company-sec .m-inner .comp-award .award-detail h4 {font-weight: var(--fontBold);}
.company-sec .m-inner .comp-award .award-detail .list {margin-top: .5em;}
.company-sec .m-inner .comp-award .award-detail .list.bullet-dot > li::before {top: 50%; transform: translateY(-50%);} 

@media (max-width: 1440px) {
  .company-sec .m-inner {padding: 0 4rem;}
  .company-sec .m-inner .comp-award .award-title {font-size: 2.2em;}
}
@media (max-width: 1024px) {
  .company-sec {height: auto; padding: 5em 0;}
  .company-sec .m-inner {padding: 0 2rem; align-items: flex-start;}
  .company-sec .m-inner .comp-award {padding-top: 2.5em;}
  .company-sec .m-inner .comp-award .award-title {font-size: 1.8em;}
}
@media (max-width: 768px) {
  .company-sec .m-inner {flex-direction: column;}
  .company-sec .m-inner .comp-image {width: 100%;}
  .company-sec .m-inner .comp-image img {width: 50%;}
  .company-sec .m-inner .comp-text {width: 100%;}
  .company-sec .m-inner .comp-message .sec-desc {white-space: normal;}
}
@media (max-width: 568px) {
  .company-sec .m-inner .comp-image img {width: 100%;}
}