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

.doc-tit {position:relative; padding-left:37px; margin-bottom:20px; font-size:20px; line-height:1.3em; font-weight:700; color:#000; letter-spacing:-0.025em}
.doc-tit:before {content:""; position:absolute; top:3px; left:6px; width:20px; height:20px; background:url('../images/sub/dot1.png') 0 0 no-repeat; background-size:100% 100%;}

.doc-cnt {margin-bottom:97px;}
.doc-cnt:last-child {margin-bottom:0;}
.doc-cnt .indent {margin-left:22px;}

.product-wrap .table table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:2px solid #000;}
.product-wrap .table table thead th {height:110px; padding:10px; border:1px solid #ccc; background:#eff7f7; font-size:20px; letter-spacing:-0.03em; color:#000;}
.product-wrap .table table thead th:first-child {border-left:0;}
.product-wrap .table table thead th:last-child {border-right:0;}
.product-wrap .table table tbody th {height:60px; border:1px solid #ccc; font-size:20px; font-weight:500; letter-spacing:-0.025em; color:#555;}
.product-wrap .table table tbody th:first-child {border-left:0;}
.product-wrap .table table tbody th:last-child {border-right:0;}
.product-wrap .table table tbody td {padding:20px 0; text-align:center; border:1px solid #ccc; font-size:20px; font-weight:500; letter-spacing:-0.025em; color:#555;}
.product-wrap .table table tbody td:first-child {border-left:0;}
.product-wrap .table table tbody td:last-child {border-right:0;}
.product-wrap .table table tfoot th {height:110px; padding:10px; border:1px solid #ccc; background:#f9f9f9; font-size:20px; font-weight:500; line-height:1.3em; letter-spacing:-0.025em; color:#555;}
.product-wrap .table table tfoot th:first-child {border-left:0;}
.product-wrap .table table tfoot th:last-child {border-right:0;}

.product-wrap .table2 table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:2px solid #000;}
.product-wrap .table2 table thead th {height:62px; padding:10px; border:1px solid #ccc; font-size:20px; letter-spacing:-0.025em; color:#000;}
.product-wrap .table2 table thead th:first-child {border-left:0;}
.product-wrap .table2 table thead th:last-child {border-right:0;}
.product-wrap .table2 table tbody th {height:60px; border:1px solid #ccc; font-size:20px; font-weight:400; letter-spacing:-0.025em; color:#555;}
.product-wrap .table2 table tbody th:first-child {border-left:0;}
.product-wrap .table2 table tbody th:last-child {border-right:0;}
.product-wrap .table2 table tbody td {padding:18px 0; text-align:center; border:1px solid #ccc; font-size:20px; letter-spacing:-0.025em; color:#555;}
.product-wrap .table2 table tbody td:first-child {border-left:0;}
.product-wrap .table2 table tbody td:last-child {border-right:0;}
.product-wrap .table2 table tbody td .bt-down {text-align:center; margin-bottom:0;}
.product-wrap .table2 table tbody td .bt-down ul li {margin-left:0; padding:0 5px;}
.product-wrap .table-tit {font-size:24px; line-height:1.4em; letter-spacing:-0.025em; font-weight:700; color:#000; margin-bottom:10px;}

.product-wrap .bt-down {text-align:right; margin-bottom:32px;}
.product-wrap .bt-down ul {display:inline-flex;}
.product-wrap .bt-down ul li {margin-left:11px;}
.product-wrap .bt-down ul li a {display:block; width:200px; height:50px; border-radius:25px; border:1px solid #ccc; text-align:center; font-family: 'GmarketSansMedium'; font-size:18px; line-height:50px; color:#282828;}
.product-wrap .bt-down ul li a span {position:relative; padding-left:28px;}
.product-wrap .bt-down ul li a span:after {content:""; position:absolute; top:50%; left:0; width:19px; height:19px; margin-top:-10px; background:url('../images/sub/icon_down.png') 0 0 no-repeat; background-size:100% 100%; transition: all 0.2s ease-in-out;}
.product-wrap .bt-down ul li a:hover {border:1px solid #3bd1df; background:#3bd1df; color:#fff;}
.product-wrap .bt-down ul li a:hover span:after {background-image:url('../images/sub/icon_down_on.png');}

.product-wrap .description-wrap {display:flex;}
.product-wrap .description-wrap .thumb {flex:1 1 440px; max-width:440px;}
.product-wrap .description-wrap .info {flex:1 auto; width:1%; position:relative; padding-left:110px; padding-right:40px;}
.product-wrap .description-wrap .info:after {content:""; position:absolute; top:0; left:30px; width:44px; height:1px; background:#000;}
.product-wrap .description-wrap .info .tit {margin-top:-10px; margin-bottom:20px; font-size:24px; line-height:1.3em; font-weight:800; color:#000;}
.product-wrap .description-wrap .info p {font-size:18px; line-height:28px; color:#555; margin-bottom:28px;}
.product-wrap .description-wrap .info p:last-child {margin-bottom:0;}

.product-wrap .flex-box {display:flex;}
.product-wrap .img-box {flex:1 1 440px; max-width:440px; margin-left:30px; padding-top:43px; order:2;}
.product-wrap .info-box {flex:1 auto; width:1%; order:1;}

.rnd > ul {display:flex; flex-wrap:wrap; margin:0 -30px;}
.rnd > ul > li {position:relative; width:calc(50% - 60px); margin:0 30px 85px; z-index:1;}
.rnd > ul > li .thumb {position:relative; line-height:0; z-index:1; margin-bottom:30px;}
.rnd > ul > li .icon {position:absolute; top:155px; right:30px; z-index:2; line-height:0;}
.rnd > ul > li .tit {position:relative; padding-top:40px; margin-bottom:18px; font-size:24px; line-height:1em; font-weight:800; color:#000;}
.rnd > ul > li .tit:after {content:""; position:absolute; top:0; left:0; width:44px; height:1px; background:#000;}
.rnd > ul > li .txt {font-size:18px; line-height:30px; color:#555;}
.rnd > ul > li .txt ul li {position:relative; padding-left:18px;}
.rnd > ul > li .txt ul li:after {content:""; position:absolute; top:13px; left:4px; width:4px; height:4px; border-radius:50%; background:#555;}

.agency-info {margin-top:70px;}
.agency-info .table table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:2px solid #000;}
.agency-info .table table thead th {height:62px; padding:10px; background:#eff7f7; border:1px solid #ccc; font-size:20px; letter-spacing:-0.025em; color:#000;}
.agency-info .table table thead th:first-child {border-left:0;}
.agency-info .table table thead th:last-child {border-right:0;}
.agency-info .table table tbody td {padding:18px 0; text-align:center; border:1px solid #ccc; font-size:20px; line-height:1.4em; letter-spacing:-0.025em; color:#555;}
.agency-info .table table tbody td:first-child {border-left:0;}
.agency-info .table table tbody td:last-child {border-right:0;}

.catalog-wrap {margin:70px auto 0; width:100%; max-width:1008px;}
.catalog-wrap ul {display:flex; margin:0 -30px;}
.catalog-wrap ul li {width:50%; padding:0 30px;}
.catalog-wrap ul li .thumb {position:relative; line-height:0; margin-bottom:44px;}
.catalog-wrap ul li .thumb:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; border:1px solid #ddd;}
.catalog-wrap .more {text-align:center;}
.catalog-wrap .more a {display:inline-block; width:200px; height:50px; border-radius:25px; border:1px solid #ccc; text-align:center; font-family: 'GmarketSansMedium'; font-size:18px; line-height:50px; color:#282828;}
.catalog-wrap .more a span {position:relative; padding-left:28px;}
.catalog-wrap .more a span:after {content:""; position:absolute; top:50%; left:0; width:19px; height:19px; margin-top:-10px; background:url('../images/sub/icon_down.png') 0 0 no-repeat; background-size:100% 100%;}

.sprit-wrap .logo-wrap {position:relative; display:flex; align-items:center; width:100%; height:250px; border:1px solid #ddd; margin-bottom:145px;}
.sprit-wrap .logo-wrap:before {content:""; position:absolute; bottom:0; left:50%; width:1px; height:77px; margin-bottom:-77px; background:#c7c7c7;}
.sprit-wrap .logo-wrap:after {content:""; position:absolute; bottom:0; left:50%; width:11px; height:11px; margin-bottom:-77px; margin-left:-5px; border-radius:50%; background:#d3568f;}
.sprit-wrap .logo-wrap > div {width:50%; position:relative; text-align:center;}
.sprit-wrap .logo-wrap .img {line-height:0; height:100%;}
.sprit-wrap .logo-wrap .img:after {content:""; position:absolute; top:50%; right:0; width:1px; height:78.4%; transform:translateY(-50%); background:url('../images/sub/line_icon.png') 0 0 repeat-y;}
.sprit-wrap .logo-wrap .img .row {display:table; table-layout:fixed; width:100%; height:100%;}
.sprit-wrap .logo-wrap .img .cell {display:table-cell; vertical-align:middle; width:100%;}
.sprit-wrap .logo-wrap .txt .in {display:inline-block; text-align:left;}
.sprit-wrap .logo-wrap .txt .tt {font-family: 'GmarketSansLight'; font-size:40px; line-height:1em; color:#000; margin-bottom:25px;}
.sprit-wrap .logo-wrap .txt .tt strong {font-family: 'GmarketSansBold';}
.sprit-wrap .logo-wrap .txt .tt span {color:#d3568f;}
.sprit-wrap .logo-wrap .txt ul li {position:relative; padding-left:56px; font-size:18px; line-height:30px; color:#555;}
.sprit-wrap .logo-wrap .txt ul li:after {content:""; position:absolute; top:15px; left:0; width:38px; height:1px; background:#000;}
.sprit-wrap .ceo-message {max-width:1400px; width:100%; overflow:hidden;}
.sprit-wrap .ceo-message .title {text-align:center; margin-bottom:65px; font-family: 'GmarketSansLight'; font-size:28px; line-height:1.3em; color:#000;}
.sprit-wrap .ceo-message .title strong {font-family: 'GmarketSansBold';}
.sprit-wrap .ceo-message .txt {position:relative; border-bottom:1px solid #aeaeae; min-height:610px; padding-right:50%; padding-bottom:40px; z-index:1;}
.sprit-wrap .ceo-message .txt:after {content:""; position:absolute; top:0; right:0; margin-right:-50px; width:63%; height:159px; background:rgba(152,144,148,0.1); z-index:2; transform:skewX(-30deg);}
.sprit-wrap .ceo-message .txt .pic {position:absolute; bottom:0; right:0; width:50%; text-align:right; z-index:1;}
.sprit-wrap .ceo-message .txt .tit {position:relative; display:inline-block; padding:15px 20px; background:#d3568f; z-index:10; font-size:24px; line-height:36px; font-weight:700; color:#fff; margin-bottom:25px;}
.sprit-wrap .ceo-message .txt .tit:after {content:""; position:absolute; top:0; right:0; margin-right:-15px; width:30px; height:100%; background:#d3568f; transform:skewX(-15deg);}
.sprit-wrap .ceo-message .txt p {position:relative; font-size:18px; line-height:33px; color:#555; font-weight:500; margin-bottom:33px; z-index:5;}
.sprit-wrap .ceo-message .txt p:last-child {margin-bottom:0;}
.sprit-wrap .ceo-message .txt .ceo {margin-top:25px; text-align:right; font-size:20px; line-height:1.3em; font-weight:700; color:#555;}

.business-field {margin-top:70px;}
.business-field ul {display:flex; margin:0 -37px; padding:0 90px;}
.business-field ul li {width:calc(25% - 74px); margin:0 37px; text-align:center;}
.business-field ul li .icon {position:relative; width:100%; height:0; padding-bottom:100%; border-radius:50%; margin-bottom:66px; z-index:1;}
.business-field ul li .icon:before {content:""; position:absolute; bottom:0; left:50%; width:1px; height:50px; background:#949494; margin-bottom:-50px; overflow:hidden;}
.business-field ul li .icon:after {content:""; position:absolute; bottom:0; left:50%; width:20px; height:20px; border-radius:50%; border:7px solid #fff; background:#363636; margin-left:-10px; margin-bottom:-50px; overflow:hidden;}
.business-field ul li .icon .in {position:absolute; top:0; left:0; width:100%; height:100%; border-radius:50%; overflow:hidden; z-index:1;}
.business-field ul li .icon .row {display:table; table-layout:fixed; width:100%; height:100%; border-radius:50%;}
.business-field ul li .icon .cell {display:table-cell; vertical-align:middle; width:100%;}
.business-field ul li .tt {font-size:22px; line-height:28px; color:#000;}
.business-field ul li.bg1 .icon .in {background:#49cddf; border:16px solid #ecfafc;}
.business-field ul li.bg2 .icon .in {background:#7abdf0; border:16px solid #f1f8fd;}
.business-field ul li.bg3 .icon .in {background:#7a9ef0; border:16px solid #f1f5fd;}
.business-field ul li.bg4 .icon .in {background:#a68ee2; border:16px solid #f6f3fc;}

.certify-wrap {margin-top:140px;}
.certify-wrap .list {margin-bottom:100px;}
.certify-wrap .list ul {display:flex; flex-wrap:wrap; margin:0 -28px;}
.certify-wrap .list ul li {width:33.333333%; padding:0 28px; text-align:center; margin-bottom:40px;}
.certify-wrap .list ul li .thumb {position:relative; line-height:0; margin-bottom:18px;}
.certify-wrap .list ul li .thumb:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; border:1px solid #ddd;}
.certify-wrap .list ul li p {font-size:18px; line-height:1.4em; font-weight:500; color:#282828;}
.certify-wrap .table table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:2px solid #000;}
.certify-wrap .table table thead th {height:62px; padding:10px; background:#eff7f7; border:1px solid #ccc; font-size:20px; letter-spacing:-0.025em; color:#000;}
.certify-wrap .table table thead th:first-child {border-left:0;}
.certify-wrap .table table thead th:last-child {border-right:0;}
.certify-wrap .table table tbody td {padding:18px 0; text-align:center; border:1px solid #ccc; font-size:20px; line-height:1.4em; letter-spacing:-0.025em; color:#555;}
.certify-wrap .table table tbody td:first-child {border-left:0;}
.certify-wrap .table table tbody td:last-child {border-right:0;}

.root_daum_roughmap {width:100% !important;}
.root_daum_roughmap .wrap_map {width:100% !important;}
.local {margin-top:92px;}
.local > div {display:flex; align-items:center; margin-bottom:50px; padding:0 30px; font-size:18px; line-height:36px; font-weight:500; color:#555;}
.local > div:last-child {margin-bottom:0;}
.local > div .icon {flex:1 1 92px; max-width:92px; line-height:0; margin-right:50px;}
.local span {display:inline-block; margin-right:22px;}
.local .addr p {flex:1 auto; width:1%;}
.local .tel-zone .txt {flex:1 auto; width:1%;}
.local .tel-zone .txt ul {display:flex;}
.local .tel-zone .txt ul li {padding-right:60px;}
.local .tel-zone .txt ul li:last-child {padding-right:0;}
.local .tel-zone .txt ul li dl dt {font-weight:700; font-size:20px;}