@charset "utf-8"; /* doc.css는 디자인페이지 스타일을 정의합니다. */
 .root_daum_roughmap {width:100% !important; height:550px !important; border: 0; border-radius: var(--space-16);} 
 .root_daum_roughmap .wrap_map {width:100% !important; height:550px !important; border: 0; border-radius: var(--space-16);} 
 .roughmap_lebel_text:after {content:""; font-size:12px; line-height:15px;} 
 
.doc-tit {padding-bottom:var(--space-80); text-align:center;} 
.doc-tit h2 {font-weight:600; font-size: var(--font-size-40); color: #000000; line-height:1em;} 
.doc-tit p {position:relative; width:fit-content; margin:var(--space-40) auto 0; font-size: var(--font-size-32); font-weight:500; color: var(--color-dark); line-height:1.09em;} 
.doc-tit p br {display:none;} 
.doc-tit p::before {content: "“"; display:inline-block; font-family:'Noto Sans KR'; color: #664199; font-weight:900; font-size: var(--font-size-70); opacity:.4; vertical-align: middle; padding-top: var(--space-20); padding-right: var(--space-10);} 
.doc-tit p::after {content: "”"; display:inline-block; font-family:'Noto Sans KR'; color: #664199; font-weight:900; font-size: var(--font-size-70); opacity:.4; vertical-align: middle; padding-top: var(--space-20); padding-left: var(--space-10);} 

.doc-sub-tit {position: relative; padding-left: clamp(16px, calc( 26 / var(--inner) * 100vw ), 26px ); color: #242424; font-size: var(--font-size-40); line-height: 1em; margin-bottom: var(--space-40); text-align: left;} 
.doc-sub-tit:before {content: ""; position: absolute; top: 50%; left: 0; width: 5px; height: 100%; border-radius: 50vh; background-color: var(--color-primary); transform: translateY(-50%);} 

.highlight {display: inline; box-shadow: inset 0 -14px 0 rgba(102, 65, 153,0.05); border-radius: 3px;} 

.doc-cnt {padding:var(--space-100) 0;} 
.doc-cnt:first-child {padding-top:0;} 

.doc-sub-cnt {margin-bottom:var(--space-100);} 
.doc-sub-cnt:last-child {margin-bottom:0;} 

.table-style table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:1px solid #1f1f1f; line-height:1.5em;} 
.table-style table th {padding:13px; border:1px solid #ddd; border-top:0; font-weight:600; background:#fafafa;} 
.table-style table td {padding:13px; text-align:center; border:1px solid #ddd; border-top:0; color: #454545;} 
.table-style tr th:first-child,
.table-style tr td:first-child {border-left:0;} 
.table-style tr th:last-child,
.table-style tr td:last-child {border-right:0;} 
.table-style span {display:inline-block;} 
.table-style .normal {font-weight:400;} 

.mt0 {margin-top:0 !important;} 
.mt60 {margin:var(--space-60) 0 0 0 !important;} 

.pt0 {padding-top:0 !important;} 
.pb0 {padding-bottom:0 !important;} 

.txt-primary {color: var(--color-primary) !important;} 
.txt-second {color: var(--color-secondary) !important;} 
.txt-grey {color: #888888 !important;} 
.txt-wht {color: #fff !important;} 

.bg-grey {background-color: #f9f9f9;} 
.bg-purple {background-color: #faf9fc;} 

.flex-wrap {display:flex;} 
.flex-wrap.ai-center {align-items:center;} 
.flex-wrap .flex {flex: 1 1 auto; width:1%; min-width:0;} 

.dot-list > li {position:relative; padding-left:14px; font-size: var(--font-size-18); line-height:1.94em;} 
.dot-list > li:before {content:"•"; position:absolute; top:-2px; left:0; color: var(--color-primary);} 

/* 회사 소개 */
.about p {padding-top:var(--space-50); text-align:center; font-size: var(--font-size-22); line-height:1.64em; color: var(--color-dark);} 
.about .img {padding-top:var(--space-70); text-align:center;} 

.greetings {display:flex;} 
.greetings .img {width:47.571%; padding-right:var(--space-80);} 
.greetings .txt-area {flex: 1 1 auto; width:1%; min-width:0;} 
.greetings .sub-head {padding-top:var(--space-15); padding-bottom:var(--space-20); font-weight:600; font-size: var(--font-size-28); line-height:1.43em; color: #000;} 
.greetings .txt-area p {font-size: var(--font-size-18); line-height:1.78em; margin-bottom:var(--body-line-height);} 
.greetings .txt-area p.last {margin-bottom:0;} 
.greetings .sign {display:flex; align-items: center; gap: var(--space-20); padding-top: var(--space-30); font-weight: 400; color: #000;} 

.cnt-list ul > li {display:flex; align-items: center; padding:var(--space-80) 0; border-bottom:1px dashed rgba(97, 63, 148,0.4); background-color: rgb(250, 249, 252);} 
.cnt-list ul > li:first-child {padding-top:0;} 
.cnt-list ul > li:last-child {padding-bottom:0; border: 0;} 
.cnt-list .img {width:28.571%; margin-right:var(--space-70);} 
.cnt-list .img img {border-radius: var(--border-radius-24);} 
.cnt-list .info {flex:1 1 auto; min-width:0; width:1%;} 
.cnt-list .tit {color:var(--color-dark); font-size:var(--font-size-40); font-weight:600; line-height:normal;} 
.cnt-list .tit strong {font-weight:900; color: var(--color-primary);} 
.cnt-list ul > li:nth-child(even) .tit strong {color: var(--color-secondary);} 
.cnt-list .txt {margin:var(--space-30) 0; font-size:var(--font-size-18); line-height:1.94em; font-weight:500;} 
.cnt-list ul .dot-list li {display: block; align-items: center; padding: 0; padding-left:14px; border-bottom: 0; background-color: unset;} 

.directions .addr {margin-top:var(--space-60); font-size: var(--font-size-34); font-weight:500; color: #333; line-height:1em; letter-spacing: 0;} 
.directions .contact-info {margin-top:var(--space-40); border-top:1px dashed rgba(97, 63, 148,0.4); line-height:1.5em;} 
.directions .contact-info dl {display:flex; padding:28px 0; border-bottom:1px dashed rgba(97, 63, 148,0.4);} 
.directions .contact-info dt {width:180px; padding-left:var(--space-30); color:#333333; font-size:var(--font-size-18); font-weight:500; letter-spacing: 0; text-transform: uppercase;} 
.directions .contact-info dt img {vertical-align:middle; margin:-.2em 17px 0 0;} 
.directions .contact-info dd {flex:1 1 auto; min-width:0; width:1%; color:#454545; letter-spacing: 0;} 

/* 광고 서비스 */
.img-list {display:flex; justify-content: center; align-items: center;} 

.cnt-list.type2 ul > li {padding:var(--space-60) 0;} 
.cnt-list.type2 .img {width:49%; margin-right:0;} 
.cnt-list.type2 .info {padding-left:var(--space-80);} 
.cnt-list.type2 .info .tit {position:relative; padding-top:var(--space-70);} 
.cnt-list.type2 .info .tit .num {position: absolute; left:0; bottom: -14%; font-size: var(--font-size-140); line-height:1em; opacity:.1; z-index:1; font-weight:900;} 
.cnt-list.type2 ul > li:nth-child(even) .tit strong {color: var(--color-primary);} 
.cnt-list.type2 .txt {margin: var(--space-30) 0 0; font-size: var(--font-size-22); line-height: 1.59em;} 

.social-list {display:flex; justify-content: center; gap: var(--space-60);} 
.social-list li {border: 1px solid rgb(188, 66, 152); border-radius: var(--border-radius-24);} 
.social-list li .img img {border-top-left-radius: var(--border-radius-24); border-top-right-radius: var(--border-radius-24);} 
.social-list li .txt-wrap {position:relative; border-top:1px solid rgb(188, 66, 152); padding:55px 0 30px; text-align:center;} 
.social-list li .txt-wrap .num {position: absolute; top:-28px; left:50%; transform: translateX(-50%); display:flex; justify-content: center; align-items: center; width: 56px; height: 56px; color: #fff; border-radius: 50%; font-weight:700; font-size: var(--font-size-22); background-color: rgb(188, 66, 152);} 
.social-list li .tit {font-weight:600; font-size: var(--font-size-22); color: var(--color-dark); line-height:normal;} 
.social-list li .tx {padding-top:10px; font-size: var(--font-size-18); line-height:1.56em;} 
.social-list li:nth-child(2) {border-color: rgb(146, 69, 153);} 
.social-list li:nth-child(2) .txt-wrap .num {background-color: rgb(146, 69, 153);} 
.social-list li:nth-child(3) {border-color: rgb(97, 63, 148);} 
.social-list li:nth-child(3) .txt-wrap .num {background-color: rgb(97, 63, 148);} 

.contents .img {margin-bottom:var(--space-60);} 
.contents .img img {border-radius: var(--space-16);} 

.num-list li {display:flex; align-items: center; padding:10px; border-radius: 50vh; background-color: #fff;} 
.num-list li:first-child {margin-bottom:var(--space-20);} 
.num-list li .num {width: 50px; height: 50px; text-align:center; line-height:50px; color: #fff; font-weight:600; font-size: var(--font-size-22); border-radius: 100%; background-color: rgb(97, 63, 148);} 
.num-list li:nth-child(2) .num {background-color: var(--color-secondary);} 
.num-list li p {flex: 1 1 auto; min-width:0; width:1%; padding-left:var(--space-20); font-weight:500; font-size: var(--font-size-18); line-height:normal; color: #242424;} 

.service-list {padding:var(--space-60); border-radius: 8px; border: 1px solid #cfc5df; background-color: rgb(255, 255, 255);} 
.service-list ul {display:grid; grid-template-columns: repeat(4, 1fr);} 
.service-list ul li {display:flex; flex-direction: column; align-items: center; position:relative; text-align:center; width: 100%; max-width: 280px;} 
.service-list ul li::after {content: ""; position: absolute; top: 30px; right: -17px; width:17px; height:28px; background: url(../images/sub/arrow.png) no-repeat center/contain;} 

.service-list ul li:last-child::after {display:none;} 
.service-list ul li .ico {text-align:center;} 
.service-list .txt {margin-top:var(--space-30); font-weight:600; font-size: var(--font-size-22); line-height:1.333em; color: #242424;} 

.reverse-list .doc-cnt .contain {display:flex; align-items: center;} 
.reverse-list .doc-cnt .img {width:49%;} 
.reverse-list .doc-cnt .img img {border-radius: var(--space-40);} 
.reverse-list .doc-cnt .txt {width:51%; padding-left:var(--space-80);} 
.reverse-list .doc-cnt:nth-child(even) .contain {flex-direction: row-reverse;} 
.reverse-list .doc-cnt h3 {position:relative; color:var(--color-dark); font-size:var(--font-size-40); font-weight:600; line-height:normal;} 
.reverse-list .t1 {margin-top:var(--space-30); font-size: var(--font-size-22); line-height: 1.59em; font-weight:500;} 
.reverse-list .t2 {margin-top:var(--space-20); color: #686868; font-size:var(--font-size-18); line-height: 1.56em;} 
.reverse-list .doc-cnt .num {position: absolute; left:0; bottom: -10%; font-size: var(--font-size-140); line-height:1em; opacity:.1; z-index:1; font-weight:900; color: var(--color-primary);} 

/* 클라이언트 */
.client-list ul {display:grid; grid-template-columns: repeat(4, 1fr);} 
.client-list ul li {position:relative; cursor:pointer;} 
.client-list ul li.none {width: 100%; padding: 70px 0; margin: 0; text-align: center; color: #767676;} 
.client-list ul li .thumb {position: relative; padding-bottom: 80%; overflow: hidden;} 
.client-list ul li .thumb img {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover;} 
.client-list ul li .hover {display:flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; color: #fff; text-align:center; background: url(/images/bbs/bg-client.jpg) no-repeat center/cover; opacity:0; transition: .3s;} 
.client-list ul li:hover .hover {opacity:1;} 
.client-list ul li .hover .cop {position:relative; font-weight:700; font-size: var(--font-size-24); line-height:1em; padding-bottom:25px; margin-bottom:20px;} 
.client-list ul li .hover .cop::after {content: ""; position: absolute; bottom:0; left:50%; transform: translateX(-50%); width: clamp(30px, calc( 50 / var(--inner) * 100vw ), 50px ); height: 3px; background-color: #eee;} 

.inquiry-form .group {margin-bottom:var(--space-50);} 
.inquiry-form .group:last-child {margin-bottom: 0;} 
.inquiry-form .form .row {display:flex; flex-wrap:wrap; gap: var(--space-50) var(--space-60);} 
.inquiry-form .form .col {width:calc(50% - var(--space-30));} 
.inquiry-form .form .col.col-x2 {width:100%;} 
.inquiry-form .form dt,
.inquiry-form .form-agree h3 {margin-bottom:var(--space-20); font-size: var(--font-size-18); font-weight:600; color: #333; line-height:1.33em;} 
.inquiry-form .form .input {display:block; width:100%; height:53px; padding: var(--space-15); line-height:1.5em; border-radius: 4px;} 
.inquiry-form .form textarea.input {height:var(--space-200);} 
.inquiry-form .form-agree {margin:0;} 
.inquiry-form .form-agree .check {text-align:left;} 
.inquiry-form .captcha-wrap {height: 53px;} 
.inquiry-form .captcha-wrap .input {width: 160px;} 
.inquiry-form .form-agree .scroll-box {padding: var(--space-25); color: #555; font-size: var(--font-size-16); font-weight: 400; line-height: 1.625em; background: #fff; border-radius: 4px;} 
.inquiry-form .form-agree .check {margin-top:var(--space-30);} 

.inquiry-form .required img {display: inline-block; vertical-align: middle; margin-top: -5px;} 
.inquiry-form .item {display: inline-block; margin-right:var(--space-40);} 

@media (max-width: 1024px){
 .inquiry-form .captcha-wrap {height: 40px;} 
}

@media (max-width: 640px){
 .inquiry-form .group {margin-bottom:45px;} 
 .inquiry-form .group:first-child .title {margin-bottom:20px;} 
 .inquiry-form .form .row {display:block;} 
 .inquiry-form .form .col {width:100%; margin-bottom:20px;} 
 .inquiry-form .form .col:last-child {margin-bottom:0;} 
 .inquiry-form .form .input {height:38px;} 
 .inquiry-form .form .input.type2 {height:auto !important;} 
 .inquiry-form .form-agree {margin-bottom:30px;} 
 .inquiry-form .form-agree .check {text-align:center;} 

 .inquiry-form .item:not(:last-child) {margin-bottom:3px;} 
}