@charset "utf-8";
/*
 * Name     : con_Nmain.css
---------------------------------------------------
*/

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css");


/* 메인페이지 구분선 */
.line-gray {clear:both; background: #a49a90; height: 1px; margin: 100px 0; text-align: center; }

#main .main-section {z-index: 10;}
#main .main-section .circle-button {border: 1px solid;color: var(--main);border-radius: 50px;width: 45px;display: block;height: 45px;text-align: center;line-height: 44px;}
#main .main-section .circle-button i.bi {transition: all 0.5s;}
#main .main-section .circle-button.swiper-button-prev:hover i.bi {padding-right:10px;transition: all 0.3s;}
#main .main-section .circle-button.swiper-button-next:hover i.bi {padding-left:10px;transition: all 0.3s;}
#main .main-section .swiper-button-next::after,
#main .main-section .swiper-button-prev::after {display: none;}
#main .main-section .swiper-button-next,
#main .main-section .swiper-button-prev {top:auto;bottom: 0;}
#main .main-section .swiper-button-prev {left:10px;}
#main .main-section .swiper-button-next {left:65px;}
#main .swiper-slide {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
#main .more {display: block;}
#main .more i {padding-left: 10px;}


/* 메인 슬라이드 */
#main {margin-top: 90px;}
#main .main-slide {height: 660px;background-color: #ede8e2;}
#main .main-slide .row {height: 100%;}
#main .main-slide .main-text {position: relative;}
#main .main-slide .main-text .text-box {opacity:0;visibility: hidden;position: absolute;right: 0;top: 205px;width: 100%;max-width: 480px;}
#main .main-slide .main-text .text-box .btn-line {opacity: 0;}
#main .main-slide .main-text .text-box .hidden-box {transition: all 0.8s;}
#main .main-slide .main-text .text-box .hidden-box.box01 div,
#main .main-slide .main-text .text-box .hidden-box.box02 div {transform: translateY(118%);opacity: 0;}
#main .main-slide .main-text .text-box .hidden-box.box03 div {transform: translateX(3%);opacity: 0;}
#main .main-slide .main-text .text-box.on {opacity: 1;visibility: visible;}
#main .main-slide .main-text .text-box.on .btn-line {opacity: 1;display:block;z-index: 1;transition: opacity 1.5s cubic-bezier(0.42,0,0.14,1.01) 1.5s;}
#main .main-slide .main-text .text-box.on .hidden-box.box01 div {transform: translateY(0%);transition: all 1.5s cubic-bezier(0.42,0,0.14,1.01) 0.2s;opacity: 1;}
#main .main-slide .main-text .text-box.on .hidden-box.box02 div {transform: translateY(0%);transition: all 1.5s cubic-bezier(0.42,0,0.14,1.01) 0.4s;opacity: 1;}
#main .main-slide .main-text .text-box.on .hidden-box.box03 div {transform: translateX(0%);transition: all 1.5s cubic-bezier(0.42,0,0.14,1.01) 1.2s;opacity: 1;}
#main .main-slide .main-text .text-box .hidden-box {overflow: hidden;}
#main .main-slide .main-text .text-box .btn-line {text-align:left;width:var(--margin-space);border: 1px solid var(--main);border-radius: 30px;padding: 8px 0 8px 20px;margin-top: var(--margin-top-50);}
#main .main-slide .main-text .text-box .btn-line i.bi {padding: 0 0 3px 13px;line-height: 0;transition: all 0.3s;}
#main .main-slide .main-text .text-box .btn-line:hover i.bi {transition: all 0.3s;padding-left:20px}
#main .main-slide .main-text .font-main-slide {color: var(--gray-300);text-align: right;padding: 0 80px 50px 0;line-height: 0;z-index: 0;}
#main .main-slide .main-text .font-main-slide span {padding:0 8px;}
#main .main-slide .main-text .swiper-button-prev {z-index: 1;left:auto;right: 186px;bottom: 44px;top: auto;color:var(--gray-300)}
#main .main-slide .main-text .swiper-button-next {z-index: 1;left:auto;right: 44px;bottom: 44px;top: auto;color:var(--gray-300)}
#main .main-slide .main-text .swiper-button-prev::after, #main .main-slide .main-text .swiper-button-next::after {font-size: 14px;}
#main .main-slide .main-swiper {height: 100%;}
#main .main-slide .main-swiper .main-slide-img {height: 100%;object-fit: cover;width: 100%;}


/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------- background-color:#FFDC52; -*/


/* section - business */
#main .main-section.business {background: url('/_images/main/v2/main_section_biz_bg.png')no-repeat center; padding: 150px 0px; }

#main .main-section.business .brand-img {border-radius: 8px; overflow: hidden;}
#main .main-section.business .brand-img img {width:100%}
#main .main-section.business .brand-txt p {font-size: 16px;font-weight: 400;line-height: 1.5; color: var(--gray-400);}

#main .main-section.business .ability {position: relative;}
#main .main-section.business .ability span {color: var(--gray-400);}
#main .main-section.business .ability .ability-box {width: 100%;justify-content: space-between;display: flex;}
#main .main-section.business .ability .ability-box .ability-item {border-bottom: 1px solid var(--gray-200);padding-top: 30px;width: 75.00%;flex: 0 0 auto;}
#main .main-section.business .ability .ability-box .ability-item .ability-num {font-size: 5.125rem;font-weight: 500;line-height: 1;}
#main .main-section.business .ability .ability-box .ability-item .ability-text {color: var(--gray-400);}

#main .main-section.business .ability .wedo_box {position: relative; padding-top: 0px;display: flex;margin: 0 -1rem; }
#main .main-section.business .ability .wedo_box .wedo-item {padding: 0 0.9375rem;width: 50%;flex:0 0 auto;}
#main .main-section.business .ability .wedo_box .wedo-item .wedo-img {width: 100%;background: #ede8e2; border-radius: 1rem;height:500px;border-radius: 1rem;overflow: hidden;padding: 0;}
#main .main-section.business .ability .wedo_box .wedo-item .wedo-img img {width: 100%;}



/* section - design */
#main .main-section.design {position: relative; margin: 150px 0px; }
#main .main-section.design .bg-gray {width: 70%;max-width:1280px; height:440px;position: absolute; top: 28px; left: 0;background: #ede8e2;z-index: -1;}
#main .main-section.design .container-xl {position: relative;}  

#main .main-section.design .title-box { width: 30%; margin-top: 100px; }

#main .main-section.design .design-box.box1 {width: 100%; max-width: 400px; margin-top: 70px;  }
#main .main-section.design .design-box.box2 {width: 100%; max-width: 400px; margin-top: -10px; }
#main .main-section.design .design-box.box3 {width: 100%; max-width: 400px; margin-top: -80px; }
#main .main-section.design .design-box p {font-size: 16px;font-weight: 400;line-height: 1.5; color: var(--gray-400);}

#main .main-section.design .design-box .design-img {border-radius: 8px; overflow: hidden; margin-bottom: 30px;}
#main .main-section.design .design-box .design-img img {width:100%}



/* section - people */
#main .main-section.people {position: relative; margin: 150px 0px; }
#main .main-section.people .bg-gray {width: 70%;max-width:1280px;height:440px;position: absolute;top: 28px;right: 0;background: #ede8e2;z-index: -1;}
#main .main-section.people .container-xl {position: relative;}

#main .main-section.people .title-box { width: 30%; margin-top: 10px; right: 0px; float: right; text-align : right;}

#main .main-section.people .design-box.box1 {width: 100%; max-width: 400px; margin-top: -80px;  }
#main .main-section.people .design-box.box2 {width: 100%; max-width: 400px; margin-top: -10px;}
#main .main-section.people .design-box.box3 {width: 100%; max-width: 400px; margin-top: 70px;}
#main .main-section.people .design-box p {font-size: 16px;font-weight: 400;line-height: 1.5; color: var(--gray-400);}

#main .main-section.people .design-box .design-img {border-radius: 8px; overflow: hidden;margin-bottom: 30px;}
#main .main-section.people .design-box .design-img img {width:100%}



/* section - Sketch f0dac0/a98159 */
#main .main-section.Sketch {position:relative;padding: 150px 20px; background-color:#f0dac0;}

#main .main-section.Sketch .sketch-text {width:100%; height:100px;}
#main .main-section.Sketch .sketch-thumb {width:30%; left: 0px;   }
#main .main-section.Sketch .sketch-slide {width:70%; position: absolute;  overflow: hidden; top:250px;right: 0; max-width: 1370px; }
#main .main-section.Sketch .sketch-slide .sketch-swiper {height: 570px;}
#main .main-section.Sketch .sketch-slide .sketch-swiper .swiper-slide {width: 420px;}
#main .main-section.Sketch .sketch-slide .sketch-swiper .swiper-slide a {height: 100%;display: block;}
#main .main-section.Sketch .sketch-slide .sketch-swiper .swiper-slide a:hover {text-decoration: none;}
#main .main-section.Sketch .sketch-slide .sketch-swiper .swiper-slide .sketch-slide-img { width:100%; border-radius: 8px; height: 300px; object-fit: cover;}
#main .main-section.Sketch .sketch-slide .swiper-scrollbar {height: 3px;left:0;width:100%;bottom:0;} 
#main .main-section.Sketch .sketch-slide .swiper-scrollbar .swiper-scrollbar-drag {background-color: var(--gray-400);}
#main .main-section.Sketch .sketch-slide p {font-size: 16px;font-weight: 400;line-height: 1.5; color: var(--gray-400);}


/* section - Video */
#main .main-section.Video {position: relative;padding: 150px 0px;}
#main .main-section.Video .row > div {min-height: 520px;}

#main .main-section.Video .video-left {position: relative;}
#main .main-section.Video .video-slide-thumb {position: absolute;bottom: 0px;width: calc(100% - 30px);}
#main .main-section.Video .video-slide-thumb .swiper-slide {height:78px;overflow: hidden;border-radius: 8px;opacity: 0.6;cursor: pointer; width:31%;}
#main .main-section.Video .video-slide-thumb .swiper-slide.swiper-slide-thumb-active {opacity: 1;}
#main .main-section.Video .video-slide-thumb .swiper-slide .thumb-img {width: 100%;height:100%}

#main .main-section.Video .video_right {border-radius: 8px;overflow: hidden;}
#main .main-section.Video .video-swiper {height: 100%;}
#main .main-section.Video .video-swiper .swiper-slide {background: #fff; width: 100%; margin-right: 10px;}
#main .main-section.Video .video-swiper .swiper-slide a {display:block;width: 100%;height:100%;position: relative;overflow: hidden;border-radius: 8px;}
#main .main-section.Video .video-swiper .swiper-slide a:hover {text-decoration: none;}
#main .main-section.Video .video-swiper .swiper-slide a .slide-img {width: 100%;height: 100%;object-fit: cover;}
#main .main-section.Video .video-swiper .swiper-slide a .hover-bg {width:100%;height:100%;opacity: 0.5;background: linear-gradient(to bottom, transparent, rgb(0 0 0 / 80%));transition: all 0.5s cubic-bezier(0.42,0,0.14,1.01);transform: translateY(-100%);}
#main .main-section.Video .video-swiper .swiper-slide a:hover .hover-bg {opacity:1;transition: all 0.5s cubic-bezier(0.42,0,0.14,1.01);}
#main .main-section.Video .video-swiper .swiper-slide a .hover-text {position:absolute;top:10%;left:40px;transition: all 0.5s cubic-bezier(0.42,0,0.14,1.01);opacity: 0;}
#main .main-section.Video .video-swiper .swiper-slide a p {font-weight: 400;color: #ffffff;  }
#main .main-section.Video .video-swiper .swiper-slide.swiper-slide-active a .hover-text {bottom:40px;transition: all 0.5s cubic-bezier(0.42,0,0.14,1.01) 0.5s;opacity: 1;}


/* section - contact */
#main .main-section.contact {height: 350px; padding: 80px 0px; background: url('/_images/main/v2/main_section_contact_bg.jpg')no-repeat center; background-size: cover; background-attachment: fixed;}
#main .main-section.contact .container-xl {position: relative;}
#main .main-section.contact .contact-copy {padding:50px 100px; font-family: 'Viga-Regular';  font-size: 36px; font-weight: 600;  }
#main .main-section.contact .contact-info {position: absolute; top: 20px; right: 0; z-index: 10;}


/* section - notice */
#main .main-section.notice {padding: 150px 0px;}
#main .main-section.notice .container-xl {position: relative;}  
#main .main-section.notice .title-box { width: 100%; }
#main .main-section.notice .notice_table td{padding: 20px; box-sizing: border-box; border-bottom: 1px solid #d4d4d4;  }				
#main .main-section.notice .report_table img{border-radius: 8px; }	
#main .main-section.notice .report_table td{padding: 20px;  }	
#main .main-section.notice .report_table td:last-child {padding: 20px 0px;}
#main .main-section.notice .report_table p {margin-top: 10px; font-size: 14px;font-weight: 400;line-height: 1.5; color: var(--gray-400); white-space:normal; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;  }

/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

@media (max-width: 1330px) {
    #main .main-slide .main-text .text-box {padding-left: 20px;}
    #main .main-slide {height: 600px;}
    #main .main-slide .main-text .text-box {top:170px;}
    #main .main-section.design .design-box.box1,
    #main .main-section.contact .contact-sns {right:1.5rem;}
}

@media (max-width: 1200px) {
    #main .main-section.Sketch .sketch-text,
    #main .main-section.Sketch .sketch-slide .sketch-swiper {height: 485px;}
    #main .main-section.Sketch .sketch-slide .sketch-swiper .swiper-slide {width: 250px;}
    #main .main-slide .main-text .swiper-button-prev {right: 175px;}
    #main .main-section.Sketch .sketch-slide .sketch-swiper .swiper-slide .sketch-slide-img {height: 310px;}
}

@media (max-width: 991px) {
    /* br-mb-none 클래스는 태블릿 이하 해상도에서 줄바꿈을 띄어쓰기로 변환합니다. */
    .br-mb-none br {display: inline-block;content: " ";padding: 0 2px;}
    #main {margin-top: 60px;width:100%;overflow: hidden;max-width: 100vw;}
    #main .main-slide .main-text .text-box .btn-line {width: 150px;}
    #main .main-section.business .row {margin-top:40px !important}
    #main .main-section.Sketch .sketch-text {width:220px;height: 400px;}
    #main .main-section.Sketch .sketch-slide {width: calc(100% - 280px) !important}
    #main .main-section.Sketch .sketch-slide .sketch-swiper {height: 400px;}
    #main .main-section.Sketch .sketch-slide .sketch-swiper .swiper-slide {width: 200px;}
    #main .main-section.event .event-swiper .swiper-slide a .hover-text .font-event-s {max-width: calc(100% - 50px);display: -webkit-box;overflow: hidden;text-overflow: ellipsis;white-space: normal;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
    #main .main-section.contact {height: 310px;}
    #main .main-section.contact .contact-sns {top:66px;}   
    #main .main-section.Sketch .sketch-slide .sketch-swiper .swiper-slide .sketch-slide-img {height: 240px;}
}

@media screen and (max-width: 767px) {
    #main .main-slide {height: 500px;position: relative;}
    #main .main-slide .main-text {z-index: 2;height: 100%;position: absolute;top:0;left:0;}
    #main .main-slide .main-text .text-box {top:120px;max-width: 640px;}
    .font-slide-title,
    .font-slide-titleB,
    .font-slide-subtxt,
    #main .main-slide .main-text .text-box .btn-line,
    .font-main-slide .swiper-pagination-current {color: var(--white-100);}
    #main .main-slide .main-text .swiper-button-prev,
    .font-main-slide .swiper-pagination-total,
    #main .main-slide .main-text .swiper-button-next,
    #main .main-slide .main-text .font-main-slide {color: #eee;}
    #main .main-slide .main-text .text-box.on .btn-line {border-color: #e2e2e2;}
    #main .main-slide .main-swiper {background: #000;}
    #main .main-slide .main-swiper .swiper-wrapper {opacity: 0.85;}
    #main .main-section.Sketch .sketch-text {width:100%;height: unset;}
    #main .main-section.Sketch .sketch-slide {position: static;width: 100% !important;}
    #main .main-section.Sketch .sketch-slide .swiper-scrollbar {position: static;}
    #main .main-section.Sketch .sketch-text {margin-bottom: 30px;}
    #main .main-section .swiper-button-prev {left:auto;right:65px;top:20px;}
    #main .main-section .swiper-button-next {left:auto;right:10px;top:20px;}
    #main .main-section.Sketch .sketch-slide .sketch-swiper .swiper-slide {width: 160px;}
    #main .main-section.event .event-left {width:100%;}
    #main .main-section.event .row > div {min-height: unset;}
    #main .main-section.event .event-slide-thumb {position: static;margin-top: 20px;width:100%;}
    #main .main-section.event .video_right {width:100%;margin-top: 20px;}
    #main .main-section.event .video-slide-thumb .swiper-slide {width:23.7%;}
    #main .main-section.contact .contact-txt {width:unset;margin-right: 20px;}   
    #main .main-section.Sketch .sketch-slide .sketch-swiper {height: 360px;}
    #main .main-section.Sketch .sketch-slide .sketch-swiper .swiper-slide .sketch-slide-img {height: 205px;}
}

@media (max-width: 576px) {
    .font-slide-subtxt,
    .font-black-s-2,
    .font-gray-s-2,
    .font-contact-m-1,
    .font-footer-s-1,
    .font-event-s {font-weight: var(--font-weight-300);}
    .font-slide-subtxt, 
    .font-contact-m-1 {font-size: var(--font-size-s-2);}
    .font-slide-s-2, 
    .font-product-s-2 {font-size: var(--font-size-s-1);margin-top: 10px;}
    .font-product-m-1-SB {margin-top: 10px;}
    #main .main-slide {height: 460px;}
    #main .main-slide .main-text .font-main-slide {padding: 0 46px 30px 0;}
    #main .main-slide .main-text .font-main-slide span {padding: 0 6px;}
    #main .main-slide .main-text .text-box {top:110px;}
    #main .main-slide .main-text .text-box .btn-line {margin-top:30px;width:155px;padding: 6px 0 6px 18px;}
    #main .main-slide .main-text .swiper-button-prev {bottom: 20px;right: 133px;}
    #main .main-slide .main-text .swiper-button-next {bottom: 20px;right: 20px;}
    #main .main-section.contact {height: 455px;}
    #main .main-section.business .row {margin-top: 0px !important;}
    #main .main-section.business .row .col {margin-top: 20px;}
    #main .main-section.design .bg-gray {width:80%; height: 340px;}
    #main .main-section.design .design-box.box1 {position: static;width:100%;margin-top: 30px;}
    #main .main-section.design .design-box.box2 {margin-top: 30px;width:100%;max-width: unset;}
    #main .main-section.event .event-slide-thumb {margin-top: 25px;}
    #main .main-section.event .event-slide-thumb .swiper-slide {width:31%}
    #main .main-section.event .event-swiper .swiper-slide.swiper-slide-active a .hover-text {bottom:20px;left:20px;}
    #main .main-section.event .event-swiper .swiper-slide a .hover-text .font-event-s {max-width: calc(100% - 20px);}
    #main .main-section.contact .contact-txt {width: 100%;}
    
}


/* ----------------------------------------------------------------
	footer
-----------------------------------------------------------------*/
		
		#footer { width: 100%;  height: 250px; background-color: #0e0e0e; margin-bottom: 0px; }		
		.footer_wrapper { max-width: 1280px; margin: 0 auto; }
		
		.list_box { margin: 0 auto; padding-top: 10px; box-sizing: border-box; border-bottom: 1px solid #2b2b2b;  }		
		.list_inner_box {width: 100%; height: 70px; margin: 0 auto; box-sizing: border-box;}
		
		.list_inner_box {width: 100%; padding: 20px 0; }
		.list_inner_box ul li { display: inline-block; vertical-align: middle; padding-right: 20px; margin-right: 17px; border-right: 1px solid #3b3b3b; line-height: 15px;}
		.list_inner_box ul li:last-child {padding-right: 0px; margin-right: 0px; border-right: none;}
		.list_inner_box ul li a {font-size: 16px;   color: #d4d4d4; font-weight: 350; letter-spacing: -0.05em;}
		
		
		.list_inner_box ul ol {float: right; display: inline-block;  vertical-align: middle; padding-left: 50px; padding-right: 20px; margin-right: 17px; line-height: 15px; }
		.list_inner_box ul ol a { padding-left: 20px; letter-spacing: -0.05em;}		
		
		.info_inner_box {width: 100%; padding: 20px 0; }
		.info_inner_box ul li {font-size: 14px;    color: #6a6a6a; line-height: 30px; letter-spacing: -0.025em; font-weight: 350; display: inline-block; margin-right: 34px;}
		.info_inner_box ul li:last-child {margin-right: 0px;}
		
		.copy_box { padding: 20px 0; }
		.copy_box .txt {font-size: 12px; color: #5a5a5a; font-weight: 350;}
		.copy_box .txt span {color: #c19474;}
		
/* 태블릿 */
@media (min-width:768px) and (max-width:1023px) {

}

/* 모바일 */
@media (min-width:320px) and (max-width:767px) {
	
		#footer { width: 100%;  height: 250px; background-color: #0e0e0e; margin-bottom: 0px;}		
		
		.footer_wrapper { margin: 0 auto; padding: 0 20px;  }
		
		.list_box { margin: 0 auto; padding-top: 10px; box-sizing: border-box; border-bottom: 1px solid #2b2b2b;  }		
		.list_inner_box {width: 100%; height: 70px; margin: 0 auto; box-sizing: border-box;}
		
		.list_inner_box {width: 100%; padding: 20px 0; }
		.list_inner_box ul li { display: inline-block; vertical-align: middle; padding-right: 20px; margin-right: 17px; border-right: 1px solid #3b3b3b; line-height: 15px;}
		.list_inner_box ul li:last-child {padding-right: 0px; margin-right: 0px; border-right: none;}
		.list_inner_box ul li a {font-size: 14px;   color: #d4d4d4; font-weight: 350; letter-spacing: -0.05em;}
		
		.list_inner_box ul ol {float: right; display: inline-block;  vertical-align: middle; padding-left: 50px; padding-right: 20px; margin-right: 17px; line-height: 15px; }
		.list_inner_box ul ol a { padding-left: 20px; letter-spacing: -0.05em;}		
		
		.info_inner_box {width: 100%; padding: 20px 0; }
		.info_inner_box ul li {font-size: 14px; color: #d4d4d4; line-height: 30px; letter-spacing: -0.025em; font-weight: 350; display: inline-block; margin-right: 34px;}
		.info_inner_box ul li:last-child {margin-right: 0px;}
		
		.copy_box { padding: 10px 0; }
		.copy_box .txt {font-size: 12px; color: #5a5a5a; font-weight: 350;}
		.copy_box .txt span {color: #c19474;}
		
}