html {overflow-x:hidden; height:100%; /* scroll-behavior: smooth; */}
body {overflow-x:hidden; display:flex; flex-direction:column; color:#000; font-family: "Helvetica Neue", "Pretendard", "Noto Sans", sans-serif; }
* {font-family: "Helvetica Neue", "Pretendard", "Noto Sans", sans-serif; }
html.overflow-hidden,
body.overflow-hidden {overflow:hidden; }
header,footer {flex-shrink:0; }
main {flex-grow:1; }
.inner {padding:0 40px; }
.w1200 {width:1300px; max-width:100%; padding:0 25px; margin:0 auto; }
#wrap {padding-top:45px; }
.main #wrap {padding-top:0; }

@media all and (max-width:767px){
    .inner {padding:0 20px; }
    .w1200 {padding:0 20px; }
}


/* 헤더 */
header {z-index:100; overflow:hidden; position:fixed; top:0; left:0; width:100%; padding:10px 0; }
header.bg_on {background-color:rgba(255,255,255,0.5); backdrop-filter: blur(1px); }
header .inner {display:flex; align-items:center; justify-content:space-between; }
header h1 {z-index:20; position:relative; }
header h1 img {display:block; transition:all 0.5s; }
header .gnb {display:flex; align-items:center; }
header .gnb .mo_top {display:none; align-items:center; justify-content:space-between; height:53px; padding:20px 20px 15px; }
header .gnb ul {display:flex; align-items:center; gap:75px; }
header .gnb li.active {opacity:1; }
header .gnb li a {display:flex; align-items:center; gap:10px; font-size:14px; color:#000; transition:all 0.5s; }
header .gnb li a i {position:relative; flex-shrink:0; display:flex; align-items:center; gap:20px; height:18px; padding-bottom:2px; font-size:16px; font-style:normal; }
header .gnb li a i:after {content:']'; }
header .gnb li a i:before {content:''; opacity:0; position:absolute; left:calc(50% - 4px); top:calc(50% - 4px); width:10px; height:10px; background-color:#D0EFFF; border-radius:50%; }
header .gnb li.active a i:before {opacity:1; }
header .ham_btn {z-index:20; position:relative; display:none; width:25px; height:23px; }

header.white_type h1 img {opacity:0; }
header.white_type h1:before {content:''; position:absolute; width:100%; height:100%; background:url('../img/logo_white.svg') no-repeat center center / 100% 100%; }
header.white_type .gnb li {opacity:1; }
header.white_type .gnb li a {color:#fff; }
header.white_type .gnb li.insta img {filter:invert(1); transition:all 0.5s; }
header.white_type .ham_btn.ham_icon {filter:invert(1);}

@media all and (max-width:840px){
    header .gnb ul {gap:50px; }
}

@media all and (max-width:767px){
    header {height:51px; padding:14px 0; }
    header.bg_on {backdrop-filter:unset;}
    header h1 img {height:22px; }
    header .gnb {z-index:30; position:fixed; right:100%; top:0; display:block; width:75%; height:100%; background-color:#ffffff; transition:all 0.4s; }
    header .gnb .mo_top {display:flex; }
    header .gnb .mo_top .logo img {height:22px; }
    header .gnb ul {flex-direction:column; gap:0; width:100%; padding:20px; margin-top:30px; }
    header .gnb.active {right:25%; box-shadow:150px 0 100px rgba(0, 0, 0, 0.5); }
    header .gnb li {opacity:1; display:block; width:100%; }
    header .gnb li a {display:block; padding:23px 0; font-size:20px; font-weight:300;  }
    header .gnb li:last-of-type a {border-bottom:0 none; }
    header .gnb li a i {display:none; }
    header .gnb li.insta {margin-top:20px; }
    header .gnb li.insta img {height:30px; }
    header.white_type .gnb li a {color:#000; }
    header.white_type .gnb li.insta img {filter:invert(0); }
    header .ham_btn {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; }

}


/* 푸터 */
footer {padding:30px 0; }
footer .logo {padding-bottom:30px;}
footer .add p {font-size:14px; color:#000; line-height:1.7; }
footer .add p + p {margin-top:15px; }

@media all and (max-width:767px){
    footer .logo {padding-bottom:20px; }
    footer .add p {font-size:12px; }
    footer .add p + p {margin-top:10px; }
}

/* 탑버튼 */
.top_btn {z-index:80; position:fixed; right:40px; bottom:-80px; width:50px; height:50px; font-size:15px; color:#232730; transition:all 0.4s; cursor:pointer; }
.top_btn.on {bottom:40px; }
@media all and (max-width:767px){
    .top_btn {right:10px; width:55px; height:55px; font-size:13px; }
    .top_btn.on {bottom:20px; }
}

/* 메인 */
.main_visual {overflow:hidden; position:relative; width:100%; height:100dvh; }
.main_visual .swiper-slide {overflow:hidden; }
.main_visual .swiper-slide img {width:100%; height:100%; object-fit:cover; }
.main_visual .arrow {z-index:10; position:absolute; bottom:40px; width:40px; height:40px; background-color:#232730; border-radius:50%; cursor:pointer; transition:all 0.5s; }
.main_visual .arrow img {display:block; max-width:55%; margin:0 auto; }
.main_visual .arrow.prev {left:40px; }
.main_visual .arrow.prev img {transform:rotate(180deg); }
.main_visual .arrow.next {right:40px; }
.main_visual .arrow.swiper-button-disabled {opacity:.4; }
.main_visual .pagination {z-index:10; position:absolute; left:0; top:auto; bottom:0; display:none; width:100%; height:10px; background-color:rgba(0,0,0,0.2); }
.main_visual .pagination span.swiper-pagination-progressbar-fill {background-color:#ffffff; }

.main_visual .txt_box {z-index:10; position:absolute; left:40px; top:50%; transform:translateY(-50%); }
.main_visual .txt_box .tit {font-size:63px; font-weight:300; letter-spacing:1px; transition:all 0.5s; }
.main_visual .txt_box .tit b {font-weight:600; }
.main_visual .txt_box .tit br.mo_ver {display:none; }
.main_visual .txt_box .desc {margin-top:70px; font-size:16px; color:#515151; font-weight:400; line-height:1.6; letter-spacing:-0.048px; transition:all 0.5s; }
.main_visual .txt_box.white_type .tit {color:#fff; }
.main_visual .txt_box.white_type .desc {color:#b1b1b1; }

@media all and (max-width:767px){
    .main_visual .swiper-slide img {width:auto; max-width:none; transform:translateX(-50%); }

    .main_visual .arrow {display:none; width:30px; height:30px; }
    .main_visual .arrow img {width:80%; }
    .main_visual .arrow.prev {left:10px; }
    .main_visual .arrow.next {right:10px; }
    .main_visual .pagination {display:block; }

    .main_visual .txt_box {left:20px; top:33%; }
    .main_visual .txt_box .tit {font-size:37px; }
    .main_visual .txt_box .tit br.mo_ver {display:block; }
    .main_visual .txt_box .desc {display:none; }
}


/* contact */
.contact_cont {padding:50px 0; }
.contact_cont .map_box {z-index:5; position:relative; }
.contact_cont .map_box #map {height:630px; }
.contact_cont .txt_box {padding:45px 20px; }
.contact_cont .txt_box h4 {font-size:14px; font-style:italic; color:#000; font-weight:400; }
.contact_cont .txt_box p {padding:40px 0; font-size:15px; color:#000; font-weight:300; line-height:1.5; }
.contact_cont .txt_box a {display:flex; align-items:center; gap:5px; font-size:15px; color:#9e9e9e; font-weight:300; }
.contact_cont .txt_box a:after {content:''; width:24px; height:24px; background:url('../img/icon/link_arrow.svg') no-repeat center center; }

@media all and (max-width:767px){
    .contact_cont {padding:30px 0; }
    .contact_cont .map_box #map {height:350px; }
    .contact_cont .txt_box {padding:40px 0 20px; }
    .contact_cont .txt_box p {padding:25px 0; }
}


/* about */
.about_con01 {padding:50px 40px 150px; }
.about_con01 .inner {padding:0; }
.about_con01 .img_box {width:100%; }
.about_con01 .img_box img {display:block; width:100%; }
.about_con01 .txt_box {display:grid; grid-template-columns:1fr 1.2fr; gap:100px; margin-top:50px; }
.about_con01 .txt_box .ko,
.about_con01 .txt_box .en {font-size:15px; line-height:1.5; letter-spacing:-0.45px; }
.about_con01 .txt_box .en {font-style:italic; font-weight:300; }

@media all and (max-width:767px){
    .about_con01 {padding:30px 20px 50px; }
    .about_con01 .txt_box {grid-template-columns:1fr; gap:15px; margin-top:20px; }
    .about_con01 .txt_box .ko, 
    .about_con01 .txt_box .en {font-size:14px; }
}


/* work */
.work_cont {padding:50px 0 0; }

.work_filter {z-index:10; position:relative; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 40px; }
.work_filter .filter_box {display:flex; align-items:center; gap:10px 40px; flex-wrap:wrap; }
.work_filter .filter_box h5 {font-size:14px; font-weight:300; letter-spacing:-0.42px; }

.work_filter .filter_box .select_area {display:flex; align-items:center; gap:15px; flex-wrap:wrap; }
.work_filter .filter_box .select_area .selected {display:none; padding:10px 14px; font-size:14px; font-weight:300; color:#fff; cursor:pointer; border-radius:50px; background-color:#000; }
.work_filter .filter_box .select_area .select_box { align-items:center; gap:4px; flex-wrap:wrap; }
.work_filter .filter_box p input[type="radio"] {display:none; }
.work_filter .filter_box p input[type="radio"] + label {padding:10px 14px; font-size:14px; font-weight:300; color:#000; cursor:pointer; border-radius:50px; }
.work_filter .filter_box p input[type="radio"]:checked + label {color:#fff; background-color:#000; }

.work_filter .list_type {display:flex; align-items:center; gap:8px; }
.work_filter .list_type a {position:relative; padding:10px 14px; font-size:14px; font-weight:300; border-radius:50px; }
.work_filter .list_type a.active {color:#fff; background-color:#000; }

@media all and (min-width:768px){
    .work_filter .filter_box .select_area .select_box {display:flex !important; }
}

@media all and (max-width:767px){
    .work_filter {padding:10px 20px; }
    .work_filter .filter_box {gap:5px; }
    .work_filter .filter_box h5 {display:none; }

    .work_filter .filter_box .select_area .selected {display:block; }
    .work_filter .filter_box .select_area .select_box {position:absolute; left:20px; top:100%; overflow-y:auto; display:none; width:calc(100% - 40px); max-height:50dvh; padding:10px; background-color:#fff; }
    .work_filter .filter_box .select_area .select_box p input[type="radio"] + label {display:block; padding:10px 0; text-align:center; }
    .work_filter .filter_box .select_area .select_box p input[type="radio"]:checked + label {color:#000; background-color:transparent; font-weight:500;}

    .work_filter .list_type {gap:5px; }
    .work_filter .list_type a {padding-left:15px; font-size:14px; }
    .work_filter .list_type a:before {top:calc(50% - 4px); width:8px; height:8px; }
}

.cursor_img {position:fixed;opacity:0; width:150px;height:150px;user-select: none;pointer-events: none;-webkit-user-drag: none;z-index: 10000;cursor: none;background-image: url('../img/icon/cursor.png'); background-size:100% 100%; transition: opacity 0.2s ease;}

@media all and (max-width:767px){
    .cursor_img {opacity:0 !important; }
}
.work_list {display:flex; flex-direction:column; align-items:flex-start; transform-origin:50% 350px; }
.work_item {display:block; width:982px; margin:0 auto; transition:all 0.6s; }
.work_item + .work_item {margin-top:30px; }
.work_item .swiper-slide {width:auto; }
.work_item .swiper-slide > div:not(.item_info) {cursor:pointer; }
.work_item .item_info {display:flex; flex-direction:column; justify-content:space-between; width:415px; padding-right:15px; }
.work_item .item_info .top_info {display:flex; align-items:flex-start; justify-content:space-between;}
.work_item .item_info .top_info .cate {font-size:14px; color:#000; font-weight:300; }
.work_item .item_info .top_info .tit {text-align:right; }
.work_item .item_info .top_info .tit p {margin-bottom:10px; font-size:16px; color:#000; font-weight:300; }
.work_item .item_info .top_info .tit i {display:block; margin-bottom:18px; text-transform:uppercase; font-size:14px; color:#B1B1B1; font-weight:200; line-height:1.4; }
.work_item .item_info .bottom_info {position:absolute; bottom:0; left:-50px; visibility:hidden; opacity:0; z-index:-999; overflow-y:auto; width:100%; max-height:calc(100% - 125px); }
.work_item .item_info .bottom_info dl {display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:5px 1px; }
.work_item .item_info .bottom_info dl dt {flex-shrink:0; font-size:13px; color:#000; font-weight:300; }
.work_item .item_info .bottom_info dl dd {font-size:13px; color:#000; font-weight:300; }
.work_item .img_box img {display:block; width:527px; height:100%; }
.work_item .txt_box {width:210px; font-size:14px; line-height:1.4; font-weight:300; word-break:break-all;}
.work_item .txt_box pre {font-family:"Noto Sans", "Pretendard", sans-serif; white-space:break-spaces}

.work_item .swiper-slide {display:none; margin-right:20px; transition:all 0.6s; }
.work_item .swiper-slide:nth-of-type(1),
.work_item .swiper-slide:nth-of-type(2) {display:block; }

.work_item.active * {cursor:none; }
.work_item.active {width:100%; padding:30px 0; cursor:none; }
.work_item.active .swiper-slide { display:block; }
.work_item.active .item_info {overflow-y:auto; height:100%; }
.work_item.active .item_info .bottom_info {left:0; visibility:visible; opacity:1; z-index:10; transition:all 0.5s; transition-delay:0.8s; }
.work_item.active .img_box img {width:auto; }

.work_mo_grid {display:none; grid-template-columns:repeat(1,1fr); gap:0; }
.work_mo_grid .work_box {float:none; width:100%; }
.work_mo_grid .work_box_mo {float:none; width:100%; }
.work_mo_grid .click_box {display:none; padding:35px 0; }
.work_mo_grid .click_box dl {display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:5px 1px; }
.work_mo_grid .click_box dl dt {flex-shrink:0; font-size:14px; color:#000; font-weight:300; font-style:italic; }
.work_mo_grid .click_box dl dd {font-size:14px; color:#000; font-weight:300; }
.work_mo_grid .img_slide {position:relative; width:100%; padding-bottom:20px; }
.work_mo_grid .img_slide .img_box img {display:block; }
.work_mo_grid .img_slide .txt_box {padding-bottom:40px; font-size:14px; line-height:1.4; font-weight:300; word-break:break-all; }
.work_mo_grid .img_slide .txt_box pre {font-family:"Noto Sans", "Pretendard", sans-serif; white-space:break-spaces}
.work_mo_grid .img_slide .pager {position:absolute; left:0; top:auto; bottom:0; width:100%; height:2px; background-color:#4E6378; border-radius:5px; }
.work_mo_grid .img_slide .pager .swiper-pagination-progressbar-fill {background-color:#eee; border-radius:5px; }

@media all and (max-width:1024px){
    .work_item {width:670px; }
    .work_item .item_info {width:300px; }
    .work_item .img_box img {width:330px; }
}
@media all and (max-width:767px){
    .work_list.pc_ver {display:none; }
    .work_mo_grid {display:block; }
    .work_mo_grid .click_box {padding:25px 0; }
}


/* grid */
.grid_sizer,
.work_box {width:calc(33.33% - 14px); }
.work_box {float:left; margin-bottom:50px; cursor:pointer; }

.work_box .txt_box .cate {font-size:14px; color:#000; font-weight:300; }
.work_box .txt_box .tit {margin-top:17px; text-align:left; }
.work_box .txt_box .tit p {margin-bottom:10px; font-size:16px; color:#000; font-weight:400; }
.work_box .txt_box .tit i {display:block; font-size:14px; color:#B1B1B1; font-weight:200; line-height:1.4; text-transform:uppercase; }
.work_box .txt_box .tit i + i {margin-top:20px; }
.work_box .img_box {margin-top:35px; }
.work_box .img_box img {width:100%; }

.work_box_mo .txt_box .cate {font-size:14px; color:#000; font-weight:300; }
.work_box_mo .txt_box .tit {margin-top:17px; text-align:left; }
.work_box_mo .txt_box .tit p {margin-bottom:10px; font-size:16px; color:#000; font-weight:400; }
.work_box_mo .txt_box .tit i {display:block; font-size:14px; color:#B1B1B1; font-weight:200; line-height:1.4; text-transform:uppercase; }
.work_box_mo .txt_box .tit i + i {margin-top:20px; }
.work_box_mo .img_box {margin-top:35px; }
.work_box_mo .img_box img {width:100%; }

.work_detail_modal {z-index:-9999; position:fixed; left:0; top:0; opacity:0; visibility:hidden; overflow-y:auto; overflow-x:hidden; width:100%; height:100%; padding:84px 40px 40px; background-color:#fff; }
.work_detail_modal.open {z-index:20; opacity:1; visibility:visible; transition:opacity 0.5s; }
.work_detail_modal .modal_close_btn {position:absolute; left:40px; top:72px; display:flex; align-items:center; gap:8px; font-size:16px; color:#9E9E9E; font-weight:300; }
.work_detail_modal .work_detail.mo_ver {display:none; }
.work_detail_modal .work_detail.pc_ver {display:flex; align-items:center; height:100%; padding-top:30px; }
.work_detail_modal .work_detail .work_item {display:block; padding:0; }
.work_detail_modal .work_detail .work_item .swiper-slide > div {height:calc(80dvh - 100px); }
.work_detail_modal .work_mo_grid .click_box {display:block; }


@media all and (max-width:767px){
    .grid_sizer,
    .work_box {width:calc(50% - 7.5px); }
    .work_box {margin-bottom:40px; }

    .work_box .txt_box .tit {margin-top:15px; }
    .work_box .txt_box .tit p {margin-bottom:13px; }
    .work_box .img_box {margin-top:15px; }
    
    .work_box_mo .txt_box .tit {margin-top:15px; }
    .work_box_mo .txt_box .tit p {margin-bottom:13px; }

    .work_detail_modal {padding:20px; padding-top:70px; }
    .work_detail_modal.open {z-index:101; }
    .work_detail_modal .modal_close_btn {left:20px; top:20px; font-size:14px; }
    .work_detail_modal .modal_close_btn img {width:30px; }
    .work_detail_modal .work_detail.pc_ver {display:none; }
    .work_detail_modal .work_detail.mo_ver {display:block; }
}


/* business */
.busi_banner {margin:80px 0 0; }
.busi_banner .txt_box {min-height:600px; padding:30px; font-size:15px; color:#fff; font-weight:300; line-height:1.5; background:url('../img/business_banner.png') no-repeat center center / cover; }
.busi_banner .txt_box b {font-weight:600; }

@media all and (max-width:767px){
    .busi_banner {margin:40px 0 0; }
    .busi_banner .txt_box {min-height:400px; padding:20px 40% 20px 20px; font-size:13px; }
}

.busi_con01 dl {padding:100px 0; }
.busi_con01 dl + dl {border-top:1px solid #EAEAEA; }
.busi_con01 dl dt {font-size:15px; line-height:1.5; }
.busi_con01 dl dt b {font-weight:700; }
.busi_con01 dl dt p {margin-top:25px; }
.busi_con01 dl dd {display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:40px; }
.busi_con01 dl dd img {display:block; }

@media all and (max-width:767px){
    .busi_con01 dl {padding:40px 0; }
    .busi_con01 dl dd {grid-template-columns:1fr; margin-top:20px; }
}