@import "reset.css"; /* 초기화 */
@import "swiper-bundle.min.css"; /* slide */


/***************** pc *****************/
.popup-on {overflow:hidden !important}
/* .wrap {min-width:360px} */


/*----- header -----*/
.header {position: fixed; left: 0px; top: 0px; width: 100%; z-index: 900;}
.header-inner {position: relative; width: 100%; height: 100px; display: flex; align-items: center; transition: all 0.2s ease-in-out;}

.header .header-inner > .logo {position: absolute; left: 40px; top: 50%; transform: translateY(-55%); z-index: 1;}

/* 스크롤시 header 반전 */
.header.active {background-color: #fff;}
/* .header.active .header-inner::after {position: absolute; left: 0px; top: 0px; content: ''; width: 100%; height: 100%; display: block; background-color: #fff; opacity: 0.8; z-index: -1;} */
.header.active .nav .menu .nav-item > a {color: #000;}
.header.active .logo > a {background: url(../images/logo.svg) no-repeat left top;}
.header.active .header-util .util-item01 {background: url(../images/header-util01.svg) no-repeat left top;}
.header.active .header-util .util-item02 {background: url(../images/header-util02.svg) no-repeat left top;}
.header.active .nav .menu .nav-item > a::after {background: #000;}

/* logo */
.logo {width:236px;height:54px;}
.logo > a,
.logo > span {display:block;width:100%;height:100%;background: url(../images/logo_w.svg) no-repeat left top;background-size:contain !important;}

/* nav */
.nav {margin: 0 auto; width: auto;}
.nav .menu ul {display: flex;}
.nav .menu .nav-item {flex:none; width: auto; margin: 0 30px;}
.nav .menu .nav-item > a {display: block; text-align: center; font-size: 2rem; line-height: 100px; font-weight: 700; color: #fff; position: relative; }
/* .nav .menu .nav-item:hover > a {position: relative; } */
.nav .menu .nav-item > a::after {position: absolute; left: 0px; bottom: 0px; content: ''; display: block; height: 6px; width: 100%; z-index: 1;  background: #fff; transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease-out;}
.nav .menu .nav-item:hover > a::after {transform: scaleX(1);}

/* util */
.header-util {position: absolute; right: 40px; top: 50%; transform: translateY(-50%); z-index: 1;}
.header-util-inner {display: flex;}
.header-util a {display:block; width: 36px; height: 36px; margin-right: 12px; background-size:contain !important;}
.header-util a:last-of-type {margin:0;}
.header-util .util-item01 {background: url(../images/header-util01-w.svg) no-repeat left top;}
.header-util .util-item01:hover {background: url(../images/header-util01-black.svg) no-repeat left top !important; background-size: contain !important;}
.header-util .util-item02 {background: url(../images/header-util02-w.svg) no-repeat left top;}
.header-util .util-item02:hover {background: url(../images/header-util02-black.svg) no-repeat left top !important; background-size: contain !important;}

/*----- footer -----*/
.footer {width: 100%; padding: 60px 20px 48px 20px; background: #032B4F;}
.footer-inner {max-width: 100%; margin: 0 auto;}

.footer-logo {display:block;width:239px;height:56px;background: url(../images/logo_w.svg) no-repeat left top;background-size:contain !important; margin: 0 auto;}

.footer-info {margin: 28px auto 0; text-align: center;}
.footer-info span {display:inline-flex; margin: 0 4px; color: #fff; font-size: 1.4rem; line-height: 2.4rem; font-weight:400; opacity: 0.6;}
.footer-info .br {display:block; width:0px; height: 0px;}



/*----- container -----*/

/*----------------------------------- common -----------------------------------*/
.pc-img {display: block;}
.mo-img {display: none;}

.text-list li {position: relative; padding-left: 12px; margin-top: 4px; font-size: 1.8rem; line-height: 2.8rem;}
.text-list li::before {flex:none; position: absolute; left: 0px; top: 12px; content: ''; display: block; width: 4px; height: 4px; background-color: #fff; border-radius: 100%;}

.more-type1 {display: flex; align-items: center;}
.more-type1::before {flex:none; content: ''; display: block; width: 32px; height: 32px; margin-right: 8px; background: url(../images/icon_more1.svg); transition: transform 0.3s ease; transform: rotate(0deg); background-size: cover;}
.more-type1:hover::before {transform: rotate(360deg);}
.more-type1 em {display: block; font-size: 2rem; line-height: 2.8rem; color: #fff; font-weight: 600;}

.box-visual .title-box .title {font-size: 6.4rem; line-height: 8.4rem; font-weight: 700; color: #000;}
.box-visual .title-box .title.type1 {width: 100%; font-size: 4.8rem; line-height: 6.4rem;}
.box-visual .title-box .text1 {font-size: 3.2rem; line-height: 4rem; font-weight: 700; color: #032B4F;}
.box-visual .title-box .text2 {font-size: 2rem; line-height: 3.2rem; font-weight: 400; color: #666;}
.box-visual .title-box.mo {display: none;}

/*------------ popup ------------*/
/* z-index 1000대로 시작 */
.popup {display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;align-items:center;justify-content:center;flex-direction:column;background-color:transparent}
.popup.on {display:flex;background:rgba(0, 0, 0, 0.9)}
.popup-dim {position:absolute;width:100%;height:100%;top:0;left:0;z-index:998}
.popup-inner {position:relative;display:flex;flex-direction:column;margin:24px auto;padding:0 0 0 0;will-change: transform;/* transform:translate3d(0, 0, 0); *//* max-width:calc(100vw - 48px); */width: calc(100% - 48px);max-height: calc((var(--vh) * 100) - 48px);overflow:hidden;z-index:999;}

/* popup - header */
.popup-header {display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:flex-start;width: 100%; max-width: 1040px; margin: 0 auto; padding: 20px 0;}
.popup-header > .btn-popup-close {margin-left:auto !important;margin-top:-2px}
.popup-header > .btn-popup-close button {width:28px;height:28px;background: url(../images/icon-close1.svg) no-repeat center; background-size: contain; vertical-align:top}

/* popup - body */
.popup-body {margin:0;padding:0 20px 20px 20px;height:100%;word-break:break-all;overflow-y:auto}
.popup-body::-webkit-scrollbar {width:6px;height:4px;overflow:hidden}
.popup-body::-webkit-scrollbar-thumb {background-color:#aaa;outline:none;border-radius:10px}
.popup-body::-webkit-scrollbar-track {box-shadow:none;background:transparent;border-radius:10px}
.popup-body-inner {padding-right:6px}

/*----------------------------------- main content -----------------------------------*/
/* main-visual01 */
.main-slide .item-slide {position: relative; height: 100vh; overflow: hidden;}
.main-slide .item-slide img {width: 100%; height: 100%; object-fit: cover;}
.main-slide .info {position: absolute; right: 60px; bottom: 60px; width: 770px; height: 256px; padding: 46px 80px; z-index: 2; background: #032B4F;}
.main-slide .info > span {display: block; color: #fff;}
.main-slide .info .title {font-size: 2.8rem; line-height: 4rem; font-weight: 600; margin-bottom: 16px;}
.main-slide .info .text {font-size: 1.8rem; line-height: 2.8rem;}
.main-slide .info .emphasize {font-size: 2.3rem; line-height: 2.8rem; color: #CFC2B9;}
.main-slide .info .little {font-size: 1.3rem; line-height: 2.8rem; color: #fff;}

.main-slide .box-swiper-button {position: absolute; right: 60px; bottom: 60px; display: flex; flex-direction: column; width:150px; height: 256px;}
.main-slide .box-swiper-button .swiper-button-prev,
.main-slide .box-swiper-button .swiper-button-next {position: relative; left: 0; right: 0; top: 0; bottom: 0; margin: 0; padding: 0; width: 100%; height: 50%; border-left: 1px solid #384755; opacity: 1; transition: opacity 0.0s ease;}
.main-slide .box-swiper-button .swiper-button-prev:after {content: ''; display: block; width:53px; height:22px; background: url(../images/main_prev.svg) no-repeat center; background-size: cover; opacity: 1;}
.main-slide .box-swiper-button .swiper-button-next {border-bottom: 1px solid #384755;}
.main-slide .box-swiper-button .swiper-button-next:after {content: ''; display: block; width:53px; height:22px; background: url(../images/main_next.svg) no-repeat center; background-size: cover;}
.main-slide .box-swiper-button .swiper-button-prev:hover:after,
.main-slide .box-swiper-button .swiper-button-next:hover:after {opacity: 0.2;}

.main-slide .swiper-pagination {width: auto; left: inherit; right: 694px; bottom: 106px; opacity: 1; transition: opacity 0.0s ease;}
.main-slide .swiper-pagination-bullet {width: 12px; height: 12px; margin: 0 10px 0 0 !important; background-color: #fff !important; opacity: 0.1 !important;}
.main-slide .swiper-pagination-bullet:last-of-type {margin-right: 0 !important;}
.main-slide .swiper-pagination-bullet-active {opacity: 1 !important;}

.main-slide .swiper.is-moving .swiper-button-prev,
.main-slide .swiper.is-moving .swiper-button-next,
.swiper.is-moving .swiper-pagination {opacity: 0; pointer-events: none;}

.box-main-video {position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden;}
.box-main-video video {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; object-position: center;}

.motion-up {
    opacity: 0;
    transform: translateY(100px);
    animation: fadeUp 0.8s ease-out forwards;
}

.motion-up1 {
    opacity: 0;
    transform: translateY(100px);
    animation: fadeUp 0.8s ease-out forwards;
}

.delay0-4 {animation-delay: 0.4s;}
.delay0-6 {animation-delay: 0.6s;}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}




/* .motion-right1 {
    opacity: 0;
    transform: translateX(-40px);
    animation: fadeRight1 1s ease-out forwards;
    animation-delay: 0.2s;
}

@keyframes fadeRight1 {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.motion-right2 {
    opacity: 0;
    transform: translateX(-40px);
    animation: fadeRight2 1s ease-out forwards;
    animation-delay: 0.4s;
}

@keyframes fadeRight2 {
    to {
        opacity: 1;
        transform: translateX(0);
    }
} */

/* main-visual02 */
.main-visual02 .box-inner {padding: 200px 0 160px 120px; display: flex; justify-content: space-between;}
.main-visual02 .box-visual .title-box {margin-right: 80px; /* margin-right: 198px; */ flex:1;}
.main-visual02 .box-visual .title-box .title {margin-bottom: 80px;}
.main-visual02 .box-visual .title-box .text1 {margin-bottom: 16px;}
.main-visual02 .box-visual .title-box .text2 {margin-bottom: 60px;}

.main-visual02 .signature {display: flex; align-items: center;}
.main-visual02 .signature .copy {margin-right: 12px; font-size: 1.2rem; line-height: 2.4rem; font-weight: 200; color: #999;}
.main-visual02 .signature .text {margin-right: 12px; font-size: 1.6rem; line-height: 2.4rem; font-weight: 400; color: #999;}
.main-visual02 .signature .name {display: block; width: 87px; height: 46px; background: url(../images/sign.svg) no-repeat left center;background-size:contain !important;}

.img-about {display: flex; justify-content: space-between; width: calc(50% - 40px);}
.img-about > span {display: block;}
.img-about .item1 {width: 18.75%; margin-top: 40px;}
.img-about .item2 {width: 77.08%;}

/* main-visual03 */
/* accordion */
.vision-accordion {display: flex; width: 100%; height: 880px; overflow: hidden;}
.vision-accordion .item {position: relative; flex: 1.5 1 0; /* 기본 18.75% */ overflow: hidden; transition: flex 0.4s ease; cursor: pointer;}
.vision-accordion .item.is-active {flex: 5 1 0; /* 62.5% */}
.vision-accordion:hover .item {flex: 1.5 1 0;}
.vision-accordion .item:hover {flex: 5 1 0;}
.vision-accordion .item img {display: block; position: absolute; top: 0; left: 0; /* transform: translateX(-50%); */ height: 100%; width: 100%; object-fit: cover; pointer-events: none;}
.vision-accordion .item::after {content: ""; position: absolute; inset: 0; background: #00396C; mix-blend-mode: multiply; pointer-events: none; transition: opacity 0.4s ease;}
.vision-accordion .item:hover::after,
.vision-accordion .item.is-active::after {opacity: 0;}

.vision-accordion .is-active .info {left: 0px; opacity: 1;}
.vision-accordion .info {position: absolute; bottom: 0; padding: 0 120px 80px 120px; transition: all 0.4s ease; left: -9999px; opacity: 0; width: 100%;}
.vision-accordion .info * {color: #fff !important;}
.vision-accordion .title-box .title {width: 100%;}
.vision-accordion .title-box .title::after {display: block; content: ''; width: 100%; height: 1px; background-color: #fff; opacity: 0.2; margin: 32px 0;}
.vision-accordion .text-list li {font-size: 2rem; line-height: 2.8rem;}
.vision-accordion .text-list li > span {font-size: inherit !important; line-height: inherit !important;}

.vision-accordion .is-active .info-mo {opacity: 0;}
.vision-accordion .info-mo {position: absolute; left: 0px; top: 0; display: flex; flex-direction: column; padding: 60px 48px; width: 100%; height: 100%; z-index: 1; transition: all 0.8s ease; opacity: 1;}
.vision-accordion .info-mo .title {display: block; font-size: 2.4rem; line-height: 4rem; font-weight: 600; color: #fff;}
.vision-accordion .info-mo .title > br {display: none;}
.vision-accordion .info-mo .more-type1 {margin-top: auto; align-items: flex-end; justify-content: flex-end;}


/* main-visual04 */
.main-visual04 .box-inner {padding: 200px 0 0 0; /* width: 100%; max-width: 100%; overflow: hidden; */}
.main-visual04 .box-visual .title-box .title {margin-bottom: 80px; text-align: center;}

.works-slide {position: relative;}
.works-slide .swiper {width: 100%; height: 100%; padding-bottom: 88px;}
.works-slide .swiper-wrapper {width: 100%;}
.works-slide .swiper-slide {margin: 0; padding: 0; width: 868px; height: 484px;}
.works-slide .swiper-slide {position: relative;}
.works-slide .swiper-slide .item-slide {display: inline-block;  width: 100%; height: 100%; overflow: hidden;}
.works-slide .swiper-slide img {width: 100%; max-height: 100%; object-fit: contain; object-position: center center; image-rendering: pixelated; transition: transform 1s ease;}
.works-slide .swiper-slide:hover img {transform: scale(1.06);}
.works-slide .item-info {position: absolute; left: 40px; right: 40px; bottom: 28px; display: flex; justify-content: space-between; align-items: flex-end;}
.works-slide .item-info * {color: #fff; font-weight: 600;}
.works-slide .item-info .info {display: flex; flex-direction: column; margin-right: 24px;}
.works-slide .item-info .category {font-size: 1.6rem; line-height: 2.4rem; margin-bottom: 8px;}
.works-slide .item-info .title {font-size: 24px; line-height: 36px;}
.works-slide .item-info .btn-work-more {flex:none; position: relative; display: flex; align-items: center;}
.works-slide .item-info .btn-work-more::before {flex:none; content: ''; display: block; width: 32px; height: 32px; margin-right: 8px; background: url(../images/icon_more1.svg); transition: transform 0.3s ease; transform: rotate(0deg); background-size: cover;}
.works-slide .item-info .btn-work-more:hover::before {transform: rotate(360deg);}
.works-slide .item-info .btn-work-more em {display: block; font-size: 2rem; line-height: 2.8rem;}

.works-slide .swiper-pagination-progressbar {position: absolute; left: 0px; right: 0; top: calc(100% - 8px); margin: 0 auto; width: 640px; height: 8px; background-color: #EAEAEA;}
.works-slide .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background-color: #000;}

.works-slide .swiper-button-next,
.works-slide .swiper-button-prev {top: calc(50% - 44px); width: 48px; height: 48px;}
.works-slide .swiper-button-next::after,
.works-slide .swiper-button-prev::after {display: none;}
.works-slide .swiper-button-next {background: url(../images/works_next.svg) no-repeat center; background-size: cover;}
.works-slide .swiper-button-prev {background: url(../images/works_prev.svg) no-repeat center; background-size: cover;}

/* swiper-gallery */
.swiper-gallery-thumbs .swiper-wrapper {margin-top: 40px;}
.swiper-gallery-thumbs .swiper-slide {cursor:pointer}
.swiper-gallery-thumbs .swiper-slide::after {content: ''; position: absolute; inset: 0; background: #000; opacity: 0.6; pointer-events: none;}
.swiper-gallery-thumbs .swiper-slide-thumb-active::after {opacity: 1; border: 2px solid #fff; background: inherit;}

.gallery-button {position: absolute; width: 100%; max-width: 1300px; width: 100%; top: calc(50% - 40px); left: 0; right: 0; margin: 0 auto;  z-index: 1; display: flex; justify-content: space-between; height: 1px;}
.box-gallery-slide .swiper-button-prev {position: relative; left: inherit; right: inherit; top: inherit; transform: none; width: 48px; height: 48px; background: url(../images/icon_gallery_next.svg) no-repeat; background-size: cover; transform: scaleX(-1);}
.box-gallery-slide .swiper-button-next {position: relative; left: inherit; right: inherit; top: inherit; transform: none; width: 48px; height: 48px; background: url(../images/icon_gallery_next.svg) no-repeat; background-size: cover;}
.box-gallery-slide .swiper-button-prev::after,
.box-gallery-slide .swiper-button-next::after {display: none;}

.swiper-gallery-visual {max-width: 1040px;}
.swiper-gallery-visual .swiper-slide {text-align: center;}
.swiper-gallery-visual .swiper-slide img {width: 100%; max-width: 1040px; object-fit: contain;}

.swiper-gallery-visual .gallery-info {position: absolute; left: 40px; right: 40px; bottom: 40px; z-index: 1;}
.gallery-info {display: flex; flex-direction: column;}
.gallery-info .category {font-size: 1.6rem; line-height: 2.4rem; color: #fff; font-weight: 600; margin-bottom: 8px;}
.gallery-info .title {font-size: 2.4rem; line-height: 3.8rem; color: #fff; font-weight: 600;}

/* main-visual05 */
.main-visual05 .box-inner {padding: 120px 0 160px 120px; display: flex; justify-content: space-between;}
.main-visual05 .title-box {margin-right: 80px; /* margin-right: 12.91%; */}
.main-visual05 .title-box .title {margin-bottom: 28px;}
.main-visual05 .title-box .text2 {margin-bottom: 60px;}
.main-visual05 .btn-instagram {display: inline-flex; align-items: center; padding: 18px 24px; border:1px solid #DFDFDF;}
.main-visual05 .btn-instagram::before {flex:none; content: ''; display: block; width: 24px; height: 24px; background: url(../images/icon_insta.svg) no-repeat center; background-size: cover; margin-right: 4px;}
.main-visual05 .btn-instagram span {font-size: 1.8rem; line-height: 2.8rem; font-weight: 600;}
.main-visual05 .btn-instagram:hover {border-color: #000;}

.insta-list {display: flex;}
.insta-list .item {position: relative; flex:1; height: 420px; /* width: 14.58%; */ /* width: 280px; height: 420px; */ overflow: hidden;}
/* .insta-list .item a {display: block; width: 100%; height: 100%;} */
.insta-list .item video,
.insta-list .item img {transition: transform 1s ease; width: 100%; max-width: 280px; height: 100%; object-fit: cover;}
.insta-list .item:hover img {transform: scale(1.06);}
.insta-list .item .more-type1 {position: absolute; right: 16px; bottom: 16px;}

/* marquee */
.text-marquee {width: 100%; overflow: hidden;}
.text-marquee .text {display: block; font-size: 20rem; line-height: 24rem; font-weight: 700; letter-spacing: -1px;  color: #000; opacity: 0.04;}

/* main-visual06 */
.main-visual06 .box-inner {padding: 160px 120px 100px 120px;}
.main-visual06 .title-box * {text-align: center;}
.main-visual06 .title-box .title {margin-bottom: 40px;}
.main-visual06 .title-box .title2 {margin-bottom: 80px;}
.main-visual06 .title-box .img {margin-top: 80px;}

.main-visual06 .box-text {display: inline-block; padding: 40px 60px; background-color: #032B4F;}
.main-visual06 .box-text .sub-text1 {display: block; text-align: left; color: #fff; font-size: 2.8rem; line-height: 4rem; font-weight: 600; margin-bottom: 20px;}
.main-visual06 .box-text .sub-text2 {display: block; text-align: left; color: #fff; font-size: 2.8rem; line-height: 4rem;}
.main-visual06 .text-img {position: relative; overflow: hidden; margin-top: 80px;}
.main-visual06 .text-img .box-text {position: absolute; right: 60px; bottom: 60px;}
.main-visual06 .text-img img {width: 100%; transition: transform 1s ease;}
.main-visual06 .text-img:hover img {transform: scale(1.06);}

.business-list {display: flex; justify-content: space-between; margin-top: 24px;}
.business-list .item {position: relative; flex:1; margin-right: 24px; overflow: hidden;}
.business-list .item:last-of-type {margin-right: 0;}
.business-list img {width: 100%; transition: transform 1s ease;}
.business-list .item:hover img {transform: scale(1.06);}
.business-list .info {position: absolute; left: 0px; top: 0px; display: flex; flex-direction: column; width: 100%; height: 100%; padding: 48px;}
.business-list .info * {color: #fff;}
.business-list .info .title {font-size: 2.8rem; line-height: 4rem; font-weight: 600;}
.business-list .info .text-list {margin-top: auto;}

/* main-visual07 */
.main-visual07 .box-inner {display: flex; padding-top: 100px;}

.contact {width: 50%; display: flex; flex-direction: column;}
.box-contact {display: flex; flex-direction: column; width: 100%; padding: 120px 120px 80px 120px; background: #CFC2B9 url(../images/bg_contect.png) no-repeat right top; background-size: cover;}
.box-contact .title {margin-bottom: 32px;}
.box-contact .text2 {color: #000 !important;}
.box-contact .contact-list {margin-top: 120px;}
.box-contact .contact-list::before {content: ''; display: block; width: 100%; height: 1px; background-color: #000; opacity: 0.1;}
.box-contact .contact-list ul {display: flex; justify-content: space-between; margin-top: 32px;}
.box-contact .contact-list li {position: relative; display: flex; padding-left: 32px; line-height: 2.4rem;}
.box-contact .contact-list li::before {flex:none; position: absolute; left: 0px; top: 0; display: block; content: ''; width: 24px; height: 24px;}
.box-contact .contact-list .email::before {background: url(../images/icon_contact01.svg) no-repeat center;  background-size: cover;}
.box-contact .contact-list .tel::before {background: url(../images/icon_contact02.svg) no-repeat center;  background-size: cover;}
.box-contact .contact-list .mobile::before {background: url(../images/icon_contact03.svg) no-repeat center;  background-size: cover;}

.box-kakao {display: flex; justify-content: space-between; align-items: center; padding: 58px 120px; background: url(../images/bg_kakao.png) no-repeat right bottom; background-size: cover;}
.box-visual .box-kakao .title-box {margin-right: 20px;}
.box-visual .box-kakao .title-box .title {font-size: 2.4rem; line-height: 3.6rem; margin-bottom: 8px;}
.box-visual .box-kakao .title-box .text2 {font-size: 1.6rem; line-height: 2.4rem;}
.box-kakao .btn-kakao {display: flex; align-items: center; padding: 19px 24px; background-color: #3D2324;}
.box-kakao .btn-kakao:hover {background-color: #000;}
.box-kakao .btn-kakao::before {flex:none; content: ''; display: block; width: 24px; height: 22px; background: url(../images/icon_kakao.svg) no-repeat left top; background-size: cover; margin-right: 4px;}
.box-kakao .btn-kakao span {display: block; color: #fff; font-size: 1.8rem; line-height: 2.4rem; font-weight: 600;}

.map {width: 50%;}
.map .root_daum_roughmap_landing {width: 100%; height: 100%;}
.map .root_daum_roughmap .cont {display: none;}
.map .root_daum_roughmap .wrap_map {height: 100%;}

/***************** pc2 *****************/
@media only screen and (max-width: 1150px) {

    /* logo */
    .logo {width: 174px; height: 40px;}

    .main-visual02 .box-inner {padding-left: 80px;}
    .main-visual05 .box-inner {padding-left: 80px;}
    .main-visual06 .box-inner {padding-left: 80px; padding-right: 80px;}
    .box-contact {padding-left: 80px; padding-right: 80px;}
    .box-kakao {padding-left: 80px; padding-right: 80px;}
    .business-list .info {padding: 24px}
    .main-visual06 .box-text .sub-text1,
    .main-visual06 .box-text .sub-text2 {font-size: 2rem; line-height: 2.8rem;}

}

/***************** tablet *****************/
@media only screen and (max-width: 1023px) {

    /*----- header -----*/
    .header-inner {height: 134px; align-items: flex-start;}
    .header .header-inner > .logo {left: 20px; top: 14px; transform: none;}

    .header.active .nav {border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1);}

    .header-util {right: 20px; top: 24px; transform: none;}
    .header-util a {width: 30px; height: 30px;}

    .nav {position: relative; width: 100%;  margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1);}
    .nav .menu ul {justify-content: center;}
    .nav .menu .nav-item > a {line-height: 62px;}

    /*----------------------------------- common -----------------------------------*/
    .box-visual .title-box .title {font-size: 4.4rem; line-height: 6.4rem;}
    .box-visual .title-box .title.type1 {font-size: 2.8rem; line-height: 4.4rem;}
    .box-visual .title-box .text1 {font-size: 2.4rem; line-height: 3.6rem;}
    .box-visual .title-box .text2 {font-size: 1.6rem; line-height: 2.4rem;}

    .text-list li {font-size: 1.4rem; line-height: 2rem; padding-left: 8px; margin-top: 4px;}
    .text-list li::before {width: 2px; height: 2px; top: 10px;}

    .more-type1::before {width: 24px; height: 24px; margin-right: 4px;}
    .more-type1 em {display: block; font-size: 1.6rem; line-height: 2.4rem;}


    /*----------------------------------- main content -----------------------------------*/

    /* main-visual01 */
    .main-slide .info {right: 40px; bottom: 40px; width: 500px; height: 200px; padding: 32px 48px;}
    .main-slide .info .title {font-size: 2rem; line-height: 2.8rem; margin-bottom: 16px;}
    .main-slide .info .text {font-size: 1.4rem; line-height: 2rem;}

    .main-slide .box-swiper-button {right: 68px; bottom: 72px; flex-direction: row; width: auto; height: auto;}
    .main-slide .box-swiper-button .swiper-button-prev {order: 1; border: 0; margin-right: 20px;}
    .main-slide .box-swiper-button .swiper-button-next {order: 2; border: 0;}
    .main-slide .box-swiper-button .swiper-button-prev:after,
    .main-slide .box-swiper-button .swiper-button-next:after {width: 33px; height: 14px;}

    .main-slide .swiper-pagination {right: 448px; bottom: 72px;}
    .main-slide .swiper-pagination-bullet {width: 8px; height: 8px;}
    .main-slide .box-swiper-button .swiper-button-prev:hover:after,
    .main-slide .box-swiper-button .swiper-button-next:hover:after {opacity: 1;}

    .box-main-video video {position: absolute; top: 50%; left: 50%; height: 100%; width: auto; transform: translate(-50%, -50%);}


    /* main-visual02 */
    .main-visual02 .box-inner {padding: 80px 0 80px 60px;}
    .main-visual02 .box-visual .title-box .title {margin-bottom: 40px;}

    /* main-visual03 */
    .vision-accordion {height: 580px;}
    .vision-accordion .info {padding: 0 60px 40px 60px;}
    .vision-accordion .info-mo {padding: 30px 20px;}
    .vision-accordion .info-mo .title > br {display: block;}
    .vision-accordion .title-box .title::after {margin: 20px 0;}
    .vision-accordion .text-list li {font-size: 1.6rem; line-height: 2.4rem;}

    /* main-visual04 */
    .main-visual04 .box-inner {padding: 80px 0 0 0;}
    .main-visual04 .box-visual .title-box .title {margin-bottom: 40px;}

    .works-slide .swiper {padding-bottom: 60px;}
    .works-slide .swiper-slide {width: 560px; height: auto;}
    .works-slide .swiper-pagination-progressbar {width: 560px; height: 6px;}
    .works-slide .item-info .category {font-size: 1.4rem; line-height: 2rem;}
    .works-slide .item-info .title {font-size: 2rem; line-height: 2.8rem;}
    .works-slide .item-info .btn-work-more::before {width: 24px; height: 24px; margin-right: 4px;}
    .works-slide .item-info .btn-work-more em {font-size: 1.6rem; line-height: 2.4rem;}

    /* swiper-gallery */
    .box-gallery-slide .swiper-button-prev,
    .box-gallery-slide .swiper-button-next {display: none;}

    /* main-visual05 */
    .main-visual05 .box-inner {flex-direction: column; justify-content: center; align-items: center; padding: 80px 0;}
    .main-visual05 .title-box {margin-right: 0; margin-bottom: 60px; text-align: center;}
    .main-visual05 .title-box * {text-align: center;}
    .main-visual05 .title-box .text2 {margin-bottom: 40px;}
    .main-visual05 .btn-instagram {padding: 15px 24px;}
    .main-visual05 .btn-instagram span {font-size: 1.4rem; line-height: 2rem;}

    /* marquee */
    .text-marquee .text {font-size: 14rem; line-height: 18rem;}

    /* main-visual06 */
    .main-visual06 .box-inner {padding: 80px 28px 0 28px;}
    .main-visual06 .text-img {margin-top: 40px;}
    .main-visual06 .text-img .box-text {top: 50%; transform: translateY(-50%); bottom: inherit; padding: 24px 40px;}
    .main-visual06 .box-text .sub-text1,
    .main-visual06 .box-text .sub-text2{font-size: 1.8rem; line-height: 2.8rem;}
    .business-list .info {padding: 20px;}
    .business-list .info .title {font-size: 2rem; line-height: 2.6rem;}

    /* main-visual07 */
    .main-visual07 .box-inner {flex-direction: column; padding-top: 80px;}
    .map {width: 100%;}
    .map .root_daum_roughmap_landing {height: 420px; order: 1;}
    .contact {width: 100%; order: 2;}
    .box-contact {padding: 40px 28px;}
    .box-contact .contact-list {margin-top: 20px;}
    .box-kakao {padding: 40px 28px;}
    .box-contact .title {margin-bottom: 12px;}
    .box-contact .contact-list ul {margin-top: 16px;}
    .box-visual .box-kakao .title-box .title {font-size: 2rem; line-height: 2.8rem;}
    .box-visual .box-kakao .title-box .title br {display: none;}
    .box-visual .box-kakao .title-box .text2 {font-size: 1.4rem; line-height: 2rem;}
    .box-kakao {padding: 24px 28px;}
    .box-kakao .btn-kakao {padding: 16px 24px;}
    .box-kakao .btn-kakao span {font-size: 1.4rem; margin-left: 4px;}

}


/***************** mobile *****************/
@media only screen and (max-width: 767px) {

    /*----- header -----*/
    .header-inner {height: 124px;}
    .nav .menu ul {padding: 0 20px; justify-content: space-between;}
    .nav .menu .nav-item {margin: 0;}
    .nav .menu .nav-item > a {font-size: 1.4rem; line-height: 5.6rem;}

    .pc-img {display: none;}
    .mo-img {display: block;}
    .mo-none {display: none;}

    /*----- footer -----*/
    .footer {padding: 40px 20px;}
    .footer-logo {margin: 0; width: 174px; height: 40px;}
    .footer-info {margin-top: 24px; text-align: left;}
    .footer-info span {font-size: 1.2rem; line-height: 1.8rem;}

    /*----------------------------------- common -----------------------------------*/
    .box-visual .title-box .title {font-size: 3.6rem; line-height: 4.8rem;}
    .box-visual .title-box .title.type1 {font-size: 2.8rem; line-height: 4.4rem;}
    .box-visual .title-box .text2 {font-size: 1.4rem; line-height: 2rem;}
    .box-visual .title-box.mo {display: block;}

    .more-type1::before {width: 16px; height: 16px; margin-right: 4px;}
    .more-type1 em {display: block; font-size: 1.2rem; line-height: 1.6rem;}

    /* popup */
    .popup-body {padding: 0;}
    .popup-inner {margin: 20px auto; width: calc(100% - 34px); max-height: calc((var(--vh) * 100) - 40px);}

    /* main-visual01 */
    .main-slide .item-slide {height: 680px;}
    .main-slide .item-slide img {height: 100%; width: 100%; object-fit: cover;}
    .main-slide .info {height: 180px; left: 20px; right: 20px; bottom: 20px; width: calc(100% - 40px); padding: 24px;}
    .main-slide .info .title {margin-bottom: 12px;}
    .main-slide .box-swiper-button {right: 40px; bottom: 40px;}
    .main-slide .swiper-pagination {left: 44px; bottom: 40px; right: inherit;}

    /* main-visual02 */
    .main-visual02 .box-inner {flex-direction: column; padding: 80px 20px;}
    .main-visual02 .box-visual .title-box {order: 3; margin-right: 0;}
    .main-visual02 .box-visual .title-box.mo {order: 1; text-align: center;}
    .main-visual02 .box-visual .title-box.mo .title {margin-bottom: 28px;}
    .main-visual02 .box-visual .title-box .text1 {margin-bottom: 12px;}
    .main-visual02 .box-visual .title-box .text2 {margin-bottom: 20px;}
    .main-visual02 .signature .text {font-size: 1.4rem; line-height: 2rem;}
    .img-about {order: 2; width: 100%; margin-bottom: 28px;}
    .img-about .item1 {display: none;}
    .img-about .item2 {width: 100%; height: 200px; display: flex; align-items: flex-end; overflow: hidden;}
    .img-about .item2 img {transform: translateY(20px);}

    /* main-visual03 */
    .vision-accordion {flex-direction: column; width: 100%; height: 520px;}
    .vision-accordion .item {flex: 1.5 1 0;}
    .vision-accordion .item.is-active {flex: 5 1 0;}
    .vision-accordion .is-active .info {padding: 20px 20px 28px 20px;}

    .vision-accordion .info-mo {padding: 0 20px; flex-direction: row; align-items: center; justify-content: space-between;}
    .vision-accordion .info-mo .title > br {display: none;}
    .vision-accordion .info-mo .more-type1 {margin-top: 0; align-items: center;}
    .vision-accordion .info-mo .more-type1 em {display: none;}

    .vision-accordion .text-list li {font-size: 1.4rem; line-height: 2rem;}
    .vision-accordion .text-list li > span {display: none;}

    /* main-visual04 */
    .main-visual04 .box-inner {padding-top: 80px;}
    .main-visual04 .box-visual .title-box .title {margin-bottom: 28px;}

    .works-slide {margin-left: 20px;}
    .works-slide .swiper {padding-bottom: 30px;}
    /* .works-slide .swiper-slide {width: 352px; height: 196px;} */
    .works-slide .swiper-slide {width: 280px; height: 156px;}

    .works-slide .item-info {left: 20px; right: 20px; bottom: 16px;}
    .works-slide .item-info .category {font-size: 1.2rem; line-height: 1.6rem; margin-bottom: 4px;}
    .works-slide .item-info .title {font-size: 1.4rem; line-height: 2rem;}
    .works-slide .item-info .btn-work-more::before {width: 16px; height: 16px;}
    .works-slide .item-info .btn-work-more em {font-size: 1.2rem; line-height: 1.6rem;}

    .works-slide .swiper-button-next,
    .works-slide .swiper-button-prev {display: none;}
    .works-slide .swiper-pagination-progressbar {width: calc(100% - 20px); height: 4px; right: 20px;}

    /* swiper-gallery */
    .swiper-gallery-visual .gallery-info {left: 20px; bottom: 20px;}
    .gallery-info .category {font-size: 1.2rem; line-height: 1.6rem; margin-bottom: 4px;}
    .gallery-info .title {font-size: 1.4rem; line-height: 2rem;}

    /* main-visual05 */
    .main-visual05 .box-inner {padding: 40px 0 40px;}
    .main-visual05 .title-box .title {margin-bottom: 20px;}
    .insta-list .item {height: 186px;}

    /* marquee */
    .text-marquee .text {font-size: 8rem; line-height: 10rem;}

    /* main-visual06 */
    .main-visual06 .box-inner {padding: 80px 20px;}
    .main-visual06 .title-box {display: flex; flex-direction: column;}
    .main-visual06 .title-box .title {order: 1;}
    .main-visual06 .title-box .text2 {order: 3; margin-top: 20px; text-align: left;}
    .main-visual06 .title-box .text-img {order: 2; margin-top: 0;}

    .main-visual06 .text-img:hover img {transform: scale(1);}
    .main-visual06 .text-img .box-text {margin-top: 40px; padding: 0; width: 100%; position: relative; top: inherit; right: inherit; transform: inherit; background-color: inherit;}
    .main-visual06 .box-text .sub-text1 {font-size: 2.4rem; line-height: 3.6rem; font-weight: 600; color: #000; margin-bottom: 12px;}
    .main-visual06 .box-text .sub-text2 {font-size: 2.4rem; line-height: 3.6rem; font-weight: 600; color: #C7C7C7;}

    .business-list {flex-direction: column; margin-top: 60px;}
    .business-list .item {margin-right: 0; margin-bottom: 12px;}
    .business-list .item:last-of-type {margin-bottom: 0;}

    .business-list .info {padding: 32px 24px;}
    .business-list .info .title {font-size: 2.4rem; line-height: 3.6rem;}

    /* main-visual07 */
    .box-contact {padding: 40px 20px;}
    .box-contact .contact-list ul {flex-direction: column;}
    .box-contact .contact-list li {font-size: 1.4rem; line-height: 2rem; margin-bottom: 16px;}
    .box-contact .contact-list li:last-of-type {margin-bottom: 0;}

    .box-kakao {flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 40px 20px;}
    .box-visual .title-box .title.type1 {font-size: 2rem; line-height: 2.8rem; margin-bottom: 4px;}
    .box-kakao .btn-kakao {margin-top: 20px; padding: 10px 12px;}
}