@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */

.info .tit {font-size:42px; font-weight:700; letter-spacing:-.01em; margin-top:-15px; margin-bottom:40px; padding-left:95px;}
.info .txt {font-size:18px; font-weight:300; letter-spacing:-.05em; line-height:1.778em; margin-top:20px; padding-left:95px;}

.information ul {display:flex; flex-wrap:wrap; justify-content:center;}
.information ul li {width:25%; text-align:center; border:1px solid #ddd; border-left:none; padding:0 28px 40px 28px;}
.information ul li:first-child {border-left:1px solid #ddd;}
.information ul li .sub-title {padding:50px 0 30px;}
.information ul li .sub-title h2 {font-size:20px; letter-spacing:-.05em;}
.information ul li .sub-title h2:before {width:20px;}
.information ul li .txt {font-size:18px; font-weight:300; letter-spacing:-.05em; line-height:1.778em; margin-top:15px;}

.history {margin-top:100px; background:#fafafa; padding:95px 0;}
.history-top {position:relative; text-align:center; font-size:30px; margin-bottom:50px; letter-spacing:-.01em; z-index:2;}
.history-top:after {content:""; position:absolute; top:0; left:50%; margin-left:-83px; width:166px; height:166px; background:url("") 50% 50% no-repeat;}
.history-top h4 {font-weight:300;}
.history-top h4 strong {font-weight:600;}
.history-top div {display:inline-block; vertical-align:top; position:relative; z-index:2;}
.history-top div:nth-child(1) {margin-right:.3em;}
.history-top div:nth-child(2) {margin-right:.5em; margin-left:.3em;}
.history-top .c1 {color:#ff1d1d}
.history-top .c2 {color:#0082ff}

.history {position:relative; padding-top:70px; overflow:hidden;}
.history .group {position:relative; padding-bottom:50px;}
.history .group:before {content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:#ccc;}
.history .group:first-child:after {position:absolute; content:""; top:0; left:50%; width:1px; height:8px; background:#fafafa;}
.history .group:last-child:after {position:absolute; content:""; top:0; left:50%; width:1px; height:8px; background:#ccc;}
.history .group:last-child {margin-bottom:0;}
.history .group:last-child::before {display:none;}
.history .group h3 {font-family: 'S-CoreDream',sans-serif; letter-spacing:-.05em; position:relative; font-size:20px; font-weight:600; line-height:1.400em;  z-index:2;}
.history .group h3:before {content:""; position:absolute; top:8px; width:10px; height:10px; background:#1d51bb; border-radius:100%;}
.history .group ul li {position:relative; margin-bottom:.5em; color:#505050; font-size:16px; line-height:1.750em; letter-spacing:-.04em; margin-left:7px; font-weight:300;}
.history .group ul li:last-child {margin-bottom:0;}
.history .group ul li .month {position:absolute; top:0; color:#2c2c2c; font-weight:700;}
.history .group:nth-child(odd) {padding-left:50%;}
.history .group:nth-child(odd) h3 {padding-left:15px;}
.history .group:nth-child(odd) h3:before {left:-4px;}
.history .group:nth-child(odd) ul {padding-left:8px;}
.history .group:nth-child(even) {padding-right:50%; text-align:right;}
.history .group:nth-child(even) h3 {padding-right:15px;}
.history .group:nth-child(even) h3:before {right:-6px; border-color:#a9d5ff;}
.history .group:nth-child(even) ul {padding-right:15px;}
.history .group:nth-child(even) ul li .month {right:0;}

/* 팀구성 */
.composition{width: 100%; margin-top: 3em;}
.composition ul {display:flex; flex-wrap:wrap; justify-content:center; }
.composition ul li {width:calc(20% - 26px); text-align:center; border:1px solid #ddd; padding:60px 20px 39px; border-left: none; position: relative;}
.composition ul li:first-child{border-left: 1px solid #ddd;}
.composition ul li h3 {position:relative; padding-bottom:15px; margin-bottom:25px; font-size:16px;}
.composition ul li h3:before {position:absolute; content:''; bottom:0; left:50%; margin-left:-10px; width:20px; height:2px; background:#2c2c2c;}
.composition ul li p {font-size:18px; letter-spacing:-.05em; line-height:1.778em;}
.composition ul li .icon_wrap {position: absolute; top: -3em; left: 50%; transform: translateX(-50%); width: 90px; height: 90px; border-radius: 100px; background: var(--siteC3); display: flex; justify-content: center; align-items: center;}
.composition ul li .icon_wrap .icon{ width: 45%;}
.composition ul li .icon_wrap .icon img{ object-fit: contain;}

.orgImg_wrap{ display: flex; flex-direction: column; align-items: center;}
.orgImg_wrap .line{height: 4em; width: 1px; background: #ccc;}
.orgImg_wrap .middle{}
.orgImg_wrap .middle .position{background: var(--siteC2); width: 160px; height: 160px; text-align: center; line-height: 160px; border-radius: 100px; font-size: 2.63em; color: #fff; font-weight: 600;}


.blog {position:relative;background-image: url("/assets/site/images/sub/blog.jpg"); background-repeat:no-repeat;}
.blog .blog-logos {width:38%;}
.blog .txt {font-family: 'S-CoreDream',sans-serif; font-size:28px; font-weight:300; line-height:1.750em; margin-top:25px;}
.blog .txt strong {font-weight:500;}
.blog-inner {width:62%; padding-left:40px;}
.blog-inner ul {display:flex; flex-wrap:wrap; margin-left:-25px;}
.blog-inner ul li {background:#fff; padding:30px 20px; width:calc(33.3333% - 25px); margin-left:25px; box-shadow:8px 9px 20px #ddd;}
.blog-inner ul li .tit {font-family: 'S-CoreDream',sans-serif; font-weight:500; font-size:18px; margin-bottom:15px; color:#505050;}
.count {font-size:20px; color:#939393; font-weight:500; margin-top:20px;}
.count strong {font-size:32px; color:#2c2c2c; padding-right:5px; letter-spacing:-.05em; font-weight:700; line-height:1.0em;}
.blog-group {display:flex; padding-top:95px; flex-wrap:wrap; justify-content:center; align-items:flex-end;}

.advertisement .tit {font-size:42px; font-weight:700; letter-spacing:-.01em; padding-left:100px; margin-top:-15px;}
.advertisement .txt {font-size:18px; font-weight:300; letter-spacing:-.05em; line-height:1.778em; padding:65px 0 55px 100px;}
.advertisement-group {margin-bottom:60px;}
.advertisement-group ul {display:flex; flex-wrap:wrap;}
.advertisement-group ul li {width:25%; border:1px solid #ddd; border-left:none; text-align:center; padding:36px 10px;}
.advertisement-group ul li:first-child  {border-left:1px solid #ddd;}
.advertisement-group ul li p {font-size:20px; letter-spacing:-.05em; margin-top:15px;}
.advertise {display:flex; flex-wrap:wrap; margin-bottom:80px;}
.advertise.mg {margin-bottom:0;}
.advertise h4 {position:relative; width:26%; font-size:24px; font-weight:500; letter-spacing:-.05em; padding-left:65px; padding-right:50px; line-height:1.455em;}
.advertise h4:before {position:absolute; content:''; top:35px; left:0; width:50px; height:4px; background:#1d51bb; margin-top:-20px;}
.advertise-inner {width:74%;}
.advertise-inner ul {display:flex; flex-wrap:wrap;}
.advertise-inner ul li {margin-bottom:40px;}
.advertise-inner ul li p {position:relative; font-size:18px; font-weight:300; letter-spacing:-.05em; line-height:1.778em; padding-right:35px; padding-left:70px;}
.advertise-inner ul li .naver:before {position:absolute; content:''; top:-15px; left:0; width:60px; height:60px; background:url("/assets/site/images/sub/naver-ico.png") 50% 50% no-repeat; background-size:contain;}
.advertise-inner ul li .kakao:before {position:absolute; content:''; top:-15px; left:0; width:60px; height:60px; background:url("/assets/site/images/sub/kakao-ico.png") 50% 50% no-repeat; background-size:contain;}
.advertise-inner ul li .facebook:before {position:absolute; content:''; top:-15px; left:0; width:60px; height:60px; background:url("/assets/site/images/sub/facebook.png") 50% 50% no-repeat; background-size:contain;}
.advertise-inner ul li .insta:before {position:absolute; content:''; top:-15px; left:0; width:60px; height:60px; background:url("/assets/site/images/sub/insta.png") 50% 50% no-repeat; background-size:contain;}
.advertise-inner ul li .google:before {position:absolute; content:''; top:-15px; left:0; width:60px; height:60px; background:url("/assets/site/images/sub/google.png") 50% 50% no-repeat; background-size:contain;}
.advertise-inner ul li .ably:before {position:absolute; content:''; top:-15px; left:0; width:60px; height:60px; background:url("/assets/site/images/sub/ably.png") 50% 50% no-repeat; background-size:contain;}
.advertise-inner ul li .tiktok:before {position:absolute; content:''; top:-15px; left:0; width:60px; height:60px; background:url("/assets/site/images/sub/tiktok.png") 50% 50% no-repeat; background-size:contain;}
.advertise-inner ul li .youtube:before {position:absolute; content:''; top:-15px; left:0; width:60px; height:60px; background:url("/assets/site/images/sub/google.png") 50% 50% no-repeat; background-size:contain;}

.product ul {display:flex; margin-left:-45px; flex-wrap:wrap;}
.product ul li {position:relative; width:calc(33.3333% - 45px); margin-left:45px; border:1px solid #ddd; margin-bottom:45px;}
.product ul li .txt-box {padding:25px 50px 40px 25px; font-weight:700;}
.product ul li .txt-box .h3 {font-size:22px; font-weight:700;}
.product ul li .txt-box p {font-size:16px; letter-spacing:-.05em; font-weight:400; margin-top:15px;}
.product ul li .bg-box {display:none;}
.product ul li:hover:after {content:""; position:absolute; top:0; left:0; height:100%; width:100%; background:rgba(0, 0, 0, 0.8);}
/* .product ul li:hover:before {content:''; position:absolute; top:0; left:0; background:url("/assets/site/images/sub/brand-next.png") 50% 50% no-repeat; background-size:contain; z-index:2;} */
.product ul li:hover .bg-box {display:block; color:#fff; height:100%;}
/* .product ul li:hover .off {display:none;} */
.product ul li .box-inner {position:absolute; top:50%; left:50%; text-align: center; margin-left:-52px; margin-top:-27px; z-index:4;}
.product ul li .box-inner p {margin-top:15px; font-size:18px; letter-spacing:-.05em; line-height:1.778em;}

.portfolio-list ul {display:flex; flex-wrap:wrap; margin:0 -10px;}
.portfolio-list ul li {width:25%; padding:0 10px; margin-bottom:45px;}
.portfolio-list ul li .thumb {position:relative;}
.portfolio-list ul li .thumb:before {content:''; display:block; padding-bottom:100%;}
.portfolio-list ul li .thumb img {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.portfolio-list ul li .cate {font-size:18px; font-weight:700; letter-spacing:-.05em; line-height:1.778em; color:#797979; padding:10px 0 5px 0;}
.portfolio-list ul li .tit {font-size:22px; font-weight:700; line-height:1.455em; letter-spacing:-.05em; margin-bottom:10px;}
.portfolio-list ul li .txt {font-size:16px; color:#505050; line-height:1.750em; max-height:calc(1.750em * 1 * 2); overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}

.client-list ul {display:flex; flex-wrap:wrap; margin:0 -15px;}
.client-list ul li {width:25%; padding:0 15px; margin-bottom:45px;}

.video-list ul {display:flex; flex-wrap:wrap; margin:0 -15px;}
.video-list ul li {width:33.3333%; padding:0 15px; margin-bottom:45px; text-align:center;}
.video-list ul li .tit {margin-top:10px;}
.video-list ul li:hover .tit {color:#1d51bb;}

.contact h3 {font-size:42px; font-weight:700; letter-spacing:-.05em; line-height:1.0em; margin:-25px; margin-left:100px; margin-bottom:35px;}
.contact p {font-size:18px; font-weight:300; letter-spacing:-.05em; line-height:1.778em; margin:0 0 40px 100px;}