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

.doc-tit {position:relative; margin-bottom:30px; padding-bottom:27px; padding-left:28px; font-size:24px; line-height:1.3em; font-weight:500; color:#242424; border-bottom:1px solid #ddd;}
.doc-tit:after {content:""; position:absolute; top:6px; left:0; width:18px; height:18px; background:url('../images/sub/dot1.png') 0 0 no-repeat; background-size:100% 100%;}
.doc-tit.border-b0 {border-bottom:0; padding-bottom:0;}

.doc-cnt {margin-bottom:90px;}
.doc-cnt:last-child {margin-bottom:0;}
.doc-cnt .indent {padding-left:28px;}

.sub-tab {margin-bottom:60px; text-align:center;}
.sub-tab ul {display:table; table-layout:fixed; width:100%;}
.sub-tab ul li {display:table-cell; vertical-align:middle; width:auto; max-width:50%;}
.sub-tab ul li a {display:block; width:100%; height:60px; border:1px solid #ddd; border-right:0; font-size:15px; line-height:1.2em;display:flex;justify-content:center;align-items:center;text-align:center; color:#454545; font-weight:500;}
.sub-tab ul li:last-child a {border-right:1px solid #ddd;}
.sub-tab ul li.active a {border:1px solid #8ebc43; background:#8ebc43; color:#fff;}
.sub-tab ul li.active + li a {border-left:0;}

.business-field .group {margin-bottom:40px;}
.business-field .group:last-child {margin-bottom:0;}
.business-field .group .indent2 {padding-left:15px;}
.business-field .sub-tit {position:relative; padding-left:15px; font-size:20px; line-height:1.3em; font-weight:500; color:#242424; margin-bottom:15px;}
.business-field .sub-tit:after {content:""; position:absolute; top:5px; left:0; width:3px; height:15px; background:#c3da95;}
.business-field .txt-list ul li {position:relative; padding-left:15px; font-size:16px; line-height:26px; color:#454545;}
.business-field .txt-list ul li:after {content:""; position:absolute; top:11px; left:0; width:5px; height:5px; background:#ddd;}
.business-field .product-lst ul {display:flex; margin:0 -11px;}
.business-field .product-lst ul li {/* width:20%; */ max-width:50%; padding:0 11px; text-align:center;}
.business-field .product-lst ul li .tt {border:1px solid #ddd; height:39px; background:#f5f5f5; font-size:18px; line-height:37px; font-weight:500; color:#242424;}
.business-field .product-lst ul li .txt {border:1px solid #21213a; height:38px; font-size:16px; line-height:37px; color:#242424;}
.business-field .product-lst ul li .txt span{padding-left:28px;position:relative;}
.business-field .product-lst ul li .txt span:before{content:'';width:20px;height:22px;background:url('../images/sub/ic_logo3.png')no-repeat 50% 50%/contain;position: absolute;left:0;top:1px;}
.business-field .product-lst ul li .img {position:relative; line-height:0;}
.business-field .product-lst ul li .img:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; border:1px solid #21213a; border-top:0;}
.business-field .product-lst ul li .img img {width:100%;}
.business-field .product-lst.type2 ul li{width:16.6666%;}
.business-field .product-lst.type2 ul li .img{min-height:210px;}
.business-field .product-lst .pic {line-height:0;}
.business-field .table table {width:100%; border-collapse:collapse; border-spacing:0px;}
.business-field .table table thead th {height:50px; border:1px solid #ddd; background:#f5f5f5; font-size:16px; font-weight:500; color:#454545;}
.business-field .table table thead th:first-child {border-left:0;}
.business-field .table table thead th:last-child {border-right:0;}
.business-field .table table tbody th {height:50px; border:1px solid #ddd; background:#f5f5f5; font-size:16px; font-weight:500; color:#454545;}
.business-field .table table tbody th:first-child {border-left:0;}
.business-field .table table tbody th:last-child {border-right:0;}
.business-field .table table tbody td {padding:22px 5px; border:1px solid #ddd; font-size:16px; line-height:24px; text-align:center; color:#454545;}
.business-field .table table tbody td:first-child {border-left:0;}
.business-field .table table tbody td:last-child {border-right:0;}
.business-field .list1 ul {display:flex; flex-wrap:wrap; margin:0 -7.5px;}
.business-field .list1 ul li {width:20%; padding:0 7.5px; text-align:center; margin-bottom:35px;}
.business-field .list1 ul li .img {position:relative; line-height:0; margin-bottom:10px;}
.business-field .list1 ul li .img:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; border:1px solid #ddd;}
.business-field .list1 ul li .tt {font-size:16px; line-height:22px; color:#454545;}
.business-field .in-txt {margin-bottom:25px; font-size:16px; line-height:26px; color:#454545;}
.business-field .list2 > ul {display:flex; margin:0 -10px;}
.business-field .list2 > ul > li {width:25%; padding:0 10px;}
.business-field .list2 > ul > li .img {line-height:0;}
.business-field .list2 > ul > li .tt {height:43px;border-bottom:1px solid #ddd; padding-left:11px; font-size:16px; line-height:1.2em; color:#454545; font-weight:500;margin-top:10px;}
.business-field .list2 > ul > li > ul {padding-left:11px; padding-top:12px;}
.business-field .list2 > ul > li > ul > li {position:relative; padding-left:10px; font-size:16px; line-height:26px; color:#454545;}
.business-field .list2 > ul > li > ul > li:after {content:""; position:absolute; top:13px; left:0; width:4px; height:1px; background:#454545;}
.business-field .list2 > ul > li > ul > li > ul li {position:relative; padding-left:12px; font-size:16px; line-height:26px; color:#454545;}
.business-field .list2 > ul > li > ul > li > ul li:after {content:""; position:absolute; top:12px; left:3px; width:3px; height:3px; border-radius:50%; background:#454545;} 

.sub-tab ul li a span{padding-left:34px;position:relative;}
.sub-tab ul li a span:before{content:'';width:25px;height:27px;background:url('../images/sub/ic_logo2.png')no-repeat 50% 50%/contain;position: absolute;left:0;top:-3px;}
.lnb ul li a span{padding-left:50px;position:relative;}
.lnb ul li a span:before{content:'';width:36px;height:40px;background:url('../images/sub/ic_logo1.png')no-repeat 50% 50%/contain;position: absolute;left:0;top:-3px;}

.greeting {display:flex;}
.greeting .pic {flex:1 1 415px; max-width:415px; margin-right:42px; line-height:0;}
.greeting .txt {flex:1 auto; width:1%; padding-top:35px;}
.greeting .txt p {margin-bottom:18px; font-size:16px; line-height:26px; color:#454545;}
.greeting .txt p:last-child {margin-bottom:0;}
.greeting .txt .ceo {margin-top:55px; font-size:18px; line-height:26px; vertical-align:top;}
.greeting .txt .ceo span {display:inline-block; vertical-align:middle; margin-right:8px;}
.greeting .txt .ceo img {display:inline-block; vertical-align:middle;}

.ideology-list {margin-top:55px;}
.ideology-list ul {display:flex; justify-content:center;}
.ideology-list ul li {padding:0 53px;}
.ideology-list ul li .box {display:flex; justify-content:center; flex-direction:column; width:234px; height:234px; border-radius:50%; text-align:center;}
.ideology-list ul li .box .tt {font-size:42px; line-height:1.3em; font-weight:500; margin-bottom:25px;}
.ideology-list ul li .box p {font-size:18px; line-height:24px; font-weight:500; color:#454545;}
.ideology-list ul li.bg1 .box {border:2px solid #093e8d;}
.ideology-list ul li.bg1 .box .tt {color:#093e8d;}
.ideology-list ul li.bg2 .box {border:2px solid #99c253;}
.ideology-list ul li.bg2 .box .tt {color:#8ebc43;}
.ideology-list ul li.bg3 .box {border:2px solid #efb16c;}
.ideology-list ul li.bg3 .box .tt {color:#e88e29;}

.business-list {margin-top:55px;}
.business-list ul {display:flex; justify-content:center;}
.business-list ul li {padding:0 53px; text-align:center;}
.business-list ul li .box {display:flex; justify-content:center; flex-direction:column; width:234px; height:234px; border-radius:50%; margin-bottom:12px;}
.business-list ul li .box .icon {line-height:0; margin-bottom:10px;}
.business-list ul li .box .tt {font-size:20px; line-height:1.3em; font-weight:500; color:#fff;}
.business-list ul li p {font-size:16px; line-height:26px; font-weight:500; color:#454545;}
.business-list ul li.bg1 .box {background:#093e8d;}
.business-list ul li.bg2 .box {background:#8ebc43;}
.business-list ul li.bg3 .box {background:#e88e29;}

.introduce .pic {line-height:0;}

.ci .txt {margin-bottom:20px;}
.ci .txt p {font-size:16px; line-height:26px; color:#454545;}
.ci .txt p strong {font-weight:500;}
.ci .list {margin-bottom:90px;}
.ci .list ul {display:flex; margin:0 -20px;}
.ci .list ul li {width:33.333333%; padding:0 20px;}
.ci .list ul li .box {display:flex; justify-content:center; flex-direction:column; text-align:center; width:100%; border-radius:0 5px 0 5px; overflow:hidden;}
.ci .list ul li .box1 {height:98px; margin-bottom:26px;}
.ci .list ul li .box1 p {font-size:23px; line-height:1.3em; color:#fff;}
.ci .list ul li .box1 p strong {font-weight:500;}
.ci .list ul li .box2 {height:123px;}
.ci .list ul li .box2 p {font-size:25px; line-height:1.3em; color:#fff;}
.ci .list ul li .box2 p strong {font-weight:500;}
.ci .list ul li.bg1 .box1 {background:#235fb7;}
.ci .list ul li.bg1 .box2 {background:#9ab8e4;}
.ci .list ul li.bg2 .box1 {background:#99c253;}
.ci .list ul li.bg2 .box2 {background:#b4d183;}
.ci .list ul li.bg3 .box1 {background:#f59830;}
.ci .list ul li.bg3 .box2 {background:#f4b976;}
.ci .txt-wrap {display:flex;}
.ci .txt-wrap .img {flex:1 1 484px; max-width:484px; line-height:0; margin-right:40px;}
.ci .txt-wrap .cnt {flex:1 auto; width:1%; position:relative; padding-bottom:80px; padding-top:18px;}
.ci .txt-wrap .cnt .tt {margin-bottom:10px; font-size:18px; line-height:1.3em; font-weight:500; color:#454545;}
.ci .txt-wrap .cnt ul li {position:relative; padding-left:10px; font-size:16px; line-height:26px; color:#454545;}
.ci .txt-wrap .cnt ul li:after {content:""; position:absolute; top:13px; left:0; width:4px; height:1px; background:#454545;}
.ci .txt-wrap .cnt .btn {position:absolute; bottom:17px; left:0;}
.ci .txt-wrap .cnt .btn a {display:block; text-align:center; width:155px; height:50px; background:#235fb7; font-size:18px; line-height:50px; color:#fff; font-weight:500;}
.ci .txt-wrap .cnt .btn a span {position:relative; padding-left:38px;}
.ci .txt-wrap .cnt .btn a span:after {content:""; position:absolute; top:50%; left:0; margin-top:-12px; width:24px; height:24px; background:url('../images/sub/arrow1.png') 0 0 no-repeat; background-size:100% 100%;}

.bi .group {margin-bottom:45px;}
.bi .group:last-child {margin-bottom:0;}
.bi .sub-tit {position:relative; padding-left:15px; font-size:20px; line-height:1.3em; font-weight:500; color:#242424; margin-bottom:15px;}
.bi .sub-tit:after {content:""; position:absolute; top:5px; left:0; width:3px; height:15px; background:#c3da95;}
.bi .list1 {margin-bottom:28px;}
.bi .list1 ul {display:flex; margin:0 -16.5px;}
.bi .list1 ul li {width:50%; padding:0 16.5px;}
.bi .list1 ul li .tt {margin-bottom:28px; font-size:16px; line-height:1.3em; font-weight:500; color:#242424;}
.bi .list1 ul li .img {line-height:0;}

.bi .list2 ul {display:flex; margin:0 -12px;}
.bi .list2 ul li {width:25%; padding:0 12px;}
.bi .list2 ul li .tt {margin-bottom:28px; font-size:16px; line-height:1.3em; font-weight:500; color:#242424;}
.bi .list2 ul li .img {line-height:0;}
.bi .txt {padding-left:15px;}
.bi .txt ul li {padding-left:15px; text-indent:-15px; font-size:16px; line-height:26px; color:#454545;}
.bi .txt ul li .arrow {padding:0 21px; background:url('../images/sub/arrow2.png') 50% 50% no-repeat;}

.client-list ul {display:flex; flex-wrap:wrap; margin:0 -5px;}
.client-list ul li {width:16.66666666666667%; padding:0 5px; margin-bottom:11px; line-height:0;}

.local ul li {display:flex; border-bottom:1px solid #ddd; padding:14px 0; align-items:center; font-size:16px; line-height:26px; color:#242424;}
.local ul li .tt {position:relative; flex:1 1 195px; max-width:195px; text-align:center; margin-right:52px; font-weight:500;}
.local ul li .tt:after {content:""; position:absolute; top:50%; right:0; width:1px; height:22px; background:#ddd; margin-top:-11px;}
.local ul li .txt {flex:1 auto; width:1%;}
.root_daum_roughmap {width:100% !important;}
.root_daum_roughmap .wrap_map {width:100% !important;}
.roughmap_lebel_text {line-height:0 !important; font-size:0 !important;}
.roughmap_lebel_text:after {content:"(주)삼정솔루션"; font-size:12px; line-height:15px;}

.map-zone {position:relative; width:100%; height:550px;}
.map-zone iframe {position:absolute; top:0; left:0; width:100%; height:100%;}