@charset "utf-8";

:root {
	--xxxx-large-font-size:32px;
	--xxx-large-font-size:28px;
	--xx-large-font-size:24px;
	--x-large-font-size:22px;
	--large-font-size:20px;
	--font-size:19px;
	--mid-font-size: 18px;
	--sub-font-size: 17px;
	--small-font-size: 16px;
	--x-small-font-size: 15px;
}

.m_gnb .sub_menu {display:none !important;}
.web_dis {display:block;}
.mb_dis {display:none;}
.pc_view {display:block}
.mb_view {display:none}
.mont {font-family:'Montserrat', sans-serif; }



/* header */
#header {width:100%; position: fixed; left:0px; top:0px; z-index:9999; background: #000; transition:all 0.3s 0s ease-in-out;}
#header h1 {position:absolute; left:10px; top:50%; transform:translateY(-50%); -wbkit-transform:translateY(-50%); z-index:10; line-height:0px}
/* #header h1 a img {filter: brightness(0) invert(1); -webkit-filter: brightness(0) invert(1);} */
.over .header_bar {border-bottom-right-radius:0px; border-bottom-left-radius:0px;}

/* .header_bar.fix {width:100%; position: fixed; left: 0px; top:0px;  box-shadow:0px 6px 5px rgba(0, 0, 0, 10%);} */
.in_header {max-width: var(--inner); padding: 0px 10px; width:100%; height:75px; margin:0 auto; position:relative; z-index:9;}

/* wrap */
#wrap {width:100%; overflow-x:hidden; word-break:keep-all; transition:all 0.3s 0s ease-in-out;}
#inner_wrap {position:relative; padding:75px 10px 100px 10px;}
.inner {max-width:var(--inner); margin:0 auto;}
.top_util {display: flex; align-items: center; position: absolute; gap:clamp(15px, 3vw, 30px); right:10px; top: 50%; margin-top:4px; transform: translateY(-50%);}
.top_util > li {position: relative;}
.top_util > li .bt:focus-visible {outline:2px solid #fff; outline-offset:2px;}
.top_util_lang > button {display: flex; align-items: center; gap: 7px; padding: 0px; font-size: 14px;}
.top_util_total {display:none;}

.menu_btn {position: relative; display: flex; padding: 0px; align-items:center; font-size:16px; height:40px; gap:8px;}
.menu_btn .txt {padding-top: 2px;}
.menu_btn .line {display:block;width:16px; height: 16px; background: url(/resources/img/common/all_menu.svg) no-repeat center center;}


/* GNB */
.w_gnb {padding:10px 120px 0px 240px; height: 100%; align-items:center;}
.w_gnb .gnb {width: 100%; height: 100%; display:flex; flex-wrap:wrap; justify-content:flex-end; margin-left: auto; max-width:915px; gap:30px; transition:all 0.5s 0s ease-out;}
.w_gnb .gnb > li {position: relative;}
.w_gnb .gnb > li > a {display:flex; font-size:14px; justify-content: center; align-items: center; height: 100%; }
.w_gnb .gnb > li > a > span {position: relative; display: inline-flex; height: 100%; font-weight:600; align-items: center;}

.w_gnb .sub_menu {display:none; position: absolute; left:0px; top:90%; width: 100%; min-width:200px;}
.w_gnb .sub_menu > li > a {display:flex; font-size: 14px; line-height: 1.4em; align-items:center; padding:0.5em 0px; color: #fff; transition:all 0.2s 0s ease-in-out;}
.w_gnb .sub_menu > li > a:hover {opacity: 0.9;}


/* slide_menu */
.slide_menu_wrap {width:100vw; height:100vh;  z-index:998; position:fixed; top:-100%; left:0px; overflow: hidden; background: rgba(0, 0, 0, 0.9); transition:all 0.3s 0s ease-in-out; display:none; padding:clamp(20px, 4vw, 43px) 10px;}
.slide_menu_wrap.on {top: 0px;}
.slide_menu_inner {height:100%; display: flex; flex-direction: column; max-width:1760px; margin: 0 auto; z-index:2; position:relative; overflow-y: auto; height:100%; -webkit-overflow-scrolling: touch; overflow-x: hidden;}
.slide_menu_inner .header { display: flex; justify-content: space-between; align-items: center; padding:0px; position:relative;}

.slide_menu_inner .close { width: 32px; height: 32px; position: relative; }
.slide_menu_inner .bt_close {position:absolute; right:0px; top:0%; display: flex; width: 100%; height: 100%; text-indent: -999999em; background: url(/resources/img/common/bt_x3.svg?ver=13) no-repeat left top/cover;}

.slide_menu_inner .gnb { display: flex; flex-direction: column;  text-align: center; justify-content: center; gap:clamp(10px, 10vw, 100px); align-items: center; flex:1;}
.slide_menu_inner .gnb::-webkit-scrollbar { width: 6px; }
.slide_menu_inner .gnb::-webkit-scrollbar-thumb { background-color:#ccc; border-radius: 10px; }
.slide_menu_inner .gnb::-webkit-scrollbar-track { background-color: transparent;  }

.slide_menu_inner .gnb > li > a {font-size:2em; color:#fff; font-weight:800 ; line-height:1.4em; text-align: center;}
.slide_menu_inner .sub_menu {display: flex !important; flex-direction: column; gap: 0.5em;}
.slide_menu_inner .sub_menu > li {margin-top: 0.5em;}
.slide_menu_inner .sub_menu > li > a {text-align: center; display: block; font-size: 1.1em;}

.main_wrap h1 {display: none;}
.main_wrap #header {transform: translateY(-100%); animation: main_header_show 0.5s ease-in-out 5.5s forwards;}
.main_wrap #container {height: 100dvh; padding:75px 0px; display: flex; align-items: center; justify-content: center; width: 100%;}

@keyframes main_header_show {
	from {transform: translateY(-100%);}
	to {transform: translateY(0);}
}
.main_video {width: 100%; max-width: 1721px; height: 100vh; margin: 0 auto; overflow: hidden; }
.main_video video {width: 100%; height: 100%; object-fit: cover;}
.main_video .video-wrap { width: 100%; height: 100%; aspect-ratio: 1920/1080; }

.movie_frame {padding-bottom:calc(388 / 691 * 100%); position: relative; overflow:hidden;}
.movie_frame > img, .movie_frame iframe {position:absolute; left:0px; top:0px; width:100%; height:100%; object-fit: cover;}

 
/* footer */
#footer {padding:0px 10px; font-size:clamp(12px, 1.2vw, 14px);}
#footer .inner {max-width:var(--inner); display: flex; justify-content: space-between; align-items: flex-start; gap: 1em; position:relative; margin:0 auto; padding:min(5vw, 57px) 0px }
#footer .f_logo {display: flex; align-items: center; gap:10px clamp(20px, 5vw, 50px);}
#footer .f_logo > a {display: flex; align-items: center; justify-content: center; color: #7E7E7E; border:1px solid #7E7E7E; border-radius:300px; width:12.85em; height:3em; gap: 1em; font-weight:600;}
.addressW {display: flex; flex-direction: column;}
.addressW address {display: flex; flex-wrap: wrap; gap:0em 2em; font-weight: 500; overflow: hidden;}
.addressW address strong {font-weight: 500;}
.addressW address > span {position:relative;}
.addressW address > span:before {content:""; width:1px; height:clamp(8px, 1.7vw, 12px); background: #fff; opacity: 0.7; position: absolute; left:-1em; top: 50%; transform: translateY(-52%);}
.addressW .copy {text-align: right; opacity: 0.4; font-weight: 300;}

.go_top {position: fixed; right: 10px; top:50%; transform: translateY(-50%); z-index: 99; transition:all 0.2s 0s ease-in-out;}
.go_top > a {display:flex; width:72px; height:72px; line-height:1.6em; background:var(--key-color); justify-content:center; text-align: center; align-items:center; flex-direction:column; gap: 2px; color:#fff; font-size:15px; border-radius:100%}

/* sub_page */
.sub_con { max-width:var(--inner); margin:0 auto; font-size:var(--font-size); word-break:keep-all;}
.sub_con > .s_tit:first-child {margin-top:0px;}
.s_tit {font-size:clamp(21px, 4.5vw, 30px); line-height:130%; margin:4em 0px 0.7em 0px;  position:relative; font-weight:700; display:flex; align-items:center;}
.s_tit.no-flex {display:block; line-height:1.3em;}


.s_tit.tc {text-align:center; justify-content:center; background:none !important; padding-left:0px;}
.s_tit.tc:after {display:none;}
.s_tit.tc:before {display:none;}

.ss_tit {font-size:1.44em; margin:2.26em 0px 0.5em 0px; font-weight:700; display:flex; align-items:baseline;}
.ss_tit.tc {justify-content:center; text-align:center}
.ss_tit.no-flex {display:block;}
.ss_tit > span{font-weight:300;}


.b_txt {font-size:min(2em , 5.5vw); line-height:1.6em;}
.b_txt_s {font-size:min(1.44em , 4.5vw); line-height:1.6em;}


.title_bar {display: flex; padding:clamp(20px, 8vw, 80px) 0px clamp(10px, 7vw, 3em) 0px; align-items: center;}
.title_bar > h3 {font-size:clamp(24px, 6vw, 64px); line-height: 1.3em; font-weight:600}
.title_bar .lnb {display: flex; margin-left: clamp(20px, 5vw, 50px); margin-top:0.5em;}
.title_bar .lnb > li > a {font-size:clamp(13px, 3vw, 20px); line-height: 1.4em; display: flex; align-items: center; padding:0.3em 1em; min-height: 2.5em; justify-content: center; padding: 0.5em 1em; font-weight:500; color: #fff; transition:all 0.2s 0s ease-in-out;}
.title_bar .lnb > li > a.on {border-radius: 300px; border: 1px solid rgba(255, 255, 255, 0.3);}
.title_bar.big > h3 {font-size:clamp(26px, 9vw, 92px);}

.list_video { width: 100vw; max-width: 1920px; height: calc(100vh - 75px); position: relative; left: 50%; transform: translateX(-50%); overflow: hidden; }
.list_video .video-wrap { width: 100%; aspect-ratio: 1920/1080; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.scroll_ico {display: flex; flex-direction: column; align-items: center; font-size: 10px; position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); z-index: 10; opacity: 0; animation: fadeIn 0.5s linear 2.5s 1 normal forwards; }
.scroll_ico .mouse_ico {width:clamp(20px, 3.3vw, 26px); aspect-ratio: 26/40; border-radius:clamp(4px, 1.5vw, 8px); border: 1px solid #FFF; position: relative;}
.scroll_ico .mouse_dot {width:4px; height:9px; border-radius:4px; background: #fff; position: absolute; left: 50%; top:7px; transform: translateX(-50%); animation: mouse_dot_ani 1.5s ease-in-out infinite;}
.scroll_ico .mouse_line {width:1px; height:clamp(7px, 1.7vw, 11px); margin-top: 2px; background: #fff; position: absolute; left: 50%; top: 100%; animation: mouse_line_ani 1.5s ease-in-out infinite;}

@keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes mouse_dot_ani {
	0% {transform: translateX(-50%) translateY(0); opacity: 1;}
	33% {transform: translateX(-50%) translateY(50%); opacity: 0;}
	100% {transform: translateX(-50%) translateY(50%); opacity: 0;}
}

@keyframes mouse_line_ani {
	0% {height:clamp(7px, 1.7vw, 11px)}
	33% {height:clamp(18px, 3vw, 30px)}
	100% {height:clamp(18px, 3vw, 30px)}
}


.works_list {display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.2vw, 20px); width: 100%;}
.works_list .works_item {position: relative; aspect-ratio:848 / 558;}
.works_list .works_item > a {display: block; width: 100%; height: 100%; border-radius: clamp(12px, 1.4vw, 18px); overflow: hidden;}
.works_list .works_item .thumb {width: 100%; height: 100%;}
.works_list .works_item .thumb img {width: 100%; height: 100%; object-fit: cover; display: block; transition: filter 0.55s ease, transform 0.55s ease;}
.works_list .works_item .info {position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center;padding: clamp(16px, 2vw, 20px); gap: 0.2em; font-size:clamp(12px, 1.1vw, 16px); line-height: 1.3em; font-weight: 400; text-align: center; color: #fff; background: rgba(0, 0, 0, 0.35); opacity: 0; transition: opacity 0.35s ease;}
.works_list .works_item .info .tit {font-size:1.5em; line-height: 1.35em; font-weight: 600;}
/* film 쪽 수정*/
/*.works_list .works_item.large {grid-column: span 2; grid-row: span 2; aspect-ratio: auto; height: 100%;}*/
.works_list .works_item.large {grid-column: span 2; grid-row: span 2; aspect-ratio: 848/558;}

/* 짝수 번째 빅사이즈: grid 시작 위치를 3번째 열로 지정하여 우측 배치 */
.works_list .works_item.large.right {
    grid-column-start: 3;
}

.works_list .works_item.large .info {font-size:clamp(14px, 1.3vw, 20px);}

@media (hover: hover) and (pointer: fine) {
	.works_list .works_item > a:hover .thumb img {filter: blur(20px);}
	.works_list .works_item > a:hover .info {opacity: 1;}
}



.project_stat {display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; margin-bottom: clamp(30px, 5vw, 60px);}
.project_stat > li {display: flex; justify-content: center; gap: clamp(12px, 2vw, 28px); position: relative; padding: clamp(10px, 2vw, 20px);}
.project_stat > li + li::before {content: ""; width: 1px; height: clamp(50px, 16vw, 160px); background: rgba(255, 255, 255, 0.15); position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.project_stat .label {font-size:var(--small-font-size); line-height: 1.35em; font-weight: 400; color: #fff; padding-top: 0.6em;}
.project_stat .num {font-size: clamp(36px, 10vw, 100px); line-height:1em; font-weight: 700; color: #fff; display: flex; align-items: center; }
.project_stat .num .plus {line-height:0px; flex-shrink: 0; margin-left: clamp(5px, 1.2vw, 1em);}
.project_stat .num .plus img {max-width:clamp(12px, 4vw, 32px)}

.contact_wrap {display: flex; justify-content: space-between; gap: clamp(20px, 5vw, 70px);}
.contact_wrap .map_area {width:62%; max-width: 1020px ;}
.contact_wrap .write_area {flex:1;}
.contact_wrap .write_area .tit {font-size: clamp(22px, 4vw, 32px); line-height: 1.4em; margin-bottom: 0.5em;}
.contact_wrap .write_area .btn_wrap {margin-top:clamp(15px, 3vw, 30px);}
.contact_wrap .write_area .write_btn {display: flex; border-radius: 4px;	border: 1px solid #CCC; display: flex; align-items: center; justify-content: center; min-height: 3em; font-weight:600;}
.form_group {display: flex; flex-direction: column;}
.form_group + .form_group {margin-top: 1.3em;}
.form_group .label {font-size: var(--small-font-size); margin-bottom: 0.5em;}
.form_group .input {border-radius: 4px; border: 1px solid #333; background: none; min-height: 3.2em;}

.map_area .map {width: 100%; height:750px; position: relative; z-index: 1;}
.map_area .map .wrap_map {width: 100% !important; height: 100% !important; overflow: hidden;}
.map_area .root_daum_roughmap {width: 100% !important; height: 100% !important;}
.map_area .root_daum_roughmap .wrap_map {height: 100% !important;}
.map_area .root_daum_roughmap .wrap_map .map_border {display: none;}
.map_area .root_daum_roughmap .wrap_map div[id^="daum_roughmap_"] {pointer-events: auto !important;}

.map_info {display: flex; justify-content: space-between; flex-wrap: wrap; overflow: hidden; gap:1em; padding-top: clamp(20px, 5vw, 56px);}
.map_info > li {display: flex; flex-direction: column;position: relative; }
.map_info > li.line { width: 1px; gap: 0; flex: none; flex-shrink: 0; background: #fff; opacity: 0.2;}
.map_info .label {display: flex; align-items: center; gap: 0.5em; font-size: var(--small-font-size); line-height: 1.3em; font-weight: 400;}
.map_info .txt {font-size: var(--large-font-size); line-height: 1.4em; font-weight: 700; margin: 0.2em 0px 0px calc(32px - 0.1em);}


.about_wrap { margin-top: clamp(30px, 10vw, 100px); justify-content: space-between; display: flex; gap: 1em;}
.about_wrap + .company_btn {margin-top: clamp(15px, 5vw, 50px); }
.company_btn {width: 100%;}
.company_btn .btn_link {display: flex; width:17em; height: 3.5em; align-items: center; border:1px solid #fff; font-size:clamp(13px, 2vw, 14px); font-weight:600;}
.company_btn .btn_link > p {flex:1; text-align: center;}
.company_btn .btn_link > span {display: flex; height: 100%; align-items: center; justify-content: center; margin-left: auto; border-left:1px solid #fff; aspect-ratio: 1/1;}

.about_tit {width: 44%; max-width: 745px; font-size: clamp(20px, 4vw, 42px); line-height: 1.8em; font-weight: 100;}
.about_tit > strong {font-weight:700;}
.about_img {flex:1; width: 50%;  overflow: hidden;  max-width: 860px;}
.about_img .swiper-slide {opacity: 0 !important; overflow: hidden; border-radius: clamp(10px, 3vw, 18px);}
.about_img .swiper-slide.swiper-slide-active {opacity:1 !important;}

.about_us {margin-top: clamp(30px, 18vw, 180px);}
.about_us .tit {font-size: clamp(22px, 5vw, 42px); margin-bottom: clamp(10px, 3vw, 40px);}
.about_us .inner {display: flex; justify-content: space-between; gap:1em;}
.about_us .content {flex:1; max-width: 1235px;}
/* .about_us .txt {color: #7E7E7E;} */


.business_list {display: flex; align-items: center; max-width:90%; margin: 0 auto;}
.business_list > li {flex: 1; transition: flex 0.5s ease;}
.business_list .box {position: relative;}
.business_list > li .thumb { border-radius: clamp(10px, 1.5vw, 20px); overflow: hidden; aspect-ratio:420/210; overflow: hidden; transform: scale(0.755); transition: transform 0.5s ease;}
.business_list > li .thumb img {width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5); }
.business_list > li .tit {position: absolute;  inset: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: clamp(18px, 3vw, 33px); line-height: 1.3em; font-weight: 700; z-index: 2;}
.business_list > li .desc {font-size:var(--mid-font-size); text-align: center; line-height: 1.5em; height: calc(1.5rem * 3); margin-top:3em; opacity: 0; transform: translateY(1em); transition: opacity 0.4s ease 0.05s, transform 0.4s ease 0.05s;}

@media (hover: hover) and (pointer: fine) {
	.business_list > li:hover .thumb {transform: scale(1.15);}
	.business_list > li:hover .thumb img { filter: brightness(1.1); }
	.business_list > li:hover .desc {opacity: 1; transform: translateY(0);}
}


.client_list {display: flex; flex-wrap: wrap; gap: clamp(5px, 3vw, 20px);}
.client_list > li {width: calc((100% - (clamp(5px, 3vw, 20px) * 6)) / 7);}
.client_list .box {display: flex; height: clamp(50px, 9vw, 100px); align-items: center; justify-content: center; }
.client_list .box img {max-width:90%; max-height:60%;}


.our_value {position: relative; display: flex; justify-content: center; padding: 0px 26% 130px 26%;}
.our_value dl {position: absolute; width: 24%; max-width:290px;filter: brightness(0.9);}
.our_value dl:hover {filter: brightness(1); }

.our_value dl dt {font-size: var(--large-font-size); transition: transform 0.3s ease;}
.our_value dl dd {font-size: var(--mid-font-size); margin-top: 0.5em; line-height: 1.4em; transition: transform 0.3s ease;}
.our_value dl:hover dt, .our_value dl:hover dd {transform: scale(1.15);}
.our_value .item_01 dt, .our_value .item_01 dd {transform-origin: right center;}
.our_value .item_02 dt, .our_value .item_02 dd {transform-origin: left center;}
.our_value .item_03 dt, .our_value .item_03 dd {transform-origin: left center;}

.our_value .item_01 {text-align: right; left:0px; top:30%;}
.our_value .item_02 {right:0px; top: 12%;}
.our_value .item_03 {left:60%; bottom:0%;}
.our_value .box {position: relative; width:100%; aspect-ratio: 583/554;}
.our_value .box .circle {position: absolute; border-radius: 100%; aspect-ratio: 1/1; width:64%; border: 1px solid #333; transition: border-color 0.3s ease;}
.our_value .box .circle.on {border-color: #fff;}

.our_value .box .circle {position: absolute; border-radius: 100%; aspect-ratio: 1/1; width:64%; border: 1px solid #333; transition: border-color 0.3s ease;}
.our_value .box .circle.on {border-color: #fff;}

.our_value .box .circle .point {width:clamp(12px, 1.2vw, 18px); aspect-ratio: 1/1; position: absolute; left: 0; top: 0; background: #333; border-radius:100%; display: block; transition: background 0.3s ease; offset-path: circle(50% at 50% 50%); offset-anchor: center; offset-distance: var(--start-angle, 0%); }
.our_value .box .circle.on .point { background-color: #fff; box-shadow: 0 0 15px rgba(255, 255, 255, 0.8); animation: circle_point_move 5s linear infinite; }
.our_value .box .circle_01 {left: 0px; top: 10%;}
.our_value .box .circle_01 .point {--start-angle: 48%;}
.our_value .box .circle_02 {right: 0px; top: 0px;}
.our_value .box .circle_02 .point {--start-angle: -3%;}
.our_value .box .circle_03 {right: 10%; bottom: 0px;}
.our_value .box .circle_03 .point {--start-angle: 18%;}


@keyframes circle_point_move {
	from {offset-distance: var(--start-angle, 0%);}
	to {offset-distance: calc(var(--start-angle, 0%) + 100%);}
}


/* 레이어팝 */
.layerPop {-webkit-overflow-scrolling:touch; display: flex; align-items: center; justify-content:center; width:100%; position:fixed; left:0; right:0; top:0; bottom:0; padding:10px; z-index:99999;  background:rgba(0, 0, 0, 80%); font-size:var(--font-size); line-height:1.5em; padding:10px;}
.pop_wrap {width:100%; max-height:100%; padding:clamp(15px, 2vw, 20px) clamp(15px, 2vw, 30px); position:relative;  background:#fff; border-radius: clamp(10px, 3vw, 20px);}
.pop_wrap .pop_body {padding:15px 0px; word-break:keep-all; overflow-y:auto; max-height:78dvh;}
.pop_wrap .pop_body::-webkit-scrollbar { width: 6px; }
.pop_wrap .pop_body::-webkit-scrollbar-thumb { background-color:#ccc; border-radius: 10px;}
.pop_wrap .pop_body::-webkit-scrollbar-track { background-color: transparent; }
.pop_wrap .x_btn {position:absolute; right:clamp(10px, 2vw, 30px); top:clamp(25px, 4vw, 30px); display:block; cursor:pointer; background:none; width:30px; height:30px;  font-size:1px !important; text-indent:-999999px;}
.pop_wrap .x_btn:after {display:block; content:""; width:24px; height:2px; background:#fff; transform-origin:center; transform:translate(-50%, -50%) rotate(45deg); position:absolute; top:50%; left:50%;}
.pop_wrap .x_btn:before {display:block; content:""; width:24px; height:2px; background:#fff; transform-origin:center; transform:translate(-50%, -50%) rotate(135deg); position:absolute; top:50%; left:50%;}


/* 팝업 */
.main_layer_pop {position:absolute; left:5%;  top:100px; z-index:9999}
.main_pop_bottom {background:#fff; font-weight:300; color:#000; padding:10px; position:relative; font-size:14px; box-sizing:border-box; border:1px solid #ccc;}
.main_pop_bottom .close {position:absolute; right:10px; top:10px; padding-right:30px; background:url(/resources/img/common/close.png) no-repeat right center; background-size:20px auto;}
.main_layer_pop_inner {width:100%; height:100%; display:table; position:relative; margin:0 auto; box-sizing:border-box;}
.main_layer_pop_inner .cell {display:table-cell; vertical-align:middle; position:relative; padding:0px 10px;}
.main_layer_pop .bx-wrapper .bx-controls-direction a {margin-top:-22px; width:44px; height:44px;}
.main_layer_pop .bx-wrapper .bx-prev {left:0px; background:url(/resources/img/main/pop_l.png) no-repeat 0 0;}
.main_layer_pop .bx-wrapper .bx-next {right:0px; background:url(/resources/img/main/pop_r.png) no-repeat 0 0;}
.main_layer_pop .pop_wrap_in {margin:0 auto;}
.main_layer_pop .pop_wrap_in{overflow-y:auto;}


.layers_wrap {background:#FFF; position:relative; min-width:300px;  font-weight:300;}
.layers_wrap .layers_tit {width:100%; padding:15px 0px; line-height:150%; background:#333;  text-align:center; font-size:1.8em; color:#fff; position:relative;}
.layers_wrap .layers_tit .logo {padding-left:25px; padding-top:20px;}
.layers_wrap  .close_pop { position:absolute; right:25px; top:17px;}
.layers_wrap .layers {padding:20px; font-size:14px; position:relative; /*min-height:100px; max-height:760px; overflow-x:hidden; overflow-y:auto; -webkit-print-color-adjust:exact;*/}

.layers_wrap .close {height:30px; border-top:none; text-align:right; background:#e2e2e2; line-height:30px;}
.layers_wrap .close a { display:inline-block; zoom:1; font-family:Pretendard; color:#2d2d2d; padding-right:20px; background:url(http://pic.neungyule.com/newnetimes/img/btn/pop_close_s.gif) no-repeat right center; margin-right:10px;}
.layers_wrap .pop_tit {padding-left:5px; border-bottom:1px solid #afafaf; min-height:41px; padding-bottom:3px; font-family:Pretendard; color:#444444; font-size:22px; line-height:41px;}
.layers_wrap .pop_tit.ico_check2 { font-size:13px; min-height:20px; padding:10px 10px 10px 50px; background:url(/resources/img/common/ico_check2.gif) no-repeat 10px 10px #f9f9f9; line-height:150%; border-bottom:none;}
.layers_wrap .pop_tit_no {min-height:38px; font-family:Pretendard; color:#444444; font-size:22px; line-height:38px;}


/* 1280px 이상 */
@media screen and (min-width:1199px) {
	.m_gnb {display:none !important;}
}

/* 1440px 이하 */
@media screen and (max-width:1439px) {
	.go_top {right:-80px; opacity: 0;}
}

/* 1200px 이하 */
@media screen and (max-width:1200px) {
	.about_us .inner {flex-direction: column; gap: 0px;}
	.business_list {max-width:100%; gap: 1em;}
	.business_list > li .thumb {transform: scale(1) !important;}
	.business_list > li .desc {margin-top: 1em;	opacity:1;	transform: translateY(0);}

	.about_wrap {flex-direction: column;}
	.about_wrap .about_img {width: 100%; max-width: 860px;}
	.about_wrap .about_tit {width: 100%; max-width: 100%;}

	.client_list > li {width: calc((100% - (clamp(5px, 3vw, 20px) * 4)) / 5);}

	.list_video { aspect-ratio: 1920/1080; height: auto; }
} 

/* 1024 이하 */
@media screen and (max-width:1024px) {
	:root {
		--xxxx-large-font-size:28px;
		--xxx-large-font-size:25px;
		--xx-large-font-size:22px;
		--x-large-font-size:20px;
		--large-font-size:19px;
		--font-size:17px;
		--mid-font-size:16px;
		--sub-font-size:15px;
		--small-font-size: 14px;
		--x-small-font-size: 13px;
	}
	.all_menu {display:block;}
	.w_gnb .gnb {display: none;}
	
	.top_util {margin-top: 0px;}
	.top_util_total {display: block;}
	
	#footer .inner {flex-direction: column; gap: 1em; align-items: center;}
	.addressW {align-items: center;}
	.addressW address {justify-content: center;}
	.addressW address > span:nth-child(1):before {display: none;}

	.works_list {grid-template-columns: repeat(2, 1fr);}
	.title_bar {flex-wrap: wrap;}
	.title_bar .lnb {width: 100%; margin-left: 0px;}

	.contact_wrap {flex-direction: column;}
	.contact_wrap .map_area {width: 100%;}
	.contact_wrap .write_area {width: 100%;}
	.map_area .map {height:clamp(300px, 58vw, 580px);}

	.client_list > li {width: calc((100% - (clamp(5px, 3vw, 20px) * 3)) / 4);}
}

/* 768 이하 */
@media screen and (max-width:767px) {
	:root {
		--xxxx-large-font-size:24px;
		--xxx-large-font-size:22px;
		--xx-large-font-size:20px;
		--x-large-font-size:19px;
		--large-font-size:16px;		
		--mid-font-size:15px;
		--font-size:15px;
		--sub-font-size:14px;
		--small-font-size:13px;
		--x-small-font-size: 12px;
	}
	
	.pc_view {display:none}
	.mb_view {display:block}
	.top_util {top: 0px;transform: none;height: 100%;}
	
	.main_layer_pop {-webkit-overflow-scrolling:touch; position:fixed; overflow-y:auto; width:100% !important; max-width:100% !important; transform:none !important; -webkit-transform:none !important; left:0 !important; right:0 !important; top:0 !important; bottom:0; z-index:99999; background:rgba(0, 0, 0, 50%); margin:0px !important}
    .main_pop_bottom {padding:10px; font-size:14px;}
    .main_pop_bottom .close {right:10px; top:10px;}
	.main_layer_pop .pop_wrap_in {float:none !important;}
	
	.over_layerW {position:relative;}
	.over_layerW .table_style1 {width:100%; margin:0px;}
	.over_layerW .table_style1 tbody tr th.tl {word-break: keep-all}
	.over_layerW table td, .over_layerW table th {word-break: keep-all}
    .over_layer {overflow:auto;}
	.over_layer > div {overflow:inherit; min-width:680px;}
	.over_layer::-webkit-scrollbar {width:5px; height:8px; background-color:#eee;}
	.over_layer::-webkit-scrollbar-thumb {background:#666;}
    .over_layerW:after {display:block; content:""; width:10px; height:100%; position:absolute; right:0px; top:0px; background:url(/resources/img/common/bg_shadow.png) repeat-y left top}
    .over_layer > table {min-width:900px;}
	
	.table_wrap_scroll {position:relative; overflow: auto;}
	.table_wrap_scroll .table_wrap {min-width: 680px;}
	.table_wrap_scroll .table_wrap > table {min-width: max-content; max-width:768px;}
	
	.table_wrap_scroll .table_wrap::-webkit-scrollbar {height:3px }
	.table_wrap_scroll .table_wrap::-webkit-scrollbar-thumb { background-color:#ccc; border-radius: 10px;}
	.table_wrap_scroll .table_wrap::-webkit-scrollbar-track { background-color: transparent; }

	.title_bar {flex-direction: column; align-items: flex-start;}
	.title_bar .lnb {margin-left: 0; flex-wrap: wrap;}
	.works_list .works_item.large {grid-column: span 2; grid-row: span 1;}
	.project_stat {grid-template-columns: 1fr; gap: 0;}
	.project_stat > li {justify-content: flex-start; padding: 16px 0;}
	.project_stat > li + li::before {width: 100%; height: 1px; left: 0; top: 0; transform: none;}

	.map_info {flex-direction: column; padding-bottom: 2em; border-bottom: 1px solid rgba(255, 255, 255, 0.25);}
	.map_info > li.line {display:none;}
	
	.business_list {max-width:100%; flex-direction: column; gap:3em;}
	.our_value {flex-direction: column; padding: 0px; gap: 2em;}
	.our_value .box {display: none;}
	.our_value dl {position: relative; inset: 0 !important; text-align: left !important; width: 100%; max-width: 100%;}
	.our_value dl dt {font-size: var(--x-large-font-size);}
	.our_value dl dd {font-size: var(--font-size);}

	.client_list > li {width: calc((100% - (clamp(5px, 3vw, 20px) * 2)) / 3);}
	.client_list .box img {	max-width:70%;	max-height:60%;}

	.scroll_ico { display: none; }
}

/* 480px 이하 */
@media screen and (max-width:479px) {
	:root {
		--xxxx-large-font-size:22px;
		--xxx-large-font-size:20px;
		--xx-large-font-size:18px;
		--x-large-font-size:17px;
		--large-font-size:15px;
		--font-size:14px;
		--mid-font-size:13px;
		--sub-font-size:12px;
		--small-font-size:11px;
		--x-small-font-size:10px;
	}
	
	#header h1 img {height:34px;}
	.menu_btn {padding-left: 10px;}
	.menu_btn .txt {font-size:1px; text-indent: -999999em; position: absolute; right: -9999em;}
	
    .in_header {height:60px;}
	.slide_menu_inner .header {padding-top:10px;}
	
	.menu_btn a > span {width:28px; height:28px}
	.menu_btn a > span > span:after {top:-8px;}
	.menu_btn a > span > span:before {bottom:-8px;}	
	
	.go_top > a {width:50px; height:50px; font-size:10px;}
	#footer .f_logo > img {height: 34px;}
	.addressW address {gap:0.2em 2em;}
	.addressW address > span+span:before {left:-1em;}
	
    .pop_wrap .pop_head .title {text-align:left !important; font-size:20px; padding-left:15px !important; padding:15px 45px 15px 15px;}
    .pop_wrap .pop_head .title br {display:none;}
	.pop_wrap .pop_body {padding:10px}

	#inner_wrap {padding-bottom:50px; padding-top:60px;}
	
	.s_tit {margin-top:2.5em;}

	.lnb_tit:after {right:10px;}
	.lnb_wrap {padding-left:20px; padding-right: 14px;}
	.lnb_wrap .lnb .ico_home {display: none;}

	.list_video { aspect-ratio: 1920/1080; padding-bottom: 12vh; box-sizing: content-box; }
}