@charset "utf-8";

/* SUSTAINABILITY */
.promise {padding:90px 0 70px; font-size:18px; line-height:2.111em; letter-spacing:-.03em; text-align:center; color:#fff; background:url("../images/sub/promise_bg.jpg") 50% 100% no-repeat; background-size:cover;}
.promise h3 {text-align:left; font-size:50px; line-height:1.3em; letter-spacing:-.03em; margin-bottom:34px;}
.promise .txt {text-align:left; margin-bottom:85px;}
.promise .txt p {margin-bottom:30px;}
.promise .txt p:last-child {margin-bottom:0;}
.promise .items {margin-bottom:65px; font-size:24px; font-weight:500; line-height:1.3em;}
.promise .items h4 {text-align:left; font-size:24px; font-weight:500; line-height:1.4em; letter-spacing:-.03em; margin-left:8%; margin-bottom:30px;}
.promise .items ul {display:flex;}
.promise .items ul li {width:25%; padding:35px 10px; border-left:1px solid rgba(255,255,255,.32);}
.promise .items ul li:first-child {border-left:0;}
.promise .items ul li img {display:block; margin:0 auto 27px;}
.promise .txt2 {font-size:30px; line-height:1.75em; letter-spacing:-.03em;}
.promise .txt2 strong {font-weight:600;}

.about-category {display:flex;}
.about-category .txt {flex:1 1 auto; min-width:0; width:1%; padding-top:8%;}
.about-category .txt p {font-size:40px; font-weight:600; line-height:1.5em; letter-spacing:-.03em;}
.about-category .img {width:573px; margin-left:80px;}
.about-category .circle {width:476px; position:relative;}
.about-category .circle .ov-wrap {position:absolute; top:0; left:0; width:100%;}
.about-category .circle .ov {position:absolute; top:0; left:0; width:100%; opacity:0; transition:.4s;}
.about-category .circle .ov.active {opacity:1;}
.about-category .circle .ov ul {position:absolute; top:57%; left:calc(100% + 24px);}
.about-category .circle .ov ul li {margin-bottom:9px; opacity:0; transform:translate(-5px,5px); transition-duration:.4s;}
.about-category .circle .ov ul li:last-child {margin-bottom:0;}
.about-category .circle .ov ul li a {display:block; position:relative; padding-left:17px; font-size:18px; font-weight:500; line-height:1.3em; letter-spacing:-.03em; white-space:nowrap;}
.about-category .circle .ov ul li a:before {content:""; position:absolute; top:8px; left:0; width:5px; height:5px; background:#dfdfdf; border-radius:100%;}
.about-category .circle .ov ul li a:hover {color:#3B82F6;}
.about-category .circle .ov ul li a:hover::before {background:#3B82F6;}
.about-category .circle .ov ul li:nth-child(1) {}
.about-category .circle .ov ul li:nth-child(2) {margin-left:-4%; transition-delay:.15s;}
.about-category .circle .ov ul li:nth-child(3) {margin-left:-11%; transition-delay:.3s;}
.about-category .circle .ov ul li:nth-child(4) {margin-left:-20%; transition-delay:.45s;}
.about-category .circle .ov ul li:nth-child(5) {margin-left:-32%; transition-delay:.6s;}
.about-category .circle .ov.active ul li{opacity:1; transform:translate(0,0);}

/* update 2022-02-18 */
.category-cnt1 {padding:140px 0; margin-bottom:100px; color:#fff; background:url("../images/sub/category_top_bg.jpg") 50% 50% no-repeat; background-size:cover; overflow:hidden;}
.category-cnt1 .contain {display:flex; align-items:center; max-width:1260px;}
.category-cnt1 .cnt {flex:1 1 auto; min-width:0; width:1%; margin-right:40px;}
.category-cnt1 .cnt .in {max-width:630px;}
.category-cnt1 .cnt h3 {font-size:40px; font-weight:600; line-height:1.5em; letter-spacing:-.03em; margin-bottom:10px;}
.category-cnt1 .cnt p {font-size:18px; line-height:1.778em; letter-spacing:-.03em;}
.category-cnt1 .nav {display:flex;}
.category-cnt1 .nav .col {width:220px; margin-left:15px;}
.category-cnt1 .nav .link {width:0; vertical-align:top; overflow:hidden; opacity:0; transition:.8s; margin-bottom:15px;}
.category-cnt1 .nav .link a {display:block; text-align:center; white-space:nowrap; font-size:18px; font-weight:600; line-height:57px; letter-spacing:-.03em; background:url("../images/sub/link_box_bg.png") 0 0 no-repeat; background-size:100% 100%;}
.category-cnt1 .nav .link a span {display:inline-block; transition:.4s .8s; opacity:0;}
.category-cnt1 .nav .link .plus {display:inline-block; vertical-align:middle; margin:-.2em 0 0 10px; width:16px; height:16px; background:url("../images/sub/plus.png") 50% 50% no-repeat;}
.category-cnt1 .nav .links {transition:.7s 1s; opacity:0; transform:translateY(-5px);}
.category-cnt1 .nav .links ul {display:flex; flex-wrap:wrap; margin:0 -7px;}
.category-cnt1 .nav .links ul li {width:50%; padding:0 7px; margin-bottom:9px;}
.category-cnt1 .nav .links ul li:last-child {width:100%; margin-bottom:0;}
.category-cnt1 .nav .links ul li a {display:block; text-align:center; font-size:18px; line-height:1.4em; letter-spacing:-.03em; padding:6px 0; border-bottom:1px solid #fff;}

.loaded .category-cnt1 .nav .link {width:100%; opacity:1;}
.loaded .category-cnt1 .nav .link a span {opacity:1;}
.loaded .category-cnt1 .nav .links {opacity:1; transform:translateY(0);}

.category-cnt2 {text-align:center; margin-bottom:90px;}
.category-cnt2 .contain {max-width:1360px;}
.category-cnt2 h3 {font-size:40px; font-weight:600; line-height:1.5em; letter-spacing:-.03em; margin-bottom:50px;}
.category-cnt2 h3 span {color:#3B82F6;}
.category-cnt2 .row {display:flex; margin:0 -25px; text-align:left;}
.category-cnt2 .col {width:33.33333333%; padding:0 25px;}
.category-cnt2 .depth1 {display:block; position:relative;}
.category-cnt2 .depth1 .img {overflow:hidden; background:#eee;}
.category-cnt2 .depth1 .img img {display:block; transform:scale(1.15); transition:1.1s ease; opacity:0;}
.category-cnt2 .depth1 .tit {position:absolute; bottom:0; left:0; width:100%; padding:15px 20px; color:#fff; background:rgba(0,0,0,.5); font-size:24px; font-weight:600; line-height:1.4em; letter-spacing:-.03em;}
.category-cnt2 .depth1 .tit span {font-weight:400;}
.category-cnt2 .depth2 ul li {padding:0 10px; border-bottom:1px solid #a8a8a8;}
.category-cnt2 .depth2 ul li:last-child {border-bottom:0;}
.category-cnt2 .depth2 ul li a {display:block; position:relative; padding:15px 0 15px 11px; font-weight:500; line-height:1.4em; letter-spacing:-.03em;}
.category-cnt2 .depth2 ul li a:before {content:""; position:absolute; top:23px; left:-5px; width:4px; height:4px; background:#3B82F6; border-radius:100%; opacity:0; transition:.2s;}
.category-cnt2 .depth2 ul li a:hover {color:#3B82F6; font-weight:600;}
.category-cnt2 .depth2 ul li a:hover::before {opacity:1; left:0;}
.category-cnt2.active .depth1 .img img {transform:scale(1); opacity:1;}

.category-cnt3 {margin-bottom:200px; overflow:hidden;}
.category-cnt3 .contain {display:flex; align-items:center; max-width:1360px;}
.category-cnt3 .cnt {flex:1 1 auto; min-width:0; width:1%; margin-right:40px;}
.category-cnt3 .cnt .in {max-width:550px;}
.category-cnt3 .cnt h3 {font-size:40px; font-weight:600; line-height:1.5em; letter-spacing:-.03em;
	background: linear-gradient(to right, #3B82F6 ,#93c5fd, #93c5fd);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}
.category-cnt3 .cnt p {font-size:40px; font-weight:500; line-height:1.5em; letter-spacing:-.03em;}
.category-cnt3 .circle {width:574px; position:relative;}
.category-cnt3 .circle:before {content:""; display:block; padding-bottom:100.7%;}
.category-cnt3 .circle .rotation {position:absolute; top:17%; left:9%; width:82%; background:url("../images/sub/category_box_circle.png?v=3") 50% 50% no-repeat; background-size:contain; animation:move_rotation 7s linear infinite;}
.category-cnt3 .circle .rotation:before {content:""; display:block; padding-bottom:100%;}
.category-cnt3 .circle .item {position:absolute; width:46.2%; max-width:265px; color:#fff; text-align:center; background-position:50% 50%; background-repeat:no-repeat; background-size:contain; z-index:2;}
.category-cnt3 .circle .item:before {content:""; display:block; padding-bottom:113.6%;}
.category-cnt3 .circle .item div {position:absolute; top:50%; left:0; width:100%; transform:translate(0,-50%); transition:.2s;}
.category-cnt3 .circle .item .txt {font-size:22px; font-weight:600; line-height:1.4em; letter-spacing:-.03em;}
.category-cnt3 .circle .item .over {font-size:18px; font-weight:500; line-height:1.778em; letter-spacing:-.03em; opacity:0;}
.category-cnt3 .circle .item:hover .txt {opacity:0;}
.category-cnt3 .circle .item:hover .over {opacity:1;}
.category-cnt3 .circle .item-1 {top:0; left:50%; transform:translate(-50%,0); background-image:url("../images/sub/category_box1.png?v=3");}
.category-cnt3 .circle .item-2 {bottom:0; left:0; background-image:url("../images/sub/category_box2.png?v=3");}
.category-cnt3 .circle .item-3 {bottom:0; right:0; background-image:url("../images/sub/category_box3.png?v=3");}

@keyframes move_rotation {
  0%{
    transform:rotate(0);
  }
  100% {
    transform:rotate(360deg);
  }
}

/* OUR WORK */
.tunkey-head h2 {font-size:40px; font-weight:600; line-height:1.5em; letter-spacing:-.03em;}

.tunkey-group {padding:100px 0; overflow:hidden;}
.tunkey-group.bg {background:#f8f8f8}
.tunkey-group.first {padding-top:70px;}
.tunkey-group.last {padding-bottom:120px;}
.tunkey-group .contain {display:flex;}
.tunkey-group .cnt {width:50%; padding-right:40px;}
.tunkey-group .img {width:50%; text-align:right;}
.tunkey-group h3 {font-size:34px; font-weight:600; line-height:1.5em; letter-spacing:-.03em;}
.tunkey-group h3:after {content:""; display:block; width:40px; height:3px; background:#222; margin:20px 0 23px;}
.tunkey-group p {color:#a8a8a8; font-size:17px; line-height:1.824em; letter-spacing:-.03em; margin-bottom:40px;}
.tunkey-group ul {display:flex; flex-wrap:wrap; margin:-20px -45px;}
.tunkey-group ul li {width:25%; text-align:center; padding:20px 10px; font-size:14px; font-weight:400; line-height:1.5em; letter-spacing:-.03em;}
.tunkey-group ul li img {display:block; margin:0 auto 5px;}

.service {padding-bottom:100px; overflow:hidden;}
.service .contain {display:flex; align-items:flex-start;}
.service .cnt-wrap {width:43%; padding:10% 30px 10% 0;}
.service .cnt-wrap h2 {font-size:40px; font-weight:600; line-height:1.5em; letter-spacing:-.03em; margin-bottom:30px;}
.service .cnt-wrap p {color:#a8a8a8; font-size:17px; line-height:1.824em;}
.service .img-wrap {width:57%; padding:85px 0; position:relative;}
.service .img-wrap .img {position:relative; width:71%; z-index:5;}
.service .img-wrap .icon {position:absolute; opacity:0; display:block;}
.service .img-wrap .icon .circle {width:200px; height:200px; display:flex; align-items:center; justify-content:center; background:#fff; text-align:center; font-size:20px; font-weight:600; line-height:1.3em; border-radius:100%; box-shadow:20px 20px 40px rgba(0,0,0,.13);}
.service .img-wrap .icon .circle img {}
.service .img-wrap .icon .circle span {position:absolute; top:50%; left:0; width:100%; transform:translateY(-50%); text-align:center;}
.service .img-wrap .icon-1 {top:-5%; right:-3.5%; transform:translate(10px, 10px);}
.service .img-wrap .icon-2 {top:50%; right:0; transform:translate(-5px, 13px);}
.service .img-wrap .icon-2 .circle {transform:translate(100%,-50%)}
.service .img-wrap .icon-3 {bottom:-5%; right:-3.5%; transform:translate(-10px, 10px);}
.service .img-wrap .back {position:absolute; width:70%;}
.service .img-wrap .back img {display:block;}
.service .img-wrap .back-1 {top:0; left:6%; animation:move_back_1 5s linear infinite;}
.service .img-wrap .back-2 {top:8%; left:-2%; animation:move_back_2 5s .3s linear infinite;}
.service .img-wrap .back-2 img {transform:rotate(-15deg)}
.service .img-wrap .back-3 {top:12%; left:3%; animation:move_back_3 5s .5s linear infinite;}
.service .img-wrap .back-3 img {transform:rotate(-36deg)}

.loaded .service .img-wrap .icon {opacity:1;}
.loaded .service .img-wrap .icon-1 {transform:translate(0, 0); transition:all .6s linear;}
.loaded .service .img-wrap .icon-2 {transform:translate(0, 0); transition:all .6s .2s linear;}
.loaded .service .img-wrap .icon-3 {transform:translate(0, 0); transition:all .6s .4s linear;}

@keyframes move_back_1 {
  0%,100%{
    transform:translateY(0) rotate(0);
  }
  50% {
    transform:translateY(15px) rotate(5deg);
  }
}

@keyframes move_back_2 {
  0%,100%{
    transform:translate(0,0) rotate(0);
  }
  50% {
    transform:translate(-15px,-15px) rotate(-5deg);
  }
}

@keyframes move_back_3 {
  0%,100%{
    transform:translate(0,0) rotate(0);
  }
  50% {
    transform:translate(15px,-15px) rotate(0);
  }
}

.collab-intro {padding:60px 0 50px;}
.collab-intro h2 {font-size:36px; font-weight:600; line-height:1.5em; letter-spacing:-.03em; margin-bottom:20px; color:#222;}
.collab-intro p {color:#a8a8a8; font-size:17px; line-height:1.824em;}

.design-list {padding:60px 0 100px; background:#f8f8f8;}
.design-list ul {display:flex; flex-wrap:wrap; margin:-13px;}
.design-list ul li {width:33.33333333%; padding:13px;}
.design-list ul li a {display:block; position:relative; padding-bottom:86.2%; overflow:hidden;}
.design-list ul li a img {position:absolute; top:50%; left:0; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}
.design-list ul li a:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; opacity:0; background:url("../images/sub/zoom.png") 50% 50% no-repeat; transition:.2s;}
.design-list ul li a:hover::after {opacity:.6;}


/* ABOUT US */
.about-company .contain {padding-bottom:100px; background:url("../images/sub/about_bg.png") right 30px bottom -140px no-repeat;}
.about-company .tit {margin-bottom:85px;}
.about-company .tit p {font-size:34px; font-weight:500; line-height:1.4em; letter-spacing:-.03em;}
.about-company .tit h2 {font-size:72px; font-weight:700; line-height:1.35em; letter-spacing:-.03em;}
.about-company .cnt {display:flex;}
.about-company .cnt dl {margin-right:80px;}
.about-company .cnt dl:after {content:""; display:block; width:40px; height:3px; background:#222; margin-top:30px;}
.about-company .cnt dt {font-size:26px; font-weight:600; line-height:1.4em; letter-spacing:-.03em; margin-bottom:23px;}
.about-company .cnt dd {color:#a8a8a8; font-size:17px; line-height:1.824em;}

.about-tit {font-size:40px; font-weight:600; line-height:1.5em; letter-spacing:-.03em;}

.about-service {padding:100px 0; background:#f8f8f8;}
.about-service .tit-area {display:flex; justify-content:space-between; margin-bottom:40px;}
.about-service .tit-area ul {display:flex; justify-content:space-between; width:54%; margin-top:7px; font-size:26px; font-weight:600; line-height:1.231em; letter-spacing:-.03em;}
.about-service .tit-area ul li {margin-left:40px;}
.about-service .tit-area ul li:after {content:""; display:block; width:40px; height:3px; background:#222; margin-top:32px;}
.about-service .txt-area {color:#a8a8a8; font-size:18px; line-height:1.778em;}

.about-location {padding:100px 0 60px;}
.about-location .contain {display:flex;}
.about-location .cnt {flex:1 1 auto; min-width:0; width:1%; padding-top:35px;}
.about-location .cnt h3 {margin-bottom:45px;}
.about-location .cnt .tt {font-size:26px; line-height:1.231em; letter-spacing:-.03em; margin-bottom:14px;}
.about-location .cnt .tt strong {font-weight:600;}
.about-location .cnt .txt {color:#a8a8a8; font-size:17px; line-height:1.824em;}
.about-location .cnt .txt:after {content:""; display:block; width:40px; height:3px; background:#222; margin-top:30px;}
.about-location .img {width:68%; max-width:920px;}
.about-location .map-wrap {position:relative;}
.about-location .map-wrap .marker {position:absolute; top:39.7%; left:30.7%; margin:-12px 0 0 -9px; animation:move_updown 1.5s linear infinite;}

@keyframes move_updown {
  0%,100%{
    transform:translate(0,0);
  }
  50% {
    transform:translate(0,5px);
  }
}

.about-partner {padding:50px 0 120px;}
.about-partner .contain {display:flex; align-items:flex-end}
.about-partner .cnt {flex:1 1 auto; min-width:0; width:1%;}
.about-partner .cnt h3 {margin:30px 0 20px;}
.about-partner .cnt h3 strong {font-weight:800;}
.about-partner .cnt p {color:#a8a8a8; font-size:17px; line-height:1.824em;}
.about-partner .btn a {display:inline-block; padding:19px 40px; color:#fff; font-size:20px; font-weight:600; line-height:1.5em; letter-spacing:-.03em; background:#121212; border-radius:50px;}


/* CONTACT US */
.contact-wrap {max-width:1200px; margin:0 auto; padding-top:20px;}
.contact-wrap .inner-wrap {position:relative;}

.contact-heading {text-align:center; margin-bottom:70px;}
.contact-heading h2 {font-size:46px; font-weight:300; line-height:1.3em; letter-spacing:-.03em; margin-bottom:35px;}
.contact-heading p {color:#a8a8a8; font-size:20px; line-height:2.1em; letter-spacing:-.03em;}

.contact-form {margin-bottom:23px;}
.contact-form .row {display:flex; flex-wrap:wrap; margin:-7px -5px;}
.contact-form .col {width:50%; padding:7px 5px;}
.contact-form .col.x-2 {width:100%;}
.contact-form .input {display:block; width:100%; height:52px; padding:14px 24px; font-weight:500; border:1px solid #ccc;}
.contact-form textarea.input {height:280px;}

.contact-agree {margin-bottom:40px; font-size:15px; color:#505050; line-height:1.7em;}
.contact-agree .link {color:#2c2c2c; text-decoration:underline;}
.contact-agree p {margin-bottom:20px;}
.contact-agree .check-item {margin-top:8px;}

.btn-submit {display:inline-block; width:188px; height:52px; color:#fff; font-size:20px; font-weight:500; background:#3B82F6; border:0; border-radius:50px; transition:.2s;}
.btn-submit:hover {background:#222;}

.contact-map {position:absolute; top:0; right:-300px; width:260px; font-size:15px; line-height:1.5em; letter-spacing:-.03em;}
.contact-map iframe {display:block; margin-bottom:21px;}
.contact-map p {margin-bottom:6px;}
.contact-map p img {vertical-align:middle; margin:-.2em 4px 0 0;}
.contact-map p strong {font-weight:600;}

.kcaptcha_redo {width:52px; height:52px; margin-left:10px; display:flex; align-items:center; justify-content:center; background:#f8f8f8; border:1px solid #dfdfdf; border-radius:4px;}