@charset "utf-8";

@font-face {
    font-family: 'ghanachoco';
    src: url('/fonts/ghanachoco.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

#wrapper {background:#1a1a1a;}

.about-top-heading {height:700px; text-align:center; color:#fff; background:url("images/top_img.jpg") 50% 100% no-repeat; background-size:cover;}
.about-top-heading .inner {position:relative; display:flex; align-items:center; height:100%;}
.about-top-heading h2 {color: #fff; font-size:100px; font-weight:800; line-height:1.1em; letter-spacing:-.02em; margin-bottom:20px;}
.about-top-heading p {font-size:18px; line-height:1.6em; letter-spacing:-.02em;}

.about-wrap {position:relative; margin-top:-100px; background:#fff; border-radius:80px 80px 0 0; z-index:2; overflow:hidden;}
.about-wrap .contain {width:100%; max-width:1480px; padding-left:40px; padding-right:40px;}

.about-title h2 {font-family:'Roboto','Pretendard',sans-serif; font-size:60px; line-height:1.2em; letter-spacing:-.02em;}

.about-hero {position:relative; font-size:18px; letter-spacing:-.02em; line-height:1.56em;}
.about-hero .heading {position:relative; padding-top:120px; padding-bottom:85px; z-index:3; text-align:center;}
.about-hero .heading h2 {font-size:30px; letter-spacing:-.05em; line-height:1.3em;}
.about-hero .heading p {margin-top:12px; color:#686868;}
.about-hero .about-title {position:absolute; top:12%; left:0; z-index:2; width:100%; color:#fff;}
.about-hero .about-title h2 {display:inline; color:transparent; background:linear-gradient(to right, rgba(255, 255, 255,1) 50%, rgba(255, 255, 255,.4) 50%); background-size:200% 100%; background-position-x:100%; background-clip:text; -webkit-background-clip:text;}
.about-hero-wrap {position:relative;}
.about-hero-image {position:relative; width:1400px; height:100vh; margin:0 auto; background:url("images/hero-bg.jpg") 50% 100%/cover no-repeat; border-radius:20px;} 
.about-hero-text {margin-top:2em; width:70%; font-size:1.25em; font-weight:600; line-height:1.65em; letter-spacing:-.03em;}
.about-hero-text p {display:inline; color:transparent; background:linear-gradient(to right, rgba(255, 255, 255,1) 50%, rgba(255, 255, 255,.4) 50%); background-size:200% 100%; background-position-x:100%; background-clip:text; -webkit-background-clip:text;}

.about-service {display:flex; flex-direction:column; justify-content:center; min-height:100vh; padding:140px 0; overflow:hidden;}
.about-service .about-title {margin-bottom:70px;}
.about-service-items .items {display:flex; gap:28px;}
.about-service-items .item {flex:1; overflow:hidden; position:relative; border-radius:30px;}
.about-service-items .item img {display:block; width:100%;}
.about-service-items .item h3 {margin-bottom:8px; font-size:26px; font-weight:600; line-height:1.3em; letter-spacing:-.02em;}
.about-service-items .item p {font-size:17px; font-weight:300; line-height:1.65em; letter-spacing:-.02em;}
.about-service-items .item .txt {position:absolute; bottom:0; left:0; padding:35px 30px; color:#fff;}

.about-counter {position:relative; height:100vh; padding:10% 0; color:#fff;}
.about-counter .contain {position:relative; display:flex; flex-direction:column; justify-content:space-between; height:100%; gap:120px;}
.about-counter .about-title {display:flex; flex-wrap:wrap; align-items:center; gap:20px;}
.about-counter .about-title h2 {width:100%; max-width:700px;}
.about-counter .about-title h2 span {display:inline-block; color:transparent; background:url('images/text-mask-1.jpg') 50% 50%/140% 200% no-repeat;  background-clip:text; -webkit-background-clip:text;}
.about-counter .about-title p {font-size:18px; font-weight:700; line-height:1.65em; letter-spacing:-.02em;}
.about-counter .about-title p span {display:inline; color:transparent; background:linear-gradient(to right, rgba(255, 255, 255,1) 50%, rgba(255, 255, 255,.4) 50%); background-size:200% 100%; background-position-x:100%; background-clip:text; -webkit-background-clip:text;}
.about-counter-items {display:flex; justify-content:flex-end; gap:10%; text-align:center;}
.about-counter-item dt {margin-bottom:26px; font-family:'Roboto',sans-serif; font-size:22px; line-height:1.3em; text-decoration:underline 1px; text-underline-offset:0.25em;}
.about-counter-item dd {font-family:'S-CoreDream',sans-serif; font-size:80px; font-weight:700; line-height:1em;}
.about-counter-image {position:absolute; top:0; left:0; width:100%; height:100%; background:url('images/counter-bg.jpg') 50% 100%/cover no-repeat;}
/* .about-counter-image {position:absolute; top:0; left:50%; -webkit-transform:translateX(-50%); transform:translateX(-50%); width:1400px; height:100%; background:url('images/counter-bg.jpg') 50% 100%/cover no-repeat; border-radius:20px;} */

.about-portfolio {position:relative; height:100vh; padding:120px 50px 0; margin:0 0 140px; background:#fff;}
.about-portfolio-items {position:relative; display:grid; align-items:start; grid-template-columns:repeat(3, 1fr); gap:28px; max-width:1820px; height:100%; overflow:hidden; margin:0 auto;}
.about-portfolio-item {height:100% !important; overflow:hidden;}
.about-portfolio-item .marquee {height:100%;}
.about-portfolio-item .item {margin-bottom:28px;}
.about-portfolio-item img {display:block; border-radius:30px;}
.about-portfolio-more {position:absolute; top:50%; left:0; z-index:10; width:100%; color:#fff; text-align:center; -webkit-transform:translateY(-50%); transform:translateY(-50%);}
.about-portfolio-more h2 {margin-bottom:60px; font-family:'ghanachoco',sans-serif; font-size:60px; font-weight:400; line-height:1.2em;}
.about-portfolio-more .btn {display:inline-flex; align-items:center; padding:7px 12px; border:1px solid #fff; border-radius:40px; text-align:center;}
.about-portfolio-more .btn .txt {padding:0 20px;}
.about-portfolio-more .btn .ico {display:flex; align-items:center; justify-content:center; width:32px; height:32px; background:#fff; border-radius:100%; color:#1a1a1a;}
.about-portfolio-more .btn .ico svg {display:block; width:12px; height:auto;}
.about-portfolio-more .btn:hover {background:#1a1a1a; border-color:#1a1a1a;}

.about-clients {position:relative; text-align:center; overflow:hidden;}
.about-clients .about-title {margin-bottom:55px;}
.about-clients-nav {margin-bottom:25px;}
.about-clients-nav ul {display:flex; justify-content:center; gap:70px;}
.about-clients-nav ul li a {position:relative; display:block; padding:13px 0; color:#c3c3c3; font-size:22px; font-weight:700; line-height:1.2em; letter-spacing:-.04em;}
.about-clients-nav ul li a:after {content:''; position:absolute; bottom:0; left:50%; width:0; height:4px; background:#c3c3c3; transition:.4s;}
.about-clients-nav ul li.active a {color:#242424;}
.about-clients-nav ul li.active a:after {left:0; width:100%; background:#242424;}
.about-clients-items {display:none; text-align:center;}
.about-clients-items.active {display:block;}
.about-clients-items ul {display:grid; grid-template-columns:repeat(5, 1fr);}
.about-clients-items ul li {position:relative;}
.about-clients-items ul li div {transform:scale(.8); transition:.4s;}
.about-clients-items ul li .on {position:absolute; top:0; left:0; width:100%; opacity:0; transition:.4s;}
.about-clients-items ul li:hover .on {opacity:1;}
.about-clients-items ul li:hover div {transform:scale(1);}

.about-video {position:relative; padding:140px 0; overflow:hidden;}
.about-video .about-title {margin-bottom:70px;}
.about-video-container {position:relative; border-radius:30px; overflow:hidden;}
.about-video-container:before {content:''; display:block; padding-bottom:56.25%;}
.about-video-container video {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}

.about-gallery {position:relative; padding:140px 0; overflow:hidden; background:url('images/gallery-bg.jpg') 50% 50%/cover no-repeat;}
.about-gallery .about-title {margin-bottom:70px;}
.about-gallery .about-title h2 {color:#fff;}
.about-gallery .controls {display:flex; justify-content:center; gap:20px; margin-top:30px;}
.about-gallery .slide-btn {padding:20px 0; transition:.2s; opacity:.2; cursor:pointer;}
.about-gallery .slide-btn svg {display:block;}
.about-gallery .slide-btn:hover {opacity:1;}
.about-gallery-slider {position:relative;}
.about-gallery-slider .swiper {overflow:unset;}
.about-gallery-slider img {border-radius:30px;}

.about-directions {padding:140px 0; position:relative; overflow:hidden;}
.about-directions .about-title {margin-bottom:70px;}
.about-directions-content {display:flex; align-items:center; gap:12px 60px; margin-bottom:36px; color:#686868; font-size:17px; line-height:1.5em; letter-spacing:-.02em;}
.about-directions-content .comp {color:#242424; font-size:30px; font-weight:700; line-height:1.3em; letter-spacing:-.05em;}
.about-directions-content .addr {margin-right:20px;}
.about-directions-content .tel {display:flex; gap:22px;}
.about-directions-map {border-radius:30px; overflow:hidden; transform-origin:center bottom;}
.about-directions-map .root_daum_roughmap {width:100% !important;}
.about-directions-map .root_daum_roughmap .map_border {display:none;}
.about-directions-map .root_daum_roughmap .wrap_controllers {display:none;}
#map {height:460px;}

.about-contact {color:#fff; text-align:center; overflow:hidden;}
.about-contact-inner {padding:140px 0 150px 0;}
.about-contact h2 {margin-bottom:28px;}
.about-contact h2 span {display:inline-block; color:transparent; background:url('images/text-mask-2.jpg') 100% 50% no-repeat;  background-clip:text; -webkit-background-clip:text;}
.about-contact p {margin-bottom:88px; font-size:18px; font-weight:300; line-height:1.5em;}
.about-contact .btn {display:inline-flex; align-items:center; padding:7px 12px; border:1px solid #fff; border-radius:40px; text-align:center;}
.about-contact .btn .txt {padding:0 20px;}
.about-contact .btn .ico {display:flex; align-items:center; justify-content:center; width:32px; height:32px; background:#fff; border-radius:100%; color:#1a1a1a; transition:.2s;}
.about-contact .btn .ico svg {display:block; width:12px; height:auto;}
.about-contact .btn:hover {background:#fff; color:#1a1a1a;}
.about-contact .btn:hover .ico {background:#1a1a1a; color:#fff;}

@media (max-width: 1600px) {
	.about-top-heading {height:600px;}
	.about-top-heading h2 {font-size:85px;}
	.about-top-heading p {font-size:16px;}

	.about-wrap {margin-top:-60px; border-radius:60px 60px 0 0;}
	.about-wrap .contain {max-width:1380px;}

	.about-title h2 {font-size:48px;}

	.about-hero .heading {padding:80px 0 60px;}

	.about-service {padding:100px 0;}
	.about-service-items .item h3 {font-size:24px;}
	.about-service-items .item p {font-size:15px;}

	.about-clients .about-title {margin-bottom:40px;}
	.about-clients-nav ul li a {font-size:18px;}

	.about-service .about-title,
	.about-video .about-title,
	.about-gallery .about-title,
	.about-directions .about-title {margin-bottom:60px;}

	.about-hero-image {width:1300px;}

	.about-counter .about-title h2 {max-width:520px;}

	.about-contact p {margin-bottom:70px; font-size:16px;}

	.about-portfolio {padding:50px 40px 0;}
	.about-portfolio-more h2 {font-size:50px;}

	

}

@media (max-width: 1380px) {
	.about-hero-image {width:calc(100vw - 80px);}

}

@media (max-width: 1024px) {
	.about-top-heading {height:480px;}
	.about-top-heading h2 {font-size:65px;}
	.about-top-heading p {font-size:15px;}

	.about-wrap {margin-top:-50px; border-radius:50px 50px 0 0;}

	.about-title h2 {font-size:40px;}

	.about-hero .heading {padding:60px 0 40px;}
	.about-hero .heading h2 {font-size:26px;}
	.about-hero .heading p {font-size:16px;}
	
	.about-service .about-title,
	.about-video .about-title,
	.about-gallery .about-title,
	.about-directions .about-title {margin-bottom:40px;}

	.about-service-items .items {gap:16px;}
	.about-service-items .item {border-radius:20px;}
	.about-service-items .item .txt {padding:16px;}
	.about-service-items .item h3 {font-size:20px;}
	.about-service-items .item p {font-size:13px; line-height:1.5em;}

	.about-counter .about-title p {font-size:16px;}
	.about-counter-item dt {font-size:18px;}
	.about-counter-item dd {font-size:60px;}

	.about-portfolio {padding:0 16px; margin-bottom:100px;}
	.about-portfolio-more h2 {font-size:40px;}

	.about-portfolio-items {gap:16px;}
	.about-portfolio-item .item {margin-bottom:16px;}
	.about-portfolio-item img {border-radius:20px;}

	.about-video {padding:100px 0;}

	.about-gallery {padding:100px 0;}

	.about-directions {padding:100px 0;}
	.about-directions-content {flex-direction:column; align-items:flex-start; font-size:16px;}
	.about-directions-content .comp {font-size:24px;}

	.root_daum_roughmap .wrap_map {height:300px !important;}
	#map {height:300px;}

	.about-contact-inner {padding:100px 0 120px;}
}

@media (max-width: 900px) {
	.about-service-items .items {width:max-content;}
	.about-service-items .item {width:280px;}

	.about-portfolio {padding:40px 0 0;}
	.about-portfolio-items {margin:0 -15%;}
	
}

@media (max-width: 760px) {
	.about-top-heading {height:400px;}
	.about-top-heading h2 {font-size:30px; line-height:1em; margin-bottom:10px;}
	.about-top-heading p {font-size:14px;}

	.about-wrap {margin-top:-40px; border-radius:40px 40px 0 0;}
	.about-wrap .contain {padding-left:20px; padding-right:20px;}

	.about-title h2 {font-size:30px;}

	.about-hero-image {width: calc(100vw - 40px);}

	.about-service .about-title, 
	.about-video .about-title, 
	.about-gallery .about-title, 
	.about-directions .about-title {margin-bottom:30px;}

	.about-hero .heading {padding:40px 0 30px;}
	.about-hero .heading h2 {font-size:20px;}
	.about-hero .heading p {font-size:13px; line-height:1.56em;}
	.about-hero .about-title {top:100px;}
	.about-hero-text {margin-top:1em; width:90%; font-size:16px; line-height:1.6em;}
	.about-hero-text br {display:none;}

	.about-service-items .item {width:240px; border-radius:16px;}

	.about-counter {padding:80px 0;}
	.about-counter .contain {gap:80px;}
	.about-counter .about-title p {font-size:15px; line-height:1.56em;}
	.about-counter-items {gap:0; justify-content: space-between}
	.about-counter-item dt {font-size:14px; text-align:left;}
	.about-counter-item dd {font-size:31px;}

	.about-portfolio {padding:40px 0 0 0; margin-bottom:80px;}
	.about-portfolio-items {gap:8px; margin:0 -25%;}
	.about-portfolio-item .item {margin-bottom:8px;}
	.about-portfolio-item img {border-radius:16px;}
	.about-portfolio-more h2 {font-size:30px;}

	.about-clients .about-title {margin-bottom:20px;}
	.about-clients .about-title h2 {font-size:25px;}
	.about-clients-nav {margin-bottom:20px;}
	.about-clients-nav ul {gap:16px; justify-content: space-around;}
	.about-clients-nav ul li a {padding:8px 0; font-size:14px;}
	.about-clients-nav ul li.active a:after {height:2px;}
	.about-clients-items ul {grid-template-columns:repeat(3, 1fr); gap:4px; margin:0 -10px}
	.about-clients-items ul li {border:1px solid #ddd; overflow:hidden;}
	.about-clients-items ul li div {margin:-12px 0;}

	.about-video {padding:80px 0;}
	.about-video-container {border-radius:16px;}

	.about-gallery {padding:80px 0;}
	.about-gallery-slider .swiper-slide {width:200px;}
	.about-gallery-slider img {border-radius:16px;}

	.about-directions {padding:80px 0 40px;}
	.about-directions-content {font-size:16px;}
	.about-directions-content .comp {font-size:20px;}
	.about-directions-content .addr {margin-right:0;}

	.about-contact-inner {padding:80px 0;}
	.about-contact p {margin-bottom:40px; font-size:14px;}
	
	
}