/********** About renewal 2025 11 18 **********/

/* about01 */
.about01 {padding: 0 0 200px 0;}
.about01 .wrap {display: flex; flex-direction: column;}
.about01 .about_item {display: flex; justify-content: space-between; gap: 60px;}
.about01 .about_item .image {/*border: 1px solid red; box-sizing: border-box;*/}

.about .desc {display: flex; flex-direction: column; /*background: pink;*/}
.about .desc .tit {font-size: 35px; font-weight: 700; line-height: 130%; letter-spacing: -2px;}
.about .desc {}
.about .desc h1 {font-size: 150px; letter-spacing: -2px; line-height: 53%;}
.about .desc h1 span {}
.about .desc .txt {font-size: 18px;}

.about01 .about_item {}
.about01 .about_item::before {content: ''; z-index: -1; width: 100px; height: 100px; border-radius: 50%; border: 1px dashed #a8a8a8; position: absolute;}

.about01 .about_item.item1 {position: relative;}
.about01 .about_item.item1::before {top: 38px; left: 50%; transform: translateX(-50%); width: 1258px; height: 1258px; margin-left: 78px;}
.about01 .about_item.item1 .image {width: 42.570%;}
.about01 .about_item.item1 .desc {flex: 1;}
.about01 .about_item.item1 .desc h1 {margin-top: 220px;}
.about01 .about_item.item1 .desc h1 span {color: #dbdbdb;}
.about01 .about_item.item1 .desc .txt {margin-top: 60px;}

.about01 .about_item.item2 {position: relative; margin-top: 150px;}
.about01 .about_item.item2::before {top: 100px; left: -12%; width: 1017px; height: 1017px;}
.about01 .about_item.item2 .image {order: 1; flex: 1; display: flex; flex-direction: row; position: relative; margin-top: 180px;}
.about01 .about_item.item2 .image img {width: 380px; height: fit-content;}
.about01 .about_item.item2 .image img:nth-of-type(2) {margin-top: 110px; margin-left: -270px;}
.about01 .about_item.item2 .desc {order: 2; width: 42.570%; display: flex; flex-direction: column; gap: 30px;}
.about01 .about_item.item2 .desc h1 {margin: 30px 0;}
.about01 .about_item.item2 .desc h1 span {color: #1C69FF;}

.about01 .about_item.item3 {position: relative; margin-top: -70px;}
.about01 .about_item.item3::before {top: 130px; left: 50%; transform: translateX(-50%); width: 1335px; height: 1335px; margin-left: 95px;}
.about01 .about_item.item3 .image {width: 42.570%; display: flex; flex-direction: column; gap: 20px;}
.about01 .about_item.item3 .image img {width: 380px; height: fit-content;}
.about01 .about_item.item3 .desc {flex: 1; justify-content: flex-end; align-items: flex-end; gap: 30px; height: 757px;}
.about01 .about_item.item3 .desc > * {width: 480px;}


/* about02 */
.about02{padding: 90px 0; position: relative; z-index: 3; width: 100%; /*height: auto;*/ box-sizing: border-box; background: #f9f9f9 url("/assets/site/img/contents/about_06.png") no-repeat center right; background-size: cover; background-attachment: fixed;}
.about02 .wrap {width: 100%; padding: 0 0 0 28%;}
.about02 .desc {gap: 50px;}
.about02 .desc h1 {color: #d7d7d7;}
.about02 .desc h1 span {color: var(--black);}

.about02 ul {display: flex; flex-direction: column; gap: 7px; font-size: 18px; text-transform: uppercase;}
.about02 ul li {}

@media screen and (max-width: 1680px){
    .about .desc .tit {font-size: 30px;}
    .about .desc h1 {font-size: 100px;}
    .about .desc .txt {font-size: 1rem;}
    .about .desc .txt br {display: none;}

    .about01 .about_item.item1::before {width: 1000px; height: 1000px;}
    .about01 .about_item.item1 .desc h1 {margin-top: 100px;}
    .about01 .about_item.item1 .desc .txt {margin-top: 40px;}

    .about01 .about_item.item2::before {width: 700px; height: 700px; top: 5%; left: -10%;}
    .about01 .about_item.item2 .image {margin-top: 100px;}
    .about01 .about_item.item2 .image img {width: 50%;}
    .about01 .about_item.item2 .image img:nth-of-type(2) {margin-left: -30%;}

    .about01 .about_item.item3::before {width: 1000px; height: 1000px; top: 30px;}
    .about01 .about_item.item3 .image {}
    .about01 .about_item.item3 .image img {width: 60%;}
    .about01 .about_item.item3 .desc {height: auto;}

    .about02 .wrap {padding: 0 0 0 19%;}
    .about02 ul {font-size: 1rem;}
}
@media screen and (max-width: 1280px){
    .about .desc .tit {font-size: 22px;}
    .about .desc h1 {font-size: 80px; line-height: 60%;}

    .about01 .about_item.item1 .desc h1 {margin-top: 70px;}

    .about01 .about_item.item2 .desc {gap: 20px;}
    .about01 .about_item.item2 .desc h1 {margin: 20px 0;}
    .about01 .about_item.item2 .image img {height: auto;}

    .about01 .about_item.item3 {margin-top: 0;}
    .about01 .about_item.item3 .image img {height: auto;}

    .about02 .wrap {padding: 0; width: 93%;}
    .about02 ul {gap: 3px;}

}
@media screen and (max-width: 1080px){

}
@media screen and (max-width: 860px){
    .about .wrap::after {content: none;}
    .about .desc {gap: 20px;}
    .about .desc .tit br {display: none;}

    .about01 {padding: 0 0 150px 0;}
    .about01 .wrap {gap: 150px;}
    .about01 .about_item.item1::before {content: none;}
    .about01 .about_item {flex-direction: column; gap: 40px;}
    .about01 .about_item.item1 .desc {order: 2;}
    .about01 .about_item.item1 .desc h1 {margin: 0 0 10px 0;}
    .about01 .about_item.item1 .desc .txt {margin-top: 0;}
    .about01 .about_item.item1 .image {order: 1; width: 100%;}

    .about01 .about_item.item2 {margin-top: 0;}
    .about01 .about_item.item2::before {content: none;}
    .about01 .about_item.item2 .image {gap: 20px; margin: 0;}
    .about01 .about_item.item2 .image img {width: calc((100% - 20px) / 2);}
    .about01 .about_item.item2 .image img:nth-of-type(2) {margin-top: 0; margin-left: 0;}
    .about01 .about_item.item2 .desc {width: 100%; gap: 10px;}
    .about01 .about_item.item2 .desc .tit {order: 1;}
    .about01 .about_item.item2 .desc h1 {order: 2; margin: 10px 0 15px 0;}
    .about01 .about_item.item2 .desc .txt:nth-of-type(2) {order: 3;}
    .about01 .about_item.item2 .desc .txt:last-of-type {order: 4;}

    .about01 .about_item.item3 {}
    .about01 .about_item.item3::before {content: none;}
    .about01 .about_item.item3 .image {order: 1; width: 100%; gap: 20px; flex-direction: row;}
    .about01 .about_item.item3 .image img {width: calc((100% - 20px) / 2);}
    .about01 .about_item.item3 .desc {order: 2; gap: 20px;}
    .about01 .about_item.item3 .desc > * {width: 100%;}

    .about02 {background: #f9f9f9 url("/assets/site/img/contents/about_06.png") no-repeat center right 20%;}
}
@media screen and (max-width: 568px){
    .about .desc {gap: 10px;}
    .about .desc .tit {font-size: 18px;}
    .about .desc h1 {font-size: 50px;}

    .about01 .wrap {gap: 100px;}
    .about01 .about_item {gap: 25px;}

    .about01 .about_item.item2 .image {gap: 10px;}
    .about01 .about_item.item2 .image img {width: calc((100% - 10px) / 2);}

    .about01 .about_item.item3 .image {gap: 10px;}
    .about01 .about_item.item3 .image img {width: calc((100% - 10px) / 2);}
    .about01 .about_item.item3 .desc {gap: 10px;}
    .about01 .about_item.item2 .desc h1 {order: 2; margin: 0 0 15px 0;}

    .about02 {padding: 70px 0; background: #f9f9f9 url("/assets/site/img/contents/about_06.png") no-repeat center right 20%;}
    .about02 .desc h1 {margin: 0 0 10px 0;}

}
@media screen and (max-width: 425px){
    .about02 {background: #f9f9f9;}

}





















/********** Service renewal 2025 11 18 **********/
.service_wrap {display: flex; flex-direction: column; gap: 300px;}
.service {font-size: 18px;}
.service .wrap {display: flex; gap: 60px; justify-content: space-between;}
.service .left {}
.service .right {}
.service .tit {font-size: 45px; font-weight: 300; line-height: 130%; letter-spacing: -2px;}
.service .tit span {display: block; font-weight: 600;}
.service .info .sub {font-size: 70px; font-weight: 700; letter-spacing: -1.2px;}
.service .info ul li .desc .d_tit {font-size: 30px; font-weight: 700;}
.service .info ul li .desc .d_txt {min-height: 120px; letter-spacing: -0.5px;}


.service01 .wrap {flex-direction: column;}
.service01 .wrap::after{content: none;}
.service01 .left {position: relative;}
.service01 .left h1 {position: absolute; top: 0; right: 0; text-align: right; font-size: 150px; letter-spacing: -2px; line-height: 53%;}
.service01 .left h1 span {color: #dbdbdb; margin-right: 77px;}

/* .service01 h1 {position: absolute; top: 0; right: 0; text-align: right; font-size: 150px; letter-spacing: -2px; line-height: 53%;}
.service01 h1 span {color: #dbdbdb; margin-right: 77px;} */

.service01 .info ul {margin-top: 40px; display: flex; flex-wrap: wrap; gap: 50px; justify-content: space-between;}
.service01 .info ul li {width: 25%; max-width: 350px;}
.service01 .info ul li .desc {}

.service02 {position: relative;}
.service02::before {content: ''; width: 655px; height: 815px; background: #f9f9f9 url("/assets/site/img/contents/service_09.png") no-repeat center right; background-size: cover; display: block; position: absolute; right: 0; top: 0;}
.service02 .wrap::after{content: none;}
.service02 .left {width: 63%;}
.service02 .left {display: flex; flex-direction: column; gap: 60px;}
.service02 .left .info ul {margin-top: 40px; display: flex; flex-wrap: wrap; gap: 40px;}
.service02 .left .info ul li {width: calc((100% - 40px) / 2);}




.service03 .wrap {flex-direction: column; gap: 300px;}
.service03 .wrap::after{content: none;}
.service03 .item {display: flex; justify-content: space-between; gap: 60px; width: 100%;}
.service03 .item .left {flex: 1; display: flex; flex-direction: column; gap: 60px;}
.service03 .left .info ul {margin-top: 20px;}
.service03 .item .right {width: 1000px;}

.service03 .item01 .left {order: 2;}
.service03 .item01 .right {order: 1;}



.service04 {background: #f9f9f9; padding: 90px 0;}
.service04 .wrap::after {content: none;}
.service04 .left {order: 2; flex: 1; display: flex; flex-direction: column; gap: 60px;}
.service04 .right {order: 1; width: 1200px;}
.service04 .right ul {display: flex; flex-wrap: wrap; gap: 50px;}
.service04 .right ul li {display: flex; flex-direction: column; align-items: center; gap: 20px; width: calc((100% - 300px) / 7);}
.service04 .right ul li p {font-weight: 700; font-size: 18px; text-align: center;}



.mySwiper{position: relative; overflow: hidden;}
.mySwiper .list{}
.mySwiper .item{}
.mySwiper .item .img{}
.mySwiper .item .img img{width: 100%; height: auto;}

.left .dots{z-index: 1; display: flex; flex-wrap: wrap; row-gap: 10px; column-gap: 50px;}
.left .dots li{width: auto; height: auto; border-radius: 0; opacity: 1; margin: 0 !important; background: #fff;}
.left .dots li button{position: relative; display: block; width: 100%; height: 100%; color: #ccc; font-size: 20px; font-weight: 600; border: none; background: none; padding: 12px 0;}
.left .dots li.swiper-pagination-bullet-active button {color: #1C69FF; font-weight: 700; color: var(--black);}
.left .dots li.swiper-pagination-bullet-active button .progress .bar{animation: width 3s linear; /* js : autoPlaySpeed 와 동일하게 맞추기 */}
.left .dots li.swiper-pagination-bullet-active button .progress .bar.pause{animation-play-state: paused !important;}

.left .control{ display: flex; gap: 45px;}
.left .btn_s{position: relative; display: block; width: 30px; height: 30px; border: none; background-color: #fff; cursor: pointer; font-size: 0;}
.left .btn_s_prev{}
.left .btn_s_next{}
.left .btn_s_prev:before,
.left .btn_s_next:after{content: ""; position: absolute; top: 50%; left: 50%; display: block; width: 45%; height: 45%; border-top: 3px solid #000; border-left: 3px solid #000; transform: translate(-30%, -50%) rotate(-45deg);}
.left .btn_s_next:after{transform: translate(-70%, -50%) rotate(135deg);}

@keyframes width{
    0%  {width: 0;}
    100%{width: 100%;}
}


@media screen and (max-width: 1680px){
    .service {font-size: 1rem;}
    .service .tit {font-size: 30px; line-height: 120%;}
    .service .info .sub {font-size: 50px;}
    .service .info ul li .desc .d_tit {font-size: 25px;}
    .service .info ul li .desc .d_txt br {display: none;}


    .service01 .left h1 {font-size: 100px;}
    .service01 .info ul {justify-content: flex-start;}
    .service01 .info ul li {width: calc((100% - 100px) / 3); max-width: none;}

    .service02::before {width: 35%; height: 90%;}
    .service02 .left {width: 55%;}
    .service03 .left .info ul {}

    .service03 .item .right {width: 60%;}
    .service03 .item .left {}
    .left .dots {column-gap: 20px;}
    .left .dots li button {font-size: 18px; padding: 8px 0;}

    .service04 .right {width: 1000px;}
    .service04 .right ul {gap: 35px;}
    .service04 .right ul li {width: calc((100% - 210px) / 7);}
    .service04 .right ul li p {font-size: 1rem;}

}
@media screen and (max-width: 1280px){
    .service .tit {font-size: 22px;}
    .service .info .sub {font-size: 40px;}
    .service .info ul li .desc .d_tit {font-size: 22px;}

    .service01 .left h1 {font-size: 80px;}
    .service01 .info ul {margin-top: 30px;}

    .service02::before {width: 35%; height: 75%;}
    .service02 .left .info ul {gap: 20px; margin-top: 30px;}

    .service04 .tit {}
    .service04 .tit span {display: inline-block;}
    .service04 .wrap {flex-direction: column;}

    .service04 .left {order: 1; text-align: center; gap: 5px;}
    .service04 .right {order: 2; width: 100%;}
    .service04 .right ul {justify-content: center;}
    .service04 .right ul li {width: 120px;}


}
@media screen and (max-width: 1080px){
    .service .info .sub {font-size: 30px;}

}
@media screen and (max-width: 860px){
    .service .wrap {gap: 40px;}
    .service_wrap {gap: 150px;}

    .service .info ul li .desc .d_tit {font-size: 18px;}
    .service .info ul li .desc .d_txt {min-height: 100px;}

    .service01 .left h1 {font-size: 50px; position: relative; top: auto; right: auto; text-align: left;}
    .service01 .left h1 span {margin-right: 0; margin-left: 77px;}
    .service01 .left .tit {margin-top: 20px;}
    .service01 .left .tit span {display: inline-block;}

    .service01 .info ul {row-gap: 60px; column-gap: 20px;}
    .service01 .info ul li {width: calc((100% - 20px) / 2);}

    .service02 {}
    .service02::before {width: 93%; margin: 0 3.5%; height: 250px; position: relative; top: auto; right: auto; background: #F9F9F9 url("/assets/site/img/contents/service_09.png") no-repeat top 35% right; background-size: 160%;}
    .service02 .left {width: 100%; margin-top: 25px; gap: 25px;}
    .service02 .left .info ul {}
    .service02 .left .info ul li {width: calc((100% - 20px) / 2);}



    .service03 .wrap {gap: 150px;}
    .service03 .item {flex-direction: column; gap: 40px;}
    .service03 .item .left {gap: 20px;}
    .service03 .item01 .right {order: 2; width: 100%;}
    .service03 .item01 .left {order: 1;}
    .service03 .item .right {width: 100%;}

    .left .dots {gap: 10px;}
    .left .dots li button {font-size: 1.2rem; padding: 5px 0;}

}
@media screen and (max-width: 568px){
    .service .wrap {gap: 25px;}
    .service .tit {font-size: 18px;}
    .service .info ul li .desc .d_tit {font-size: 18px;}

    .service01 .info ul li .desc {margin-bottom: 20px;}





    .service01 .info ul li {width: 100%;}
    .service01 .info ul li .desc .d_txt {min-height: auto;}

    .service02::before {height: 250px;}

    .service02 .left .info ul {}
    .service02 .left .info ul li {width: 100%;}
    .service02 .info ul li .desc .d_txt {min-height: auto;}

    .service03 .wrap {gap: 150px;}


    .service04 {padding: 70px 0;}
    .service04 .left {gap: 0;}
    .service04 .right ul li {width: 100px;}

}
@media screen and (max-width: 425px){

}