@charset "utf-8";


/* common */
.btn-basic {position: relative; display: inline-block; padding: 20rem 25rem; padding-right: 70rem; font-size: 15rem; font-weight: 600; color: #fff; border-radius: 100rem; background: #111; transition: .3s;}
.btn-basic i {position: absolute; right: 25rem; top: 50%; display: inline-block; width: 15rem; height: 13rem; background:url(../images/common/arrow_w.svg) no-repeat center / contain; transform: translateY(-50%); transition: .3s;}
.btn-basic:hover {background: #333;}
.btn-basic:hover i {right: 20rem;}

@media (max-width:480px){
    .btn-basic {padding: 15rem 20rem; padding-right: 55rem; font-size: 14rem;}
    .btn-basic i {right: 17rem; width: 13rem; height: 13rem;}
}

/* main-visual */
.main-visual {height: var(--height-full);}
.main-visual .mainVisual {height: 100%;}
.main-visual .swiper-slide i {position: absolute; left:0; top:0; width: 100%; height: 100%; background-repeat:no-repeat; background-size: cover; background-position: center;}
.main-visual .swiper-slide-active > i {animation:visualScale 5s both;}
.main-visual .slide01 i {background-image: url(../images/main/visual01.jpg);}
.main-visual .slide02 i {background-image: url(../images/main/visual02.jpg);}

.main-visual__pagination {display: flex; align-items: center; margin-top: 70rem;}
.main-visual__pagination .swiper-button-next,
.main-visual__pagination .swiper-button-prev {position: relative; left: auto !important; top: auto !important; right: auto !important; display: inline-block; width: 20rem; height: 20rem; margin-top: 0 !important;}
.main-visual__pagination .swiper-button-next::after,
.main-visual__pagination .swiper-button-prev::after {position: absolute; left:0; top:0; content:'' !important; width: 100%; height: 100%; background: url(../images/common/arrow_w.svg) no-repeat center / contain;}
.main-visual__pagination .swiper-button-prev::after {transform: scaleX(-1);}
.main-visual__pagination .swiper-button-prev {margin-right: 10rem;}
.main-visual__pagination .swiper-button-next {margin-left: 10rem;}
.main-visual__pagination .swiper-pagination {position: relative; top: auto; bottom: auto; display: inline-block; width: auto; font-size: 0;}
.main-visual__pagination .swiper-pagination::after {position: absolute; left: 50%; top: 50%; content:''; width: 3rem; height: 3rem; border-radius: 100%; background: #fff; transform: translate(-50%, -50%);}
.main-visual__pagination .swiper-pagination > span {margin: 0 15rem; font-size: 16rem; font-weight: 800; color: #fff;}
.main-visual__pagination .swiper-pagination > .swiper-pagination-current {font-weight: 1000; color: var(--color-point);}

.main-visual__txt {position: absolute; left:0; top: 0; display: flex; align-items: center; width: 100%; height: 100%; padding-top: 100rem; box-sizing: border-box; z-index: 5;}
.main-visual__title {color: #fff;}
.main-visual__title em {font-size: 24rem; font-weight: 700;}
.main-visual__title h2 {margin: 20rem 0 50rem; font-size: 70rem;}
.main-visual__title p {opacity: .7; font-size: 17rem; line-height: 1.7;}

@media (max-width:1300px){
	.main-visual__txt .inr {width: 100%;}
    .main-visual__title {width: 50%;}
    .main-visual__title em {font-size: 20rem;}
    .main-visual__title h2 {margin: 15rem 0 40rem; font-size: 55rem;}
}

@media (max-width:1023px){
	.main-visual__txt {padding-top: 80rem;}
}

@media (max-width:767px){
    .main-visual__title {width: 100%;}
    .main-visual__title h2 {margin-bottom: 30rem;}
    .main-visual__pagination {margin-top: 30rem;}
}

@media (max-width:500px){
    .main-visual {position: relative; height: auto; overflow: hidden;}
    .main-visual .mainVisual {position: absolute; left:0; top:0; width: 100%; height: 100%;}

    .main-visual__txt {position: relative; left:auto; top: auto; margin-top: 80rem; padding: 110rem 0 50rem;} 
    .main-visual__title h2 {font-size: 45rem;}
}

@media (max-width:480px){
    .main-visual__txt {margin-top: 60rem; padding: 80rem 0 50rem;}
    .main-visual__title h2 {margin: 12rem 0 20rem; font-size: 30rem;}
    .main-visual__title em {font-size: 15rem; font-weight: 600;}
    .main-visual__title p {font-size: 14rem;}
    .main-visual__pagination {margin-top: 23rem;}
    .main-visual__pagination .swiper-pagination > span {margin: 0 12rem; font-size: 14rem;}
    .main-visual__pagination .swiper-button-next,
    .main-visual__pagination .swiper-button-prev {width: 17rem; height: 17rem;}
}

.main-notice {position: absolute; right: 0; top: 0; text-align: right;}
.main-notice .btn-more {position: relative; display: inline-block; margin-bottom: 30rem; padding-right: 30rem; font-weight: 700; color: #fff; transition: .3s;}
.main-notice .btn-more::after {position: absolute; right:0; top:50%; content:''; width: 15rem; height: 15rem; background: url(../images/common/arrow_w.svg) no-repeat center / contain; transform: translateY(-50%);} 
.main-notice .btn-more:hover {padding-right: 40rem;}
.main-notice__item {width: 470rem;}
.main-notice__item a {display:block; padding: 40rem 30rem 43rem; text-align: left; color: #fff; border-radius: 8rem; background: rgba(255, 255, 255, .12); box-sizing: border-box; transition: .3s;}
.main-notice__item a span {font-size: 15rem; font-weight: 300; opacity: .8;}
.main-notice__item a p {overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; margin-top: 15rem; font-size: 19rem; font-weight: 700; text-overflow: ellipsis;}
.main-notice__item:not(:last-child) {margin-bottom: 10rem;}
.main-notice__item a:hover {color: #000; background: #fff;}
.main-notice__item.none {padding: 100rem 0; text-align: center; color: #fff; border:1px solid rgba(255, 255, 255, .2); border-width: 1px 0 1px 0;}

@media (max-width:1300px){
	.main-notice {width: 40%;}
    .main-notice__item {width: 100%;}
}

@media (max-width:767px){
    .main-notice {position: relative; right: auto; top: auto; width: 100%; margin-top: 50rem;}
}

@media (max-width:500px){
    .main-notice__item.none {padding: 60rem 0;}
}

@media (max-width:480px){
    .main-notice__item a {padding: 22rem 20rem 22rem;}
    .main-notice__item a span {font-size: 13rem;}
    .main-notice__item a p {margin-top: 10rem; font-size: 16rem; font-weight: 600;}
    .main-notice .btn-more {margin-bottom: 20rem; font-size: 14rem;}
    .main-notice__item.none {padding: 40rem 0; font-size: 13rem;}
}

/* main-business */
.main-business {padding: 80rem 0;}
.main-business .inr {display: flex; justify-content: space-between; align-items: center;}
.main-business__txt h3 {margin-bottom: 12rem; font-size: 35rem; font-weight: normal;}
.main-business__txt p { font-size: 17rem; color: #666;}
.main-business__txt .btn-basic {margin-top: 40rem;}
.main-business__link {display: flex; margin-left: auto;}
.main-business__item a {position: relative; display: block; width: 235rem; height: 210rem; margin: 0 10rem; padding: 40rem 25rem;  color: #fff; border-radius: 8rem; box-sizing: border-box; background: var(--color-primary); box-shadow: 5rem 5rem 20rem rgba(0, 0, 0, .15); transition: .3s;}
.main-business__item a::before {opacity: 0; visibility: hidden; position: absolute; left:0; top:0; content:''; width: 100%; height: 100%; background:url(../images/main/link-bg.png) no-repeat bottom center / contain; transition: .3s;}
.main-business__item a p {font-size: 22rem; font-weight: 700;}
.main-business__item a span {display: block; margin-top: 8rem; font-size: 15rem; font-weight: 300; opacity: .3;}
.main-business__item a i {position: absolute; right: 25rem; bottom:30rem; display: block; width: 50rem; height: 50rem; background-repeat: no-repeat; background-size: contain; background-position: center; transition: .3s;}
.main-business__item a:hover {background: var(--color-point);}
.main-business__item a:hover::before {opacity: 1; visibility: visible;}
[data-business="01"] i {background-image: url(../images/main/ic-business.svg);}
[data-business="01"]:hover i {background-image: url(../images/main/ic-business-on.svg);}
[data-business="02"] i {background-image: url(../images/main/ic-certify.svg);}
[data-business="02"]:hover i {background-image: url(../images/main/ic-certify-on.svg);}
[data-business="03"] i {background-image: url(../images/main/ic-case.svg);}
[data-business="03"]:hover i {background-image: url(../images/main/ic-case-on.svg);}
[data-business="04"] i {background-image: url(../images/main/ic-active.svg);}
[data-business="04"]:hover i {background-image: url(../images/main/ic-active-on.svg);}

@media (max-width:1300px){
	.main-business__txt {width: 30%;}
    .main-business__link {display: grid; grid-template-columns: repeat(4, 1fr); gap: 10rem; width: 70%;}
    .main-business__item a {width: auto; margin: 0;}
}

@media (max-width:1023px){
    .main-business .inr {display: block;}
	.main-business__txt {position: relative; width: 100%;}
    .main-business__txt .btn-basic {position: absolute; right: 0; top: 6rem; margin-top: 0;}
    .main-business__link {width: 100%; margin-top: 40rem;}
}

@media (max-width:767px){
    .main-business .inr {display: block;}
	.main-business__txt {position: relative; width: 100%;}
    .main-business__txt .btn-basic {position: absolute; right: 0; top: 6rem; margin-top: 0;}
    .main-business__link {width: 100%; margin-top: 40rem;}
}

@media (max-width:500px){
    .main-business__txt h3 {font-size: 32rem;}
    .main-business__link {grid-template-columns: repeat(2, 1fr);}
}

@media (max-width:480px){
    .main-business {padding: 60rem 0;}
    .main-business__txt h3 {margin-bottom: 10rem; font-size: 25rem;}
    .main-business__txt p {font-size: 14rem;}
    .main-business__txt .btn-basic {position: relative; right: auto; top: auto; margin-top: 25rem;}
    .main-business__item a {height: 160rem; padding: 25rem 20rem;}
    .main-business__item a:hover {background: var(--color-primary);}
    .main-business__item a:hover::before {display: none;}
    .main-business__item a p {font-size: 18rem;}
    .main-business__item a span {margin-top: 6rem; font-size: 12rem;}
    .main-business__item a i {right: 20rem; bottom: 25rem; width: 40rem; height: 40rem;}
}